`pageDetail`标签如何获取并显示单页面的标题、内容和图像？
安企CMS pageDetail 标签：轻松获取与展示单页面信息
在网站内容管理中，单页面（如“关于我们”、“联系我们”、“服务条款”等）扮演着不可或缺的角色。它们通常承载着稳定、核心的信息，无需像文章或产品那样频繁更新。安企CMS为这类页面的展示提供了高效且灵活的工具——pageDetail 标签。掌握这个标签的使用，将让您在模板开发中游刃有余，轻松呈现精心设计的单页面内容。
什么是安企CMS中的单页面？
在安企CMS的后台，“页面资源”模块允许您创建和管理独立的单页面。这些页面与传统的文章或产品不同，它们没有分类的概念，每个页面都是一个独立的存在，拥有自己的标题、内容、缩略图，甚至可以自定义模板和URL别名。例如，一个企业的“公司简介”或“联系方式”页面，在安企CMS中就是典型的单页面。您可以在后台为这些页面编辑详细的内容，包括富文本、图片甚至Banner图，而 pageDetail 标签正是将这些后台管理的内容呈现在网站前端的核心秘诀。
pageDetail 标签的核心作用与基本语法
pageDetail 标签的主要作用是获取并显示指定单页面的详细数据。无论是当前正在访问的单页面，还是网站中任意一个特定ID或URL别名的单页面，它都能精确获取。
其基本语法结构如下：
{% pageDetail 变量名称 with name="字段名称" id="1" %}
这里有几个关键点需要理解：
变量名称：这是一个可选参数。如果您希望将获取到的数据赋值给一个自定义变量，以便在模板中多次引用或进行复杂处理，可以指定一个变量名（如pageInfo）。如果不指定，标签会直接输出该字段的值。name="字段名称"：这是最重要的参数，用于指定您想要获取的单页面具体信息，例如标题、内容、链接等。id="1"或token="your-alias"：这两个参数用于指定您想获取哪个单页面的数据。id：通过单页面的数字ID来指定。例如，id="1"将获取ID为1的单页面数据。token：通过单页面的URL别名来指定。例如，token="about-us"将获取URL别名为about-us的单页面数据。- 如果您不提供
id或token，pageDetail标签将默认尝试获取当前正在访问的单页面的数据。
siteId：在多站点管理的环境下，如果您需要跨站点调用其他站点下的单页面数据，可以通过此参数指定站点ID。一般情况下，无需设置。
常用字段详解与实际应用
接下来，我们详细看看 name 参数支持哪些字段，以及如何在模板中灵活运用它们。
1. 单页面标题 (Title)
这是单页面最基本的标识。
- 标签用法：
{% pageDetail with name="Title" %} - 示例：
<h1>{% pageDetail with name="Title" %}</h1> {# 如果你想获取ID为5的单页面标题 #} <p>另一个页面标题：{% pageDetail with name="Title" id="5" %}</p>
2. 单页面内容 (Content)
这是单页面的主体信息，通常包含富文本编辑器生成的HTML内容。
- 标签用法：
{% pageDetail with name="Content" %} - 重要提示：
Content字段输出的是包含HTML标签的内容，为了让浏览器正确渲染这些HTML，您必须配合使用|safe过滤器。此外，如果您的内容是Markdown格式，且希望在前端渲染为HTML，可以在标签中添加render=true参数。 - 示例：
<div class="page-body"> {% pageDetail pageContent with name="Content" %} {{ pageContent|safe }} {# 确保HTML内容被正确渲染 #} </div> {# 如果内容是Markdown且需要渲染 #} <div class="markdown-body"> {% pageDetail markdownContent with name="Content" render=true %} {{ markdownContent|safe }} </div>
3. 单页面图像 (Logo, Thumb, Images)
单页面常常需要图片来丰富视觉效果。
Logo(主图/大图)： 通常是单页面的封面或主要展示图。- 标签用法：
{% pageDetail with name="Logo" %} - 示例：
{% pageDetail pageLogo with name="Logo" %} {% if pageLogo %} {# 检查图片是否存在再显示是好习惯 #} <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %} 主图"> {% endif %}
- 标签用法：
Thumb(缩略图)： 单页面的缩略图版本。- 标签用法：
{% pageDetail with name="Thumb" %} - 示例：
{% pageDetail pageThumb with name="Thumb" %} {% if pageThumb %} <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %} 缩略图"> {% endif %}
- 标签用法：
Images(幻灯片/组图)： 如果后台为单页面上传了多张Banner图或组图，此字段将返回一个图片URL数组。- 标签用法：
{% pageDetail pageGallery with name="Images" %} - 示例：
{% pageDetail pageGallery with name="Images" %} {% if pageGallery %} <div class="page-banner-slider"> {% for image_url in pageGallery %} <img src="{{ image_url }}" alt="{% pageDetail with name='Title' %} Banner {{ forloop.Counter }}"> {% endfor %} </div> {% endif %}
- 标签用法：
4. 其他常用字段
Id(单页ID)： 获取当前页面的数字ID。- 标签用法：
{% pageDetail with name="Id" %}
- 标签用法：
Link(单页链接)： 获取单页面的访问URL。- 标签用法：
{% pageDetail with name="Link" %}
- 标签用法：
Description(单页描述)： 获取单页面的简介或描述信息，常用于<meta name="description">。- 标签用法：
{% pageDetail with name="Description" %}
- 标签用法：
实践案例：构建一个“联系我们”页面
假设您要构建一个“联系我们”的单页面，并在其中显示页面标题、描述、详细内容以及可能上传的几张联系方式图片。
”`twig {# 假设这是 contact.html 模板文件，且通过后台映射到“联系我们”单页面 #} <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% pageDetail with name="Title" %} - {% system with name="SiteName" %}</title>
<meta name="description" content="{% pageDetail with name="Description" %}">
{# 引用页面的规范链接，如果后台有设置的话 #}
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
<header>
{# 导航等其他通用部分 #}
</header>
<main class="container">
<section class="page-header">
<h1>{% pageDetail with name="Title" %}</h1>
<p