查看完整版本: JS 数据调用参考使用手册

JS 数据调用参考使用手册

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

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

　　[b]1、[/b]进入后台，首先我们点击“系统工具”－＞“JS 调用设置”，先点击其中的“基本设置”。我们先开启 JS 调用功能
[align=left]               [img]http://www.discuz.net/images/default/attachimg.gif[/img] [url=http://www.discuz.net/thread-759919-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0710/20071008_e9f40ef94c69261a60248lfSwZfrO4T7.jpg.thumb.jpg[/img][/url] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193203&nothumb=yes][b]js_1.jpg[/b][/url] (27.08 KB)
2007-10-8 21:06



[align=left][b]　　2、[/b]再点击其中的“调用项目设置”[/align][align=left]               [img]http://www.discuz.net/images/default/attachimg.gif[/img] [url=http://www.discuz.net/thread-759919-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0710/20071008_ee600b2952d47ed15167JUtRmdNljdpv.jpg.thumb.jpg[/img][/url] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193204&nothumb=yes][b]js_2.jpg[/b][/url] (19.16 KB)
2007-10-8 21:06


[align=left]　　　　我们可以看到如下几类的调用类型：[/align][align=left]　　　　主题列表：在这里可以配合不同的参数调用到你论坛的所有主题文章，用在不同的位置，如主题推荐、公告文章、热点文章、最新主题、最新回复等等[/align][align=left]                      [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_263b79fded7e175089586FiaSXBgp328.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193207&nothumb=yes][b]js_3.jpg[/b][/url] (15.66 KB)
2007-10-8 21:06


[align=left]　　　　版块列表：在这里你可以调用到你论坛的版块列表，如果你想在自己的页面中再次显示你自己论坛的版块结构的话，这个调用就用的到了[/align][align=left]                      [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_0a465b7f85638e9add7bf2AFZV8NIHAL.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193205&nothumb=yes][b]js_4.jpg[/b][/url] (3.81 KB)
2007-10-8 21:06


[align=left]　　　　会员排行：通过这个调用，你可以轻松的对您论坛的会员制作一个简单的排行榜，可以按照各种方式进行排行哦[/align][align=left]                      [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_a8205d725d0bf2b7b5dbGibEV4W2bZVY.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193206&nothumb=yes][b]js_5.jpg[/b][/url] (9.59 KB)
2007-10-8 21:06


[align=left]　　　　论坛统计：这个统计适合放置在论坛的首页，可以随时让用户自己论坛的发展情况[/align][align=left]                      [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_aa99091f987f3210611eN0Wso4szOMy3.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193208&nothumb=yes][b]js_6.jpg[/b][/url] (4.62 KB)
2007-10-8 21:06


[align=left]　　　　附件图片调用：这个调用会寻找所有带图片附件的主题，取出其中的一张图片作为这个主题的标志图片显示出来，提高图片主题的点击率[/align][align=left]                      [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_f3bc50a1ee2f3c261331nBtuNjEgBjBN.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193209&nothumb=yes][b]js_7.jpg[/b][/url] (16.45 KB)
2007-10-8 21:06



[align=left]　　　　自定义：在自定义类型实际上十一个以上所有 JS 调用类型的聚合，你可以做 n 个以上所涉及的调用，通过这个自定义类型组合成一个，就像搭积木一样。这样正式用的时候只需调用这自定义类型的调用设置即可啦！[/align][align=left]                         [img]http://www.discuz.net/images/default/attachimg.gif[/img] [url=http://www.discuz.net/thread-759919-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0710/20071008_7c91145e25cfeaee7c55cuq3kU9RO5oQ.jpg.thumb.jpg[/img][/url] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193210&nothumb=yes][b]js_8.jpg[/b][/url] (52.48 KB)
2007-10-8 21:06




[align=left]　　说到这里大家看到了上面最后一个图片啦，对吧？那么我现在就教大家那个的制作方法。[/align][align=left]　　[/align][align=left]　　3、首先，我们点击主题调用，新建一个主题调用，JS 调用唯一标识我们填写“threads_new”。这个东西没任何意义，就是怕您忘记，起的一个备忘用的名字，建议用英文字母和数字表示。threads_new 自然就是最新主题之意。“主题排序方式”我们选择“按发布时间倒序排序”，这样产生的数据，就是最新主题的数据啦。我们先预览下，点击下面的预览按钮。[/align][align=left]                [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_f7846807533cac13aa7dcOH1uaZqJ83p.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193211&nothumb=yes][b]js_9.jpg[/b][/url] (15.06 KB)
2007-10-8 21:06


