`pageDetail`标签如何显示AnQiCMS单页面的标题、内容和缩略图?

AnQiCMS 提供了一种高效管理独立页面的方式,例如“关于我们”、“联系方式”等。这些页面通常拥有独立的标题、内容和图片,需要精确地在前端模板中呈现。pageDetail 标签便是安企CMS为实现这一目的而设计的核心工具,它允许我们轻松地从后台数据库中提取并展示单页面的详细信息。

理解 pageDetail 标签:单页面内容的展示核心

在AnQiCMS中,pageDetail 标签是专门用来获取和展示单个页面详细数据的。无论是您想显示“公司简介”的标题和内容,还是“服务条款”的详细文本,它都能提供所需的数据。使用这个标签时,您可以通过指定 name 参数来获取单页面的特定字段,例如页面标题、具体内容或者相关的图片。如果 name 参数省略,标签将直接输出整个单页面的数据对象,但这通常需要结合变量赋值才能有效利用。

pageDetail 标签的灵活性体现在它能够根据不同的需求获取数据:

  • id 参数:当您希望展示某个特定 ID 的单页面时,可以直接通过 id="页面ID" 的方式来精确指定。例如,id="1" 将获取 ID 为 1 的单页面数据。如果当前页面本身就是一个单页面(例如,您访问的 URL 路径就是该单页面的地址),通常可以省略此参数,pageDetail 会自动识别并获取当前页面的信息。

  • token 参数:除了 ID,您还可以使用单页面的URL别名(token)来指定页面,这在某些需要根据友好URL来定位页面的场景下非常有用。用法与 id 类似,例如 token="about-us"

  • siteId 参数:对于使用了AnQiCMS多站点管理功能的场景,如果需要获取其他站点下的单页面数据,可以通过设置 siteId="站点ID" 来实现跨站点调用,这对于构建统一内容源的多语言或多品牌网站非常方便。

核心内容字段的获取与展示

有了 pageDetail 标签,我们可以便捷地获取单页面的各个组成部分:

  • 单页标题 (Title):这是单页面的核心标识。您可以使用 {% pageDetail with name="Title" %} 来直接在模板中输出当前单页面的标题。如果您希望将结果赋值给一个变量以便后续多次使用或进行逻辑判断,可以这样写:{% pageDetail pageTitle with name="Title" %},然后通过 {{ pageTitle }} 来灵活地使用这个标题。

  • 单页内容 (Content):页面的主体信息就存储在这个字段中。获取方式是 {% pageDetail with name="Content" %}。值得注意的是,单页面内容往往包含丰富的 HTML 标签(如在后台使用富文本编辑器编辑的内容),为了确保这些标签能够被浏览器正确解析并渲染,而不是以纯文本形式显示原始代码,您通常需要结合 safe 过滤器来使用,例如 {{ pageContent|safe }}。此外,如果您的内容是在后台使用 Markdown 编辑器编写的,为了确保Markdown语法被正确转换为HTML,您还需要在 pageDetail 标签中添加 render=true 参数,例如 {% pageDetail pageContent with name="Content" render=true %}{{ pageContent|safe }}

  • 单页缩略图 (Thumb) 和大图 (Logo):这两者都是用于展示页面形象的图片。Logo 通常指单页面的主图或大图,而 Thumb 则是其缩略图版本。获取方式分别为 {% pageDetail with name="Logo" %}{% pageDetail with name="Thumb" %}。在模板中,您通常会将它们作为 <img> 标签的 src 属性值来使用,例如 <img src="{% pageDetail with name="Thumb" %}" alt="页面标题" />,这将把获取到的缩略图地址填充到图片的 src 属性中。

  • 单页幻灯片组图 (Images):有些单页面可能需要展示一组图片,例如轮播图或画廊。Images 字段会返回一个图片地址的数组。由于是一个数组,您需要通过 for 循环来遍历并显示这些图片。例如,可以先将图片数组赋值给一个变量 {% pageDetail pageImages with name="Images" %},然后使用 {% for item in pageImages %}<img src="{{ item }}" alt="页面图片" />{% endfor %} 来逐一输出每张图片。

  • 其他字段 (Id, Link, Description):除了上述核心字段,pageDetail 标签还能获取页面的唯一标识符 Id、页面访问链接 Link 以及页面简短描述 Description。这些字段的获取方式与 Title 类似,只需替换 name 参数的值即可。例如,获取页面链接是 {% pageDetail with name="Link" %}

实战演练:构建一个“关于我们”页面

假设您正在构建一个“关于我们”的单页面,并在后台创建了该页面。在您的模板文件(例如 page/detail.html 或专门为“关于我们”页面定制的 page/about-us.html)中,您可以这样组合使用 pageDetail 标签来呈现完整的页面内容:

”`twig {# 页面主标题 #}

{% pageDetail with name=“Title”