Blogger：如何为设计器页面创建自定义变量定义

Question

当您登录 Blogger.com 并单击模板页面时，您在每个模板中看到的第一件事就是“变量定义”。这些变量定义显示在 Blogger.com 界面的用户友好设计器页面上。

例如：

<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Title Font" type="font" default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="#000000"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent"  value="transparent"/>
</Group>

上述变量定义让您可以轻松更改博客标题和其他标题信息的颜色。

我想创建自己的自定义变量。

我了解大多数变量的工作原理。就像 "name=" 是要在 class 或 ID CSS 中使用的变量。就像名称是 name="custom.name.here" 一样，它应该与您要更改的类名或 ID 相关联。因此：

#Header1 {
$(custom.name.here)
}

"description=" 是将显示在设计器页面上的名称，因此您知道要更改什么。

问题中唯一的部分是：“type=”变量和可以放在“type=”中的选项？还有 "default=" 和 "value=" 这些是什么以及可以在其中放置什么？需要这些吗？

Answer 1

This blog post 对变量有很好的解释。总结一个变量的属性如下。

• name - 变量的唯一 ID。不能包含空格。
• 描述：显示在设计器页面上的简短描述。
• type：变量的类型。 3 个允许的类型是 color、font 和 automatic
• default：模板默认值。只要选择了“恢复为模板默认值”选项，就会应用此值。
• value：变量的当前值。