Discuz X 多页面专题制作教程

Discuz X 专题制作分页教程

在官方没有找到详细讲专题制作的帮助文档（感觉想查的官方帮助文档里都没有，简单的自己知道的倒全都有-_-!）自己研究了一下，下面一个半成品演示页面可以访问：http://www.myqdc.com/topic-seekerweb.html）
  
进入管理后台-门户-专题管理，然后点击创建专题，在创建专题页面中有提示：

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文件。
接着来改模板，这里就拿我做的这个专题模板的代码来解释吧：

1. 
   
2. 
   
3. 
   
4. {subtemplate common/header}
   
5. <!-- 上面这行是用来引入DX页面的头部，不能少 -->
   
6. 
   
7. <link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/seeker/seeker.css?{VERHASH}">
   
8. <!-- 这里引入页面 的CSS代码 -->
   
9. 
   
10. <!--<style id="diy_style" type="text/css"></style>-->
    
11. 
    
12. <!--下面新建一个DIV，来装我们的页面的东西 -->
    
13. <div id="seeker">
    
14.         <div id="header">
    
15.         <ul>
    
16.                 <li id="l1"></li>
    
17.             <li id="logo"></li>
    
18.                    <!-- 这里的链接地址，前部分是要显示的内容，后部分是在哪里显示。比如首页这个：在tempBox下找ID是index的DIV，将它显示在id为main的DIV里 -->
    
19.             <li id="l2"><a href="index,main" class="pbtn"><span>首页</span></a></li>
    
20.                          <li><a href="page1,main" class="pbtn"><span>规章制度</span></a></li>
    
21.             <li><a href="page2,main" class="pbtn"><span>规章制度</span></a></li>
    
22.             <li><a href="page3,main" class="pbtn"><span>招纳新人</span></a></li>
    
23.             <li><a href="page4,main" class="pbtn"><span>交流论坛</span></a></li>
    
24.         </ul>
    
25. <script type="text/javascript" src="{STATICURL}js/multpage.js"></script>
    
26.         <img src="/static/topic/seeker/images/main_imag.gif" />
    
27.     </div>
    
28.    
    
29.     <!--下面这个main区域就是在点击导航栏的菜单之后要切换改变的地方了-->
    
30.     <div id="main">
    
31.             
    
32.             
    
33.             
    
34.             <div id="index">
    
35.                                 <div class="wp">
    
36.                                 <!--[diy=diyseeker]-->
    
37.                                         <div id="diyseeker" class="area">
    
38.                                         </div>
    
39.                                 <!--[/diy]-->
    
40.                                 </div>
    
41.                         </div>
    
42.                 <!--上面这一段就是一个DIV区域，由于要默认显示它所以就直接把它写在了main里面。-->
    
43.                 <!-- 注释的方框中diy=后面的值一定要是全页面 唯一的，而且要与它下面那个DIV的ID值相一致，否则会出错的 -->
    
44.                         
    
45.                         
    
46.                         
    
47.                 </div>
    
48.         <div id="bottom">
    
49.         <div class="wp">
    
50.                 <!--[diy=diyfooter]-->
    
51.                         <div id="diyfooter" class="area">
    
52.                         </div>
    
53.                 <!--[/diy]-->
    
54.                 </div>
    
55.         </div>
    
56.                
    
57.   </div>
    
58.   
    
59.   <!--这个DIV是隐藏的，里面装着每个页面的内容，通过JS来控制显示 每一个页面 都是一个diy区域-->
    
60.   <!--ID值一定要是tempBox，大小写都要一致，否则就不能切换。因为我在multpage.js文件 里写死了。。:)-->
    
61. <div id="tempBox" style="display:none;">
    
62.     <div id="page1" class="wp">
    
63.     <!--[diy=diy1]-->
    
64.                         <div id="diy1" class="area">
    
65.                         </div>
    
66.                 <!--[/diy]-->
    
67.     </div>
    
68.    
    
69.         <div id="page2" class="wp">
    
70.     <!--[diy=diy2]-->
    
71.                         <div id="diy2" class="area">
    
72.                         </div>
    
73.                 <!--[/diy]-->
    
74.     </div>
    
75.    
    
76.         <div id="page3" class="wp">
    
77.     <!--[diy=diy3]-->
    
78.                         <div id="diy3" class="area">
    
79.                         </div>
    
80.                 <!--[/diy]-->
    
81.     </div>
    
82. 
    
83.    
    
84.    
    
85. </div>
    
86. {subtemplate common/footer}

复制代码

最后，有几点要注意的：
1.        有时候刷新没有效果，可能是缓存的问题，到后台清空一下服务器缓存，然后再清空下本地浏览器缓存，然后再试试。
2.        一些代码可以通过DIY加入展示类自定义代码来实现，建议把更多的地方设为diy区域，这样修改起来更灵活一些。
3.        在css文件里可以写一个类，然后在前台diy的时候，给框架或者模块设定“指定class”为类名，这样就可以应用自己写的CSS了。
4.        也可以在展示类自定义代码里直接写<style type="text/css" .....</style> 然后按上面的方法来应用CSS。。其它的，比如JS代码也可以这样来的。

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

支持的人真少!

很想实操一次~·

多多学习 看看教程

谢谢免费分享

支持下了。。。

这样的页面不错啊~~

谢谢楼主的免费分享，来学习一下。