Documentation

编辑器产品块与展示模板

编辑器产品块与展示模板

适用版本：产品管理插件 3.1.0；内容依据当前源码核对，更新日期：2026-10-10。

用途与条件

产品块在文章或页面中展示一件产品的介绍、价格及购买入口。产品应已发布，主题模板应保留 <halo:footer /> 注入点，使插件脚本、样式和必要 Token 初始化生效。

编辑器操作

  1. 打开支持产品块扩展的 Halo 编辑器。
  2. 插入产品信息块，选择或填写正确的产品 Key。
  3. 保存文章，在前台打开并检查产品信息和购买入口。
  4. 调整文章排版时保留产品标识，避免将编辑器中的静态预览当成前台实际渲染。

HTML 嵌入

在允许自定义 HTML 的场景可使用：

<product-info-block data-key="PluginExample"></product-info-block>
<halo:footer />

PluginExample 需替换为本站真实且已发布的产品 Key。footer 位于主题的合适注入位置，不应为同一页面重复添加。

模板自定义

需要调整产品展示时，在现有模板能力内使用产品数据、价格与跳转字段，保留可识别产品的结构。更完整的展示模板示例可参考项目中的 static-bundle/product-template-guide.md。

服务设置中的客服信息展示模板用于客服展示，与产品块模板职责不同。自定义客服 HTML 时，应检查联系方式和小屏幕显示。

验收步骤

核对前台卡片的产品名称、价格、Logo、详情与购买跳转；以未登录及已登录状态分别打开。设置公开 API Token 的站点，还需检查脚本请求带上正确展示 Token。修改产品后再次检查实际前台内容。

常见问题

卡片没有渲染时先检查元素 Key、产品发布状态、footer 注入、脚本加载与浏览器请求错误。HTML 标签显示为普通文本时检查编辑器是否保留自定义节点；模板字段异常时使用现有稳定展示字段。

相关文档

评论