· 快速入门

· 模板开发工具(venus)

· 模板引擎

· 第二代模板引擎(mars)

· 开发规范

自定义选项

我们的模板外观有时候需要将一些颜色值、文字、图片信息交给用户来自定义，需要有一些可选项供用户选择。给模板添加自定义选项就可以实现这样的功能。

当在模板中增加了自定义选项标签后，博客设置页面的模板外观设置中会自动生成相应的组件。

使用方法

使用自定义选项的基本语法是：

{#类型:变量名|value:"默认值"}

假设我们要给模板增加名为“背景颜色”的自定义选项，那么可以这样：

1
2
3
4
5
6
7
8
9
10

<!-- “背景颜色”自定义变量，默认为黑色 -->
{#color:背景颜色|value:"#000"}

<!-- 自定义变量的使用 -->
<style>
    body {
        /* 使用自定义变量时，格式为：{$_变量名}，加下划线是为了和普通变量区分 */
        background:{$_背景颜色};
    }
</style>

变量分组

当模板自定义选项较多时，需要将自定义变量进行分组使其更有条理。

可以在变量名中加“.”对变量进行分组，“.”前面的部分就是分组名。

比如下面两个变量：

{#color:背景.颜色|value:"#FFA"}
{#image:背景.图片|value:""}

他们的共同点是“背景”相关的自定义选项，所以统一归到“背景”分组。

在博客设置中的效果：自定义选项分组

选项类型

参数类型 说明
text 文本，返回文本内容
image 图片，返回图片地址
color 颜色，支持“#FFF”、“#FFFFFF”形式的值
boolean 是非判断，取值范围是“true”或者“false”
select 选择框，每个值用半角逗号分隔，如：”黑色,白色,红色,黄色,蓝色”，返回选中值

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{#color:背景颜色|value:"#FFA"}
{#image:背景图片|value:""}
{#text:格言|value:"Stay Hungry, Stay Foolish."}
<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            background-color:{$_背景颜色};
            {?$_背景图片}
                background-image:url('{$_背景图片}');
            {/$_背景图片}
        }
        </style>
    </head>
    <body>
        <h1>{$global.name}</h1>
        {?$_格言}<p>{$_格言}</p>{/$_格言}
    </body>
</html>

在博客设置中的效果：自定义选项