模板的强大之处就是，你可以动态扩展模板页面的变量，以达到前自定义丰富的展示效果。本次一共发布了 20 个表单组件，覆盖了大部分建站的场景需求：

表单 type: checkbox

前端变量值

类型：TrueClass

true

前端变量显示

{{page.settings.foo}}

true

示例：

{
    "id": "is_allow_published_at",
    "type": "checkbox",
    "label": "文章内是否展示发布日期",
    "default": true
}

表单 type: color

前端变量值

类型：String

前端变量显示

{{page.settings.text_color}}

#00AA00

表单 type: color_background

前端变量值

类型：DynamicForm::ColorBackgroundComponent::Value

前端变量显示

{{page.settings.bg_color}}

linear-gradient(90deg, #0F69E8, #1C0597)

{{page.settings.bg_color.to}}

#1C0597

{{page.settings.bg_color.degree}}

90

{{page.settings.bg_color.from}}

#0F69E8

表单 type: date

前端变量值

类型：Date

"2024-01-28"

前端变量显示

{{page.settings.foo}}

2024-01-28

表单 type: font_picker

前端变量值

类型：String

"arial"

前端变量显示

{{page.settings.font_name}}

arial

表单 type: header

动态表单分类标题，用于分组表单字段。

表单 type: html

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">这是蓝色粗体字</strong>"

前端变量显示

{{page.settings.google_ads}}

这是蓝色粗体字

表单 type: image_picker

前端变量值

类型：String

图片路径

前端变量显示

{{page.settings.banner}}

表单 type: link

前端变量值

类型：DynamicForm::RadioComponent::Value

"#<DynamicForm::RadioComponent::Value:0x0000000118f413c0 label: \"谷歌\", value: \"http://www.google.com\">"

前端变量显示

{{page.settings.foo}}

谷歌

{{page.settings.foo.value}}

http://www.google.com

{{page.settings.foo.label}}

谷歌

表单 type: number

前端变量值

类型：Float

10.0

前端变量显示

{{page.settings.price}}

10.0

表单 type: paragraph

这是一段文字介绍，用于动态表单的说明文字, 支持安全的 HTML 标签，自动过滤 script 标签。

*没有前端变量

表单 type: radio

前端变量值

类型：DynamicForm::RadioComponent::Value

"#<DynamicForm::RadioComponent::Value:0x000000011bf68738 label: \"保密\", value: \"0\">"

前端变量显示

{{page.settings.gender}}

保密

{{page.settings.gender.value}}

0

{{page.settings.gender.label}}

保密

表单 type: range

前端变量值

类型：Float

6.5

前端变量显示

{{page.settings.distance}}

6.5

表单 type: richtext

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">HTML源代码会被转义</strong>"

前端变量显示

{{page.settings.foo}}

HTML源代码会被转义

表单 type: select

select 选项有三种情况：默认下拉框、分组下拉框、多选下拉框。

default（默认）

模前端变量显示

{{page.settings.company_size}}

10~50人

{{page.settings.company_size.value}}

1

{{page.settings.company_size.label}}

10~50人

Grouped（分组）

前端变量显示

{{page.settings.city}}

昆明市

{{page.settings.city.value}}

km

{{page.settings.city.label}}

昆明市

multiple（多选）

表单 type: tag_picker

前端变量值

类型：Array

[
]

前端变量显示

{{page.settings.tag}}

[]

表单 type: text

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style="color: blue;">HTML源代码会被转义</strong>"

前端变量显示

{{page.settings.foo}}

<strong style="color: blue;">HTML源代码会被转义</strong>

表单 type: textarea

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style="color: blue;">HTML源代码会被转义</strong>"

前端变量显示

{{page.settings.foo}}

<strong style="color: blue;">HTML源代码会被转义</strong>

表单 type: video_picker

前端变量值

类型：String

视频地址

前端变量显示

{{page.settings.my_video}}