这几年也扒了不少站。Discuz 论坛的 Portal 门户风格其实算是最容易仿的了。其实很简单,把自己想仿的静态页面保存下来。然后做些简单的修改就成型了。
一、随便找个你想仿的首页。右键保存下来。
二、复制 Default 模板
1、为了不影响默认风格,首先我们复制一份默认风格见下图:
2、到template\目下创建一个文件夹。名字自取,我这里就叫test1.
3、到模板管理里面新增一个模板。名字自取,路径指定到刚才新建的文件夹.如下图
4、设置好以后 编辑刚才复制出来的风格,如下图
5、设置好以后把这个风格设置为默认。
三、制作门户模板
1、在刚才template\建立的test1文件夹下面创建2个文件夹分别命名为 common 和 portal。
2、到template\default\common下面复制 common.css head.htm和footer.html 粘贴到template\test1\common。
这里我们先不制作头部和底部先用默认的头和底.
3、然后把你设计的静态页面命名为index.htm复制到\template\test1\portal下.
4、在论坛所在根目录下创建一个名为test1的文件夹,最好和你的新增模板的文件夹名字一样或者相似。只要自己方便识别就行.建立好之后 把你静态页面的 css文件 图片文件 js文件等 全部复制到这个文件夹里面。
四、代码改动
1、首先把你的静态页面的
2、把这句代码
1 2 | <!--{subtemplate common/header}--> <style id="diy_style" type="text/css"></style> |
复制到文件最顶部,下面这段复制到最底部
1 | <!--{subtemplate common/footer}--> |
3、把你的CSS文件调用进来,放到
下面就可以了,下面是我的,改好路径就好了.这里应该把CSS js全部调用进来.
1 | <link href="test1/images/css.css" rel="stylesheet" type="text/css" /> |
4、保存好后刷新下门户发现除了图片基本框架都出来了。 图片错误是因为路径不对。把路径全部改过来。
五、到此你的静态网页已经转换到DZ下了.下面开始添加框架和模块.
1、首先把不带CSS的标签替换成
1 | <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> |
diy1 要和他所包含的的DIV标签的ID保持一致,且具有唯一性.class="area"保持不变。比如下图。飘红的部分是替换的.如图第二部分显示所有的都是diy1这样就错了.要保持唯一性.不能重复!
六、DIY页面添加框架和模块了
1、首先添加框架如下图。 把所有框架的标题全部去掉
2、添加模块(自己想弄什么弄什么就可以了)
附录:
第一种:门户首页模板(index.htm,保存于templatedefaultportal)
1 2 3 4 | <!--{subtemplate common/header}--> <style id="diy_style" type="text/css"></style> 这里可以随意自定义代码 <!--{subtemplate common/footer}--> |
第二种:栏目模板(必须命名list_xx.htm,保存于templatedefaultportal),做好以后在栏目编辑里面选择相应模板,再就行DIY
1 2 3 4 5 | <!--{subtemplate common/header}--> <!--[name]栏目模板——栏目名称自定义[/name]--> <style id="diy_style" type="text/css"></style> 这里可以随意自定义代码 <!--{subtemplate common/footer}--> |
第三种:专题模板(必须命名portal_topic_xx.htm,保存于templatedefaultportal),做好以后在专题添加或编辑中选择相应模板,选择是否统一页头和页尾,再DIY
1 2 3 4 5 6 7 8 9 10 11 12 | <!--{subtemplate common/header}--> <div id="pt" class="bm cl"> <!--{subtemplate common/simplesearchform}--> <div class="z"> <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a> <em>›</em> $topic[title] </div> </div> <link id="style_css" rel="stylesheet" type="text/css" href="{STATICURL}topic/t1/style.css?{VERHASH}"> <style id="diy_style" type="text/css"></style> <div id="widgets"></div> 这里可以随意自定义代码 <!--{subtemplate common/footer}--> |
其中:
1 2 3 4 5 6 | <div id="pt" class="bm cl"> <!--{subtemplate common/simplesearchform}--> <div class="z"> <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a> <em>›</em> $topic[title] </div> </div> |
是位置和搜索框,可以删除
其中自定义代码部分需要DIY的地方使用下面代码,注意代码中的两个diy1必须保持一致,并且同一个htm页面中不得重复出现
1 | <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> |