URL 组合器模板

主题组件
1

虽然这是为我的网站定制的一个组件，但我还是在这里分享一下，因为它可能对大家有用。它根据 URL 中的字符串向编辑器（composer）添加一个模板。

关于为标签（tags）设置编辑器模板的讨论已经有很多了。这不符合我的使用场景，所以我构建了这个替代方案。它可以在紧急情况下使用，或者稍微修改一下也可以用于标签。

Github: GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found

URL 编辑器模板 (URL Composer Templates)

一个 Discourse 主题组件，根据 URL 参数预先填充编辑器中的文本。旨在与 Docuss 无缝协作，为不同类型的交互提供特定于上下文的模板。

特性

  • URL 参数支持: 自动检测 URL 中的 ?composer_template=X 并应用相应的模板
  • 多种模板类型: 最多可配置 6 种不同用途的模板（报告、参加、邀请、自定义模板）
  • 自动打开编辑器: 可选地在访问没有现有帖子的 Docuss 链接时自动打开编辑器
  • 灵活应用: 模板可以仅应用于第一篇帖子、所有回复或两者都应用
  • 会话持久化: 使用 sessionStorage 在页面导航之间保持模板选择
  • 调试模式: 启用详细的控制台日志记录以排除模板应用故障

安装

  1. 在 Discourse 上安装主题组件:

    • 前往 管理 → 自定义 → 主题 (Admin → Customize → Themes)
    • 点击 “安装” (Install) → “从 Git 仓库” (From a Git repository)
    • 输入: https://github.com/focallocal/url-composer-templates
    • 将组件添加到你活动的主题中

  2. 无需重建插件！ composer_template 参数支持已存在于 dcs-discourse-plugin 和 dcs-client 中。

  3. 部署你的 React 应用 (fl-maps)，使用传递了 composerTemplate 属性的更新后的 DCSLink 组件。

  4. 在组件设置中配置模板 (管理 → 自定义 → 主题 → 你的主题 → url-composer-templates → 设置)。

配置

模板设置

每个模板都有三个配置选项：

模板 1 (报告)

  • template_1_id: report - 用于触发此模板的 URL 参数值
  • template_1_text: 预先填充到编辑器中的文本
  • template_1_use_for: first_post - 仅在新主题创建时应用

模板 2 (参加)

  • template_2_id: going - 用于“我将参加”类型的交互
  • template_2_text: 参加确认的预填充文本
  • template_2_use_for: all_replies - 应用于所有回复（非首帖）

模板 3 (邀请)

  • template_3_id: invite - 用于邀请交互
  • template_3_text: 邀请的预填充文本
  • template_3_use_for: all_replies - 应用于所有回复

模板 4-6 (自定义)

  • 默认禁用
  • 可以为特定用例启用和自定义
  • 根据需要配置 ID、文本和应用范围

自动打开设置

  • enable_auto_open_composer: true - 启用时，如果满足以下条件，将自动打开编辑器：
    • 点击了 Docuss 链接（URL 包含 ?composer_template=X）
    • 对于该标签组合尚不存在任何帖子
    • 帮助用户立即开始讨论

调试模式

  • debug_mode: false - 启用后，将看到带有表情符号前缀的详细控制台日志：
    • :artist_palette: 模板应用日志
    • :rocket: 自动打开编辑器日志

Docuss 集成

自动集成

url-composer-templates 组件旨在与 Docuss 自动协作。当你同时拥有：

  • 此组件安装在你的 Discourse 实例上
  • 更新后的 Docuss 客户端和插件（支持 composer_template）

模板将根据以下内容自动应用：

  1. 交互模式 (Interact Mode):
    • DISCUSS 模式 → 使用 triggerId 提示（going, invite）或默认为 report
    • COMMENT 模式 → 使用 report 模板

通过 HTML 属性进行自定义模板

为了更精确的控制，你可以使用 data-dcs-composer-template 属性直接在 HTML 中指定模板：

<!-- 示例：报告按钮 -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  报告问题
</div>

<!-- 示例：参加按钮 -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  我将参加！
</div>

<!-- 示例：邀请按钮 -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  邀请朋友
</div>

<!-- 示例：自定义模板 -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  提供反馈
</div>

模板 ID 匹配

该组件将 URL 参数中的模板 ID 与配置的模板 ID 进行匹配：