　　似乎样子有些难看，我们修改 JS 调用的模板为 复制内容到剪贴板 代码:&raquo; [{forum}] {author}: {subject}<br />
然后再预览
[align=left]                [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_447f7a3eb382bb5550a7DyGNwQNXz0HU.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193212&nothumb=yes][b]js_10.jpg[/b][/url] (17.51 KB)
2007-10-8 21:06


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

[align=left]　　4、现在，我们2个主题的 JS 调用做完了，我们开始制作图片附件的调用。我们新建一个图片的调用。刚进来，我们会发现默认模板就一个“{image}”太简单了对不？预览下[/align][align=left]                [img]http://www.discuz.net/images/default/attachimg.gif[/img] [url=http://www.discuz.net/thread-759919-1-1.html###zoom][img]http://www.discuz.net/attachments/month_0710/20071008_79ce2ecbddfafa852aafyFMV5NGjusXS.jpg.thumb.jpg[/img][/url] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193213&nothumb=yes][b]js_11.jpg[/b][/url] (27.4 KB)
2007-10-8 21:06


　　堆成一堆了非常不好看，对吧。那么我们修改代码装饰下它吧，制作一个 [url=http://www.55hlg.com/]www.55hlg.com[/url] 那种的图片切换效果。我们先用[node]语法把模板中的循环部分括起来 复制内容到剪贴板 代码:[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]

　　要问为啥这HTML要这么写？没辙，一会儿要调用外部的 js ，这是给他准备的数据，呵呵。[node]中被包含的内容为需要循环显示的区域，只有在被[node]中包含的部分中才可以写{imgfile}{subject}等那些用花括号括起来的元素。在[node]之外你则可以随便写别的东西拉。比如以下代码。 复制内容到剪贴板 代码:<ul id="slidedata" style="display: none">
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
</ul>
<style type="text/css">
#slidearea { width: 260px; height: 187px; overflow: hidden; margin: 0 auto; text-align: center; }
#slidearea img { width: 260px; height: 187px }
#slidetext { white-space: nowrap; }
#slidefooter {width: 260px; overflow: hidden; }
</style>
<div id="slidecontent"></div>
<script language="javascript" type="text/javascript" src="include/javascript/slide.js"></script>

[align=left]　　这样，一个完美的图片切换效果的图片附件调用就做好啦，我们保存它，JS唯一标识，起名为“images” [/align][align=left]               [img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0710/20071008_3323df3c5624b0882d88oaDIMIXCeGiV.jpg[/img] [/align][img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=193214&nothumb=yes][b]js_12.jpg[/b][/url] (10.16 KB)
2007-10-8 21:06



[align=left]　　5、最后我们建立一个自定义类型的调用，把刚才做的3个 js 调用(thread_new、thread_reply、images)聚合起来。在这里我们直接写模板即可[/align]复制内容到剪贴板 代码:<table width="100%" cellpadding="0" cellspacing="0"><tr>
<th width="270" style="text-align:center">[module]images[/module]</th>
<th width="33%" valign="top"><h4>最新主题</h4>[module]threads_new[/module]</th>
<th valign="top"><h4>最新回复</h4>[module]threads_reply[/module]</th>
</tr></table>

　　其中[module]images[/module]表示此处代码显示刚才制作的images图片附件调用部分的内容。我们用table标记左中右方式横排，当把此js调用保存为 index 标识后，我们的制作任务算完毕了。我们只需在论坛的首页模板 discuz.htm 中适当的位置加上以下代码就可以了 复制内容到剪贴板 代码:<script language="JavaScript" src="api/javascript.php?key=index"></script>


[align=left]　　设计好的以上 JS 调用项目看这个帖子 [url=http://www.discuz.net/blog.php?tid=737586]http://www.discuz.net/blog.php?tid=737586[/url] 附件在那里有下载，导入到自己的 JS 调用即可。[/align]
[align=left]　　有人说 JS 调用没法被搜索引擎收录，其实这点考虑大可不必哈！我以前就发布过一个叫JSPHP的插件，下载在这里 [url=http://www.monkeye.cn/?action=show&id=20]http://www.monkeye.cn/?action=show&id=20[/url] 通过这个可以把 JS 调用的数据转换成直接在页面显示的 php 文件，方便收录。[/align]