您的位置：首页 > 其它

Discuz X 多页面专题制作教程

2012-07-16 01:14 316 查看

http://www.discuz.net/forum.php?mod=viewthread&tid=1851776&reltid=2950818&pre_thread_id=2667972&pre_pos=3&ext=CB

Discuz X 专题制作分页教程

在官方没有找到详细讲专题制作的帮助文档（感觉想查的官方帮助文档里都没有，简单的自己知道的倒全都有-_-!）自己研究了一下，下面一个半成品演示页面

可以访问：

进入管理后台-门户-专题管理，然后点击创建专题，在创建专题页面中有提示：

OK，我们就需要自己来做这样一个模板文件。

打开template/default/portal/文件夹，复制它原有的portal_topic_content.htm文件一份，然后按它的要求自己起个名字，比如portal_topic_seeker.htm。

在官方的模板文件里看到有这么一句：

<link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/t1/style.css?{VERHASH}">

那就把用到的一些图片、CSS、JS代码放到/static/topic/文件夹下吧，在/static/topic/文件夹下新建一个t3，然后再新建一个images文件夹放图片，一个style.css来写CSS，还有一个js文件夹下放js文件。

接着来改模板，这里就拿我做的这个专题模板的代码来解释吧：

{subtemplate common/header}



<link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/seeker/seeker.css?{VERHASH}">







<div id="seeker">

<div id="header">

<ul>

<li id="l1"></li>

<li id="logo"></li>



<li id="l2"><a href="index,main" class="pbtn"><span>首页</span></a></li>

<li><a href="page1,main" class="pbtn"><span>规章制度</span></a></li>

<li><a href="page2,main" class="pbtn"><span>规章制度</span></a></li>

<li><a href="page3,main" class="pbtn"><span>招纳新人</span></a></li>

<li><a href="page4,main" class="pbtn"><span>交流论坛</span></a></li>

</ul>

<script type="text/javascript" src="{STATICURL}js/multpage.js"></script>

<img src="/static/topic/seeker/images/main_imag.gif" />

</div>



<div id="main">

<div id="index">

<div class="wp">



<div id="diyseeker" class="area">

</div>



</div>

</div>





</div>

<div id="bottom">

<div class="wp">



<div id="diyfooter" class="area">

</div>



</div>

</div>

</div>





<div id="tempBox" style="display:none;">

<div id="page1" class="wp">



<div id="diy1" class="area">

</div>



</div>

<div id="page2" class="wp">



<div id="diy2" class="area">

</div>



</div>

<div id="page3" class="wp">



<div id="diy3" class="area">

</div>



</div>

</div>

{subtemplate common/footer}

复制代码

最后，有几点要注意的：

1. 有时候刷新没有效果，可能是缓存的问题，到后台清空一下服务器缓存，然后再清空下本地浏览器缓存，然后再试试。

2. 一些代码可以通过DIY加入展示类自定义代码来实现，建议把更多的地方设为diy区域，这样修改起来更灵活一些。

3. 在css文件里可以写一个类，然后在前台diy的时候，给框架或者模块设定“指定class”为类名，这样就可以应用自己写的CSS了。

4. 也可以在展示类自定义代码里直接写<style type="text/css" .....</style> 然后按上面的方法来应用CSS。。其它的，比如JS代码也可以这样来的。

近期写了一个JS插件，就是由做这个DX专题而想到的，通过使用这个插件可以非常方便地在DX专题上设置多页。过几天放出。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航