教你Discuz模板制作详细步骤Word文档下载推荐.docx

教你Discuz模板制作详细步骤Word文档下载推荐.docx

《教你Discuz模板制作详细步骤Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《教你Discuz模板制作详细步骤Word文档下载推荐.docx（24页珍藏版）》请在冰豆网上搜索。

这两句算是discuz的语言，意思是将header.htm和footer.htm文件包含进来，这样就构成了一个完整的主页面了。

接下来的工作要在论坛后台设置中来完成

（1） 

进入论坛点击“系统设置——>

界面——>

模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！

如图4：

（图4）

（2） 

在“界面——>

风格管理”中，在新增界面风格后填入方案名称“test”然后提交即可！

（3） 

提交方案名称后，您就可以在界面风格中看到您所定义的新的风格方案。

如下图：

（图5）

注意上面用红色圆圈圈起来的那幅模版预览图，你的是不是没有显示出来？

这需要将你的首页的效果图做成110x120并命名为preview.jpg，将这图片放到test目录下就可以了。

到此，一套新的风格模板方案就添加到模板库里了，但还不是我们需要的最终效果，接下来要对模板文件继续进行

调整，以达到想要的最终效果

（4） 

点击[编辑]后就可以进入该模板的风格配色方案的编辑页面，按照图6把各个对应参数填入相应位置。

（图6）

填写好后，点击“提交”，更新一下缓存，浏览论坛首页出现下图：

（图7）

呵呵，有内容出来了，可是排版上却变得乱七八糟了，这是因为还没有引入CSS文件。

这时将原来设计好的CSS文件放到你模板目录下（templates/test），并将它重命名为“css_append.htm”（注意：

改后的文件名是css_append，后缀名是htm）。

接着打开header.htm文件，找到你引入CSS文件的语句，这会因为引入的语句不同而不同，我这里是<

styletype="

text/css"

>

@importurl（css/style.css）;

<

/style>

将这个替换为：

$rsshead

$extrahead

{subtemplatecss_script}

这样就可以将你的CSS文件引入了。

进入后台更新一下缓存，现在的效果图如下：

（图8）

这样就整齐了许多，这时你是不是发觉少了点东西？

没错，图片没有显视出来。

下面我们先将背景图（也就是CSS文件中引入的图片）显示出来。

打开css_append.htm文件，找到所有你引入图片的地方，将路径替换为“{STYLEIMGDIR}”。

例如：

这里有一句：

#footer{padding:

1em0;

background:

url（images/footer_bg.gif）}

将它改为：

url（{STYLEIMGDIR}/footer_bg.gif）repeat-xtop;

}

{STYLEIMGDIR}实际上是discuz的一个变量，当模板被解释时，就会用一个值来替换这个变量，这个变量的值可以在后台设置。

进入后台后点击“界面——>

风格管理”出现下图：

（图9）

找到你正在制作的test风格，点击“编辑”按钮，出现下图：

（图10）

看到了吧，当模板被解释时，就会用上面所填的路径来替换这个变量。

好了，现在更新缓存再看一下效果：

（图11）

哈哈，和原来设计的效果图一样了，是否有一种成功的喜悦？

虽然，到这里已经迈出了成功的一步，但革命尚未成功，同志仍需努力！

现在制作的模版是静态的，也就是说就算你发贴了，里面的内容也不会改变的，甚至你点个连接都会出错的。

下面我们就来让它“动”起来。

一、修改头部文件header.htm

打开正在制作的模板header.htm文件（以下简称header.htm），以及默认模板templates\default的header.htm文件（以下简称“默认header.htm”）。

将header.htm文件的标题用$navtitle$bbname$seotitle来代替。

我这里是：

“<

title>

搜球论坛<

/title>

”改后就变成了“<

$navtitle$bbname$seotitle<

”

看header.htm里是否有类似“<

metaname="

keywords"

content="

"

/>

”这样的语句，有就删除。

然后，将默认header.htm里的以下语句：

{$metakeywords}$seokeywords"

description"

$metadescription$bbname$seodescription-Discuz!

Board"

generator"

Discuz!

$version"

author"

TeamandComsenzUITeam"

copyright"

2001-2009ComsenzInc."

MSSmartTagsPreventParsing"

True"

metahttp-equiv="

MSThemeCompatible"

Yes"

x-ua-compatible"

ie=7"

复制粘贴到header.htm文件相应的位置（注这些对界面没什么影响，但对SEO优化有帮助）

将默认header.htm里的以下语句：

scripttype="

text/javascript"

varSTYLEID='

{STYLEID}'

IMGDIR='

{IMGDIR}'

VERHASH='

{VERHASH}'

charset='

$charset'

discuz_uid=$discuz_uid,cookiedomain='

$cookiedomain'

cookiepath='

$cookiepath'

attackevasive='

