在网站运营中,我们常常需要为特定的内容创建独特的展示方式,比如为某个产品特色、服务介绍或公司简介设计一个独一无二的落地页。安企CMS(AnQiCMS)以其灵活的内容模型和高度定制化的特性,让这一切变得非常简单。今天,我们就来聊聊如何在自定义页面中,轻松展示单页面的内容、标题和图片,让你的网站内容呈现更具个性化。

理解安企CMS的“单页面”

首先,我们需要明确安企CMS中的“单页面”是什么。在安企CMS里,单页面指的是那些独立存在、不属于任何分类(如文章或产品分类)的页面。它们通常用于展示“关于我们”、“联系我们”、“隐私政策”等静态内容。你可以在后台的“页面资源”下的“页面管理”中创建和编辑这些单页面。每个单页面都有自己的标题、内容、图片,甚至可以自定义URL和模板。

创建与关联自定义模板:让单页面拥有专属展示

要在自定义页面中展示单页面内容,第一步是准备一个专属的模板文件,并将其与后台的单页面关联起来。

  1. 准备模板文件: 安企CMS的模板文件统一存放在/template目录下的某个主题文件夹中。你可以在这里为你当前的网站主题创建一个新的HTML文件,例如,我们命名为custom-single-page.html

  2. 关联到单页面: 当你创建好这个模板文件后,前往安企CMS后台的“页面资源”->“页面管理”中编辑或新建一个单页面。在单页面的编辑界面,你会看到一个“单页面模板”的选项。在这里,你可以填入你刚刚创建的模板文件的相对路径,比如custom-single-page.html。一旦保存,这个单页面就会使用你指定的模板进行渲染。

    此外,安企CMS还提供了一些默认的模板命名约定。例如,如果你希望某个单页面(假设其ID为10)拥有独立的模板,可以直接创建一个名为page/detail-10.html的文件,系统会自动识别并应用。或者,如果你为“关于我们”单页面设置了自定义URL别名为about,你可以创建一个page/about.html模板文件,后台也可以通过选择它来应用。

核心:pageDetail 标签的运用

在你的自定义模板文件(例如custom-single-page.html)中,我们需要利用安企CMS强大的模板标签来获取并展示单页面的各项信息。其中,pageDetail标签是获取单页面内容的利器。

pageDetail标签可以获取单页面的详细数据,包括标题、内容、描述、链接以及多种图片。

基本用法:

你可以通过两种主要方式使用pageDetail标签来获取单页面数据:

  1. 自动获取当前页面数据:如果你的自定义模板就是某个单页面本身所关联的模板,那么pageDetail标签无需额外参数,会自动获取当前页面的所有信息。 例如:{{ page.Title }}(如果页面对象已预先加载)

  2. 指定ID或URL别名获取特定页面数据:如果你想在一个非单页面模板(例如网站首页或文章详情页)中调用某个特定的单页面内容,就需要通过其ID或URL别名来指定。

    • 按ID获取:{% pageDetail myPage with id="123" %}(其中123是单页面的实际ID)
    • 按URL别名获取:{% pageDetail myPage with token="about-us" %}(其中”about-us”是单页面的自定义URL别名)

一旦你使用{% pageDetail myPage ... %}将单页面数据赋值给一个变量(例如myPage),你就可以通过点语法来访问它的各项属性了。

获取标题、内容和图片:

  • 标题 (Title){{ myPage.Title }}
  • 描述 (Description){{ myPage.Description }}
  • 内容 (Content){{ myPage.Content }}
  • 主图片/Logo (Logo){{ myPage.Logo }}
  • 缩略图 (Thumb){{ myPage.Thumb }}
  • 组图 (Images){{ myPage.Images }} (这是一个数组,需要循环遍历)

特别提示: 在显示单页面的Content内容时,如果内容包含HTML标签(例如富文本编辑器生成的样式),你必须使用|safe过滤器。这是因为安企CMS模板引擎出于安全考虑,默认会对所有输出进行HTML实体转义,防止XSS攻击。添加|safe会告诉系统这段内容是安全的,可以直接作为HTML渲染。如果你的内容是Markdown格式,且后台已启用Markdown编辑器,模板会尝试自动转换,但为确保兼容性,可以显式添加|render|safe过滤器。

实际操作:代码示例与解析

假设我们创建了一个custom-single-page.html模板,并将其关联到后台ID为123的单页面。以下是该模板中如何展示单页面内容的示例代码:

”`twig {# 假设您有一个基础模板,例如包含了页头、页脚等公共部分 #} {% extends ‘base.html’ %}

{% block title %}

{# 自动获取当前页面的SEO标题,如果未设置则 fallback 到单页面标题 #}
<title>{% tdk with name="Title" siteName=true %}</title>

{% endblock %}

{% block content %}

{# 使用pageDetail标签获取ID为123的单页面所有数据,并赋值给currentPage变量 #}
{% pageDetail currentPage with id="123" %}

{% if currentPage %}
    <article class="single-page-custom-layout">
        {# 显示单页面标题 #}
        <h1>{{ currentPage.Title }}</h1>

        {# 显示单页面描述(如果存在)#}
        {% if currentPage.Description %}
            <p class="description">{{ currentPage.Description }}</p>
        {% endif %}

        {# 显示单页面主图片/Logo #}
        {% if currentPage.Logo %}
            <div class="main-image">