BO-BLOG模板制作指南(中、下）|两天的博客

2010年05月7日学习资料经典文摘5929.8K字数 23047阅读76分49秒阅读模式

继续看{ catnav },后台数据和前台模板相分离,因此,{ catnav }就是后台数据在前台显示的标签.从字面上我们也可以看出，cat是分类（category），nav是导航（navigator），{ catnav }就是后台的用户自定义的分类信息在前台的标签。每个用户的分类信息是不相同的，但是通过{ catnav }就将其在前台摸板统一起来。

再分析一段代码
[php]&lt;DIV onclick=”toggle_collapse(‘bar4′)”&gt;{ langindex5 }&lt;/DIV&gt;
&lt;DIV id=bar4 name=bar4&gt;{ allnew }&lt;/DIV&gt;&lt;br/&gt;[/php]文章源自两天的博客-https://2days.org/392.html

<div>…..</div>之间是一个div容器
第一个div容器的属性由css样式表中sidetitle来控制.{ langindex5 }对应”最新日志”小标题,之所以用{ langindex5 }而不用” 最新日志”四个字,主要是因为模版要考虑通用性,用{ langindex5 }可以表示不同语言下的”最新日志”.当然,也可以直接把{ langindex5 } 替换成”最新日志”四个字或者图片.文章源自两天的博客-https://2days.org/392.html

由于{ langindex5 } 对应”最新日志”,自然第二个div容器就对应{ allnew }最新记录列表;可以在代码中看见,一共有10对这样的小标题+子内容组合。文章源自两天的博客-https://2days.org/392.html

其他的文件也类似如此。页面布局中添加后台数据代码，我们可以根据自己的需要移动它们的位置（将{ … }添加到认为合适的地方）或者放弃一些自己觉得不重要的功能（删除{ … } ）。譬如，我不想显示“导航条”，很简单。在index文件中，删除
[php]&lt;tr&gt;
&lt;td&gt;{ catnav }&lt;/td&gt;
&lt;/tr&gt;[/php]
就不会显示“导航条”。或者，不想显示“杂项”，觉得那些乱七八糟的图片不好看，我们知道index文件中， { langindex11 } 代表“杂项”，找到这部分，删除
[php]&lt;DIV onclick=”toggle_collapse(‘bar10′)”&gt;{ langindex11 }&lt;/DIV&gt; //杂项//—-〉侧栏子标题
&lt;DIV id=bar10 name=bar10&gt;{ xml2 }&lt;br&gt;{ xml3 }&lt;br&gt;{ encodeinfo }&lt;br&gt;&lt;a href=”http://www.creativecommons.cn/licenses/by-nc-sa/1.0/” target=”_blank”&gt;&lt;img src=”img/cc.png” alt=”Creative Commons” border=”0″ /&gt;&lt;/a&gt;&lt;br&gt;&lt;a href=”http://www.getfirefox.com” target=”_blank”&gt;&lt;img src=”img/firefox.gif” alt=”Best viewed in Firefox” border=”0″ /&gt;&lt;/a&gt;&lt;br&gt;&lt;a href=”index.php?job=about” target=”_blank”&gt;&lt;img src=”img/boblog.png” alt=”{ versioninfo }” border=”0″ /&gt;&lt;/a&gt;&lt;/DIV&gt; //杂项内容//[/php]
这部分,”杂项”就不会显示了.其他的类似如此文章源自两天的博客-https://2days.org/392.html

如果不对页面的布局有所修改的话，大部分的模版制作工作将集中于制作图片修饰美化模版、在html文件中添加css样式、修改css样式表中的相关属性完成图片显示和配色。文章源自两天的博客-https://2days.org/392.html

下面我们重点分析clean模版的css样式表new42.css文章源自两天的博客-https://2days.org/392.html

[php]BODY { //页面属性//
margin: 0px; //网页紧贴浏览器窗口，没有这句，网页和浏览器窗口上下会留出空白//
background-color: #999; //定义页面背景色//
color: #333; //定义文本颜色//
}
BODY, TD, TABLE, INPUT, TEXTAREA { //页面、单元格、表格、输入、文本框属性//
/* font-family: Verdana, Arial, Helvetica, sans-serif; */ //在css中，/*…*/表示注释,放在这里是垃圾代码//
font-family: tahoma, arial, sans-serif; //定义字体//
font-size: 12px; //定义字体大小//
/* line-height: 17px;*/ //注释or垃圾代码//
background-repeat:repeat; //垃圾代码，除非和background-image一起使用//
}文章源自两天的博客-https://2days.org/392.html

INPUT, TEXTAREA, SELECT { //输入、文本框、选择//
background-color: #FFF; //定义背景色//
border: #E8E8E8 1px solid; //定义边框颜色、宽度、形式//
}文章源自两天的博客-https://2days.org/392.html

.riqi, .riqi a { //定义日期和日期的超链接//
background-color: #646464;
color: #fff;
}
.calendartitle { //定义日历中星期的背景色//
background-color: #f5f5f5;
}
.calendar td, .calendar a { //定义日历的单元格//
font-size: 12px;
font-family: Georgia;
}
BODY {
scrollbar-base-color:#EEEEEE; //定义滚动条。在FF下无效//
margin-right: auto; margin-left: auto; //在FF中页面居中，在IE下无效//
background-image: url(new3.jpg); //定义new3.jpg做背景图片。模版的立体效果//
background-repeat:repeat-y;//背景图片纵向重复//
background-position: center; //背景图片位置居中//
}文章源自两天的博客-https://2days.org/392.html

PRE { //文本预处理//
BORDER-RIGHT: #ccc 1px dotted; PADDING-RIGHT: 2px; BORDER-TOP: #ccc 1px dotted; PADDING-LEFT: 2px; BACKGROUND: #eeeeee; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px dotted; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px dotted
}
A { //控制整个blog的超链接，除非其他地方另外有定义//
FONT-SIZE: 12px; COLOR: #666; FONT-FAMILY: tahoma, arial, sans-serif; TEXT-DECORATION: none
}
A:hover { //全文超链接鼠标放上去的效果//
COLOR: #333; TEXT-DECORATION: underline
}文章源自两天的博客-https://2days.org/392.html

.comments-title { //留言本guestbok.htm访问者留言标题如 snow (2005年7月3日16:40) 和文章评论者信息reply.htm 如sarah在 2005年7月2日05:05星期六评论://
padding: 2px;
font-weight: bold;
color: #333;
border-bottom: #E8E8E8 1px solid;
}
.comments-title A { //文章评论者信息。管理员登陆后的“删除”“回复”两个字的超链接属性//
text-decoration: none;
}
.comments-title A:hover { //同上，超链接的鼠标移上去的效果//
text-decoration: none;
}

.comments-body { //留言本访客留言和文章评论//
padding: 10px;
color: #666;
}
/* stariver */ //注释//
.maxbox //在index.htm的&lt;body&gt;…&lt;/body&gt;之间，最开始有这么一段代码
&lt;div align=”center”&gt;
&lt;table border=”0″ cellpadding=”0″ cellspacing=”0″&gt;，这是在div标签中最外面的表格//
{
width: 770px; //定义宽度770像素，确定了宽度，两边留出一定空白，目的是兼顾800×600分别率下全屏幕显示//
height: 100%;
background-color: White;
padding-left: 5px;
padding-right:8px;
background-image: url(new3.jpg);
}

.maxbox2 { //在index.htm中，定义了第二个表格//
vertical-align: top;
}

.logo { //模版最顶部的banner区域//
background-color: #fff;
vertical-align: top;
padding: 0px;
}

.topmenu { //导航条//
padding-left: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-top: 5px;
color: #666;
vertical-align: middle;
background-image: url(new1.jpg);
background-repeat: repeat;
display: block;
}
.topmenu A { //导航条超链接效果//
/* padding-left: 10px;
padding-right: 10px;*/
color: #333;
text-decoration: none;
border: #EFEFEF 1px solid;
padding: 2px;
font-size: 14px;
}

.topmenu A:hover { //导航条鼠标移动到上面的效果//
text-decoration: none;
border: #ccc 1px solid;
background-color: #666;
color: #fff;
}

.leftbar { //右侧侧栏表格的属性//
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0px;
width: 190px;//定义右侧侧栏表格的宽度是190px//
vertical-align: top;
background-color: #fff;//定义侧栏的背景色为白色//
}

.side { //侧栏小标题下的子内容，如公告、最新日志列表、归档列表、友情链接列表等//
padding: 2px;
color: #000;
line-height: 17px;
font-size: 12px;
border-left: #E8E8E8 1px solid;
border-bottom: #E8E8E8 1px solid;
border-right: #E8E8E8 1px solid;
}

.side A {
text-decoration: none;
color: #000;
}

.side A:hover {
color: #333;
}

.sidetitle { // 在index中定义，侧栏中小标题，如“公告”两个字，这里定义了“公告”两个字的填充宽度、颜色、字体大小、边框颜色、背景图像等//
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
font-weight: bold;
color: #000; //字体颜色//
text-align: left;//文字对齐方式：左对齐 //
border: #ccc 1px solid; //边框为1像素的灰色实线//
background-image: url(new2.jpg);
cursor: hand;
}

.content { //在index中有这行代码&lt;td&gt;{ mainbodyout }&lt;/td&gt;，{ mainbodyout }是首页显示的blog文章摘要，此处定义了index中主体部分右边blog摘要区的表格属性//
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
width: 100%;
vertical-align: top;
overflow: hiddem; //错误，属性应该是hidden//
}

.content2 { //在view.htm中，关闭侧栏后主体部分的效果//
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
vertical-align: top;
}

.entry { //在article和main.htm中都定义过，里面显示文章或摘要//
padding: 2px;
color: #333;
line-height: 17px;
font-size: 12px;
}

.title { //主体部分的blog文章标题、留言本的标题//
padding-top: 2px;
padding-bottom: 2px;
text-indent: 3px;
font-weight: bold;
font-size: 12px;
color: #333;
text-align: left;
background-color: #F5F5F5;
background-image: url(new1.jpg);
border-left: #E8E8E8 5px solid;
border-right: #E8E8E8 1px solid;
border-top: #E8E8E8 1px solid;
border-bottom: #E8E8E8 1px solid;
width: 100%;
display: block;
}

.title A {
font-weight: bold;
font-size: 12px;
color: #333;
text-decoration: none;
}

.title A:hover {
font-weight: bold;
font-size: 12px;
color: #333;
text-decoration: none;
}

.date { //blog文章的时间、分页、留言本相关部分//
padding-bottom: 10px;
text-align: right;
color: #999;
display: block;

}
.date A {
text-decoration: none;
}
.date A:hover {
text-decoration: none;
}

.data { //list.htm文件中有定义，分类的描述和分类下文章全部题目的显示//
padding-bottom: 10px;
color: #999;
display: block;
}

.data A {
text-decoration: none;
}
.data A:hover {
text-decoration: none;
}

.posted { //在aritcle和main.htm中定义在摘要和全文下面显示相关信息的如 Posted by 小歪 &amp;line; 评论 (2) &amp;line; 引用 (0) &amp;line; 阅读28次 &amp;line; 编辑 &amp;line; 删除 &amp;line; 清空回复 &amp;line; 置顶 //
border-top: #E8E8E8 1px solid;
padding-bottom: 15px;
color: #333;
text-align: right;
}
.posted A {
text-decoration: none;
}
.posted A:hover {
text-decoration: none;
}

.footer { //底部相关信息//
text-align: center;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
clear: both;
background-image: url(new1.jpg);
background-repeat: repeat;
display: block;
width: 750px;
text-align: center;
}

.footer A {
text-decoration: none;
}
.footer A:hover {
text-decoration: none;
}

.entrycontent { //仅在main.htm中定义过，摘要的显示//
line-height: 19px;
letter-spacing: 1px;
}[/php]
clean模板还有很多不完善的地方，包括官方发布的clean模板安装包，譬如使用表格和div混合使用、重复定义，但是这并不影响它的安装、使用和兼容性。所以我们做模板的时候，要大胆的尝试，不要气馁。先从clean模板入手，可以说clean摸板是最简单的摸板了，慢慢修改模板的各个地方，大胆的改动，然后观察效果。在改动中熟悉模板，熟悉css语法，掌握一些小窍门。这些小窍门不是我不愿意和大家分享，而是难以用文字来叙述，时间长了自然而然就有了。遇到不懂的地方，google是最好的老师，还可以安装别人的模板揣摩、学习。我开始是修改别人的摸板，替换个图片、修改点文字、在侧栏添加个小功能等等，最后把nicky的osxcn-blue摸板改成msn风格的，正式学习模板制作也不过两天的工夫，用了一天的时间学习css，第二天就参照hoo的simple.夏模板，把它移植到bo-blog上来，修修补补，就弄出来了。

很多朋友感到页面布局比较困难，有时候需要数据显示的地方不是超出表格太多，就是留出大片的空白，要么按下葫芦浮起了瓢，这边显示效果对了，那边有错了，要么是在IE下正常，在firefox下却是惨不忍睹，我个人的经验来看是由于css定义的重复、自相矛盾的关系，才开始做模板，确实不容易搞明白css各部分和页面显示效果之间的关联关系，出问题后不太容易找到可能出错的地方。不要紧，做上一两个模板就明白了。大胆地改动就行了，在错误中获取经验和教训。

clean模板的先天不足，使它在一些复杂的模板制作中，很难解决上面所提到的问题。所以，我们最好使用div+css布局的办法，除了在模板中的诸多好处外，页面加载速度快，兼容性好，代码清晰易读也是它的优点。所以，我在制作wp模板的时候就采用了这种布局。模板制作到一定阶段，div+css布局就显示它的威力了，尤其是在解决IE和firefox的兼容性方面。但初学者还是先立足clean模板。

强烈推荐一篇div+css布局方面的文章，相信看了这篇文章后，在div+css布局blog方面的大部分问题都会迎刃而解

典型的三行二列居中高度自适应布局
4、官方发布的模版制作参考

Bo-Blog V1.7 模板参考

Bo-Blog V1.7 模板参考（Updated）
1:14 2005-7-5 [模板]

A. 模板采用PHPLib，只要在页面中加入以 { }符号括起的变量名就可以得到相应的部分。
（花括号与里面的文字没有空格）

B. 文件中注释<!– BEGIN ??? –>到<!– END ??? –>是设定了一个区块，不可删除。关于区块的更多信息可以参考PHPLIB的有关文档。

C. 模板组件－htm页面

index.htm
这是整个blog带侧边栏时页面的框架，内含以下组件：
[php]{ blogname } blog名字
{ blogdc } blog的描述语
{ announcebar } 公告栏，仅占据位置，具体样式修改announcement.htm。
{ owner } 所有者
{ calendar } 日历
{ allnew } 最新记录列表
{ catnav } 分类
{ newreply } 最新回复列表
{ links } 友情链接
{ articlenum } 文章数
{ reply } 回复数
{ visitorcounter } 到访次数
{ currentonline } 当前在线信息
{ todayvisit } 今日到访次数
{ regusers } 注册用户数
{ icon } 头像
{ archives } 归档显示
{ xml } xml标记处
{ versioninfo } 版权标记处
{ mainbodyout } 主体部分
{ encodeinfo } 编码图示
{ adminurl } 管理入口[/php]
以下是这个模板文件中仅用作显示文字的标签（建议使用这些标签而不是直接写汉字，以更好支持多语言）
[php]{ langindex0 } 日志：
{ langindex1 } 评论：
{ langindex2 } 到访：
{ langindex3 } 今日：
{ langindex4 } 日历
{ langindex5 } 最新日志
{ langindex6 } 最新评论
{ langindex7 } 搜索
{ langindex8 } 输入标题关键字
{ langindex9 } 搜索
{ langindex10 } 高级
{ langindex11 } 杂项
{ langindex12 } 友情链接
{ langindex13 } 归档
{ langindex14 } 公告
{ langindex15 } 统计信息
{ langindex16 } 最新引用[/php]

main.htm
摘要阅读，主体部分。
[php]{ articlename } 文章名
{ articletime } 发布时间
{ article } 内容
{ reurl } 回复链接
{ seereply } 阅读全文
{ editurl } 编辑此文的链接
{ delurl } 删除此文的链接
{ noreplyurl } 清空评论的链接
{ previousandnext } 上一篇和下一篇的链接栏
{ thiscat } 当前文章所属的栏目
{ stickinfo } 置顶与取消置顶链接
{ trackback } Trackback链接
{ thiscatimg } 分类的图标
{ pages } 分页显示位置
{ articleviews } 阅读次数[/php]
reply.htm
回复框架/一些简单页面的框架。
[php]{ replyinfo } 回复人信息/本页标题
{ delreply } 删除回复的链接/本页其他标题信息
{ reply } 回复内容/本页主体内容[/php]
list.htm
分类的列表显示页面，搜索和列表页的框架。
[php]{ articlenumbar } 显示分类名和查找到的条目数量
{ listdescription } 分类的描述
{ alllist } 列表内容[/php]
announcement.htm
公告部分框架。
[php]{ announce } 公告内容[/php]

view.htm
简洁模式阅读和trackback页的框架。
[php]{ blogname } blog名字
{ catnav } 分类
{ xml } xml标记处
{ versioninfo } 版权标记处
{ mainbodyout } 主体部分
{ encodeinfo } 编码图示
{ announcebar } 公告栏[/php]

error.htm
出错页。
[php]{ info } 出错信息。[/php]

article.htm
阅读文章内页的模板，可以完全拷贝main.htm，也可以定制这一页
[php]{ articlename } 文章名
{ articletime } 发布时间
{ article } 内容
{ reurl } 字体属性：大中小
{ seereply } 阅读全文
{ editurl } 编辑此文的链接
{ delurl } 删除此文的链接
{ noreplyurl } 清空评论的链接
{ previousandnext } 上一篇和下一篇的链接栏
{ thiscat } 当前文章所属的栏目
{ stickinfo } 置顶与取消置顶链接
{ trackback } Trackback链接
{ thiscatimg } 分类的图标
{ pages } 分页显示位置
{ articleviews } 阅读次数
{ permanantshow } 永久地址
{ tblinkshow } 引用地址[/php]

gallery.htm
相册框架。
[php]&lt;!– BEGIN maingal –&gt;
相册的总框架
{ galleryname } xx的相册
{ gallerymain } 相册主体部分
&lt;!– END maingal –&gt;

&lt;!– BEGIN eachgal –&gt;
相册首页分相册名称和说明部分
{ name } 相册名称
{ description } 相册描述
{ dir } 相册所在目录名
&lt;!– END eachgal –&gt;

&lt;!– BEGIN eachpic –&gt;
相册内页每张图片的名称和说明部分
{ url } 图片可识别id
{ img } 图片真实地址
{ pic_des } 图片描述
{ pic_name } 图片名称
&lt;!– END eachpic –&gt;

&lt;!– BEGIN viewbar –&gt;
相册内页的工具条
{ galname } 相册名称
{ gal_des } 相册描述
{ langup } 文字：向上一层
{ fid } 相册所在文件夹名
{ langslide } 文字：幻灯片
&lt;!– END viewbar –&gt;

&lt;!– BEGIN seepic –&gt;
单图查看模式
{ trueurl } 图片真实地址
{ pic_des } 图片描述
{ previousone } 上一张图片
{ nextone } 下一张图片
{ return } 返回相册
&lt;!– END seepic –&gt;[/php]

以下两个模板文件修改错误可能造成无法发表评论和留言，可采用默认。
guestbook.htm
留言本的模板。请参考默认模板bluetality，此
[php]&lt;!– BEGIN gbfile –&gt;
留言本整体的框架
{ gbtitle } 留言本名
{ submitformpart } 留言填写表单
{ gbmainpart } 留言显示主体
{ pagepart1 } 分页
{ pagepart2 } 翻页链接
&lt;!– END gbfile –&gt;

&lt;!– BEGIN submitform –&gt;
内嵌于整体框架 { submitformpart } 部分，留言填写表单
{ gbaction } 表单提交的目标地址
{ gbname } 文字：姓名
{ nowuserid } 登陆者的id
{ gbpage } 文字：主页
{ nowuserhomepage } 登陆者的网站
{ gbmail } 文字：邮件
{ nowuseremail } 登陆者的mail
{ gbcontent } 文字框
{ gbonly } 文字：仅主人可见
{ submit } 文字：提交
{ clear } 文字：清除
{ validation } 验证码
&lt;!– END submitform –&gt;

&lt;!– BEGIN gbmain –&gt;
内嵌于整体框架 { gbmainpart } 部分，留言本主体
{ whoandwhen } 发表者和发表时间
{ gemail } 发表者的mail
{ altmail } 文字：给用户发邮件
{ ghomepage } 发表者的主页
{ altpage }文字：访问用户主页
{ urlreply } 链接地址：回复此留言
{ altreply } 文字：回复
{ urldel } 链接地址：删除此留言
{ altdel } 文字：删除
{ gip } 文字：留言者的ip
{ gsubmessage } 留言内容
{ ifshow } 显示还是隐藏的css属性： display: block/none 用于控制站长回复的隐藏和显示
{ replytimeinfo } 回复时间
{ greplymessage } 回复内容
&lt;!– END gbmain –&gt;[/php]

addreply.htm
交评论的模板。不建议修改这个模板，您可以修改cols的宽度。

D. 模板组件－定义文档：

installinfo.txt 安装时的信息
写法如下：
[php]&lt;?
$thistemname=”天空”; //名称
$thisauthor=”Bob Shen”; //作者
$thisdesc=”蓝色系的淡雅模板。”; //描述
$thisthumb=”sky.gif”; //缩略图名[/php]

temname.txt 模板名文件
直接将模板名字写入即可

[php]colosheme.txt 色彩定义文件
$color1=”#FFFFFF”;
$color2=”#D1E9F8″; //察看用户资料页面里表格第一行和第二行的背景颜色。
$font1=”#000000″;
$font2=”#000000″; //对应这两个区域的字体颜色。
$border=”#EBF5FC”; //全局表格的边框色
$bgcolor=”#FFFFFF”; //页面的背景色
$color3=”#EBF5FC”; //？？不清楚
$color4=”#EBF5FC”; //？？
$calendarwidth=”200″; //日历表格的宽度，可使用百分比（要带上百分号）或实际数值。
$columnstring=”"; //？？[/php]

E. 模板必须包括图片：
noimg.gif 分类没有分类图标时显示的默认图标。
缩略图放置在blog/template/temthunmbs 下，名字在installinfo.txt下定义。

F. 模板组件－其他
必要css：
[php].riqi 当前日期的css
.calendar 日历的内表格样式（请修改background-color用于设置日历表格背景色）
.calendarborder 日历的外表格样式（请修改background-color用于设置日历表格边框色）
.calendartitle 日历的标题行样式（请修改background-color用于设置星期显示栏的背景色）[/php]
必须引用的css文件：
[php]img/span.css[/php]

必须在模板中引入的js文件：
[php]img/module.js[/php]

parts.php文件说明

1.7.0095起增加的模板part文件。如果您的模板想自定义以下部分，请将include/parts.php文件复制到该模板的文件夹下，然后修改其中各项的值。程序会自动寻找模板文件夹下的part文件，找不到的情况下就载入默认的part文件。

注：这些部件很可能不是最终的构成，还存在变更和增删的可能性。
中括号的部分与内里的文字之间是没有空格的。中括号括起的部分会被自动替换为相应的值。一般而言，{ chr }代表文字，{ url }代表链接，{ num }代表数值。
注意引号问题。双引号中的双引号请使用 \” ，每一语句结束请勿遗忘分号; 。否则会造成文件无法打开。推荐Editplus编辑器，可以一眼看出引号是否配对。
以下双斜杠 // 之后的内容为对前一句的注释。

最后更新：2005-03-07 21:21

[php]&lt;?
//php文件开始，不用修改
$parts['mobile']=”&lt;img src=\”img/mp.gif\” alt=\”{ chr }\”/&gt;”;
//手机发表的日志名和回复之前的修饰图片。
//{ chr }会被替换为（以下用=&gt;表示）“该日志由<strong>手机</strong>发布”。
//示例：仅用文字wap体现手机发表的特征：$parts['mobile']=”[WAP]“;

$parts['editurl']=”&amp;line; &lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;”;
//编辑日志的链接。
//{ chr }=&gt;“编辑” { url }=&gt;链接地址
//示例：用一个图片体现编辑日志的链接： $parts['editurl']=”&lt;a href=\”{ url }\”&gt;&lt;img src=\”图片地址\” alt=\”{ chr }\” border=\”0\” /&gt;&lt;/a&gt;”;

$parts['delurl']=”&amp;line; &lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;”;
//删除日志的链接。
//{ chr }=&gt;“删除” { url }=&gt;链接地址

$parts['noreplyurl']=”&amp;line; &lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;”;
//清空回复的链接。
//{ chr }=&gt;“清空回复” { url }=&gt;链接地址

$parts['stickinfo']=” &amp;line; &lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;”;
//置顶、取消置顶的链接。
//{ chr }=&gt;“置顶、取消置顶” { url }=&gt;链接地址

$parts['reurl']=”&lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;({ num })”;
//回复日志的链接。
//{ chr }=&gt;“回复” { url }=&gt;链接地址

$parts['trackback']=”&amp;line; &lt;a href=\”{ url }\”&gt;{ chr }&lt;/a&gt;({ num })”;
//查看引用的链接。
//{ chr }=&gt;“引用” { url }=&gt;链接地址 { num }=&gt;已有引用条数

$parts['ishidden1']= “&lt;p align=\”center\”&gt;&lt;span class=\”red\”&gt;&lt;strong&gt;{ chr }&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;”;
//隐藏日志不可查看的提示语
//{ chr }=&gt;提示语

$parts['ishidden3']= “&lt;p align=\”center\”&gt;&lt;span class=\”red\”&gt;&lt;strong&gt;{ chr }&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;”;
//需要回复日志不可查看的提示语
//{ chr }=&gt;提示语

$parts['previousandnext']=”&lt;table width=\”100%\” align=\”center\” cellpadding=\”0\” cellspacing=\”0\”&gt;&lt;tr&gt;&lt;td align=\”left\”&gt;{ url1 }&lt;/td&gt;&lt;td align=\”right\”&gt;{ url2 }&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;”;
//前后文链接栏
//{ url1 }=&gt;前一篇日志的标题+链接 { url2 }=&gt;后一篇日志的标题+链接
//示例：将前后文链接拆成两行：$parts['previousandnext']=”{ url1 }&lt;br/&gt;{ url2 }”;

$parts['adminreply']=”&lt;br/&gt;&lt;table width=’90%’&gt;&lt;tr&gt;&lt;td width=’30′&gt;&lt;td style=’background-color:$color2; color:$font2′&gt; { chr1 } &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td width=’30′&gt;&lt;td&gt;{ chr2 }&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;”;
//管理员回复某篇评论栏
//{ chr1 }=&gt;xxx回复于xxx时间 { chr2 }=&gt;回复的内容

$parts['listpic']=”·”;
//所有列表项目前的前导符号
//示例：用一个图片作为所有列表项目的前导符号： $parts['listpic']=”&lt;img src=\”图片地址\” alt=\”\” /&gt;”;

$parts['pagevol']=5;
//分页每组显示几个页面

$parts['eachpage']=” &lt;a href=\”{ url }\”&gt;[{ num }]&lt;/a&gt; “;
//每个分页链接的显示样式
//{ url }=&gt;链接 { num }=&gt;页数
//示例：每个分页链接只显示链接，不显示中括号： $parts['eachpage']=” &lt;a href=\”{ url }\”&gt;{ num }&lt;/a&gt; “;

$parts['currentpage']=” [{ num }] “;
//当前分页的显示样式
//{ num }=&gt;页数

$parts['gravatar']=”&lt;table width=\”100%\”&gt;&lt;tr&gt;&lt;td valign=\”top\”&gt;{ chr1 }&lt;/td&gt;&lt;td width=\”55\” align=\”right\” valign=\”top\”&gt;{ chr2 }&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;”;
//Gravatar开启时，评论或者留言与gravatar的位置关系
//{ chr1 }=&gt;留言或评论正文 { chr2 }=&gt;Gravatar头像
//示例：将Gravatar放在左边： $parts['gravatar']=”&lt;table width=\”100%\”&gt;&lt;tr&gt;&lt;td width=\”55\” align=\”right\” valign=\”top\”&gt;{ chr2 }&lt;/td&gt;&lt;td valign=\”top\”&gt;{ chr1 }&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;”;

$parts['showcatrss']=”&lt;a href=\”{ url }\”&gt;&lt;img src=\”img/xml2.gif\” alt=\”{ chr }\” border=\”0\”/&gt;&lt;/a&gt;”;
//查看该分类的<strong>rss</strong> feed
//{ url }=&gt;该分类rss的地址 { chr }=&gt;“查看该分类的rss feed”
//示例：仅用RSS字样代替这个图片： $parts['showcatrss']=”&lt;a href=\”{ url }\”&gt;RSS&lt;/a&gt;”;

$location['weather']=”img/weather”;
//天气图标所在路径

$location['rss']=”img”;
//rss2.0 atom UTF-8编码等小图标的路径[/php]

五、打包、安装

1、打包

模版制作好以后就要准备发布了，假如命名模版名称为AAA，以下工作需要做：

更改模版文件夹名称为AAA
更改模版文件中的相关链接地址为AAA，假如以clean模版修改的，只要把代码中clean替换成AAA
修改installinfo.txt和temname.txt，将clean替换成AAA，AAA就是模版的安装名
截缩略图，高宽大概160px比较恰当，将缩略图放在temthumbs文件夹中和模版文件一起发布
查毒

2、安装

一般步骤：使用FTP软件将模版安装文件上传到blog/template目录下，然后在后台管理界面中，添加新模版并且选中确认即可
详细步骤：(第4、5两步并非必要)
1>解压缩后上传到您的网站URL/blog/blog/template/BlackStorm/下;
2>把模版文件中里的a.php文件复制一份到您的网站URL/blog/include文件夹下;
3>把模版缩略图剪切到temthumbs里,到后台模板管理里添加模板安装名;
4>先执行a.php,在浏览器地址栏输入:您的URL/blog/blog/include/a.php,消除bom;
5>再次执行a.php,在浏览器地址栏输入:您的URL/blog/blog/template/模版名称/a.php,消除bom!
6>其它设置请到后台相对应修改;

六、模版美化

相册 imageVue gallery使用指南或者相册SimpleViewer
在线及时交流 chatango
添加365key
添加天气预报
添加flash音乐播放器
添加韩国exobud音乐播放器
美化blog的小图标生成和 80×15 Brilliant Button maker
添加漂亮的flash时钟去这里获取flash时钟代码
添加办法：在clean模版的index.htm文件的<td>….<td>之间合适位置，添加代码
<DIV onclick=”toggle_collapse(‘bar1′)”>现在时间</DIV>
<DIV id=bar1 name=bar1>此处放置flash时钟的java代码</DIV><br/>
其他的在侧栏添加的功能和这个做法相同

七、FAQ

问：请问怎么在首页每个日志底部的“阅读全文”前面添加图标的？我找了很多地方都找不到。。是在模板里修改的吗？哪个文件？
答：修改blog/language/zh_cn/main.lang.php，将12=>’阅读全文’,修改为
12=>’<img src=”blog/template/ss-clean/readmore.gif” border=0 align=”absmiddle”>阅读全文’,
问：我想把首页左边评论、文章前的小圆点换成一个小图片，改修改什么地方呢？应该是某个php文件吧？
答：把首页左边评论、文章前的小圆点换成一个小图片：修改模板文件夹中， part.php 里面的 $parts['listpic']=”·”; 把那个点改成你的那个图片地址就行了。
如：[php]$parts['listpic']=”&lt;img src=\”img/dot.gif\” border=0/&gt;”;[/php]
问：如何实现页面渐变效果？
答：将一下代码加入<head></head>中即可。
[php]&lt;meta http-equiv=”Page-Enter” content=”blendTrans(Duration=0.5)”&gt;
&lt;meta http-equiv=”Page-Exit” content=”blendTrans(Duration=0.5)” charset=”utf-8″&gt;[/php]
问：如何在地址栏显示个性化小图标?
答：将以下语句加入<head>与</head>之间
[php]&lt;link rel=”icon” href=”favicon.ico” type=”image/x-icon” /&gt;
&lt;link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /&gt;[php]
同时，制作一个ico文件上传到blog根目录。
<strong>问:为什么别人的阅读全文是没有侧栏,而我的有侧栏?</strong>
答：请在后台设置中，设置阅读blog关闭侧栏。其他类似
<strong>问：如何在网页中添加<strong>音乐</strong>播放器</strong>
答：音乐播放器有两种形式的。一种是内嵌在网页中，缺点是每次打开页面都要重新播放，优点是安装简单。另一种是采用框架内嵌，优点是音乐不会因为浏览blog而停顿重播，缺点是比较费事。关于这方面的问题，各个播放器的安装方式不同，请查阅相关文档。
<strong>问：如何采取树形导航栏？</strong>
答：树列式的分类导航
语法如下：
[php]——————————————————————————–
&lt;img src=”img/dot.gif”&gt;&lt;a target=”_self” href=”index.php”&gt;首页&lt;/a&gt;&lt;br/&gt;
&lt;img src=”img/dot.gif”&gt;&lt;a target=”_self” href=”index.php?job=showcat&amp;cat=0″ title=”****”&gt;+分类一&lt;/a&gt; &lt;a href=”rss2.php?catid=0″ target=”_self”&gt;&lt;img src=”img/xml2.gif” title=”得到些分类的RSS Feed” border=”0″ /&gt;&lt;/a&gt;&lt;br/&gt;
&lt;img src=”img/dot.gif”&gt;&lt;a target=”_self” href=”index.php?job=showcat&amp;cat=1″ title=”****”&gt;+分类二&lt;/a&gt; &lt;a href=”rss2.php?catid=1″ target=”_self”&gt;&lt;img src=”img/xml2.gif” alt=”得到些分类的RSS Feed” border=”0″ /&gt;&lt;/a&gt;&lt;br/&gt;
&lt;img src=”img/dot.gif”&gt;&lt;a target=”_self” href=”index.php?job=showcat&amp;cat=2″ title=”****”&gt;+分类三&lt;/a&gt; &lt;a href=”rss2.php?catid=2″ target=”_self”&gt;&lt;img src=”img/xml2.gif” alt=”得到些分类的RSS Feed” border=”0″ /&gt;&lt;/a&gt;&lt;br/&gt;
&lt;img src=”img/dot.gif”&gt;&lt;a target=”_self” href=”index.php?job=showcat&amp;cat=3″ title=”****”&gt;+分类四&lt;/a&gt; &lt;a href=”rss2.php?catid=3″ target=”_self”&gt;&lt;img src=”img/xml2.gif” title=”得到些分类的RSS Feed” border=”0″ /&gt;&lt;/a&gt;&lt;br/&gt;
&lt;a target=”_self” href=”index.php?job=guestbook”&gt;留言簿&lt;/a&gt;&lt;br/&gt;&lt;a target=”_self” href=”login.php”&gt;登陆&lt;/a&gt;&lt;br/&gt;
&lt;a target=”_self” href=”login.php?action=logout”&gt;登出&lt;/a&gt;&lt;br/&gt;&lt;a target=”_self” href=”index.php?job=register”&gt;注册&lt;/a&gt;&lt;br/&gt;
——————————————————————————–[/php]

说明: 1. “****”为该分类说明。 2. 如有更多分类，可按照分类一二三四方式再增加。 3. xml2.gif 为blog程序自带的。4.<img src=”img/dot.gif”>分类前面的小图片，可以自己选择图片和修改路径。5. 由于本blog未采用默认相册，相册路径为href=”gallery”，请修改成您的相册的路径，安装模板前请先修改该项。
感谢升浪投资·博客
问：如何更新表情图片？
答：如果想使用新表情，又不想使以前写的日志中用的表情变成红叉叉，解决的办法是：先打上自定义表情出错补丁，备份imge/emot里面的所有默认表情，然后全部删除，上传本模板中的表情，后台刷新表情，最后上传备份的所有默认表情，以后不要在后台使用刷新表情功能。当然如果你使用其他非32*32大小的表情图标，出现对不齐，错位等问题我无法解决。注意，只能在emot文件中最多放32张图片刷新表情，否则发生什么我没有试过。刷新后可以把备份的表情图片上传。(来自布罗特的Blog )
如果觉得上面这个方法难，教一个笨但是简单的办法。把所有的表情图片名字改成和原来的emot图片名字一样，然后覆盖即可。但是别把一张笑脸的图片命一个哭的名字，尽管这不碍事。
问：我的“查看全部连接”是一个表格形式的，而你的还有bob的“查看全部链接”是一行一行的，这是什么原因？修改什么地方呢？
答：在include/listlinks.php改，估计你用过Nicky’s Template，^_^，他改过那里
问：为什么我的表情图库显示的是16×2的样式，而别人的显示的是8×4的样式？
答：打开blog程序目录下的admin文件夹下的maintain.php
查找 $parts['emotnum']=
后面的数字默认是16，修改为你想要单行表情数，比如你上面的为8
推荐使用EmEditor编辑
问: 为什么我的模版总是不能和浏览器顶部紧贴,上面留出一行空白?
答: 这是bom存在的原因.运行a.php即可消除bom。要避免bom，推荐使用editplus编辑php文档和htm文档
问：为什么我在DW中修改htm，添加汉字后，打开是乱码？而英文却正常？
答：这是编码出错或混乱引起的。解决的办法是在editplus中打开文档，输入汉字，然后选择“另存为”，在编码中选择utf-8，覆盖原文件即可解决问题。
问：模板安装已解决，可是如何把新设置的模板设为默认呢？
答：装完了在模板前面勾上选为默认模板，确定提交不就可以了吗？
问：为什么别人的侧栏在左边，我的侧栏在右边？我如何才能把侧栏改到左边？
答：这个很简单就可以实现。打开index.htm文件，找到<td>{ mainbodyout }</td>，把这段代码剪切到<td>…</td> 后面就可以了。
问：为什么打开“全部链接”后，我所有的友情链接都看不见？
答：使用ctr+A看看是什么效果。如果把背景色设置的和文字的颜色一样，自然看不见了。友情链接的颜色在side A { ….. }中设置color属性，而打开“全部链接”后，背景颜色在colosheme.txt 中的$color1=” “处设置。
问：如何才能实现网页立体化？我看见许多网页都好象在背景上凸出来似的？
答：clean模板就实现了这个效果。做到这点不难，在clean模板的安装包内有一个new3.jpg的图片，在css样式表中maxbox处定义了背景图片为该图片。打开new3.jpg，可以看见中间是空白，两端是5px宽的灰色渐变效果。立体效果就是通过这张图片实现的。不妨多找一些类似的背景图片加以研究，看看人家是怎样做的以及如何和背景融合的。
问：如何加插 gif / png 到Bo-Blog 的杂项裡去?
答：在index.htm文件中的“杂项”内容div标签内，在</div>前添加代码<a href=”图片链接地址” target=”_blank”><img src=”图片地址(相对地址或绝对地址)” alt=”鼠标放在图片上的提示信息(可选)” border=”0″ /></a><br>
问：网页的滚动条颜色怎么设置?
答：推荐看这篇blog日志玩转网页滚动条
问：模版的作者为什么不尊重用户,搜索引擎搜索到的关键字全是模版作者的信息?
答：模版作者并不是不尊重用户，而是为了方便用户修改。任何一个模版，最起码需要模版的用户对它的关键字部分进行修改，以利于搜索引擎的robots对blog搜索。用户需要修改index和view两个文件中<head>…</head>之间的部分。关于这部分的知识，请参阅这篇blog日志：网页中META标签的使用
问：我的日志的字太小/太大了怎么调整？
答：修改css文件中相关部分的font-size属性，一般设置为12px比较合适，blog日志标题设置为14px，具体根据个人喜好和模版的风格调整
问：我安装了bo-blog，打开gravatar功能后，默认的“大头贴”图像不好看，我想使用个性化的“大头贴”怎么办？
答：做一张 80×80大小的jpg格式的图片，将其命名为gravatar.jpg，上传到img/文件夹下，覆盖原来的文件
问：我想知道如何在回复这里能显示头像，另外我想换个头像，不用狗狗的～怎么换呢？
答：你先需要去http://www.gravatar.com/议….或者关闭这个功能。
问：我想修改blog管理员回复时的标题栏颜色
答：修改colorsheme.txt 中 $color2=” “的色彩代码
问：<br>和<br/>有什么区别？
答：<br>换行不空格，<br/>换行空格
问:我自己配的颜色很难看,有没有好的配色工具?
答: 在web站点设计中，对网页进行配色通常是设计师的直觉感受或者多次反复实验：例如对网页颜色主色彩的选择，考虑各种颜色的色调、饱和度，等等…，最终才能达到比较好的配色效果。现在，网络上有一些专用于配色设计的调色板工具，对网页配色设计都很有价值。
个人觉得，比较好用、非常专业、同时对于网页设计师（更专注于网页配色）非常有帮助的一个在线免费工具
问：日志部分加密的代码是什么？
答：日志部分加密，仅管理员可见，