网站编辑器中的代码组件应该怎么添加变量来实现可视化配置？

2026-03-12 09:51:08 · 运营团队 · Daiven

使用代码组件时，您可以通过添加“变量”的方式，将代码中固定的文本、颜色、数值等属性提取到左侧的可视化面板中。配置完成后，使用者无需修改复杂的HTML代码，只需在设置面板上调整对应选项，即可直接改变前端模块的展示效果。

使用代码组件前，您需要先联系客服开通系统的开发者权限。获取权限后，您可以前往后台右上角头像下拉菜单的“密钥管理—接口设置”中，查看并开启需要调用的API接口。

操作路径：官微中心后台—站点—编辑网站—组件—代码组件。

进入网站编辑器界面，将代码组件直接拖入到一个空白模块内。请注意，代码组件默认会铺满整个模块区域，其高度会自动根据您后续编写的代码内容进行展开。

选中刚才拖入的代码组件，在左侧的编辑面板中确保“允许配置变量”处于开启状态。点击下方的“添加变量”按钮，您可以根据实际要修改的属性，选择文本、颜色、跳转、开关或数字类型，并为其定义好不包含空格的“变量名”。

变量定义完成后，点击左上方的“编辑代码”按钮进入代码输入框。在编写HTML或CSS时，您只需使用 $[变量名] 这样的特定语法来占据对应位置，页面在实际渲染时就会自动替换为您在面板中填入的数值或颜色。

如果您需要在JS脚本中使用这些变量，必须用引号将引用语法包裹起来（例如：var title = "$[标题]"）。因为系统替换后默认输出纯字符串，如果是数字类型，还需要您手动使用 Number() 方法进行转换；如果是开关类型，则需要将其与字符串进行比较来判断真假（例如："$[是否显示]" === "1"）。