如何在模板中引入外部的静态资源文件（CSS、JS、图片）？
在使用安企CMS（AnQiCMS）构建网站时，为页面引入样式（CSS）、交互脚本（JS）和图片等静态资源，是网站美观和功能实现的基础。了解如何在模板中正确地引入这些文件，能让您的网站不仅外观专业，功能丰富，还能保持高效稳定的运行。安企CMS凭借其简洁高效的架构和灵活的模板引擎，让管理和引入这些资源变得非常直观。
AnQiCMS的模板系统，尤其是在处理静态资源方面，设计得非常贴心，它遵循一套清晰的约定，让您能轻松地组织和调用各种文件。
理解静态资源的存放位置
在AnQiCMS中，所有的模板文件都存放在 /template 目录下，而与模板相关的样式表、JavaScript脚本和图片等静态资源，则有一个专门的归属地：/public/static/ 目录。这是系统默认且推荐的静态资源存放位置。
例如，您可以在 /public/static/ 目录下创建以下子目录来组织您的资源：
/public/static/css/用于存放您的所有CSS文件。/public/static/js/用于存放您的所有JavaScript文件。/public/static/images/用于存放您的所有图片文件。
这种结构有助于保持文件系统的整洁，也方便系统进行管理和加载。
在模板中引入本地静态资源
当您的静态资源文件存放在上述 /public/static/ 目录下时，AnQiCMS提供了一个名为 {{system.TemplateUrl}} 的特殊变量，它会自动解析为当前网站所使用的模板对应的静态资源目录路径。使用这个变量来构建静态资源的URL，是确保您的网站在任何环境下（如更换域名、切换模板或多站点部署时）都能正确加载资源的关键。
1. 引入CSS样式表：
CSS文件通常放在HTML文档的 <head> 区域，以确保页面加载时样式能尽快应用。
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<!-- 引入您的自定义CSS样式 -->
<link rel="stylesheet" href="{{system.TemplateUrl}}/css/style.css">
</head>
这里，{{system.TemplateUrl}} 会自动替换成类似 http://您的域名/public/static/您的模板目录名 这样的路径，然后系统会加载 style.css 文件。
2. 引入JavaScript脚本：
JavaScript文件通常建议放在 <body> 标签的闭合标签 </body> 之前，这样可以避免脚本阻塞页面的渲染，提升用户体验。
<body>
<!-- 页面内容 -->
<!-- 引入您的自定义JavaScript脚本 -->
<script src="{{system.TemplateUrl}}/js/main.js"></script>
<script src="{{system.TemplateUrl}}/js/another-script.js"></script>
</body>
与CSS类似，{{system.TemplateUrl}} 确保了JS文件的正确路径。
3. 引入图片文件：
图片文件可以在HTML的 <img> 标签中直接引入，或者作为CSS背景图引入。
<body>
<!-- 作为img标签引入 -->
<img src="{{system.TemplateUrl}}/images/logo.png" alt="网站Logo">
<!-- 如果是作为CSS背景图，在CSS文件中可以这样写（假设CSS文件在{{system.TemplateUrl}}/css/中） -->
<!-- .hero-section {
background-image: url('../images/background.jpg');
} -->
</body>
在CSS文件中，如果图片相对于CSS文件的路径是固定的，您可以使用相对路径。但对于HTML中的图片，推荐使用 {{system.TemplateUrl}} 以保持路径的动态适应性。
在模板中引入外部CDN静态资源
除了本地资源，您还可以引入存储在内容分发网络（CDN）上的外部静态资源。CDN能够加速资源加载，减轻服务器压力，尤其适合网站用户分布广泛的场景。
1. 引入外部CDN的CSS样式： 例如，您可能需要引入一个外部的Markdown样式库来美化您的内容。
<head>
<!-- 引入外部CDN的CSS样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
2. 引入外部CDN的JavaScript脚本： 同样，对于一些常用的JS库或特定功能（如数学公式渲染、流程图库等），直接从CDN引入是常见做法。
<body>
<!-- 引入外部CDN的JavaScript脚本 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
3. 引入外部CDN的图片： 当您的图片存储在第三方图片服务或CDN上时，可以直接引用其完整URL。
<body>
<img src="https://your-image-cdn.com/path/to/product-image.webp" alt="产品图片">
</body>
模板整合与**实践
为了更高效地管理网站的静态资源，建议您将引入静态资源的代码集中管理。在AnQiCMS的模板结构中，通常会有一个 base.html 文件，作为所有页面的基础骨架。您可以在其中定义页面的 <head> 和 <body> 结构，并引入公共的CSS和JS文件。
- 集中引入： 将公共的CSS引入代码放在
base.html的<head>中，将公共的JS引入代码放在base.html的</body>标签前。 - 模块化引用： 对于特定页面或模块才需要的CSS/JS，可以考虑在对应的模板文件中局部引入，或者使用AnQiCMS的
{% include "partial/header.html" %}等辅助标签，将头部或尾部片段拆分出来，便于维护。 - 性能优化：
- CSS在前，JS在后： 确保CSS文件在HTML顶部加载，JS文件在底部加载，以优化页面渲染速度。
- 合并与压缩： 对于多个小型CSS或JS文件，在部署前进行合并与压缩可以减少HTTP请求数量和文件大小。虽然AnQiCMS本身没有内置这些功能，但您可以使用外部工具或构建流程来完成。
- 图片优化： 确保图片经过压缩和适当的尺寸处理。AnQiCMS在后台内容设置中支持Webp格式转换和自动压缩大图，这是很好的图片优化方式。
通过遵循这些简单的规则和**实践，您就可以在AnQiCMS模板中轻松、高效地引入各种静态资源，为您的网站打造卓越的用户体验和强大的功能。
常见问题 (FAQ)
1. 为什么推荐使用 {{system.TemplateUrl}} 引入本地静态资源，而不是直接写 /public/static/template_name/...？
使用 {{system.TemplateUrl}} 是因为它能够提供更强的灵活性和兼容性。当您网站的域名发生变化，或者在AnQiCMS的多站点管理功能中为不同站点配置了不同的模板，甚至只是更新了模板目录的名称时，{{system.TemplateUrl}} 会自动适应这些变化，确保静态资源的路径始终正确。如果直接硬编码路径，一旦这些配置改变，您就需要手动修改所有模板文件，非常不便。
2. 除了 /public/static/ 目录，我的静态资源还能放在AnQiCMS的哪些地方？
AnQiCMS默认会对外提供 /public/ 目录下的所有文件访问。因此，理论上您将静态资源放置在 /public/ 目录下的任何位置，都是可以通过 http://您的域名/文件名或路径 直接访问到的。不过，为了保持良好的组织结构和可维护性，强烈建议将所有与模板相关的静态资源统一放在 /public/static/ 目录下，并利用 {{system.TemplateUrl}} 进行引用，这有助于区分哪些是AnQiCMS系统级别的公共资源，哪些是您自定义模板的资源。
3. 在引入大量图片时，AnQiCMS有什么内置的优化功能吗？ 是的，AnQiCMS提供了实用的内置图片优化功能。您可以在后台的 “后台设置” -> “内容设置” 中找到相关选项。例如，您可以选择 “是否启动Webp图片格式” 将上传的JPG、PNG图片自动转换为体积更小的Webp格式，以及 “是否自动压缩大图” 并指定压缩宽度，从而有效减少图片文件大小，加快页面加载速度。这些功能可以帮助您在上传图片时自动进行优化，无需手动处理。