软色曰：本文来源于飞月博客 http://www.flymoonblog.cn/blog/ , 原文地址：http://www.flymoonblog.cn/blog/post/11.html
首页及分页模板移植教程[完成5个模板文件]
前言: 简单的主题移植其实并不难,所要做的只是替换相应的标签,小改点原样式表.但如果不移植模板,只在样式表上做移植则相对较难,而且实现的效果有限.
模板：指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主题修改也行
单日志页模板移植教程[完成9个模板文件]
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 制作
这两个没有源码可以参考,不过可以对照前面改好的模板做相应调整
完成其它模板,样式表移植及细化,还有其它[结束篇]
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可以对应默认的改.
