在网站运营中，我们常常需要让页面变得更加智能和互动。AnQiCMS 作为一个高效且灵活的内容管理系统，不仅提供了强大的内容组织和展示能力，也允许我们在模板中巧妙地集成动态逻辑，例如通过生成 JavaScript 代码片段来实现更复杂的功能。

AnQiCMS 的模板引擎语法与 Django 类似，这为我们动态处理数据提供了极大的便利。它基于 Go 语言开发，运行速度快，能够稳定地支持各种内容管理需求。在模板中，我们可以通过 {{变量}} 来获取后端传递的数据，并通过 {% 标签 %} 来控制页面逻辑。

为什么要在 AnQiCMS 模板中动态生成 JavaScript 代码片段？

动态生成 JavaScript 代码片段，意味着我们可以根据后端传递的不同数据或页面状态，在前端执行不同的 JS 逻辑。这在许多场景下都非常有用：

  1. 个性化数据追踪与统计： 当用户浏览特定文章或产品页面时，你可能需要向第三方统计工具（如 Google Analytics、百度统计）发送该文章的 ID、标题、所属分类等信息。这些信息通常存储在 AnQiCMS 的后端，通过动态 JS 可以精准地将它们传递给统计脚本。
  2. 交互式组件的初始化： 某些前端库或组件（如轮播图、图表、地图插件）在初始化时需要后端提供的数据。我们可以将这些数据直接注入到 JS 代码中，使组件加载时就能获取到正确的信息。
  3. 条件性前端逻辑： 根据文章的发布状态、用户权限或特定标签等条件，我们可能需要显示或隐藏某些元素，或者触发特定的动画效果。通过在模板中判断这些条件并生成相应的 JS，可以实现高度定制化的用户体验。
  4. SEO 优化与结构化数据： 虽然 AnQiCMS 提供了 jsonLd 标签来生成结构化数据，但在某些特定情况下，你可能需要通过 JavaScript 来动态构建或修改这些数据，以满足更复杂的 SEO 策略。

在 AnQiCMS 模板中动态生成 JavaScript 的核心方法

要在模板中动态生成 JavaScript，最直接的方法就是将 AnQiCMS 变量直接嵌入到 <script> 标签内部。关键在于，我们需要确保这些变量能够被 JavaScript 正确识别和使用。

首先，我们在模板中编写 <script> 标签，就像编写普通的 HTML 一样。然后，将 AnQiCMS 的变量插入到其中。

例如，如果我们想在前端获取当前页面的文章 ID 和标题：

<script>
    // 假设我们已经通过 AnQiCMS 标签获取了文章的 ID 和标题
    // {% archiveDetail pageId with name="Id" %}
    // {% archiveDetail pageTitle with name="Title" %}

    // 动态生成 JavaScript 变量
    let articleId = {{ pageId }};
    let articleTitle = '{{ pageTitle }}';

    console.log('当前文章 ID:', articleId);
    console.log('当前文章标题:', articleTitle);
</script>

请注意，对于字符串类型的变量（如 pageTitle），我们需要用单引号或双引号将其包裹起来，以符合 JavaScript 的语法规范。数字类型则可以直接输出。

使用 add 过滤器拼接变量

当我们需要将多个变量或固定字符串组合成一个完整的 JavaScript 字符串时，add 过滤器就显得非常便捷。add 过滤器的作用是连接两个值，无论是数字相加还是字符串拼接，它都能处理。

在 AnQiCMS 模板中，add 过滤器的使用方式是 {{ obj|add:obj2 }}。

例如，如果我们想拼接一个包含文章 ID 和标题的日志信息：

<script>
    // 假设我们已经获取了文章的 ID 和标题
    // {% archiveDetail pageId with name="Id" %}
    // {% archiveDetail pageTitle with name="Title" %}

    let articleId = {{ pageId }};
    let articleTitle = '{{ pageTitle }}';

    // 使用 add 过滤器拼接字符串和变量
    let logMessage = '文章 ID 为 ' + {{ pageId|add:""|safe }} + '，标题为 "' + '{{ pageTitle|add:""|safe }}' + '"。';

    console.log(logMessage);
</script>

这里需要特别说明的是 |add:""|safe 这部分：

  • |add:""：这个操作会将前面的变量强制转换为字符串类型。虽然 JavaScript 本身在拼接时有隐式转换，但明确地在模板层进行转换可以避免一些潜在的问题，确保输出到 JS 中的是纯粹的字符串内容。对于数字，这会将其转换为数字字符串。
  • |safe：这个过滤器至关重要！ AnQiCMS 的模板引擎默认会对所有输出内容进行 HTML 转义，以防止跨站脚本攻击（XSS）。这意味着像 <script> 标签、引号等特殊字符会被转换成 &lt;script&gt;、&quot; 等实体字符。如果不对动态生成的 JavaScript 代码使用 |safe 过滤器，那么浏览器将无法识别这些被转义的代码，而只会将其作为普通文本显示在页面上。|safe 告诉模板引擎，这部分内容是安全的，不需要进行转义，可以直接输出原始的 HTML/JS 内容。

实战案例分析

让我们来看几个结合 add 过滤器和 |safe 过滤器生成动态 JavaScript 的实际例子。

案例一：动态设置统计事件参数

假设你需要向第三方事件追踪服务发送当前页面的详细信息：

{% archiveDetail articleId with name="Id" %}
{% archiveDetail articleTitle with name="Title" %}
{% archiveDetail categoryObj with name="Category" %}
{% archiveDetail categoryName with name="Title" id=categoryObj.Id %} {# 获取分类名称 #}

<script>
    // 定义事件数据对象
    let eventData = {
        'page_id': {{ articleId|add:""|safe }},
        'page_title': '{{ articleTitle|add:""|safe }}',
        'category_name': '{{ categoryName|add:""|safe }}',
        'event_time': new Date().toISOString()
    };

    // 假设你的第三方服务有一个 trackEvent 方法
    if (typeof myAnalyticsService !== 'undefined') {
        myAnalyticsService.trackEvent('page_view', eventData);
        console.log('事件已追踪:', eventData);
    } else {
        console.warn('myAnalyticsService 未定义，无法追踪事件。');
    }
</script>

在这个例子中，我们使用 archiveDetail 标签获取了文章 ID、标题和分类名称，并通过 |add:""|safe 将它们安全地注入到 JavaScript 对象中。

案例二：根据内容模型类型加载不同的脚本

AnQiCMS 支持灵活的内容模型。你可能希望文章模型和产品模型页面加载不同的交互脚本。

{% archiveDetail moduleId with name="ModuleId" %} {# 获取当前文档的模型ID #}

<script>
    let currentModuleId = {{ moduleId|add:""|safe }};

    if (currentModuleId === 1) { // 假设模型ID 1 是文章模型
        console.log('加载文章页特有的脚本...');
        // loadArticleSpecificScript();
    } else if (currentModuleId === 2) { // 假设模型ID 2 是产品模型
        console.log('加载产品页特有的脚本...');
        // loadProductSpecificScript();
    } else {
        console.log('未知模型类型，不加载特定脚本。');
    }
</script>

这里，我们利用 moduleId 判断当前页面的模型类型，进而执行不同的