如何自定义安企CMS网站前端的内容展示布局？

AnQiCMS 提供了高度灵活的前端内容展示布局自定义能力，让网站能够根据具体需求呈现独具风格的视觉效果和信息结构。这不仅关乎网站的外观，更在于如何高效、精准地将内容传达给访问者。通过理解 AnQiCMS 的模板机制和各项功能，用户可以轻松实现从整体主题风格到单篇内容展示的精细化控制。

模板是前端布局的核心

在 AnQiCMS 中，网站的前端布局主要通过模板（Templates）来实现。这些模板文件通常以 .html 为后缀，统一存放在系统的 /template 目录下。每一套网站主题都拥有一个独立的模板文件夹，其中包含一个 config.json 文件来定义主题的名称、类型等基本信息。AnQiCMS 采用了类似 Django 模板引擎的语法，这使得熟悉 Web 开发的用户能够很快上手。它支持变量输出（如 {{变量}}）、条件判断（{% if %}）、循环遍历（{% for %}）等多种控制结构，为动态内容展示提供了强大支持。

在模板类型上，AnQiCMS 提供了自适应（响应式）、代码适配以及 PC+手机独立站点三种模式。这意味着无论您的网站目标用户主要使用哪种设备，都能找到合适的模板策略来优化其访问体验。

自定义内容展示的层级与方法

AnQiCMS 的前端布局自定义可以从多个层面展开：

1. 整体站点主题与布局切换： 想象一下您的网站就像一个舞台，模板就是这个舞台的整体布景设计。通过在后台选择不同的模板主题，您可以一键切换网站的整体风格和布局。每个主题都带有自己的 config.json 文件，定义了该主题的特性。如果您想开发全新的主题，只需在 /template 目录下创建新的文件夹，并按照约定组织文件即可。

2. 页面级别的通用布局调整： 网站中的每一个页面类型（比如首页、文章列表页、文章详情页）都有其对应的模板文件。例如，index/index.html 对应首页，{模型table}/detail.html 对应内容详情页，{模型table}/list.html 对应内容列表页。为了提高模板的复用性，您可以将页眉、页脚、侧边栏等常用部分提取出来，放入 partial/ 目录下，然后在需要的地方通过 {% include "partial/header.html" %} 这样的标签轻松引用。这种模块化的设计，让维护和更新变得更加高效。

3. 内容模型与自定义字段的深度定制： AnQiCMS 的强大之处在于其“灵活的内容模型”功能。它允许您根据业务需求创建或修改内容模型，而不仅仅局限于传统的文章和产品。您可以为每一种内容类型（如新闻、产品、案例、服务等）定义独有的字段，例如，为“产品”模型添加“颜色”、“尺寸”、“材质”等自定义属性。这些自定义字段可以在内容管理后台方便地填写，并在前端模板中通过 {% archiveParams %} 或直接通过 {{archive.自定义字段名}} 的方式调用并展示，实现内容的个性化展示。

4. 精细到单篇内容的布局控制： 如果您想对某一篇特定的文章、某一个分类页面，甚至是某一个单页面进行独一无二的布局设计，AnQiCMS 也提供了这样的粒度控制。在发布或编辑内容（文章、产品、单页、分类）时，后台提供了“文档模板”、“分类模板”或“单页面模板”的选项。您可以在此处指定一个自定义的模板文件（例如 download.html），该内容将不再使用默认模板，而是加载您指定的文件来展示。这使得您可以为一些特殊的页面（如落地页、活动页）提供完全定制化的设计，而不影响其他页面的通用布局。

5. 利用模板标签动态展示数据： 真正让前端布局活起来的，是 AnQiCMS 提供的丰富模板标签。这些标签是连接模板和后台数据的桥梁，让您能够动态地调取和展示各类信息：

   • 全局信息类标签：{% system %} 可以获取网站名称、LOGO、备案号等全局配置；{% contact %} 则能调取联系方式；{% tdk %} 帮助您管理页面的 SEO 标题、关键词和描述；{% navList %} 用于构建灵活多变的导航菜单。
   • 内容展示类标签：{% archiveList %} 和 {% archiveDetail %} 用于文章或产品列表和详情的展示；{% categoryList %} 和 {% categoryDetail %} 处理分类信息的列表和详情；{% pageList %} 和 {% pageDetail %} 则用于单页面的列表和详情展示；{% tagList %} 和 {% tagDataList %} 用于标签及其关联内容的展示。
   • 逻辑与辅助标签：在模板内部进行逻辑判断（{% if %}）或循环输出（{% for %}）同样简单直观。{% pagination %} 标签能轻松实现内容的分页功能，{% prevArchive %} 和 {% nextArchive %} 方便实现上一篇/下一篇功能。此外，还有 stampToDate 用于时间格式化，以及 include、extends 和 macro 等标签，用于模板的复用和结构化。

6. 内容显示细节的优化： 除了结构上的布局，内容的视觉呈现细节也同样重要。AnQiCMS 在内容设置中提供了图片处理选项，如是否自动将上传的图片转换为 WebP 格式以优化加载速度、是否自动压缩大图、以及多种缩略图生成方式（按最长边等比缩放、按最长边补白、按最短边裁剪），并允许您自定义缩略图的尺寸。这些功能可以帮助网站在保证视觉效果的同时，提升页面加载性能。此外，系统还内置了 Markdown 编辑器支持，以及通过集成第三方库来支持数学公式和流程图的渲染，让内容的展示形式更加丰富。

通过以上多层次、多维度的自定义方式，AnQiCMS 赋予了用户极大的自由度，能够将网站的前端布局设计得既符合品牌形象，又贴合用户体验，从而更好地实现网站的内容运营目标。

常见问题 (FAQ)

1. 我应该把自定义的模板文件放在哪里？它们的文件名有什么约定吗？ 您的自定义模板文件应放在 /template 目录下，每个主题一个独立的子文件夹。AnQiCMS 遵循一套约定来匹配模板文件：

• 公共代码片段：可以放在主题文件夹内的 partial/ 目录中，如 header.html、footer.html。
• 首页：index/index.html 或 index.html。
• 内容模型首页：{模型table}/index.html 或 {模型table}_index.html。
• 文档列表页：{模型table}/list.html 或 list-{分类ID}.html，也可以是 page/{单页面ID}.html。 *