Blog Behind GFW: Template of the New Blogger

Blogger已正式结束beta测试，迟疑再三终于升级到New blogger，不过Google Sitemaps在新版的blogger模板下使用“添加meta方式校验”时出现了点小问题：

XML error message: The element type "meta" must be terminated by the matching end-tag

旧版的blogger模板html代码看起来比较容易阅读，meta标记也比较容易确定添加在什么位置，而新版的blogger模板中因使用了网页栏目和窗口小部件甚至看起来不象html代码，头晕。注意你升级到New blogger后模板并不会自动升级，这时候你的模板还是你原来的模板，你还需要转换一次，在Template---->Customize你可以找到升级模板按纽，还真是麻烦，不过如果不升级旧模板你将不能使用诸如“所见即所得”的拖放特性。

模板的第一部分包含了xml语言声明：

<?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'>

第一行将文档声明为xml格式，第二行是html声明，第三行是xhtml声明给出了xml版本。

模板的第二部分包含了“head”的第一部分、meta标记和标题：

meta标记通知搜索引擎你的blog的主题、关键词，对于搜索引擎索引你的站点是非常必要的，在Dummies Guide to Google Blogger (Beta) 作者好象犯了一个小错误，标准html格式中meta应该放在标题<title>前面。

第三部分是模板的变量定义“Variable Definitions”，这里定义了“模板”选项下“字体和颜色”子选项中各页面元素的颜色：

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* 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">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">

......

*/

CDATA段在这里开始用于将一个xml文件插入到另一个xml文件，CDATA段开始于<[CDATA]结束于with ]]>，用于使居于其中的语句规避XML解析规则，也就是说不可以将一个CDATA段插入到另一个CDATA 段。

第四部分是CSS定义：

/* Use this with templates/template-twocol.html */
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

.....

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>

注意CDATA段在这里结束于]]>。

第二、第三、第四部分组成了html文档的“head”。

第五部分是“body”

<body>
<div id='outer-wrapper'><div id='wrap2'>


<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='Blog Behind GFW (标题)' 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='博客文章' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>

</div></div> 
</body>
</html>

布局模板的 <body> 部分主要由网页栏目和窗口小部件组成。栏目用于划分网页的各个区，例如侧边栏、页脚等。窗口小部件是各种页面元素，例如图片、blogroll 或其他您想从"页面元素"标签中添加的任何元素。您可以在模板的栏目周围加入任何所需的 HTML 代码。

模板中的每个栏目都有一个起始标记和一个结束标记，看起来像这样：

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>

事实证明，直接从"页面元素"标签中进行修改会更加简单，不过了解新模板的结构对我们的个性定制是很有帮助的。

参考阅读：
用于布局的页面元素标记
窗口小部件标记详述

顺便提下如何隐藏blogger上方的导航工具条(NavBar)：
隐藏Blogger导航工具条：在样式标记中间粘贴下面CSS定义：

#b-navbar {
height: 0px;
visibility: hidden;
display: none;
}

</style>

隐藏Blogger Beta (iframe)导航工具条：

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

</style>