Blogger beta高级教程篇:设计自己的模板

写在之前,十一长假结束后本Blog的更新频率将降低,实际上这几天也的确很累,强烈建议本Blog的读者订阅本Blog的全文输出Rss:

http://feeds.feedburner.com/eool(推荐)http://feed.feedsky.com/ifly(延迟时间较长)

希望可以交到更多的朋友,欢迎交换链接

继上一篇我们细节性的分析了Blogger beta的结构之后,这次我们会从总体上概括Blogger beta模板的组成(via Hoctro),并最终可以做出自己的模板,或者将其它的模板转换到Blogger beta上来。相信这将是非常令人激动的时刻。一个最好的展现自己个性的机会(你喜欢鱼昨晚上修改过的模板吗?)。

引用文章请尽量注明出处 ^-^

将代码完全折叠起来,我们可以从总体上(上面的图片中)看到Blogger beta的模板结构,以及它们之间的包含关系。请注意“xxxxx-wrapper”标记。

这张图片(点击查看完整图片)是我们把代码的下一级展开之后所看到的,这一级的代码大体展示出模板的组成。上一张图片我们看到了几个“xxxxx-wrapper”标记,现在你又会发现在每个“xxxxx-wrapper”标记之后都会出现“b:section”标记,“b:section”标记内是“b:widget”标记。如果我们再继续向下展开代码,里面的内容将是各个Widget标记的实际Html执行代码,本篇文章主要研究Blogger beta的主要构成,从总体上把握Blogger beta的组成,因此不再向下深究。

从上面两张图片中我们可以看出Blogger的主要组成有四个区域:页首、文章区域、侧边栏、页脚。

下面我们将详细讨论这四个区域:

1.页首

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/>
</b:section>
</div>

这一部分在Blog中起的作用就是显示Blog标题和描述。我们可以看到每一个“Section”会包含一个“Class(类)”,所以整个模板中含有四个Class(类),分别显示Header、Main、Sidebar、Footer(从而,我们可以通过修改针对不同区域的CSS来控制模板)。另外,Section也有它的"id"——“Header”。maxwidgets='1' showaddelement='no'这两个参数分别说明了“此区域最多的Widget个数”和“是否显示Add a Page Element选项”

在b:section中只包含了一个Widget,可以看到它的ID是“Header1”,Locked="true"这个参数规定它在Layout设置中是不可移动的。 title='brand new blog (Header)'指定它在Layout编辑中显示的名称 type='Header'会告诉Blogger这是一个Header类型。

2.Main Section

这个区域是Blog的最主要部分,用来显示Blog文章,同时这也是最复杂的部分,如果我们把代码展开就会发现,这部分的代码占了所有Html的80%。

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

这里只要注意 id="main" 以及它的一个widget (id=blog1) 就行了,其它的参数同上一部分类似。

3.侧边栏区域

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

相信现在你已经可以很容易的分辨出Section标记,以及它包含的所有Widget(这里包含了所有Blogger里可以添加的Widget)。相信已不用再详细说明,要注意那些“ID”,比如你想要两个“标签”模板在你的Blog上,那么你可以复制相应的Widget,但要确保它们的ID是“独一无二”的,比如“Label1”、“Label2”。

4.页脚部分

这部分是最简单的,因为大多数时候我们不会在这里放太多东西。

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

*自定义部分

或许接下来我们才进入真正自定义模板的主题,我们上面刚才看到的代码并不是一无是处的,把它放在Blogger中的时候它就会起作用。只要我们再加上相应的CSS,我们的Blog就会以任何我们想要的形式展现出来(要懂一点CSS)。

在任何一个已存在的模板中,我们已经完全可以把它转换到Blogger beta中来了。无须复制/粘贴长长的代码,我们只要把上面提到的四个Section复制过去即可。下面是一个示例:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
*/
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>

在上面的代码中我们并没有把每个Widget的详细Html复制过去,但是保存之后你会发现所有的Widget已经被Blogger执行了。接下来只要写入控制各个区域的CSS,并修改相应的“ID”即可。

如果你做了漂亮的模板,欢迎来Show一下。

6 条评论:

匿名 说...

真不错啊,不过对我来说做个模版还是很难

Liu Yang 说...

;) 看看我的 http://poisondlo.blogspot.com

还在调试中

对了鱼兄你的发表评论界面是怎么改的?

sara 说...

Hi,鱼,

我不会写css,也不会改ID,我提供个我的模版图片的地址,你可不可以帮我写出来?谢谢,拜托你了

http://s105.photobucket.com/albums/m211/sara0206


Sara

fromsara@hotmail.com

Ryan Hooper 说...

你的文章真的很有用!!我也设计了自己的模板

另外我还无意中发现找到了在blogger中任何地方都能添加widget的方法

insun 说...

想请教关于html标签的问题。我看你的引用里可以使用html 或者head的标签,但是我的却不可以,还有比如script也不行,要怎么样才能使用?我的意思是显示不是运行。

x-Plays 说...

请问LZ,您用的是什么编辑器呢?有展开节点的?