在AnQiCMS中，为“关于我们”这类单页面设置独立的显示布局和元素，能够让网站内容呈现更具特色和专业性。AnQiCMS凭借其灵活的模板引擎和模块化设计，让这一过程变得直观且高效。
为什么需要为单页面定制专属布局？
在使用AnQiCMS构建网站时，我们经常会遇到这样的需求：某些特定页面，比如“关于我们”、“联系我们”或者一些专题落地页，需要有不同于常规文章或产品详情页的独特布局和展示元素。定制单页面布局的好处显而易见：
- 提升用户体验： 独特的布局可以更好地引导用户关注核心信息，提供更清晰的阅读路径，避免信息过载。
- 强化品牌形象： 专属的设计能更好地传达企业文化和品牌调性，让“关于我们”页面不仅仅是文字堆砌，而成为品牌故事的生动载体。
- 优化SEO表现： 通过定制化的内容结构和元素排布，可以更好地突出页面的重点关键词，提升搜索引擎的抓取和理解效率。
- 实现特定功能： 例如，在“联系我们”页面集成地图、表单；在“关于我们”页面展示团队成员图片墙、公司发展历程时间轴等，这些都需要特定的布局支持。
AnQiCMS 如何实现单页面自定义布局？
AnQiCMS基于Go语言开发，但前端模板采用了类似Django的模板引擎语法，文件通常以.html后缀存放于/template目录下。这种设计让模板开发直观且高效。
核心在于自定义模板文件和后台关联。
首先，要为“关于我们”页面设置专属布局，我们需要在当前使用的模板目录下，创建一个名为page/about.html的文件。这个about.html就是“关于我们”页面的专属布局文件。
AnQiCMS在模板设计上非常灵活，它默认支持几种单页面模板命名约定：
page/detail.html：这是所有单页面的通用默认模板。page/detail-{单页ID}.html：如果你想根据页面的ID来定制，可以使用这种格式。page/{自定义URL别名}.html：这是最灵活的方式，可以为页面指定一个易于识别的名称，例如为“关于我们”页面创建page/about.html。
接下来，登录AnQiCMS后台，导航到“页面资源”下的“页面管理”。找到或新建你的“关于我们”单页面，在编辑页面的“单页面模板”字段中，填写你刚刚创建的模板文件名——about.html。保存后，当你访问“关于我们”页面时，系统就会自动加载page/about.html文件作为其布局。
在自定义布局中添加页面元素
一旦有了专属的page/about.html模板文件，我们就可以利用AnQiCMS提供的各种模板标签（tags）来填充内容和动态元素了。
获取单页面核心内容： 在
about.html中，你可以通过pageDetail标签轻松获取“关于我们”页面的标题、正文、描述、缩略图等。- 获取页面标题：
{% pageDetail with name="Title" %} - 获取页面内容：
{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}（注意这里需要|safe过滤器，以确保HTML内容能正确渲染） - 获取页面描述：
{% pageDetail with name="Description" %} - 获取上传的Banner图或组图：
{% pageDetail pageImages with name="Images" %}(通常用pageImages[0]获取第一张图作为Banner)
- 获取页面标题：
显示网站通用信息：
system标签可以帮助你调用全局设置中的网站名称、Logo、备案号等。- 网站名称：
{% system with name="SiteName" %} - 网站Logo：
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
- 网站名称：
展示联系方式：
contact标签能方便地显示后台“联系方式设置”中的信息，非常适合“关于我们”页面中包含联系信息的部分。- 联系电话：
{% contact with name="Cellphone" %} - 联系邮箱：
{% contact with name="Email" %} - 公司地址：
{% contact with name="Address" %}
- 联系电话：
SEO优化元素：
tdk标签用于设置页面的Title、Keywords、Description以及Canonical URL，这对搜索引擎优化至关重要。- 页面标题：
<title>{% tdk with name="Title" siteName=true %}</title>（siteName=true可自动追加网站名称） - 页面关键词：
<meta name="keywords" content="{% tdk with name="Keywords" %}"> - 页面描述：
<meta name="description" content="{% tdk with name="Description" %}"> - 规范链接：
{%- tdk canonical with name="CanonicalUrl" %}{%- if canonical %}<link rel="canonical" href="{{canonical}}" />{%- endif %}
- 页面标题：
集成其他内容（例如最新文章列表）： 虽然是单页面，但你可能希望在“关于我们”页面中展示一些相关内容，比如公司新闻。
archiveList标签可以实现这一点。- 显示最新3篇文章：
这里的{% archiveList latestArticles with type="list" moduleId="1" limit="3" %} {% for article in latestArticles %} <p><a href="{{ article.Link }}">{{ article.Title }}</a></p> {% endfor %} {% endarchiveList %}moduleId="1"假设文章模型ID为1，你可以根据实际情况调整。
- 显示最新3篇文章：
构建“关于我们”页面的布局示例
结合上述标签，一个基础的page/about.html可能看起来像这样：
”`html {% extends “base.html” %} {# 假设你的网站有一个统一的基础布局文件 base.html #}
{% block title %}
{# 调用TDK标签，设置页面标题、关键词