`pageList`和`pageDetail`标签如何管理和显示网站的单页面内容？
📅
👁️ 66
在网站运营中，单页面内容（如“关于我们”、“联系方式”、“服务介绍”等）扮演着至关重要的角色。它们通常是展示企业核心信息、品牌故事或特定服务详情的载体。为了高效地管理和显示这些页面，AnQiCMS 提供了 pageList 和 pageDetail 两个核心标签，让内容的组织和呈现变得既灵活又便捷。
单页面内容的后台管理
在 AnQiCMS 后台，单页面内容通过“页面资源”下的“页面管理”进行集中管理。在这里，您可以创建、编辑、删除以及对单页面进行各项配置。
创建或编辑一个单页面时，系统提供了丰富的字段供您填写：
- 页面名称：这是页面的主要标题，也是在前台显示给用户的名称。
- SEO 标题、关键词、描述：这些是为搜索引擎优化而设，您可以为每个单页面单独设置 TDK（Title, Description, Keywords），以提升页面在搜索引擎中的表现。
- 自定义 URL：为页面设置一个简洁、有意义的 URL 别名，这不仅有助于用户记忆，也是 SEO 友好的重要一环。系统会根据页面名称自动生成拼音 URL，您也可以手动修改。
- 单页面简介：对页面内容的简要概括，可用于列表展示或 Meta Description。
- 单页面内容：这是页面的主体内容，AnQiCMS 提供了功能强大的富文本编辑器，支持图文混排，甚至在启用 Markdown 编辑器后，还支持 Markdown 语法，让内容创作更加高效。
- 显示顺序：控制单页面在列表中的排列次序。
- 单页面模板：您可以为特定的单页面指定独立的模板文件。例如，为“联系我们”页面设计一个专属布局，只需在后台选择对应的模板文件（如
contact.html），确保该文件存在于您的模板设计包中。AnQiCMS 默认支持page/detail.html或page/detail-{单页ID}.html这样的模板命名约定。 - Banner 图、缩略图：上传与页面主题相关的图片，用于在页面顶部展示醒目的 Banner 或在列表页作为缩略图。
这些后台设置是前端标签能够灵活调用和展示的基础。
pageDetail 标签：精细化展示单个页面内容
当我们希望在网站前端展示一个具体的单页面内容时，pageDetail 标签便是您的得力助手。它允许您根据页面的 ID 或自定义 URL 别名（token）精确地获取并显示该页面的任何字段。
主要用途：
- 构建“关于我们”页面，展示公司简介。
- 制作“联系方式”页面，显示联系信息和地图。
- 展示某项服务的详细介绍页面。
使用方法：
pageDetail 标签的核心在于通过 name 参数指定您想要获取的具体字段。
{# 假设这是“关于我们”页面的模板文件 (page/detail.html 或 page/about-us.html) #}
<article>
<h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 获取当前页面的标题 #}
<div class="page-meta">
<span>更新时间：{% pageDetail with name="UpdatedTime" format="2006-01-02" %}</span>
</div>
<div class="page-content">
{# 获取页面主体内容，使用 |safe 过滤器确保HTML正确渲染 #}
{%- pageDetail pageContent with name="Content" %}
{{ pageContent|safe }}
</div>
{# 假设页面设置了Banner图，获取第一张作为背景 #}
{%- pageDetail bannerImages with name="Images" %}
{%- if bannerImages %}
<div class="page-banner" style="background-image: url({{ bannerImages[0] }});"></div>
{%- endif %}
{# 您也可以指定其他页面的内容，例如，在首页展示ID为1的单页面简介 #}
<div class="homepage-about-snippet">
<h2>{% pageDetail with name="Title" id="1" %}</h2>
<p>{% pageDetail with name="Description" id="1" %}</p>
<a href="{% pageDetail with name="Link" id="1" %}">了解更多</a>
</div>
{# 或者通过自定义URL别名来获取，例如别名为'contact-us'的联系页面 #}
<div class="contact-info">
<h3>联系我们</h3>
<p>地址：{% pageDetail with name="Address" token="contact-us" %}</p>
<p>电话：{% pageDetail with name="Phone" token="contact-us" %}</p>
</div>
</article>
关键字段：
Id：单页面 ID。Title：页面标题。Link：页面链接。Description：页面描述。Content：页面主体内容，通常需要结合|safe过滤器来正确渲染其中的 HTML。Logo：页面的主要图片或缩略图。Images：页面的 Banner 图集，通常是数组，可以通过[0]获取第一张。UpdatedTime,CreatedTime：页面的创建和更新时间，可使用format参数进行格式化显示。
pageList 标签：灵活展示多个页面链接
如果您需要在一个页面上列出多个单页面，例如在网站底部展示所有服务页面的链接，或者在侧边栏显示一个“快速链接”列表，pageList 标签就派上用场了。它会检索您在后台创建的所有单页面。
主要用途：
- 在网站底部区域显示“服务”、“关于”等常用页面的导航链接。
- 在侧边栏创建一个指向关键单页面的列表。
- 构建一个“所有页面