$attackevasive'

allowfloatwin='

$allowfloatwin'

creditnotice='

{if$creditnotice}$creditnames{/if}'

{ifin_array（CURSCRIPT,array（'

viewthread'

'

forumdisplay'

））}gid=parseInt（'

$thisgid'

）{elseifCURSCRIPT=='

index'

}gid=parseInt（'

$gid'

）{else}gid=0{/if},fid=parseInt（'

$fid'

）,tid=parseInt（'

$tid'

）<

/script>

src="

include/js/common.js?

{VERHASH}"

复制粘贴到header.htm文件相应的位置（至于这些有什么作用，自己查一下吧）

5、 

将头部的logo“动”起来

（图12）

找到显示logo的地方，我这里是：

divclass="

logo"

ahref="

index.php"

搜球论坛<

/a>

/div>

将“index.php”和“搜球论坛”分别用$indexname和$bbname代替（$indexname是首页文件名的变量，$bbname是论坛名称变量，其它相同的地方都可以用这两个变量作替换，以增加模版的适应性。

）

6、 

让登陆状态“动”起来

（图13）

divid="

umenu"

ul>

li>

<

spanclass="

quicklink_login"

欢迎回来，<

space.php?

uid=1"

class="

noborder"

zncai<

|

spanid="

loginstatus"

member.php?

action=switchstatus"

title="

我要隐身"

在线<

/span>

logging.php?

action=logout&

formhash=7edab246"

退出<

pm.php"

id="

pm_ntc"

target="

_blank"

短消息<

aid="

task_ntc"

href="

task.php"

论坛任务<

http:

//127.0.0.1/UCenter_Home/space.php?

空间<

memcp.php"

个人中心<

admincp.php"

系统设置<

/li>

/ul>

上面是我设计的效果图和相应的代码，这是登陆时的显示状态，当然我还希望没登陆的时候这样显示：

（图14）

在默认header.htm文件中找到：

uid=$discuz_uid"

$discuz_userss<

!

--{if$allowinvisible}-->

--{if!

empty（$invisible）}-->

{langlogin_invisible_mode}<

--{else}-->

{langlogin_switch_invisible_mode}"

{langlogin_normal_mode}<

--{/if}-->

/cite>

pipe"

|<

my.php?

item=threads{if$forum}&

srchfid=$forum[fid]{/if}"

{langmy_posts}<

--{if$ucappopen['

UCHOME'

]}-->

{$uchomeurl}/space.php?

{langspace_short}<

--{elseif$ucappopen['

XSPACE'

{$xspaceurl}/?

uid-$discuz_uid"

--{if$newpm&

&

$_DCOOKIE['

pmnum'

new"

{langpm_new}"

{langpm}<

span>

（$_DCOOKIE[pmnum]）<

--{if$taskon}-->

{if$doingtask}href="

task.php?

item=doing"

{langtask_unfinish}"

{else}href="

{/if}target="

{langtask}<

{languser_center}<

--{if$discuz_uid&

$adminid>

1}-->

modcp.php?

fid=$fid"

{langmodcp}<

$adminid==1}-->

{langadmincp}<

formhash={FORMHASH}"

{langlogout}<

--{elseif!

empty（$_DCOOKIE['

loginuser'

]）}-->

cite>

loginuser"

$_DCOOKIE['

]<

action=login"

{langactivation}<

$regname"

$reglinkname<

{langlogin}<

用这一段代码替换上面红色黑体部份，并在

的后面加上这一句：

--{if$discuz_uid}-->

还是那句话，想知到上面代码具体的意思，只能你自己去查找，我不可能一个一个的来解释。

7、 

让菜单“动”起来

（图15）

menu"

liclass="

menu_1"

hidefocus="

true"

mn_index"

论坛<

menu_2"

search.php"

mn_search"

搜索<

menu_3"

plugin"

javascript:

;

dropmenu"

插件<

luck.php"

抽奖系统<

plugin.php?

identifier=chat&

module=chat"

聊天室<

/li>

auction.php"

竞拍中心<

menu_4"

faq.php"

mn_faq"

帮助<

menu_5"

misc.php?

action=nav"

导航<

menu_6"

//127.0.0.1/SupeSite"

mn_SupeSite"

搜球网社区<

--{if$_DCACHE['

settings'

]['

frameon'

]>

0}-->

frameswitch"

if（top==self）{

{if（$_DCACHE['

]==2&

!

defined（'

CACHE_FILE'

）&

in_array（CURSCRIPT,array（'

））&

（（$_DCOOKIE['

]=='

yes'

&

$_GET['

]!

='

no'

）||（empty（$_DCOOKIE['

]）&

empty（$_GET['

]））））}

top.location='

frame.php?

frameon=yes&

referer='

+escape（self.location）;

{/if}

document.write（'

frameon=yes"

targ