分享

JS 数据调用参考使用手册 - 帮助文档 - Discuz! 官方站 - Powered ...

 mazai123 2011-05-14
  JS 调用,是 Discuz! 一个很经典的功能,它可以将论坛新帖、排行等资料嵌入到您的普通网页中,访问者无需访问论坛即可获知论坛最近更新的情况,很方便的组合成首页系统。但是很多人不会用哈,在这里,我将一步一步的教导大家如何用JS调用制作一个首页3格系统 (http://www./blog.php?tid=737586)

  以下教程针对 Discuz! 6.0,Discuz! 5.x 类似

  1、进入后台,首先我们点击“系统工具”->“JS 调用设置”,先点击其中的“基本设置”。我们先开启 JS 调用功能

               js_1.jpg

 


  2、再点击其中的“调用项目设置”

               js_2.jpg

 

    我们可以看到如下几类的调用类型:

    主题列表:在这里可以配合不同的参数调用到你论坛的所有主题文章,用在不同的位置,如主题推荐、公告文章、热点文章、最新主题、最新回复等等

                      js_3.jpg

 

    版块列表:在这里你可以调用到你论坛的版块列表,如果你想在自己的页面中再次显示你自己论坛的版块结构的话,这个调用就用的到了

                      js_4.jpg

 

    会员排行:通过这个调用,你可以轻松的对您论坛的会员制作一个简单的排行榜,可以按照各种方式进行排行哦

                      js_5.jpg

 

    论坛统计:这个统计适合放置在论坛的首页,可以随时让用户自己论坛的发展情况

                      js_6.jpg

 

    附件图片调用:这个调用会寻找所有带图片附件的主题,取出其中的一张图片作为这个主题的标志图片显示出来,提高图片主题的点击率

                      js_7.jpg

 


    自定义:在自定义类型实际上十一个以上所有 JS 调用类型的聚合,你可以做 n 个以上所涉及的调用,通过这个自定义类型组合成一个,就像搭积木一样。这样正式用的时候只需调用这自定义类型的调用设置即可啦!

                         js_8.jpg

 



  说到这里大家看到了上面最后一个图片啦,对吧?那么我现在就教大家那个的制作方法。

  

  3、首先,我们点击主题调用,新建一个主题调用,JS 调用唯一标识我们填写“threads_new”。这个东西没任何意义,就是怕您忘记,起的一个备忘用的名字,建议用英文字母和数字表示。threads_new 自然就是最新主题之意。“主题排序方式”我们选择“按发布时间倒序排序”,这样产生的数据,就是最新主题的数据啦。我们先预览下,点击下面的预览按钮。

                js_9.jpg

 

  似乎样子有些难看,我们修改 JS 调用的模板为

  1. &raquo; [{forum}] {author}: {subject}<br />
复制代码
然后再预览

 

                js_10.jpg

 

  似乎好看点了对吧。在书写 JS 调用模板的时候 {forum} 代表主题所在版块的名称,{author} 代表主题作者,详细的说明,你可以看每个调用中的详细说明。此时,这个调用做好了,我们保存。同样方法制作下一个,命名为“threads_reply”的 JS 调用,“主题排序方式”我们选择“按最后回复时间倒序排序”,这样就形成了一个最新回复的调用项目。



  4、现在,我们2个主题的 JS 调用做完了,我们开始制作图片附件的调用。我们新建一个图片的调用。刚进来,我们会发现默认模板就一个“{image}”太简单了对不?预览下

                js_11.jpg

 

  堆成一堆了非常不好看,对吧。那么我们修改代码装饰下它吧,制作一个 www. 那种的图片切换效果。我们先用[node]语法把模板中的循环部分括起来

  1. [node]
  2. <li title=img>{imgfile}
  3. <li title=link>{link}
  4. <li title=subject>{subject}
  5. [/node]
复制代码

  要问为啥这HTML要这么写?没辙,一会儿要调用外部的 js ,这是给他准备的数据,呵呵。[node]中被包含的内容为需要循环显示的区域,只有在被[node]中包含的部分中才可以写{imgfile}{subject}等那些用花括号括起来的元素。在[node]之外你则可以随便写别的东西拉。比如以下代码。

  1. <ul id="slidedata" style="display: none">
  2. [node]
  3. <li title=img>{imgfile}
  4. <li title=link>{link}
  5. <li title=subject>{subject}
  6. [/node]
  7. </ul>
  8. <style type="text/css">
  9. #slidearea { width: 260px; height: 187px; overflow: hidden; margin: 0 auto; text-align: center; }
  10. #slidearea img { width: 260px; height: 187px }
  11. #slidetext { white-space: nowrap; }
  12. #slidefooter {width: 260px; overflow: hidden; }
  13. </style>
  14. <div id="slidecontent"></div>
  15. <script language="javascript" type="text/javascript" src="include/javascript/slide.js"></script>
复制代码

  这样,一个完美的图片切换效果的图片附件调用就做好啦,我们保存它,JS唯一标识,起名为“images”

               js_12.jpg

 


  5、最后我们建立一个自定义类型的调用,把刚才做的3个 js 调用(thread_new、thread_reply、images)聚合起来。在这里我们直接写模板即可

  1. <table width="100%" cellpadding="0" cellspacing="0"><tr>
  2. <th width="270" style="text-align:center">[module]images[/module]</th>
  3. <th width="33%" valign="top"><h4>最新主题</h4>[module]threads_new[/module]</th>
  4. <th valign="top"><h4>最新回复</h4>[module]threads_reply[/module]</th>
  5. </tr></table>
复制代码

  其中[module]images[/module]表示此处代码显示刚才制作的images图片附件调用部分的内容。我们用table标记左中右方式横排,当把此js调用保存为 index 标识后,我们的制作任务算完毕了。我们只需在论坛的首页模板 discuz.htm 中适当的位置加上以下代码就可以了

  1. <script language="JavaScript" src="api/javascript.php?key=index"></script>
复制代码


  设计好的以上 JS 调用项目看这个帖子 http://www./blog.php?tid=737586 附件在那里有下载,导入到自己的 JS 调用即可。


  有人说 JS 调用没法被搜索引擎收录,其实这点考虑大可不必哈!我以前就发布过一个叫JSPHP的插件,下载在这里 http://www./?action=show&id=20 通过这个可以把 JS 调用的数据转换成直接在页面显示的 php 文件,方便收录。



  还有不会用的欢迎加QQ群咨询我: http://www./?action=show&id=2

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多