第5章.Blogbus新模板系统封装代码
这一章，我将通过实例，向大家介绍下Blogbus新模板系统的封装代码，并让大家了解使用封装代码的方法。以下实例部分仍然接着上一章的实例，在开始讲解前，我们先来看下自定义模板的CSS代码块和Index代码块的代码：
CSS代码块：
Index代码块：
上面这些代码是我在前两章的实战Blogbus模板中用作示例的代码，在此基础上，我们再来写几段代码，以便向大家介绍Blogbus模板系统中的封装代码。
CSS代码块暂时保持不变；
Index代码块（Index表示首页的意思）：
Index-post 代码块（post 是指博客中的日志，Index-post 是指首页的日志）
：
其它各代码块为空白；
Index代码块，表示的是博客首页（以及分类、关键词页面等）的代码，我们先来分析下示例中的代码。可以看到，Index中代码，只是在原有代码的基础上加了下面的代码：
{c:0}
<p>上面的内容为日志区</p>
{c:0}是Blogbus新模板系统中极为重要的一个封装代码，它代表的是博客的日志区，实际上，{c:0}的作用只是调用Index-post中的代码。稍后在分析页面源代码的时候，我们就能明白是怎么回事了。
与{c:0}类似的封装代码还有{c:1}，它代表的是侧边栏。侧边栏中的模块可以在“布局设置”功能中到。为简单起见，这里就没把{c:1}写在示例代码中了。大家可以在看完这章的教程后，自己动手试验下。
接着我们再来分析下Index-post中的代码：
<!--list-->
...
<!--/list-->
上面这段标记在Blogbus模板系统中代表的是日志区域的开始和结束，这段标记中间的代码就是控制日志显示效果的代码了。
========{#title_cat}=========={#content}=========={#menubar}========
上面代码中的一连串的=是我为了方便演示而写上去的，并没有其它的用处。因此这里我们只需要关注红部分的代码即可，同{c:0}一样，这些红的代码也是Blogbus模板系统的封装代码，我们注意到这里的代码，它们的书写格式有相同点：{#英文字符}
{#title_cat}其中的title表示的是日志的标题（title），而cat则代表的是日志所属的分类（category），
{#content}中的content代表的则是日志的主体内容（content)，
{#menubar}中的menubar代表的是日志主体内容下方一些菜单链接。
另外，在<!--list-->...<!--/list-->中，还存在其它几个封装代码，大家试着分析下它们代表的意思：
{#url}(日志的网址)
{#title}(日志的标题)
{#cat}(日志所属分类)
{#date}（日志发布的日期）导航页源码
{#time}（日志发布的时间）
{#tags}（日志所属的Tag，即关键词）
{#author}(日志作者)
需要注意的是，上面列举的封装代码，只在<!--list-->...<!--/list-->中起作用，如果你将
这些封装代码用在<!--list-->...<!--/list-->之外的话，它们只会按普通的字符显示。
在Index-post代码块的最后，我们还注意到另外一个封装代码：{#pagenav}它代表的是翻页导航（Page Navigation），它必须置于<!--list-->...<!--/list-->之外才能起作用。
好了，在了解过系统封装代码所表示的意思后，我们先一起来看下博客首页的显示效果。
请大家对照下Index和Index-post中的代码，看看封装代码在页面上的显示效果。可以看到Index中的{c:0}被Index-post中的代码所替换，也就是说，{c:0}调用了Index-post中的代码。
接下来，我们来查看下博客首页的源代码。
试着用第3章介绍的HTML标记的知识来分析下颜标记部分的代码，你就会发现，这些代码其实都很简单。
大家可能注意到了，上面的首页截图中，只有一篇日志，那要是两篇日志，甚至更多日志的话，显示效果会是什么样呢？
从上面的效果中，我们可以知道Index-post中的<!--list-->...<!--/list-->规定了日志区的显示格式，也就是说，首页上的每篇日志都会按照<!--list-->...<!--/list-->当中的格式来显示。
因为篇幅的关系，我就不对Detail（Detail的英文意思是细节，这里表示博客的日志页）和Detail-post（表示博客日志页当中的日志）中的封装代码进行详细分析了，因为在代码的使用方法上，Index/Index-post和Detail/Detail-post中的封装代码其实是一样的。
不过，需要注意的就是，Index-post中的{#pagenav}在Detail-post中不起作用，日志页中的翻页代码是{#pre}（previous的缩写）和{#next}，它们分别表示的是当前日志的上一篇日志的链接和当前日志的下一篇日志的链接。与{#pagenav}用法上相同，{#pre}和{#next}只能用在<!--list-->...<!--/list-->之外。
上面已经把Blogbus模板系统中常见的系统封装代码介绍过了，请大家自己动手试验下各个封装代码的使用方法，以及它们的显示效果。
无论是书写HTML代码，或者是CSS代码，或者是Blogbus的封装代码，都一定要在英文输入法状态下输入字符，如果不小心用中文的字符来书写代码的话，浏览器在解析这些代码的时候，就会出现错误的。
在HTML中，有一段标记称之为“注释”语句，它的书写格式是下面这样的
<!--注释的文字部分-->
因为有些时候，我们页面中的HTML代码会非常多，在阅读和分析代码的时候，就可能会有点混乱的感觉。因此在页面中合理地运用注释语句就显得非常重要。所谓的“注释”，其实就是
第6章.学习HTML布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。