X-Space应用技巧（二）：统一风格后的代码优化

php007 · 发表于 2006-7-14 10:16:26

转载于：http://my.donews.com/discuz/2006/07/12/x-space-dev-002/
在上一篇介绍了X-Space如何与论坛保持统一风格的修改方法，文中只给出了修改X-Space首页的示例代码，其他页面的修改是这样描述的：

要修改头部和左边的风格，只需要改动对应的header模板即可，而对应的右边和底部的风格，则在footer模板里修改。对于有必要的css修改，则只需要修改对应css文件即可。

这样的操作从理论说是没有错的。但是每一个类别都作这样修改的话（有日志、咨询、相册等模块），工作量是非常大的，并且当模板有了改动，必须针对美观修改过的页面都做相应的调整，这样操作既繁重又笨拙。
从修改中我们可以看到，在header和footer中修改的内容其实是一样的，这样我们就可以将这些内容提取到一个文件中，然后由其他header模板和footer模板来引用之，就可以减轻大量的工作，且可以保证风格变换时不至于对每个页面一一做修改的烦琐。
下面来看具体操作步骤：
第一步：提取header.html.php中的代码：

将上文中的附件中的代码1从wwwroot/supesite/templates/default/header.html.php中提取出来；
新建一个文件wwwroot/supesite/templates/default/demo_style_header.html.php，将代码1保存其中；
在header.html.php文件中代码1处添加{template demo_style_header}，添加后的代码大致如下：

</head>
<body>
{template demo_style_header}
<div class=”wrap”>
<div id=”header”>

第二步：提取footer.html.php中的代码：

将上文中的附件中的代码2从wwwroot/supesite/templates/default/footer.html.php中提取出来；
新建一个文件wwwroot/supesite/templates/default/demo_style_footer.html.php，将代码2保存其中；
在footer.html.php文件中代码2处添加{template demo_style_footer}，保存。

OK，对首页的优化已经完毕。
其他模块的页面，只需要在相应的header.html.php和footer.html.php中加入{template demo_style_header} 和{template demo_style_footer} 即可，就不必每个模块的头模板和尾模板页面中添加代码1和代码2了。
优化后的方案有很多好处：

当不需要自定义模板而还原默认模板时，只需要将demo_style_header.html.php和demo_style_footer.html.php中的内容置空即可；
同样的，修改模板风格时，只需要修改demo_style_header.html.php和demo_style_footer.html.php的内容；
保证了模板文件的统一，不至于个别模板出错而导致整体风格不统一。

bbdbb · 发表于 2006-7-17 07:33:48

又有沙发做了，支持

WeDone · 发表于 2006-7-18 04:43:17

不错呀

俊客 · 发表于 2006-11-14 13:16:14

支持！
不错
555

mzsr · 发表于 2006-11-21 00:31:10

收一个。。。

saleroad · 发表于 2006-11-21 06:11:03

楼主，真不错。对照着慢慢来做。

MM0102 · 发表于 2006-11-21 09:39:12

本来X-Space设计时就应该考虑如此，便于应用啊

uoojoo · 发表于 2006-12-10 08:08:27

首页　　:)

marco608 · 发表于 2006-12-10 17:21:35

技术贴。

支持！

liyinet · 发表于 2007-9-29 01:06:45

可以

		自动登录	找回密码
密码			立即注册

[教程] X-Space应用技巧（二）：统一风格后的代码优化