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

在安企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