在网站运营中,我们常常需要为特定的内容创建独特的展示方式,比如为某个产品特色、服务介绍或公司简介设计一个独一无二的落地页。安企CMS(AnQiCMS)以其灵活的内容模型和高度定制化的特性,让这一切变得非常简单。今天,我们就来聊聊如何在自定义页面中,轻松展示单页面的内容、标题和图片,让你的网站内容呈现更具个性化。
理解安企CMS的“单页面”
首先,我们需要明确安企CMS中的“单页面”是什么。在安企CMS里,单页面指的是那些独立存在、不属于任何分类(如文章或产品分类)的页面。它们通常用于展示“关于我们”、“联系我们”、“隐私政策”等静态内容。你可以在后台的“页面资源”下的“页面管理”中创建和编辑这些单页面。每个单页面都有自己的标题、内容、图片,甚至可以自定义URL和模板。
创建与关联自定义模板:让单页面拥有专属展示
要在自定义页面中展示单页面内容,第一步是准备一个专属的模板文件,并将其与后台的单页面关联起来。
准备模板文件: 安企CMS的模板文件统一存放在
/template目录下的某个主题文件夹中。你可以在这里为你当前的网站主题创建一个新的HTML文件,例如,我们命名为custom-single-page.html。关联到单页面: 当你创建好这个模板文件后,前往安企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标签来获取单页面数据:
自动获取当前页面数据:如果你的自定义模板就是某个单页面本身所关联的模板,那么
pageDetail标签无需额外参数,会自动获取当前页面的所有信息。 例如:{{ page.Title }}(如果页面对象已预先加载)指定ID或URL别名获取特定页面数据:如果你想在一个非单页面模板(例如网站首页或文章详情页)中调用某个特定的单页面内容,就需要通过其ID或URL别名来指定。
- 按ID获取:
{% pageDetail myPage with id="123" %}(其中123是单页面的实际ID) - 按URL别名获取:
{% pageDetail myPage with token="about-us" %}(其中”about-us”是单页面的自定义URL别名)
- 按ID获取:
一旦你使用{% 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">