BO-BLOG模板制作指南(中、下)

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

再分析一段代码
[php]<DIV onclick=”toggle_collapse(‘bar4′)”>{ langindex5 }</DIV>
<DIV id=bar4 name=bar4>{ allnew }</DIV><br/>[/php]

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

由于{ langindex5 } 对应”最新日志”,自然第二个div容器就对应{ allnew }最新记录列表;可以在代码中看见,一共有10对这样的小标题+子内容组合。

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

如果不对页面的布局有所修改的话,大部分的模版制作工作将集中于制作图片修饰美化模版、在html文件中添加css样式、修改css样式表中的相关属性完成图片显示和配色。

下面我们重点分析clean模版的css样式表new42.css

[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一起使用//
}

INPUT, TEXTAREA, SELECT { //输入、文本框、选择//
background-color: #FFF; //定义背景色//
border: #E8E8E8 1px solid; //定义边框颜色、宽度、形式//
}

.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; //背景图片位置居中//
}

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
}

.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的&amp;lt;body&amp;gt;…&amp;lt;/body&amp;gt;之间,最开始有这么一段代码
&amp;lt;div align=”center”&amp;gt;
&amp;lt;table border=”0″ cellpadding=”0″ cellspacing=”0″&amp;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中有这行代码&amp;lt;td&amp;gt;{ mainbodyout }&amp;lt;/td&amp;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;amp;line; 评论 (2) &amp;amp;line; 引用 (0) &amp;amp;line; 阅读28次 &amp;amp;line; 编辑 &amp;amp;line; 删除 &amp;amp;line; 清空回复 &amp;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]&amp;lt;!– BEGIN maingal –&amp;gt;
相册的总框架
{ galleryname } xx的相册
{ gallerymain } 相册主体部分
&amp;lt;!– END maingal –&amp;gt;

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

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

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

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

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

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

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

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

D. 模板组件-定义文档:

installinfo.txt 安装时的信息
写法如下:
[php]&amp;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]&amp;lt;?
//php文件开始,不用修改
$parts['mobile']=”&amp;lt;img src=\”img/mp.gif\” alt=\”{ chr }\”/&amp;gt;”;
//手机发表的日志名和回复之前的修饰图片。
//{ chr }会被替换为(以下用=&amp;gt;表示)“该日志由<strong>手机</strong>发布”。
//示例:仅用文字wap体现手机发表的特征:$parts['mobile']=”[WAP]“;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$parts['showcatrss']=”&amp;lt;a href=\”{ url }\”&amp;gt;&amp;lt;img src=\”img/xml2.gif\” alt=\”{ chr }\” border=\”0\”/&amp;gt;&amp;lt;/a&amp;gt;”;
//查看该分类的<strong>rss</strong> feed
//{ url }=&amp;gt;该分类rss的地址 { chr }=&amp;gt;“查看该分类的rss feed”
//示例:仅用RSS字样代替这个图片: $parts['showcatrss']=”&amp;lt;a href=\”{ url }\”&amp;gt;RSS&amp;lt;/a&amp;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']=”&amp;lt;img src=\”img/dot.gif\” border=0/&amp;gt;”;[/php]
问:如何实现页面渐变效果?
答:将一下代码加入<head></head>中即可。
[php]&amp;lt;meta http-equiv=”Page-Enter” content=”blendTrans(Duration=0.5)”&amp;gt;
&amp;lt;meta http-equiv=”Page-Exit” content=”blendTrans(Duration=0.5)” charset=”utf-8″&amp;gt;[/php]
问:如何在地址栏显示个性化小图标?
答:将以下语句加入<head>与</head>之间
[php]&amp;lt;link rel=”icon” href=”favicon.ico” type=”image/x-icon” /&amp;gt;
&amp;lt;link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /&amp;gt;[php]
同时,制作一个ico文件上传到blog根目录。
<strong>问:为什么别人的阅读全文是没有侧栏,而我的有侧栏?</strong>
答:请在后台设置中,设置阅读blog关闭侧栏。其他类似
<strong>问:如何在网页中添加<strong>音乐</strong>播放器</strong>
答:音乐播放器有两种形式的。一种是内嵌在网页中,缺点是每次打开页面都要重新播放,优点是安装简单。另一种是采用框架内嵌,优点是音乐不会因为浏览blog而停顿重播,缺点是比较费事。关于这方面的问题,各个播放器的安装方式不同,请查阅相关文档。
<strong>问:如何采取树形导航栏?</strong>
答:树列式的分类导航
语法如下:
[php]——————————————————————————–
&amp;lt;img src=”img/dot.gif”&amp;gt;&amp;lt;a target=”_self” href=”index.php”&amp;gt;首页&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;img src=”img/dot.gif”&amp;gt;&amp;lt;a target=”_self” href=”index.php?job=showcat&amp;amp;cat=0″ title=”****”&amp;gt;+分类一&amp;lt;/a&amp;gt; &amp;lt;a href=”rss2.php?catid=0″ target=”_self”&amp;gt;&amp;lt;img src=”img/xml2.gif” title=”得到些分类的RSS Feed” border=”0″ /&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;img src=”img/dot.gif”&amp;gt;&amp;lt;a target=”_self” href=”index.php?job=showcat&amp;amp;cat=1″ title=”****”&amp;gt;+分类二&amp;lt;/a&amp;gt; &amp;lt;a href=”rss2.php?catid=1″ target=”_self”&amp;gt;&amp;lt;img src=”img/xml2.gif” alt=”得到些分类的RSS Feed” border=”0″ /&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;img src=”img/dot.gif”&amp;gt;&amp;lt;a target=”_self” href=”index.php?job=showcat&amp;amp;cat=2″ title=”****”&amp;gt;+分类三&amp;lt;/a&amp;gt; &amp;lt;a href=”rss2.php?catid=2″ target=”_self”&amp;gt;&amp;lt;img src=”img/xml2.gif” alt=”得到些分类的RSS Feed” border=”0″ /&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;img src=”img/dot.gif”&amp;gt;&amp;lt;a target=”_self” href=”index.php?job=showcat&amp;amp;cat=3″ title=”****”&amp;gt;+分类四&amp;lt;/a&amp;gt; &amp;lt;a href=”rss2.php?catid=3″ target=”_self”&amp;gt;&amp;lt;img src=”img/xml2.gif” title=”得到些分类的RSS Feed” border=”0″ /&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;a target=”_self” href=”index.php?job=guestbook”&amp;gt;留言簿&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;&amp;lt;a target=”_self” href=”login.php”&amp;gt;登陆&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;a target=”_self” href=”login.php?action=logout”&amp;gt;登出&amp;lt;/a&amp;gt;&amp;lt;br/&amp;gt;&amp;lt;a target=”_self” href=”index.php?job=register”&amp;gt;注册&amp;lt;/a&amp;gt;&amp;lt;br/&amp;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站点设计中,对网页进行配色通常是设计师的直觉感受或者多次反复实验:例如对网页颜色主色彩的选择,考虑各种颜色的色调、饱和度,等等…,最终才能达到比较好的配色效果。 现在,网络上有一些专用于配色设计的调色板工具,对网页配色设计都很有价值。
个人觉得,比较好用、非常专业、同时对于网页设计师(更专注于网页配色)非常有帮助的一个在线免费工具
问:日志部分加密的代码是什么?
答:日志部分加密,仅管理员可见,

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar
十年·肖申克的救赎影评
埃微I5plus
十年沉船,苍苔不生。
命运爱情之六 战友

评论已关闭!

目前评论:59   其中:访客  43   博主  16

                • avatar Spam 0

                  :cry: 垃圾评论Spam。。。 :evil: