模板布局
曾经从blogspot转到WordPress，体验过WP的丰富和灵活型，但折腾下来也遇到很多问题，缺乏靠谱的WP托管商，自己维护web主机也花了不少精力，最后发现还是Blogger以不变应万变的姿态保持着它的简单和稳定，包括一直稳定地被和谐。。。
Blogger的一大痛点是内置模板都比较朴素，定制性不如WP等blog系统强大，这里对Blogger的模板文件相关内容进行说明。
整个Blogger的内容主要由板块section（下图中蓝色标签）和小部件widget（下图中绿色标签）组成，板块主要负责对页面划分区域，widget负责在每个区域里填充内容，所有的页面内容如站头、博客正文、侧栏等都放在对应的widget里面。
布局元素
Blogger template 是一个 XHTML 文件，包含了常规的html、css、js 以及Blogger的专属元素标签(XML Namespace) ，上面用于布局的<b:section>和<b:widget> 就是属于其中。
b:section 版块
section版块用于划分网页的各个区域，如边栏、页脚。在blogger模板中，至少要有一个section标签，section标签内只能包含小部件<b:widget>标签，不能包含其它html元素，
格式示例：
<b:section id='header' class='header' maxwidgets="1" showaddelement="false">
<b:widget id='Header1' locked='true' title='Blogger' type='Header' visible='true'> … </b:widget-settings>
</b:section>section属性：
属性 | 说明 |
id （必需） | 不能重复，只能包含字母和数字 |
class （可选） | 常用class值：navbar、header、main、sidebar、footer。 更换模板时Blogger能根据class匹配转移块里的内容 |
maxwidgets -（可选） | 设置版块中<b:widget>的数量上限 如果未指定，则表示没有限制。 |
showaddelement -（可选） | “true”/“false”，设置版块是否可以“添加页面元素” 默认为“true”。 |
growth -（可选） | horizontal: 小部件并排布置 vertical: 小部件堆叠布置，默认 |
b:widget 小部件
widget小部件是blogger主要的内容载体，Blogger规定了几种widget类型不需要重新定义。<b:widget>里面一般会包含<b:widget-settings> 标签，用于对widget的设置项进行定义；widget中至少有一个Includable且id=mian。这个Includable为此widget的主体内容，将会被显示出来，而其余的Includable则不会被显示，但可以通过include调用。
格式示例：
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#009a61</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>…</b:includable>
<b:includable id='aboutPostAuthor'>…</b:includable>
<b:widget/>Widget属性：
属性 | 说明 |
id （必需） | 每个小部件 ID 都应是唯一的，只能包含字母和数字 |
type （必需） | 只能使用以下几种类型值：BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar |
locked （可选） | “yes”或“no”，默认为“no”。锁定后小部件不能被移动或删除。 |
title （可选） | 如果未指定显示标题，Blogger会使用“List1”之类的默认标题。 |
pageType （可选） | 取值“all”、“archive”、"main”或“item”，默认为“all”。 |
mobile （可选） | “yes”、“no”或“only”，默认为“default”。 该属性决定了小部件是否在移动设备上显示，当属性为“default”时，只有标题、博客、个人资料、页面列表、AdSense 和归属会显示在移动设备上。 |
b:include / b:includable
b:include 和 b:includable 标配搭配使用，通过b:includable 定义代码内容，可包含html内容，在要用到该代码的地方使用 b:include 调用，可以在多个不同的地方重复引用。
widget中 id='main' 的Includable 会直接显示出来，不需要通过b:include 调用。
格式示例：
<b:includable id='postBody' var='post'>
<div class='post-body entry-content container' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
</div> </b:includable><b:include data='post' name='postBody'/>
b:includable属性
- id（必选）：由字母和数字构成的唯一标识符。每个小部件都必须有一个包含“id='main'”的 includable。
- var（可选）：由数字和字母构成的标识符，用于引用此部分的数据。
b:include属性：
- name（必选）：由字母和数字构成的标识符，必须与同一小部件中现有 b:includable 的 ID 相匹配。
- data（可选）：将传递到 includable 的表达式或数据块。这将成为 includable 中 var 属性的值。
- cond（可选）：只有结果为真时才执行 include 的表达式。该表达式与“b:if”的 cond 属性相同。
b:loop 循环
利用 b:loop 标记，您可以多次重复某部分内容。此标记最常用于针对指定页面输出博文列表中的各篇博文，或者输出各条评论或各个标记等。
格式示例：
以下为使用循环的一般格式：
<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>b:if、b:elseif、b:else 条件判断
利用 b:if、b:elseif 和 b:else 标记，可以在特定情况下展示特定内容，并在其他情况下展示其他内容。例如，通过条件判断实现在首页上显示特定文本，但在查看单独的博文时显示其它内容。
格式示例：
<b:if cond='condition'>
[条件为 true 时显示的内容]
<b:elseif cond='another condition'/>
[之前没有 if 或 elseif 条件为 true，但此 elseif 条件为 true 时显示的内容]
<b:else/>
[未满足 if 或 elseif 条件时显示的内容]
</b:if>b:switch, b:case 条件判断
b:switch 标记配合b:case 使用，功能与使用包含多个b:elseif 的 b:if 标记大致相同，使用“switch”分支时，不需要重复变量名称。
格式示例：
以下举例说明了如何根据所呈现页面的类型输出不同的标头。
<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
<h1>页面</h1><
<b:case value="item" />
<h1>博文</h1>
<b:default />
<h2>博文</h2>
</b:switch>b:with 变量
利用 b:with 标记可以申明一个变量，用于暂时存储已计算表达式的值，避免复杂的内联表达式。
格式示例：
将bg-image 样式值暂存在style变量，通过 expr:style 进行调用。
<b:with var='style' value='"bg-image: url(\"" + data:sourceUrl "\"); " + " width: " + data:width + "px; " '> <div id='header-outer'> <div id='header-inner' expr:style='data:style'> <h1>我的标题</h1> </div> </div> </b:with>注意，只有b:with标记的子节点才能访问style变量。
data: 数据调用
data:标记用于在模板中对Blogger内的变量数据进行调用，调用格式为：
<data: name />
<data: name1.name2 />“Name”是要使用的数据的名称；“name2”是名为“name1”的数据集合中的一项内容。
Blogger中定义了很多数据集合及数据标记，这些标记拥有不同的有效范围，介绍一些常用的数据调用：
通用数据：可在Blogger任何位置调用
- <data:pageTitle/>：当前页面的标题。通常是指博客标题，但可能包含文件或会话页面上的其他信息。
- <data:pageType />：当前页面的类型，可以选择“item”、“file”或“index”。
- <data:homepageUrl />：Blog首页地址
- <data:blog.title />：Blog的标题。
- <data:url />：当前页面的网址。
Header小部件中使用的数据：
- <data:title />：blog的标题
- <data:description />：blog的描述。
Blog小部件中使用的数据：
- <data:posts />：此页面的博文列表
- <data:posts.body/>：博文正文内容
- <data:posts.id/>：博文ID
- <data:posts.title/> ：博文的标题
BlogProfile小部件中使用的数据：
- <data:userUrl />：作者个人资料的网址。
- <data:aboutme />：“我的简介”个人资料信息
- <data:photo.url/> - Size: <data.photo.width /> × <data.photo.height /> ：用户个人资料照片地址、宽度和高度
更多关于数据标签的内容参见Blogger的支持文件：
模板样式
Blogger模板样式包含 css 样式声明 和 样式相关的变量，存放在<head> </head>部分。
CSS样式
所有的css样式代码 都存放在 <b:skin> </b:skin> 标记内。
css代码支持 /* … */ 标记进行注释。
样式变量
在b:skin标签内可以为字体、颜色、长度等值定义变量，这些变量的值可通过Blogger后台模板设置界面进行修改。
定义变量：
//example：
<Variable name="loraNormal20" description="Item body font" type="font" default="400 20px Lora, serif" value="400 20px Lora, serif"/>
<Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="rgba(0,0,0,0.54)" hideEditor="true" value="rgba(0, 0, 0, 0.54)"/>
<Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="320px" value="280px"/>变量属性说明：
- name - 每个变量名称必须唯一，可包含字母或数字。。
- description - 变量说明，用于在“字体和颜色”设置界面显示。
- type – “font”, “color”, “length” 三种类型。颜色变量会在模板设计器中提供可供选择的调色板，字体变量会在模板设计器中提供字体选择。
- default - 默认值。对于颜色，此变量应是十六进制颜色代码，如 #FF0066。对于字体，此变量会是 font-style font-weight font-size font-family 格式的列表。
- value - 当通过模板设置界面修改后，值存在value里面。
使用变量：
定义好变量后，直接在 b:skin css 代码中通过 $variable_name 进行调用，例如：
.sidebar-container {
background-color: $(sidebar.backgroundColor);
position:relative;
max-width: $(sidebar.width);
}
Comments
Post a Comment