URL 参数 模板设置 默认用途
?composer_template=report template_1_id Bug 报告、问题
?composer_template=going template_2_id 活动 RSVP
?composer_template=invite template_3_id 邀请
?composer_template=custom1 template_4_id 自定义用途
?composer_template=custom2 template_5_id 自定义用途
?composer_template=custom3 template_6_id 自定义用途

工作原理

模板应用流程

  1. URL 检测: 当用户导航到包含 ?composer_template=X 的 URL 时，组件将模板 ID 存储在 sessionStorage 中
  2. 编辑器拦截: 当编辑器打开时，组件会检查存储的模板 ID
  3. 模板匹配: 根据 ID 查找匹配的模板
  4. 范围验证: 检查模板是否应适用（首帖、回复或两者都适用）
  5. 文本插入: 用模板文本预填充编辑器
  6. 清理: 将模板标记为已应用，以防止重复应用

自动打开流程

  1. 参数检测: 检查 URL 是否包含 ?composer_template=X 并且自动打开已启用
  2. 主题搜索: 搜索具有当前标签组合的现有主题
  3. 打开编辑器: 如果未找到任何主题，则自动打开编辑器
  4. 模板应用: 模板随后通过上述正常流程应用

示例用例

活动网站

# settings.yml
template_2_id: "going"
template_2_text: "我计划参加！🎉\n\n期待在那里见到大家。"
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "我想邀请朋友参加这个活动。\n\n我邀请的人：\n- \n\n他们应该来的原因：\n"
template_3_use_for: "first_post"

问题跟踪

template_1_id: "bug"
template_1_text: "**Bug 描述：**\n\n**重现步骤：**\n1. \n2. \n3. \n\n**预期行为：**\n\n**实际行为：**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**功能请求：**\n\n**使用场景：**\n\n**建议的解决方案：**\n"
template_4_use_for: "first_post"

社区参与

template_1_id: "question"
template_1_text: "**我的问题：**\n\n**我尝试过的：**\n\n**附加背景信息：**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "对我有效的方法是：\n\n**解决方案：**\n\n**原因：**\n"
template_2_use_for: "all_replies"

故障排除

模板未应用

  1. 检查 URL 参数: 确保 URL 包含 ?composer_template=X 且 X 与模板 ID 匹配
  2. 启用调试模式: 在设置中打开 debug_mode 以查看控制台日志
  3. 验证模板范围: 检查 use_for 设置是否与你的操作（创建主题 vs 回复）匹配
  4. 清除 SessionStorage: 打开浏览器控制台并运行: sessionStorage.clear()

自动打开不工作

  1. 检查设置: 确保 enable_auto_open_composer 设置为 true
  2. 验证 URL: 自动打开仅在 URL 包含 ?composer_template=X 时才有效
  3. 检查现有帖子: 仅当不存在具有该标签组合的帖子时，自动打开才会触发
  4. 启用调试模式: 查看控制台中带有 :rocket: 表情符号的日志

应用了错误的模板

  1. 检查模板 ID: 确保你的 URL 参数与模板 ID 完全匹配（区分大小写）
  2. 验证优先级: 如果可以匹配多个模板，则使用第一个匹配的模板
  3. 清除会话: SessionStorage 可能包含旧值: sessionStorage.clear()

Docuss 集成问题

  1. 更新 Docuss: 确保你拥有最新版本的：
    • dcs-client（在 HtmlBased.js 中支持 composerTemplate）
    • dcs-discourse-plugin（在 DcsIFrame.js.es6 中支持 URL 参数生成）
  2. 检查 HTML 属性: 验证触发器上是否正确设置了 data-dcs-composer-template
  3. 检查网络: 检查浏览器开发者工具的网络选项卡，查看是否添加了 URL 参数

版本历史

v1.0.0 (当前)

  • 初始发布
  • 支持 6 个可配置模板
  • 基于 URL 参数的模板选择
  • Docuss 链接的自动打开编辑器功能
  • SessionStorage 持久化
  • 用于故障排除的调试模式

贡献

发现错误或有功能请求？请在 GitHub 仓库 中提交一个 issue。

许可证

此组件是开源的，并在 MIT 许可下可用。

致谢

由 Andy@Focallocal 为与 Docuss 配合使用而开发——一个用于将 Discourse 讨论嵌入任何网站的系统。