Template of the New Blogger – Blog Behind GFW

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标记和标题：

<head>
<META content=’TwVr7RE98jaQuGO/+j6mX4nPnv8lpbC4e5lyosUsHKE=’ name=’verify-v1’/>
<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.pageTitle/></title>
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”

<!– 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>

<!– spacer for skins that want sidebar and main to be the same height–>
<div class=’clear’> </div>

</div> <!– end content-wrapper –>

</div></div> <!– end outer-wrapper –>
</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>