`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