第8章.制作Blogbus模板设计模板在制作模Blogbus的功能板前，我们需要构思下如何设置模板的各个功能模块。大体上讲，模块分为间，日志区和副栏区。日志区里包含各种与日志相关的信息，比如日志主体，发表时日志TAG等等分类。副，日志栏区的内容则更加广泛，它包含有最新日志，最新留言，友情链接等小模块。在制作模图板前，通常会利用作图软件制作一个示意图出来，然后再分析下示意图，将示意中的HTML代码大体CSS来修饰HTML表示中的达框架用出来标记，，接最着终就可以用到示意图中的效果。下面“万恶的blogbus模板”所使以用的模板为例，来介绍下模板的制作过程。“万恶的blogbus模板”示意图模板布局在构思并的设计好模板示意图后，我们需要对模板的布局结构进行简单的分析，并写出主要HTML代码。在模板设计中常用的是两栏布局（如右图）这里的模板也同页面960px，日志区样采宽总宽用两度设为栏布局，度设为726px，副210px。栏区设为在对页面的布局结构大致了解后，我们写出下面这样的代码，用以构建出布局的整体框架。HTML部分代码：<divid="outerBox"><divid="header"></div><divid="main"></div><divid="side"></div></div>之所以将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中的代码。Index代码：<divid="outerBox"><divid="header"><h1><ahref="http://{#domain}">{#blog_name}</a></h1><p>{#blog_desc}</p></div><divid="main">{c:0}</div><divid="side">{c:1}</div></div>上面的代码中，我们用到了好几个系统封装代码，{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中的代码。Index-post代码：<!--list--><divclass="entryBox"><divclass="entryTitle">{#title_cat}</div><divclass="entryMeta">作者：{#author}发表于：{#date}{#time}</div><divclass="enteryBody">{#content}</div><divclass="entryFooter">Tags:{#tags},{#menubar}</div></div><!--/list-->{#pagenav}Index-p