如何在AnQiCMS模板中动态生成JavaScript代码片段，并使用`add`过滤器拼接变量？
在网站运营中，我们常常需要让页面变得更加智能和互动。AnQiCMS 作为一个高效且灵活的内容管理系统，不仅提供了强大的内容组织和展示能力，也允许我们在模板中巧妙地集成动态逻辑，例如通过生成 JavaScript 代码片段来实现更复杂的功能。
AnQiCMS 的模板引擎语法与 Django 类似，这为我们动态处理数据提供了极大的便利。它基于 Go 语言开发，运行速度快，能够稳定地支持各种内容管理需求。在模板中，我们可以通过 {{变量}} 来获取后端传递的数据，并通过 {% 标签 %} 来控制页面逻辑。
为什么要在 AnQiCMS 模板中动态生成 JavaScript 代码片段？
动态生成 JavaScript 代码片段，意味着我们可以根据后端传递的不同数据或页面状态，在前端执行不同的 JS 逻辑。这在许多场景下都非常有用：
- 个性化数据追踪与统计： 当用户浏览特定文章或产品页面时，你可能需要向第三方统计工具（如 Google Analytics、百度统计）发送该文章的 ID、标题、所属分类等信息。这些信息通常存储在 AnQiCMS 的后端，通过动态 JS 可以精准地将它们传递给统计脚本。
- 交互式组件的初始化： 某些前端库或组件（如轮播图、图表、地图插件）在初始化时需要后端提供的数据。我们可以将这些数据直接注入到 JS 代码中，使组件加载时就能获取到正确的信息。
- 条件性前端逻辑： 根据文章的发布状态、用户权限或特定标签等条件，我们可能需要显示或隐藏某些元素，或者触发特定的动画效果。通过在模板中判断这些条件并生成相应的 JS，可以实现高度定制化的用户体验。
- 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>标签、引号等特殊字符会被转换成<script>、"等实体字符。如果不对动态生成的 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 判断当前页面的模型类型，进而执行不同的