有关Bo-blog模板制作(二)
Bo-Blog 风格制作手册+经验分享专贴![转]
转自BOBLOG论坛 作者:Steven
第一部分 风格组成
一个完整的Bo-Blog 2.0的风格(以下简称风格)由以下几个部分组成:
风格文件夹,位于template/文件夹下
|- 风格的CSS文件 style.css;
|- 风格的图片文件夹;
|- 风格的信息文件 info.php;
|- 风格的结构定义文件 element.php;
|- 风格的缩略图文件。
其中,粗体字标出的文件为必需。
这些文件的作用和注释如下:
1. CSS文件
该文件是整个风格的最主要部分,我们建议所有的风格都尽力在配合默认架构 default/template.php 文件的基础上修改。也就是说,建议只修改CSS文件达到您想要的效果,而不是修改模板架构本身。CSS+DIV的网页排版方式符合标准,也能创造出风格迥异的丰富效果来。
有关CSS文件中各个Class的命名和对应区域,请阅读第三部分。
2. 风格的图片文件夹
我们建议您在专门建立一个文件夹以存放该风格用到的图片,而不是将所有图片都存放在风格的根目录下。
推荐您在风格所在的文件夹下建立images子文件夹,放置用到的图片文件。
3. 风格的信息文件 info.php
这个文件存放了风格的作者等重要信息。它必须是没有错误的PHP文件,编码必须采用UTF-8。(我们推荐使用的文本编辑器见第二部分。)
下面是默认风格的 info.php ,存在于 template/default/ 文件夹下。结合这个文件为您说明该文件的结构。注意:双斜杠 // 后面以及 和 /* 与 */ 之间的文字为注释,事实上您的文件不需要包括这些注释。
引用
//PHP文件开始。
//请使用这样的形式而不是short tag,即:不要缩写成
$template[\'id\']=\”60A13BBE-C069-47A1-A0A1-FA7C4ECCAA47\”;
//这一行的引号中是这个风格的ID。ID是便于程序识别一个风格的一个字符串,可以是任何拉丁字符、数字等。比如 mystyle、style200601等都是允许的。但为了减少你的ID和任何人发布的其它风格重复的概率,建议您将ID设置得复杂一些。一个建议是像默认风格这样使用GUID。
$template[\'name\']=\”Default\”;
//引号中是这个风格的名字。
$template[\'author\']=\”Bob Shen\”;
//引号中是这个风格的作者。注意这里是支持HTML代码的。
$template[\'intro\']=\”Default skin of Bo-blog 2.0.1.\”;
//引号中是这个风格的简介。
$template[\'dirname\']=\”default\”;
//引号中是这个风格所在文件夹的名字。假如您的风格名为pure,那么它的所有文件就应该存放在 template/pure/ 下,而这里的值也应该改为 pure。
$template[\'thumbnail\']=\”thumb.jpg\”;
//引号中是这个风格的缩略图文件的文件名。缩略图应该放置在这个风格文件夹下。文件名在此指定。
$template[\'structure\']=\”template/default/elements.php\”;
//引号中是这个风格的结构定义文件的位置和文件名。对于只修改CSS就能完成的风格,您不必再在风格文件夹中放置一个 elements.php,而完全可以采用默认的,也就是保持该行不修改。
$template[\'images\']=\”template/default/images\”;
//引号中指定了blog界面上的部分图片的位置。这些图片包括RSS图标、上/下一篇日志的图标等等。具体的文件名请阅读第四部分。
$template[\'css\'][0]=\”template/default/styles.css\”;
/* 引号中是CSS文件的位置和文件名。Bo-Blog 2.0支持同一风格载入多个CSS。因此这里可以写成数组的形式。比如,如果您的风格用到了3个CSS文件,分别是 structure.css、style.css、extra.css,您可以写成:
$template[\'css\'][0]=\”template/default/structure.css\”;
$template[\'css\'][1]=\”template/default/style.css\”;
$template[\'css\'][2]=\”template/default/extra.css\”;
注意数组上标从 0 开始。
这些css文件会被程序自动全部载入模板。*/
4. 风格的结构定义文件 element.php
这也是一个PHP文件,也必须使用UTF-8编码。它规定了模板的结构,也就是各个区域具体的HTML代码。有关这个文件的详细说明,请参考第五部分。
5. 风格缩略图文件
大小是400*300像素,建议为JPG、GIF和PNG格式。为了不增加额外的空间负担,不建议您截取精读太高的缩略图。
第二部分 一些建议和要求
1. 文本编辑器
编辑文本文件的编辑器可谓多如牛毛,您完全可以选择最顺手的使用。但是有一些情况您需要了解。
Bo-Blog采用 UTF-8 编码,因此所有文本文件(风格中涉及的是PHP文件)必须储存为 UTF-8 编码。另外,部分文本编辑软件,如Dreamweaver、记事本等,在保存UTF-8文件时会在文件最开始加入UTF-8识别记号(BOM)。BOM在WINDOWS下打开文件时不可见,但PHP在读取文件时仍会将其作为文件的一部分,由此会产生cookie失效(无法登入),模板无法顶住页面顶部等现象。
解决的方法:
建议您使用 Editplus 2.12 或者 EmEditor 编辑PHP文件。它们对无BOM的UTF-8文件兼容较好;
UltraEdit用户需将 Write UTF-8 BOM header to ALL UTF-8 files when saved 选项设置为关;
其它文本编辑器用户,在编辑完后如发现程序异常,可参考这篇文章解决。
2. 针对发布者的建议
您可以将您修改、制作的风格发布到论坛的2.0模板风格专版,我们会非常感谢您的分享。
对于出色的风格,将被收入官方网站的“风格”栏目(筹)。
对发布者有这样的一些建议:
1. 兼容性
建议您在制作风格时考虑到浏览器的兼容问题。由于 2.0 采用的是CSS+DIV布局,因此可能在不同的浏览器上存在不同的显示效果。建议您在发布时考虑到主流浏览器的兼容问题。一个方法是:在发布的帖子里注明:在IE下测试通过;暂不兼容Firefox;可在IE、Fx、Opera下正确显示 等等类似的字样。
对于收入官方风格栏目的风格,至少需要做到同时与IE和Firefox兼容。
2. thumb.db
Windows XP会在您的图片文件夹下生成一个名为 thumb.db 的隐藏文件。当您把这个文件也打包到压缩包里时,会导致压缩文件体积增大不少!所以建议您不要把这个文件放到压缩包里。以常用软件winrar为例,可以在压缩完成后,打开压缩文件,就能看到这个文件是否存在了。
3. 压缩格式
推荐的压缩包格式为: Zip和Gzip两种。
4. 源文件
您可以自主决定是否将图片的源文件放入压缩包。如果您不打算提供源文件的话,建议您提供一张没有加过自己站名的空白logo图,方便下载者修改。当然,这都出于自愿。
5. elements.php 文件
这个文件可能会随着程序的不断完善而不断修改,因此如果非必要,建议您使用默认的elements.php,也就是在风格的info.php中将structure指向template/default/elements.php(请参考第一部分的说明)。