第8章制作Blogbus模板

第第第第8888章章章章....制作制作制作制作BlogbusBlogbusBlogbusBlogbus模板模板模板模板设计模板在制作模板前，我们需要构思下如何设置模板的各个功能模块。大体上讲，Blogbus的功能模块分为日志区和副栏区。日志区里包含各种与日志相关的信息，比如日志主体，发表时间，日志分类，日志TAG等等。副栏区的内容则更加广泛，它包含有最新日志，最新留言，友情链接等小模块。在制作模板前，通常会利用作图软件制作一个示意图出来，然后再分析下示意图，将示意图中的大体框架用HTML代码表示出来，接着就可以用CSS来修饰HTML中的标记，最终达到示意图中的效果。下面以“万恶的blogbus模板”所使用的模板为例，来介绍下模板的制作过程。“万恶的blogbus模板”示意图模板布局在构思并设计好模板示意图后，我们需要对模板的布局结构进行简单的分析，并写出主要的HTML代码。在模板设计中常用的是两栏布局（如右图）这里的模板也同样采用两栏布局，页面总宽度设为960px，日志区宽度设为726px，副栏区设为210px。在对页面的布局结构大致了解后，我们写出下面这样的代码，用以构建出布局的整体框架。HTML部分代码：之所以将id名称为header、main、side的div标记放置在outerBox中，是因为我们需要利用outerBox将它们包围起来，从而更加方便我们后面的布局。id名称为header的div将用于放置blog名称和blog名称等信息，main则相当于日志区的外框，side相当于副栏区的外框。为了方便讲解，下面我们就开始在Blogbus中新建一个自定义模板，然后一步步地添加代码。我这里新建并使用了一个名称为“万恶模板教程”的模板，新建模板后，先删除各代码块中的代码，确保各代码块中均没有代码（如果代码块中的代码呈现灰色，只需要先去掉“使用默认时内容部分将不起作用”前的勾）。下面我们先来完成首页的代码。在第五章的学习中，我向大家介绍了首页的代码构成，首页的主要代码是由Index和Index-post组成的，其中Index的代码描述的是首页的大体布局，Index-post的代码描述的是首页中日志列表的格式。我们先来书写Index和index-post中的代码。Index中的大体框架代码，刚才已经写出来了，接下来只要在框架中填入系统封装代码，就可以完成首页的布局了。接下来我们看下index中的代码。divid=outerBoxdivid=header/divdivid=main/divdivid=side/div/divIndex代码：上面的代码中，我们用到了好几个系统封装代码，{c:0}和{c:1}已经介绍过了，{#domain}表示的是域名的意思，我这里的域名就是mobanxx-test.blogbus.com，{#blog_name}表示的是blog名称，我这里的名称是“mobanxx-test”。实际上，如果我们做出的模板只是为了自己使用的话，那么完全可以不使用{#blog_name}和{#domain}这两个系统封装代码（请参考第五章的实例）。当我们想要共享模板代码的时候，{#blog_name}和{#domain}这两个系统封装代码就有用处了。比如说，我在另外一个博客中使用{#blog_name}和{#domain}的时候，它就会被转换成那个博客的名称和博客描述。回忆下第五章的内容，我们知道index中的{c:0}会调用index-post中的代码，以显示日志列表。接下来我们来完成index-post中的代码。divid=outerBoxdivid=headerh1ahref=http://{#domain}{#blog_name}/a/h1p{#blog_desc}/p/divdivid=main{c:0}/divdivid=side{c:1}/div/divIndex-post代码：Index-post中的代码稍微复杂点，下面分别来解释各段代码表示的意思。在第五章中，我们了解到，!--list--!--list--!--list--!--list--...!--/list--!--/list--!--/list--!--/list--中的代码表示的是日志的显示格式，{#pagenav}表示的则是翻页的链接。在!--list--!--list--!--list--!--list--...!--/list--!--/list--!--/list--!--/list--中我书写了一个div，将其class名称设置为entryBox，我们将这个div作为单篇日志的外框，用以包围住日志中的各部分代码。这样做的好处就是使得整个代码的结构清晰明了，另外也方便了后面的样式调整。接下来再来分析下日志区域的主要代码。!--list--divclass=entryBoxdivclass=entryTitle{#title_cat}/divdivclass=entryMeta作者：{#author}发表于：{#date}{#time}/divdivclass=enteryBody{#content}/divdivclass=entryFooterTags:{#tags},{#menubar}/div/div!--/list--{#pagenav}!--list--divclass=entryBox此处省略部分代码/div!--/list--{#pagenav}{#title_cat}表示的是日志的标题和所处分类，{#author}表示的是作者简介，{#date}{#time}表示的是日志发表日期和时间，{#content}表示的是日志的内容部分，{#tags}表示的是日志用到的关键词，{#menubar}表示的是日志评论、共享等链接。对于日志标题和分类，我用了一个div标记将其包围起来，并设置class名称为entryTitle，而对于作者以及日志发表时间，我用了一个class名称为entryMeta的div将它们包围起来，另外还有日志内容和评论、共享链接，我用class名称分别为enteryBody和entryFooter的div将其包围起来。在上面的代码中，我们看到了大量的div标记。之所以这样使用，是为了将各部分代码区分开，下面我们来看下博客首页的显示效果，并注意看看div标记的作用。上面的效果图，我标记出了#header、#main和#side，它们分别表示页面中主要的三大div区域（请参考index中的代码）。另外还有一个outerBox我没有标记出来，请大家对照index中的代码想想outerBox的所代表的区域。#outerBox是包围#header、#main和#side的区域，我们可以在css中设置outerBox的宽度，这样的话，就可以很方便的实现两栏布局了。divclass=entryTitle{#title_cat}/divdivclass=entryMeta作者：{#author}发表于：{#date}{#time}/divdivclass=enteryBody{#content}/divdivclass=entryFooterTags:{#tags},{#menubar}/divCSS代码：上面的代码中，首先定义了外框outerBox的宽度，然后分别定义了#main和#side的宽度和浮动。我们先来看下效果：日志区浮在左边副栏区浮在右边接下来，我们来调整日志区的元素间距：下面是调整后的效果示意图：#outerBox{width:960px;}#main{width:726px;float:left;}#side{width:210px;float:right;}.entryBox{margin:0px0px18px0px;}.enteryBody{margin:14px0px14px0px;}在上面的示意图中，红色虚线表示的是.entryBox区域（即divclass=entryBox.../div），它里面是单篇日志的各种信息。日志的内容是包含在.entryBody中的（即divclass=entryBody.../div），也就黑色虚线框住的区域。我在css中，首先设置了.entryBox的一个属性：margin，这个属性表示的是盒子与其底部的间距。之前曾经介绍过padding，它表示的是内补丁，这里的magin可以视作为盒子的外边距。与padding相似，margin也分为上、下、左、右四个方向，只不过margin只影响其自身与邻近元素的间距，并不会对盒子的整体宽度或高度产生影响。margin属性的值书写顺序也是按上右下左的顺序来写的，即：回到.entryBox的属性，我们看到.entryBox中定义的margin为：也就是说，这里定义了.entryBox的底边距为18px，其它三边均为0px。从上面的效果示意图中也可看出，红色框区域之间存在着一小段间距，根据css的设置来看，这个间距的大小就是18px。因为在css中定义的是底部边距，所以页码与它上边那个.entryBox的间距也是18px。在理解了.entryBox的边距设置后，再来分析.entryBody的边距就很简单了。可以看到.entryBody中定义的margin为上下边距14px，左右边距为0。大家不妨自己试着调margin:上边距右边距下边距左边距;margin:0px0px18px0px;.enteryBody{margin:14px0px14px0px;}整下左右的边距，看看会有什么效果...在简单调整过日志区元素间距后，我们再来利用上一章中介绍的背景图片的使用技巧，来构建内容区和副栏区的阴影框架。首先修改index中的{c:0}为下面的代码：从上面的对比中，可以看到我增加了三个div，它们的id名称分别是mainTop、mainContent、mainBottom，其中mainTop和mainBottom这两个div是为放置框架图的顶部和底部而设置，而日志的主体{c:0}则被放在mainContent中。接下来要在css代码中为它们定义样式了。根据上一章中的介绍，我将#mainTop和#mainBottom的宽度和高度设置成726px和16px，因为接下来要用到的背景图片的尺寸正是这个尺寸，也就是说，将#mainTop和#mainBottom设置成正好能放下背景图的尺寸。#mainContent中放置的是日志主体，所以只需要设置它的宽度为726px即可，背景图片设置成纵向重复，这样就能自动适应日志中内容的变化了。这里的background属性的值中，只写了背景图片和背景的重复方式，其它几项背景属性就按默认值来显示。下面来看下设置过背景图片后的显示效果：原代码修改后代码divid=main{c:0}/divdivid=maindivid=mainTop/divdivid=mainContent{c:0}/divdivid=mainBottom/div/div#mainTop{width:726px;height:16px;background:url()no-repeat;}#mainContent{width:726px;background:url()repeat-y;}#mainBottom{width:726px;height:16px;background:url(