万恶的Blogbus模板——万恶为你提供模板动力！(mobanxx.blogbus.com) - 1 - |
虽说模板的意思，大家都有所了解，但我还是想特别的强调一下，模板是代码和设计的组合。对于模板使用者来说，我们可能更加关注模板的设计，但从整体来说，一款好的模板应该包括良好的代码和优秀的设计。
我们先来了解下Blogbus模板代码的构成：
布局代码，布局也即是模板的整体结构，我们常说的两栏、三栏布局，也即是指模板主体区域表现出来的是两栏，还是三栏。一般来说，不管是两栏，还是三栏，都是用网页编程中的页面元素来实现的，目前常用的页面元素是层（DIV）（层的概念会在后面详细介绍）。
封装代码，新模板系统中有很多封装代码，这些封装代表模板中各个模块。通过在模板中调用这些代码，我们就可以在页面上显示最新发布的日志内容和其它内容。也就是说，通过布局代码和封装代码的组合，我们就能大致构建出一块模板了。
样式代码，样式代码即是我们常说的CSS代码。CSS代码可以控制布局和页面各部分模块的样式，如果能熟练运用CSS，我们就可以很方便地修改模板样式了。至于CSS代码是什么样的代码，以及怎么使用它，后面会有专门的章节来加以介绍的。
下面看下图例来解释下。
上面的示意图代表的是博客首页的结构，灰色部分可以通过布局代码和样式代码来实现，图中右边的代码即是布局代码，样式代码因为比较多，我没有写出来。可以看出，上图示意的模板布局为两栏模板（主体区域为左边日志，右边副栏）。
大家注意看看示意图中的{c:0}和{c:1}，我把{c:0}放在左边的日志区域，{c:1}放在右边的副栏。在Blogbus的模板系统中，{c:0}调用的是Index-posts里的代码，默认情况下，会显示日志标题，发表日期以及日志正文等内容。{c:1}则代表了在副栏的各个模块。1
在这一节中，我将向大家详细介绍下Blogbus的模板管理系统。如果你已经熟悉模板管理系统了，可以跳过本节内容。
进入管理后台，在上面的菜单中选择“博客”->“模板”，这时候会进入默认的模板设置界面（如下图）。
Blogbus模板系统分为“新模板系统”和“传统模板系统”这两套模板管理系统。一般情况下，我建议使用“新模板系统”。下面我会详细介绍新模板系统的设置方法，至于传统模板系统，我也会作简单的介绍。
注：本教程的内容是基于“新模板系统”的。
模板界面的上部，是当前使用的模板信息。如果只想使用Blogbus官方现成的模板，或者使用用户分享区的模板的话，只要在模板的缩略图下面点“使用”即可。如果想要修改模板，或者自己新建模板的话，就要用到“自定义模板”功能了。
点击模板设置界面右边的“选择自定义模板”（上图中1所示位置）后进入自定义模板设置界面。设置界面如下图：
设置界面的上部与之前的界面是相同的，不同的是下面的自定义模板栏目。在“自定义模板”栏目里，显示的是我们自定义的模板信息，其中包括有模板缩略图、模板名称和模板说明。默认情况下，这里是没有任何自定义模板的。下面来看下怎样新建模板并对模板进行修改。
在图中位置1，有“新建自定义模板”的链接，点击后会弹出一个对话窗让你填写模板名称。填完名称后，即可看到新建的自定义模板了。新建的模板并不会立即应用到你的博客中，我们还需要点击图中位置2的链接“使用该模板”才能使用上这个新建的模板。当然，在新建模板后，我们还需要进行模板代码的编辑工作。点位置2的“编辑”链接，即可进入模板代码的编辑页面（见下图）。
上图是点击“编辑”后的界面，即模板编辑界面。在这个界面中，大致有三部分内容。上面的是模板的代码模块设置，中间的是模板导入功能（图中位置3所示），最下面的是模板信息设置（图中位置4所示）。我们先来了解下代码模块设置区的内容。
在代码模块设置区中，共有7个代码模块，它们分别是head、css、index、index-posts、detail、detail-post和config。 这7个代码模块具体是起什么作用的，我将在后面的文章中讲解。有时候，我们会在网络上获得网友分享的模板代码，我们该如何将代码应用到模板中呢？不错，就是将代码放进相应的模块中就可以了。当然，代码放好后，一定要检查下是否“使用该模板”了。
另外还有一种情况是，当前使用模板为官方模板，但我们又想对模板的细节做一些修改。这个时候该怎么办呢？这就需要用到导入模板的功能了。
在“导入模板文件”栏目下，我们选择“导入官方模板”，然后从下面的模板名称列表中选择需要修改的模板，点提交后，各代码模块中的代码就自动变成刚才导入模板的代码了。这样我们就可以自由修改官方的模板了。当然，还是需要提醒一遍，记得在“使用”你新建的自定义模板。
在对模板代码修改过后，我们还可以填写下模板的相关信息。填写模板信息可以更好地方便我们对自定义模板进行管理。当然，模板的相关信息并不是必须要填写的，只是有些时候，我们想要分享自己的模板，这时模板信息就显得很重要了。
新模板系统的副栏模块是可以很方便地调整的，而且还可以对首页和内容页（或者说是日志页）分别进行调整。下面我们来看下如何调整。
在“当前使用模板”栏目中，有“首页布局设置”和“内页布局设置”两个按钮，这里以首页布局为例来介绍下如何调整副栏的模块。
上图中，副栏有两个，副栏2里没有模块，副栏1有3个模块2。如果我们想在副栏2里多添加一些模块，那么只需点副栏2右边的“[添加模块]”，在弹出窗口中选择需要添加的模块。同样的道理，如果我们想在副栏1中添加模块的话，点副栏1右边的“[添加模块]”即可。添加完模块后，还可以按住模块名称，然后拖动模块，随意调整排序。另外，也可以将副栏1的模块拖动到副栏2中。
点击模板设置界面右边的“传统模板系统”（上图中2所示位置）后进入传统模板系统设置界面（见下图）。传统模板系统也称为“旧模板系统”，之所以叫旧模板系统，是因为Blogbus在技术升级过程中，保留了原先的模板系统。相比“新模板系统”（即默认的模板系统）而言，旧模板系统的设置上要复杂得多，而且不支持副栏的可视化调整。
旧模板系统的好处在于它的高自定义度，也即是说，可自定义的地方非常多。但也正是高自定义度，才导致了它的复杂性。Blogbus的旧模板系统虽然会一直保留下去，但将不再提供技术支持。
上图是“万恶”的旧模板系统界面。在设置界面的下方同样有很多模板缩略图，我们点击“使用”后即可在“传统模板系统”中使用这些模板了3。如果我们从其它地方找到了传统模板系统用的模板代码，我们需要新建自定义模板，然后将模板代码复制到相应的代码块中。
点击“新增自定义模板”，在弹出的对话框中输入模板名称后点确定，这样就新建了一个自定义模板。新建的自定义模板并不会直接用于博客模板系统，我们还需要选择并使用新建的模板才能起作用。
以上图为例，比如说，我们新建一个名为jiee的模板，这时在“自定义模板”一栏里，我们可以看到已经存在的自定义模板，在jiee这块模板后面有四个链接，分别是：改名、修改、删除、使用。改名是指修改模板的名称，修改是指修改模板的代码，删除和使用分别是指删除和使用自定义模板。
如果我们不点使用模板的话，“当前使用的模板”一栏里就不是自定义模板的名称。大家注意看下，上图中，当前使用的模板是“万恶V1.3”，也即是自定义模板一栏中最下面那款自定义模板。如果我们点击jiee后面的“使用”的话，就可以选择使用jiee这款模板了。当然，新建模板后，因为我们还没有往里面加入代码，所以选择使用jiee这款模板后，查看博客首页看到的只是空白页面。
html的介绍
本教程版权归万恶所有，任何人不得盗用！ |
