Discuz X 多页面专题制作教程

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} <!-- 上面这行是用来引入DX页面的头部，不能少 --> <link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/seeker/seeker.css?{VERHASH}"> <!-- 这里引入页面 的CSS代码 --> <!--<style id="diy_style" type="text/css"></style>--> <!--下面新建一个DIV，来装我们的页面的东西 --> <div id="seeker">         <div id="header">         <ul>                 <li id="l1"></li>             <li id="logo"></li>                    <!-- 这里的链接地址，前部分是要显示的内容，后部分是在哪里显示。比如首页这个：在tempBox下找ID是index的DIV，将它显示在id为main的DIV里 -->             <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>          <!--下面这个main区域就是在点击导航栏的菜单之后要切换改变的地方了-->     <div id="main">                                                    <div id="index">                                 <div class="wp">                                 <!--[diy=diyseeker]-->                                         <div id="diyseeker" class="area">                                         </div>                                 <!--[/diy]-->                                 </div>                         </div>                 <!--上面这一段就是一个DIV区域，由于要默认显示它所以就直接把它写在了main里面。-->                 <!-- 注释的方框中diy=后面的值一定要是全页面 唯一的，而且要与它下面那个DIV的ID值相一致，否则会出错的 -->                                                                                            </div>         <div id="bottom">         <div class="wp">                 <!--[diy=diyfooter]-->                         <div id="diyfooter" class="area">                         </div>                 <!--[/diy]-->                 </div>         </div>                    </div>      <!--这个DIV是隐藏的，里面装着每个页面的内容，通过JS来控制显示 每一个页面 都是一个diy区域-->   <!--ID值一定要是tempBox，大小写都要一致，否则就不能切换。因为我在multpage.js文件 里写死了。。:)--> <div id="tempBox" style="display:none;">     <div id="page1" class="wp">     <!--[diy=diy1]-->                         <div id="diy1" class="area">                         </div>                 <!--[/diy]-->     </div>              <div id="page2" class="wp">     <!--[diy=diy2]-->                         <div id="diy2" class="area">                         </div>                 <!--[/diy]-->     </div>              <div id="page3" class="wp">     <!--[diy=diy3]-->                         <div id="diy3" class="area">                         </div>                 <!--[/diy]-->     </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专题上设置多页。过几天放出。。