要搭配使用模板设计器和博客模板的 CSS,请遵循以下准则。
设置变量
在代码的 <head>
部分,您需要一对 <b:skin> </b:skin>
标记。
CSS 样式声明会插在这对标记之间,附带变量名称(使您的设计能够在“字体和颜色”页面中发挥作用)。
示例
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>
包含在 /* 和 */ 注释标记之间的 CSS 代码不会显示在您的博客中。
此处会有一个变量列表,每个您希望能在“字体和颜色”标签中修改的字体或颜色都有一个变量。要让上述示例能够显示信息,每个变量都不可或缺,以下是针对每个变量的说明:
- name - 此名称可以包含字母或数字。模板中的每一个名称必须是独一无二的。
- description - 添加说明以显示在“字体和颜色”部分。
- type -“字体”或“颜色”。
- default - 默认值。对于颜色,此变量应是十六进制颜色代码,如 #FF0066。对于字体,此变量会是 font-style font-weight font-size font-family 格式的列表。
使用变量
设置变量后,如果您想使用某个变量的值,请在 b:skin
css 中输入 $variable_name
。
变量类型
模板设计器对一组特定的 CSS 变量类型提供修改支持。要设置变量类型:
- 颜色变量会在模板设计器中提供可供选择的调色板。
- 字体变量会在模板设计器中提供字体选择,以及字体大小、粗体或斜体选项。
在上述示例中,我们创建了一个名为 bgcolor
的变量,并将其设置为白色 (#fff)。在下面的代码中,我们设置了 background: $bgcolor
。 这会使背景变成白色,您可以在“字体和颜色”部分中对其进行更改。
请注意:您无需为其他类型的 CSS 属性创建变量。这些属性可以如往常一样包含在 CSS 中(如同上述示例中的 margin:
和 padding:
属性)。