如何获取并显示指定单页（如“关于我们”）的标题、内容、链接和缩略图？

在安企CMS中，网站的单页内容如“关于我们”、“联系我们”或“隐私政策”等，通常承载着重要的固定信息。这些页面不仅需要在独立的URL下展示，还可能需要在网站的其他区域（如页脚、侧边栏或首页的特定模块）提取其标题、简介、链接或缩略图等信息进行展示。安企CMS提供了简洁而强大的模板标签，让您能够轻松地在网站模板中实现这一需求。

理解安企CMS中的单页

在安企CMS的后台，您可以在“页面资源”下的“页面管理”中创建和管理这些单页。每个单页都包含了一系列可编辑的字段，例如页面名称（作为标题）、自定义URL（作为链接）、单页面简介、单页面内容以及可选的缩略图和大图（Logo）。这些信息都可以通过模板标签在前端页面上灵活调用。

核心标签：pageDetail

要获取并显示指定单页的详细信息，您需要使用安企CMS的pageDetail模板标签。这个标签专门设计用于提取单个页面的数据。

pageDetail标签的基本语法结构是：

{% pageDetail 变量名 with name="字段名称" id="页面ID" %}

或者，如果您更倾向于使用单页的自定义别名（URL token），语法如下：

{% pageDetail 变量名 with name="字段名称" token="页面别名" %}

• 变量名：这是一个可选参数，您可以将获取到的单页信息赋值给一个自定义变量，以便在后续代码中重复使用其属性，避免多次调用标签。
• name="字段名称"：指定您想获取的单页属性，例如"Title"（标题）、"Content"（内容）、"Link"（链接）、"Logo"（主图）或"Thumb"（缩略图）等。
• id="页面ID"：通过单页的数字ID来指定要获取哪个单页的信息。
• token="页面别名"：通过单页的自定义URL别名来指定要获取哪个单页的信息。这通常比ID更易读且在后台可配置。
• siteId：在多站点管理环境下，如果您需要获取其他站点的数据，可以指定 siteId="站点ID"。

下面我们将逐一演示如何获取并显示单页的各项关键信息。

获取并显示单页标题

要显示指定单页的标题，您可以使用name="Title"参数。例如，假设“关于我们”页面的ID是1，或者其自定义别名是about-us：

{# 通过ID获取并直接显示ID为1的单页标题 #}
<h2 class="page-title">{% pageDetail with name="Title" id="1" %}</h2>

{# 或者通过别名获取并直接显示“关于我们”页面的标题 #}
<h2 class="page-title">{% pageDetail with name="Title" token="about-us" %}</h2>

{# 也可以将标题赋值给变量再使用，这在需要多次引用时很有用 #}
{% pageDetail aboutTitle with name="Title" id="1" %}
<h2 class="page-title">{{ aboutTitle }}</h2>

获取并显示单页内容

单页的内容通常包含HTML标签或Markdown格式。在显示内容时，需要特别注意确保HTML能够正确渲染而不是作为纯文本显示，或者Markdown能够被转换为HTML。

{# 获取ID为1的单页内容。如果内容是HTML格式，需要使用 |safe 过滤器防止转义 #}
<div class="page-content">
    {% pageDetail with name="Content" id="1" %}|safe
</div>

{# 如果单页内容是以Markdown格式编写的，您需要先使用 |render 过滤器将其转换为HTML，然后再用 |safe 防止转义 #}
{% pageDetail pageContent with name="Content" token="about-us" %}
<div class="page-content">
    {{ pageContent|render|safe }}
</div>

请记住，|safe过滤器用于告诉模板引擎，输出的字符串是安全的HTML，不需要进行转义。|render过滤器则是在内容是Markdown时，将其处理成HTML。

获取并显示单页链接

单页的链接可以通过name="Link"参数获取，这对于创建“查看更多”按钮或导航链接非常实用：

{# 获取ID为1的单页链接，并创建一个“查看详情”按钮 #}
<a href="{% pageDetail with name="Link" id="1" %}" class="btn btn-primary">查看详情</a>

{# 或者通过别名获取链接 #}
<a href="{% pageDetail with name="Link" token="contact-us" %}" class="contact-link">联系我们</a>

获取并显示单页缩略图

单页通常可以上传一个主图（Logo）和经过系统处理的缩略图（Thumb）。根据您的设计需求，可以选择使用name="Logo"或name="Thumb"。

{# 获取ID为1的单页主图（Logo） #}
<div class="page-thumbnail">
    <img src="{% pageDetail with name="Logo" id="1" %}" alt="{% pageDetail with name="Title" id="1" %}" />
</div>

{# 获取ID为1的单页缩略图（Thumb），通常用于列表展示 #}
<div class="page-thumbnail-small">
    <img src="{% pageDetail with name="Thumb" id="1" %}" alt="{% pageDetail with name="Title" id="1" %}" />
</div>

{# 如果需要对图片进行进一步的尺寸处理，可以使用 |thumb 过滤器 #}
{% pageDetail pageMainImage with name="Logo" token="about-us" %}
<img src="{{ pageMainImage|thumb }}" alt="{% pageDetail with name="Title" token="about-us" %}" />

综合示例：在首页展示“关于我们”的摘要信息

现在，我们将以上元素结合起来，创建一个在网站首页展示“关于我们”页面摘要信息的模块。假设“关于我们”页面的ID是1。

”`twig

{# 定义一个变量来存储“关于我们”页面的ID或别名，便于管理 #}
{% set aboutPageIdentifier = 1