月上之木

Author: Small Potato
Author URI: http://www.wpdesigner.com/

适用于最新的1.7,default.html 模板中有较详细的注释,可以自行修改

使用方法:

1.将 STYLE 中文件传Zblog的STYLE文件夹下
2.备份你的TEMPLATE文件,然后用包中的覆盖
3.zblog后台->网站设置->界面样式名称 设为 sharp
4.文件重建

请尊重设计者的劳动,版权归WP,Z-Blog以及主题原作者所有!

[2.8 更新] 对b_article_comment.html与b_article-guestbook.html稍做修改

[ 本帖最后由 月上之木 于 2007-2-19 17:56 编辑 ]

月上之木

前言: 简单的主题移植其实并不难,所要做的只是替换相应的标签,小改点原样式表.但如果不移植模板,只在样式表上做移植则相对较难,而且实现的效果有限.

模板：指Z-Blog程序中TEMPLATE文件夹下的文件

zblog的首页模板由 default.html 定
分页包括分类显示页,同一tag显示页,由catalog.html定 ,其结构跟 default.html 是一样的,做好 default.html 后复制一个改个名就是catalog.html 了.

default.html 中只引用其它三个模板:

• b_article-multi.html,文章摘要,其引用标签是<#template:article-multi#>
• b_article-istop.html,置顶文章 自动显示,可以由b_article-multi.html修改来
• b_pagebar.html 分页条 ,引用标签是<#template:pagebar#>

模板移植前需要:

• 下载WP主题(废话 ),
• 保存该主题的首页和日志页的页面源代码(只要将其中相应内容换成zblog的相应标签就成zblog的模板了),
• Z-Blog模版标签库及相关说明(必备),默认模板侧边栏代码说明(方便查阅)
• Z-Blog默认模板(当然是在此基础上改咯)

实战阶段:

1.default.html 制作

•    对你保存的wp主题的首页源代码精简,即页面上的文章删去只剩一篇,侧边栏留一两个模块当参考
•    把文章代码复制至b_article-multi.html中,然后用<#template:article-multi#>
•    对应修改侧边栏
•    对应修改页面底部的声明,以上两个可以应用到各主模板中的

2.b_article-multi.html制作
     对应wp的文章源代码修改,即用zblog的模板标签替换,如文章标题用<a href="<#article/url#>"><#article/title#></a>文章内容用<#article/intro#>换等等.

3.b_article-istop.html可由b_article-multi.html修改来,即在标题改成: 置顶:<a href="<#article/url#>"><#article/title#></a>, b_pagebar.html用默认的就可以,对应WP主题修改也行

[ 本帖最后由 月上之木 于 2007-2-11 01:40 编辑 ]

月上之木

zblog的单日志页模板由 single.html定,其用到的模板相对多一点

• b_article-single.html               单日志页文章,引用标签是<#template:article-single#>
• b_article_trackback.html         引用列表,<#template:article_trackback#>
• b_article_mutuality.html         相关文章,<#template:article_mutuality#>
• b_article_comment.html         评论条,<#template:article_comment#>
• b_article_commentpost.html   评论发表框,<#template:article_commentpost#>
• b_article_commentpost-verify.html  验证码的模板,<#template:article_commentpost-verify#>
• b_article_nvabar_l.html与b_article_nvabar_r.html 为上下文导航模板,<#template:article_navbar_l#>与<#template:article_navbar_r#>

精简保存的wp主题的日志页源代码,即删去大多评论,侧边栏,留一两条做参考

1.single.html 制作
   single.html 跟default.html 几乎一样,最简单的方法是把做好的default.html 中的DIV层覆盖默认的single.html 中的DIV,然后将<#template:article-multi#>换成<#template:article-single#>,去掉分页条,再改下侧边栏就完成了

2.b_article-single.html 制作
   b_article-single.html 中的文章部分跟b_article-multi.html差不多,不过把标题的链接去掉,改下文章底部的显示内容.
   对应wp主题的日志页源代码修改其它内容. 文章后的附带修改起来会麻烦一点点,评论条,相关文章等模板内规定的只是单条内容的样式,所以其外层标签要写在这里面

3.b_article_comment.html, b_article_commentpost.html, b_article_commentpost-verify.html 制作
  对应wp主题的日志页中单评论条源代码做修改,zblog默认模板中的引用按钮改不来可以不要.
  1.7中的验证码图片大小是50*11的,默认被拉伸到60*20,建议修改.

4.b_article_mutuality.html 及 b_article_trackback.html 制作
  这两个没有源码可以参考,不过可以对照前面改好的模板做相应调整

[ 本帖最后由 月上之木 于 2007-2-11 14:41 编辑 ]

月上之木

Z-Blog 1.7中共有18个模板文件,经过以上两大步,完成了其中的14个,还有4 个:

• search.html         搜索页
• tags.html            TagCloud,标签集显示
• b_article_tag.html      单个tag的显示样式
• b_article-guestbook.html    留言板的显示样式

有了前面做的模板基础,这个改起来就简单了

1.search.html 是default.html 简化版,侧边栏留个搜索就行了
2.tags.html    是single.html 结合b_article-single.html中的文章部分 的简化版
3.b_article_tag.html 就不用改了
4.b_article-guestbook.html 是b_article-single.html 的简化版

OK!完成模板部分了!移植过程完成了大半部分,接着就是样式表的移植了.

所谓样式表的移植其实只是将WP主题中的样式表改名及对就Z-Blog本身的特点做点调整而已.WP主题中的样式表一般不只一个,主样式放在style.css中,图片放在主题文件的images目录中,而Z-Blog的一般做法是只有一个CSS样式表,图片放在样式同名文件夹下.

如,WP的Sharp主题下有两个CSS文件,除了style.css外还有一个style_comments_popup.css专门定义评论条的样式,我们把这两个合并成一个:sharp.css ,其中的图片路径全部替换成sharp/XXX, 图片文件夹改名成sharp

另外,还要改下引用(quote),代码(code),评论回复()及多媒体(media)标签的显示样式.有时候还要自定义评论发表框的样式.
WP中引用为 <blockquote>,代码为<code>,所以只要在这两个前加 .quote , .code,就可以了,评论回复的样式对应引用样式改. .media可以对应默认的改.

结束语:以上都只是我的经验之谈,配上模板元素说明的图,希望对各位移植其它主题有帮助.如果你移了个漂亮的主题来不要忘了分享哦~~当然还要注意版权问题....

[ 本帖最后由 月上之木 于 2007-2-3 22:56 编辑 ]

tsmlyf

好帖，一定要顶！

zx.asd

可以划归<模版制作指南>了,不错

实战篇!!!

kuailai

真详细。谢谢。
每个人发帖或回答都这样就好了。

chonger

谢谢

549527

收藏再説。

czliaohui

太好了````十分感谢````

tobad

呵呵.确实不错.很详细.
不过现在没时间看.
等晚上自己一个人在电脑前慢慢琢磨.呵呵.
我的blog:
http://www.tobad.cn/blog

huhaojian

回帖是礼貌，谢谢分享！