DISCUZ门户模板开发制作步骤

2018-11-02 来源：学做网站论坛

DISCUZ门户模板开发制作详细步骤

1、复制default文件夹下的portal下的index.htm；

2、在moban文件下新建一个portal文件夹，并将index.htm放入；

3、复制default文件下的common下的head.htm和foot.htm到moban文件夹下的common下，作为公用的顶部，底部文件。

4、复制目标网站的源代码，到DW中，并将目标站的CSS全部复制作extend-common.css中。

Head_common.htm的代码解释：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE{$_G['config']['output']['iecompatible']}" />
针对于IE8加的一个属性，主要起兼容作用。
<meta name="generator" content="Discuz! $_G['setting']['version']" />文件是用什么来DZ哪个版本生成的
<meta http-equiv="MSThemeCompatible" content="Yes" />打开xp 的蓝色立体按钮系统显示
<meta name="MSSmartTagsPreventParsing" content="True" />
在IE 6 中有一个 Smart tag 开关，防止IE6微软页面编辑软件在页面上自动添加标签,保证代码原汁原味

5、修改头部，首先找到head.htm中几个版块，并标记【顶部，LOGO ,导航】；

6、对一些常用标签的认识：

Subtemplate 表示引入、调用

AD 表示广告

lang表示语言包

hook表示钩子

网站名称：$_G[setting][bbname]

网站首页：
{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}

LOGO图片调用：【{$_G['style']['boardlogo']}】

<a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a>$_G['setting']['navlogos'][$mnid]

调用后台顶部导航：【加入首页，加入收藏】

$nav[code]

导航菜单调用：【导航调用时出现了英文字母，用.headerNav span{display:none;}来隐藏。】


<UL>



<!--{loop $_G['setting']['navs'] $nav}-->

<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->

<!--{/loop}-->



</UL>

快捷导航调用：


<a href="javascript:;" id="qmenu" onMouseOver="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>

版面拓展色的切换菜单：


<!--{if !IS_ROBOT}-->

<!--{if $_G['uid']}-->

<ul id="myprompt_menu" class="p_pop" style="display: none;">

<li><a href="home.php?mod=space&do=pm" id="pm_ntc" style="background-repeat: no-repeat; background-position: 0 50%;"><em class="prompt_news{if empty($_G[member][newpm])}_0{/if}"></em>{lang pm_center}</a></li>

<li><a href="home.php?mod=follow&do=follower"><em class="prompt_follower{if empty($_G[member][newprompt_num][follower])}_0{/if}"></em><!--{lang notice_interactive_follower}-->{if $_G[member][newprompt_num][follower]}($_G[member][newprompt_num][follower]){/if}</a></li>

<!--{if $_G[member][newprompt] && $_G[member][newprompt_num][follow]}-->

<li><a href="home.php?mod=follow"><em class="prompt_concern"></em><!--{lang notice_interactive_follow}-->($_G[member][newprompt_num][follow])</a></li>

<!--{/if}-->

<!--{if $_G[member][newprompt]}-->

<!--{loop $_G['member']['category_num'] $key $val}-->

<li><a href="home.php?mod=space&do=notice&view=$key"><em class="notice_$key"></em><!--{echo lang('template', 'notice_'.$key)}-->(<span class="rq">$val</span>)</a></li>

<!--{/loop}-->

<!--{/if}-->

<!--{if empty($_G['cookie']['ignore_notice'])}-->

<li class="ignore_noticeli"><a href="javascript:;" onClick="setcookie('ignore_notice', 1);hideMenu('myprompt_menu')" title="{lang temporarily_to_remind}"><em class="ignore_notice"></em></a></li>

<!--{/if}-->

</ul>

<!--{/if}-->

<!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}-->

<div id="sslct_menu" class="cl p_pop" style="display: none;">

<!--{if !$_G[style][defaultextstyle]}--><span class="sslct_btn" onClick="extstyle('')" title="{lang default}"><i></i></span><!--{/if}-->

<!--{loop $_G['style']['extstyle'] $extstyle}-->

<span class="sslct_btn" onClick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i style='background:$extstyle[2]'></i></span>

<!--{/loop}-->

</div>

<!--{/if}-->

<!--{if $_G['uid']}-->

<ul id="myitem_menu" class="p_pop" style="display: none;">

<li><a href="forum.php?mod=guide&view=my">{lang mypost}</a></li>

<li><a href="home.php?mod=space&do=favorite&view=me">{lang favorite}</a></li>

<li><a href="home.php?mod=space&do=friend">{lang friends}</a></li>

<!--{hook/global_myitem_extra}-->

</ul>

<!--{/if}-->

<!--{subtemplate common/header_qmenu}-->

<!--{/if}-->

搜索功能代码调用

广告位的调用：

顶部广告;

Logo右侧广告：

7、调用用户登录版块

复制default文件夹下的header_userstatus.htm到moban下的common下。

登录版块分为三个部分：
登录后------登录没有激活-----没有登录【通过调用member/login-simple.htm】

8、将调用DIY按钮的代码也放到P标签里面，并且结合原来网站的样式，可以解决DIY按钮下移的问题。如果“管理中心”出现换行，可删除其样式class="showmenu"

调用DIY按钮：
$diynav

或者使用下面的代码调用DIY按钮：

【DIY按钮的显示需要head.htm和foot.htm的代码支持】
<div id="append_parent"></div><div id="ajaxwaitid"></div>//显示主体内容的编辑框







$diynav

9、DIY重影，可以通过CSS去除DIY的背景图片，还有小头像，也是背景图片去处背景【.vwmy{background:none;}】。

通过刷新去缓存的方法：
打开文件网站根目录/config/config_global.php
找到
$_config['output']['tplrefresh'] = 1;

更改为
$_config['output']['tplrefresh'] = 2;

刷新两次即可更新模板，此方法适用于模板开发！

10、通过login-simple.htm找出“注册，登录，找回密码”的代码

忘记密码：<a href="javascript:;" onclick="showWindow('login', 'member.php?mod=logging&action=login&viewlostpw=1')">{lang forgotpw}</a>

11、搜索框的制作可以配合原网站的代码，修改一下action地址和input的地址：

12、首页的原有代码不能删除，否则会导致无法编辑DIY的样式‘
<style id="diy_style" type="text/css"></style>

主体内容的仿站，复制目标网站主题内容，然后使用

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

进入内容框的制作。

如果某个JS影响了DIY按钮的使用，可以使用下面判断语句来解决。【使用此判断时，要结合fooer.htm原有的判断代码使用】