本手册最后修正于： 2006年10月21日[swf=800,600]attachment/200701/skintutorial.swf[/swf]

第一部分 风格组成
一个完整的Bo-Blog 2.0的风格（以下简称风格）由以下几个部分组成：
|- 风格的CSS文件 style.css；
|- 风格的信息文件 info.php；
风格的结构定义文件 element.php；


1. CSS文件
有关CSS文件中各个Class的命名和对应区域，请阅读第三部分。
2. 风格的图片文件夹
推荐您在风格所在的文件夹下建立images子文件夹，放置用到的图片文件。
3. 风格的信息文件 info.php
下面是默认风格的 info.php ，存在于 template/default/ 文件夹下。结合这个文件为您说明该文件的结构。注意：双斜杠 // 后面以及 和 /* 与 / 之间的文字为注释，事实上您的文件不需要包括这些注释。

QUOTE:
//PHP文件开始。

//这一行的引号中是这个风格的ID。ID是便于程序识别一个风格的一个字符串，可以是任何拉丁字符、数字等。比如 mystyle、style200601等都是允许的。但为了减少你的ID和任何人发布的其它风格重复的概率，建议您将ID设置得复杂一些。一个建议是像默认风格这样使用GUID。
$template[\'name\']=\"Default\";

//引号中是这个风格的作者。注意这里是支持HTML代码的。
$template[\'intro\']=\"Default skin of Bo-blog 2.0.1.\";

//引号中是这个风格所在文件夹的名字。假如您的风格名为pure，那么它的所有文件就应该存放在 template/pure/ 下，而这里的值也应该改为 pure。
$template[\'thumbnail\']=\"thumb.jpg\";

//引号中是这个风格的结构定义文件的位置和文件名。对于只修改CSS就能完成的风格，您不必再在风格文件夹中放置一个 elements.php，而完全可以采用默认的，也就是保持该行不修改。
$template[\'images\']=\"template/default/images\";

/ 引号中是CSS文件的位置和文件名。Bo-Blog 2.0支持同一风格载入多个CSS。因此这里可以写成数组的形式。比如，如果您的风格用到了3个CSS文件，分别是 structure.css、style.css、extra.css，您可以写成：
$template[\'css\'][1]=\"template/default/style.css\";
注意数组上标从 0 开始。


这也是一个PHP文件，也必须使用UTF-8编码。它规定了模板的结构，也就是各个区域具体的HTML代码。有关这个文件的详细说明，请参考第五部分。
5. 风格缩略图文件

第二部分 一些建议和要求
1. 文本编辑器
Bo-Blog采用 UTF-8 编码，因此所有文本文件（风格中涉及的是PHP文件）必须储存为 UTF-8 编码。另外，部分文本编辑软件，如Dreamweaver、记事本等，在保存UTF-8文件时会在文件最开始加入UTF-8识别记号（BOM）。BOM在WINDOWS下打开文件时不可见，但PHP在读取文件时仍会将其作为文件的一部分，由此会产生cookie失效（无法登入），模板无法顶住页面顶部等现象。
解决的方法：
UltraEdit用户需将 Write UTF-8 BOM header to ALL UTF-8 files when saved 选项设置为关；

2. 针对发布者的建议
对于出色的风格，将被收入官方网站的“风格”栏目（筹）。
对发布者有这样的一些建议：
1. 兼容性
对于收入官方风格栏目的风格，至少需要做到同时与IE和Firefox兼容。
2. thumb.db

3. 压缩格式

4. 源文件

5. elements.php 文件

第三部分 CSS
1. 总布局

提示：使用Firefox的DOM查看器可以方便地查看页面的结构。

总布局参考图如下：
图中色块代表了一个div，色块注释文字表示的是这个div的class（或ID） name。
请点击在新窗口中查看图片。
[img align=l]http://www.bo-blog.com/weblog/attachment/css.png" >

2. CSS详解

2.1 整体框架
#innerWrapper - 内嵌在wrapper里的整个页面的框架。
2.2 顶部框架
#innerHeader - 内嵌在header里的框架。
h1 - blog的标题。
menu - blog的顶部模块（导航条）。
2.3 主体框架

2.4 侧边栏框架
#innerSidebar - 内嵌在sidebar内的框架。
.panel - 具体到某一个侧边栏项目的总框架。
.panel-content - 侧边栏项目的主要内容区域。
.panel-content li.indent - 侧边栏列表项缩进后的样式（如链接前的列表符号）。

2.5 主内容框架
#innerContent - 内嵌于content的框架。
.announce-content - 公告内容样式。
.article-bottom - 分页条（位于底部）样式。
.pagelink-current - 当前页文字样式。
.textbox-title - 日志标题位置样式。
.textbox-label - 发表日期栏样式。
.textbox-content - 日志内容样式。
.textbox-adminbar - 管理工具条样式。
.tags - tags显示条样式。
.next-article - 下一篇提示文字样式。
2.6 日历部分
.calendar-main - 日历总体样式。
.calendar-year - 年的样式。
.calendar-weekday-cell - 星期的样式。
.calendar-saturday - 星期六的样式。
.calendar-today - 今日样式。
2.7 评论显示框
.commentbox-title - 评论标题样式。
.commentbox-content - 评论内容样式。
.trackbackbox-title - trackback标题样式。
.trackbackbox-content - trackback内容样式。
2.8 表格样式
.listbox-table - 表格的宽度。
.listbox-entry - 表格正文文字样式。
2.9 添加评论框
.formbox-title - 评论表单标题文字样式。
.panel-smilies-title - 表情栏文字样式。

2.10 提示页样式
.messagebox-title - 消息框标题。
.messagebox-bottom - 消息框底部文字样式。
2.11 细节样式
.quote - 引用框整体框架。
.quote-content - 引用框内容样式。
2.12 底部框架
#innerFooter - 底部内嵌框架。

第四部分 风格所需图片
以下介绍位于 $template[\'images\'] 所在位置（参考第一部分）的图片名称和作用：
detail.gif - 查看用户列表时，点击查看用户资料的图标（默认：一个小人）
email.gif - 评论和留言中，点击给他/她发邮件的图标（默认：一个信封）
homepage.gif - 评论和留言中，点击访问他/她的主页的图标（默认：一个外部链接箭头）
readmore.gif - 查看更多内容（默认：多页纸重叠）
rss.png - 侧边栏分类名称旁的RSS链接所用图标（默认：写有rss字样的方框）
toolbarfontsize.gif - 日志阅读工具栏的字体大小提示图标（默认：一个向右的箭头）
toolbarprevious.gif - 日志阅读工具栏的上一篇日志提示图标（默认：一个向上的箭头）
toolbarsave.gif - 日志阅读工具栏的保存本文的图标（默认：一页纸）
viewimage.gif - 查看图片前的链接图标（默认：一张照片）

提示：

第五部分 elements.php文件
下面解释elements.php文件的作用和内容。

Element的名称和含意对照如下：
$elements[\'header\'] 文件开始
$elements[\'mainpage\'] 日志页面
$elements[\'displayside\'] 侧边栏
$elements[\'footer\'] 文件结束
$elements[\'sideblock\'] 侧栏项目
$elements[\'excerptontop\'] 置顶的摘要
$elements[\'listbody\'] 日志列表
$elements[\'comment\'] 评论
$elements[\'formreply\'] 评论发表框
$elements[\'entryadditional\'] “查看更多”区域
$elements[\'contentpage\'] 内容页
$elements[\'register\'] 注册表单
$elements[\'normaltablewithtitle\'] 一般表格（带有表格标题）
$elements[\'eachlink\'] 链接页（单项）
$elements[\'tips\'] 提示信息的页面
1. 被替换标签以 {开头，以}结束，在模板解析时会被替换为实际的内容。例如，星标的标签为

例如，$elements[\'sideblockcategories\'] 可定义名为 categories 的项目（即分类项目）的html。

第六部分 标签
用{}包含起来的是“标签”，标签可以被解释成具体的html内容。其意义如下：
注1： 标有*号的是2.0.3起新增的标签。
注2： 各个标签在其规定的区域内可直接使用，例如在 $elements[\'header\'] 区域中，{blogkeywords}可直接输出blog关键词。但这些标签不是全局性的，当在 $elements[\'displayheader\'] 中引用时，不会被解释。在Bo-blog 2.0.3以前的版本中，您无法跨区域使用标签，但 2.0.3 版本起，程序提供了一个跨区域引用标签的方法。要使用非本区域中定义的标签，请使用 <!--global:{标签名}--> 。例如，在本例中，书写 <!--global:{blogkeywords}--> 即可输出blog关键词。
1. $elements[\'header\'] 文件开始
blogdesc - blog描述语
baseurl - <baseurl>设置
csslocation - CSS载入代码
ajaxjs - 载入Ajax所需js代码

blogname - blog名
sectionheadcomponents - 顶部导航内容（如首页、链接、Tags等），生成的是一组列表（<li>）
3. $elements[\'mainpage\'] 日志页面
topannounce - 顶部公告内容
ifbottompage - 底部分页条显隐状态（block/none）
pagebar - 分页条完整内容 （包含当前页面指示、分页选择、上下页选择）
previouspageurl - 上一页的链接地址
turningpages - 翻页部分

mainpart - 页面整体内容，由具体的分页面生成
5. $elements[\'displayside\'] 侧边栏
siderbarcounter - 总共显示了几个侧边栏项目
6. $elements[\'displayfooter\'] 底部

此部分无任何标签
8. $elements[\'msgbox\'] 出错/成功信息提示框 （废弃）

id - 该侧边栏项目的识别名
ifextend - 是否展开（block/none）

entrystar - 星标
baseurl - 不带链接的日志标题
entryabsurl - 日志链接URL（绝对链接）
entrydate - 完整的日志发布日期 （年/月/日）
entrydatem - 日志发布日期之‘月’
entrytime - 日志发布时刻
entrycontent - 日志内容
tags - “Tags”
entrycateicon - 所属分类的分类图标
entrycomment - “评论”（评论数）
entrytb - “引用”（引用数）
entryviews - “阅读”（阅读次数）
ifadmin - 管理的链接
*entrytburl - 引用传输的URL
topid - 置顶日志的唯一id
next - 下一篇日志的链接和标题

此部分支持标签与 $elements[\'excerpt\'] 完全一致
12. $elements[\'viewentry\'] 查看日志

此部分支持标签与 $elements[\'excerpt\'] 完全一致
14. $elements[\'listbody\'] 日志列表

replier - 评论人
replierhomepage - 评论者的主页地址
replytime - 评论时间
deladminreply - 移除管理员回复的链接
replycontent - 评论内容
commentid - 管理员回复id
adminreplycontent - 管理员回复的内容
adminreplybody - 管理员评论输入框
16. $elements[\'trackback\'] 引用
tbtime - 引用传送时间
tburl - 引用来源URL
tbcontent - 引用内容
17. $elements[\'formreply\'] 评论发表框
formtitle - 表单标题
disablehtml - html可用状态
disableemot - 表情可用状态
replier - 当前的评论者名称
password - 当前的评论者密码
repurl - 评论者网站地址
ifneednopswend - 是否显示密码输入框（-->）
ubbcode - UBB工具条
rand - 随机数，只起到强制浏览器更新验证码的作用，非验证码本身
hiddenareas - 表单隐藏数据
18. $elements[\'endviewentry\'] 查看日志的补充
form_reply - 该日志的评论区域
19. $elements[\'entryadditional\'] “查看更多”区域

lvstart - 是否显示验证码（<!--）
rand - 随机数，只起到强制浏览器更新验证码的作用，非验证码本身
21. $elements[\'contentpage\'] 内容页
contentbody - 该页内容
22. $elements[\'taglist\'] tags
tagcontent - tag页的内容

job - 当前表单动作
registerbody - 表单整体内容
24. $elements[\'normaltable\'] 一般表格

title - 标题

text - 副标题列

logo - 链接logo
desc - 链接描述
28. $elements[\'linkdiv\'] 链接页（组）
tablebody - 链接组内容
29. $elements[\'tips\'] 提示信息的页面
blogdesc - blog描述语
csslocation - CSS载入代码
tips - 信息主体内容