Discuz！模板制作教程（四）

2013-10-15 13:35| 发布者: John| 查看: 144| 评论: 0|来自: 站科论坛

摘要: 模块称号”为必填项，其它的能够不填。点击“预览”按钮，呈现下图：（图21）将“{eval request('小叶_我的助手');}”这句拷贝下来，并按“提交”按钮；接着用“{eval request('小叶_我的助手');}”这句交 ...

模块称号”为必填项，其它的能够不填。点击“预览”按钮，呈现下图：

（图21）

将“{eval request('小叶_我的助手');}”这句拷贝下来，并按“提交”按钮；接着用“{eval request('小叶_我的助手');}”这句交流相应的代码。更新一下缓存再阅读主页，这时会发现，显现的内容和格式与想要的结果不一样。这是由于模块脚本也用它自己的模版，像“我的助手”的模块脚本为“include/request/assistant.inc.php”文件，假如当前模版文件夹中有request_assistant.htm文件，则“我的助手”运用当前的request_assistant.htm文件作为模版，否则运用默许模版文件夹“templates/default/”目录下的request_assistant.htm文件作为模版。所以，假如你要完成你自己想要的方式就要将默许模版文件夹“templates/default/”目录下的request_assistant.htm文件复制到当前模版文件夹中，并作相应的修正才行。假如要图10的效果，能够参考大魔王的“蓝色经典”模版中的request_assistant.htm文件，值得留意的是，这个的 CSS样式同样要在css_append.htm文件中定义。

下面教大家另一种非模块脚本数据调用，这种调用包括：主题列表、版块列表、主题附件等等。很多人喜欢在首页将贴中的图片以幻灯片的方式来显现，这属于主题附件调用，下面就以这种调用来演示非模块脚本的数据调用。先看一下，要完成的效果：

（图22）

<div class="flashshow" style="float:left;">
<ul id="slidedata" style="display: none">
<li title=img>images/ pic_1.jpg
<li title=link>redirect.php?goto=findpost&ptid=4&pid=12
<li title=subject>我喜欢足球
<li title=img>images/pic_2.jpg
<li title=link>redirect.php?goto=findpost&ptid=3&pid=11
<li title=subject>天下电竞
</ul>
<div id="slidecontent"></div>
<script language="javascript" src=" photo_show.js"></script>
</div>
将你设计的显现图片幻灯片的javascript文件（我这里是photo_show.js）拷贝到当前制造的模版文件夹下。
登陆后台“工具数据调用添加主题附件”，将下面的代码填到图中所示的中央
<ul id="slidedata" style="display: none">
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
</ul>
<div id="slidecontent"></div>
<script language="javascript" src="templates/test/photo_show.js"></script>
（注：<script language="javascript" src=" photo_show.js"></script>”这是你设计的显现图片幻灯片的js文件，留意文件的途径要正确。由于我将 photo_show.js这个文件放在了“templates/test/”目录下，故src="templates/test /photo_show.js"。可能你设计图片幻灯片显现的javascript程序并不单独放在一个js文件中，而是嵌套在html文档中。这时，你就应该将你html文档中的javascript程序来替代“<script language="javascript" src="templates/test/photo_show.js"></script>”。
）
填好后，点击“预览”按钮，预览一下效果。称心后，将“{eval request('小叶_首页幻灯图片');}”这句交流上面红色黑体那部分代码，这样就完成了图片的调用。
下面剖析一下其中的原理，“[node]……[node]”能够将它看作一个循环结构，“{imgfile}”代表的是图片的URL，“{link}”代表的是附件所属帖的链接，“{subject}”代表的是附件所属贴的主题标题，输出的时分除了这些变量会变成相应的值外，其它的都会原样输出，也就是说 “{eval request('小叶_首页幻灯图片');}”这个语句在输出的时分代码结构与上面红色黑体部分的代码是一样的。既然“{eval request('小叶_首页幻灯图片');}”这个语句输出的是你在数据调用编辑框中填写的代码，那么上面数据调用编辑框中填写的代码就不是独一的了。例如，你能够在数据调用编辑框中填写以下代码：
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
当然这时你就应该用“{eval request('小叶_首页幻灯图片');}”这个语句替代你模版文件中的这段代码：
<li title=img>images/ pic_1.jpg
<li title=link>redirect.php?goto=findpost&ptid=4&pid=12
<li title=subject>我喜欢足球
<li title=img>images/pic_2.jpg
<li title=link>redirect.php?goto=findpost&ptid=3&pid=11
<li title=subject>天下电竞
这种数据调用是比较自由的，只需输出的时分能够与模板文件中的上下文构成一个整体即可。值得留意的是，假如你真的在数据调用编辑框中填写以下代码：
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
那么点击“预览”按钮的时分并不会看到想要的那种效果，但在阅读主页的时分，显现却是正常的。呈现这种状况是由于，预览的时分以下这些代码：
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
并不构成一个整体，当然看不到想要的效果；但在阅读主页的时分，这些代码却与主页的上下文构成了一个完好的幻灯图片显现。所以为了专业，这里倡议大家在填写数据调用代码的时分最好是结构完好的。
到此，假如你能将上面的全部弄明白，那么制造一套模版就不成什么问题了，固然这里只是演示了首页的模版制造，但其它的页面模版制造是一样的。最后，教大家怎样发布自己制造的模版。我就以往常的test这套来演示，固然这只是首页的模版，但discuz!发现你的模版文件夹里没有其它相应的模版文件时，就会自动的调用默许模版文件夹“templates/default/”下的文件，所以并不影响运用。登陆后台“界面风格管理”找到你制造的风格包:

（图23）

点击“导出”会弹出一个保管文件的对话，将这文件保管到你的模版文件目录下（必需是模版文件的根目录）。接着将数据调用的信息导出，“工具数据调用”，如下图将你要导出的全部选上

（图24）

点击“导出”保管文件，这个文件不一定要保管到模板的根目录。到此，模版的制造算是完成了，装置的时分，第一个导出的文件只需在模板的test目录就能够了，第二个导出的文件就要在后台“工具数据调用导入”将它导入。

鲜花

握手

雷人

路过

鸡蛋

收藏分享

上一篇：Discuz！模板制作教程（三）下一篇：Discuz!开发手册-模板风格的制作-模板主要变量注解（高级）

账号		自动登录	找回密码
密码			注册

Discuz！模板制作教程（四）

相关阅读

相关分类