在网站运营中，我们经常需要创建一些内容独特、设计布局也需要个性化的页面，比如“关于我们”、“联系方式”或者某个特定的活动详情页。安企CMS（AnQiCMS）为我们提供了强大的自定义页面（单页）功能，不仅能让我们轻松管理这些页面的文字内容，还能灵活地展示它们专属的图片和定制化的布局。
那么，具体如何操作，才能让自定义页面拥有自己独有的内容和图片展示方式呢？这主要分为几个步骤：首先在后台创建和编辑单页，然后制作或选用一个专属的页面模板，接着在模板中巧妙地调用出这些内容和图片，最后将模板应用到对应的单页上。
一、在后台创建和管理自定义页面（单页）
一切从内容开始。在安企CMS的后台，您可以找到“页面资源”下的“页面管理”功能。在这里，您可以轻松创建新的单页或编辑现有页面。
当您添加或编辑一个单页时，会看到一系列可以填写的字段：
- 页面名称：这是您单页的标题，通常会显示在网站前台。
- SEO标题、关键词、单页面简介：这些是为搜索引擎优化准备的，能帮助您的页面获得更好的排名。
- 单页面内容：这是页面的核心文本内容，安企CMS提供了功能丰富的编辑器，您可以像写文章一样排版文字、插入图片。
- Banner图：这是一个非常实用的功能，专门用于上传多张图片作为页面的横幅或轮播图。当您的“关于我们”页面需要一个精美的顶部大图，或者活动页需要多张宣传图时，就可以在这里上传。
- 缩略图：如果您的单页需要在某些列表（例如页面导航或相关推荐）中显示一个代表性的图片，可以在此上传。
上传完图片和编辑好内容后，暂时不需要担心它们的显示问题，我们先保存好这些后台数据。
二、制作或选用专属的页面模板
默认情况下，安企CMS的自定义页面会使用一个名为page/detail.html的通用模板。但如果想让“关于我们”页面看起来与众不同，我们就需要为它量身定制一个模板。
安企CMS的模板文件都存放在/template/您的模板目录/下。针对自定义页面，您可以在page/文件夹内创建专属模板。这里有几种灵活的命名方式：
- 通用单页模板：
page/detail.html，这是所有单页默认调用的模板。 - 按ID指定模板：
page/detail-{单页ID}.html，如果您想为特定ID的单页创建模板，例如ID为10的单页，可以命名为page/detail-10.html。 - 自定义名称模板：这是最常用的方式，您可以为模板取一个有意义的名字，比如
page/about.html或page/contact.html。
无论是哪种命名方式，模板内部都将使用AnQiCMS提供的Django风格的模板标签来调用后台数据。静态资源如CSS、JavaScript和图片则通常存放在/public/static/目录中，并在模板中引用。
三、在模板中调用页面特有内容和图片
有了专属模板文件，接下来就是如何将后台编辑的内容和上传的图片展示出来了。安企CMS提供了pageDetail标签，可以非常方便地获取单页的各项数据。
在您的自定义页面模板（例如page/about.html）中，您可以这样调用页面的标题、内容和图片：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% pageDetail with name="Title" %}</title>
<meta name="description" content="{% pageDetail with name="Description" %}">
<meta name="keywords" content="{% pageDetail with name="Keywords" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
{# 引用公共头部，如header.html #}
{% include "partial/header.html" %}
<main class="page-container">
<h1 class="page-title">{% pageDetail with name="Title" %}</h1>
{# 显示页面的Banner图组 #}
<div class="page-banners">
{% pageDetail pageImages with name="Images" %}
{% for img in pageImages %}
<img src="{{ img }}" alt="{% pageDetail with name="Title" %}" class="banner-image">
{% endfor %}
{% endpageDetail %}
</div>
{# 显示页面的缩略图（如果需要作为主图展示） #}
{% pageDetail pageLogo with name="Logo" %}
{% if pageLogo %}
<div class="page-thumbnail">
<img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="main-thumb">
</div>
{% endif %}
{% endpageDetail %}
<div class="page-content">
{# 调用单页内容，注意使用 |safe 过滤器防止HTML被转义 #}
{% pageDetail pageContent with name="Content" %}
{{ pageContent|safe }}
{% endpageDetail %}
</div>
</main>
{# 引用公共底部，如footer.html #}
{% include "partial/footer.html" %}
</body>
</html>
在上面的代码中，{% pageDetail with name="Title" %}会直接输出页面名称，{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}则会输出您在后台编辑器中编辑的单页内容，并通过|safe过滤器确保HTML代码能被浏览器正确解析。
最关键的是图片部分：
{% pageDetail pageImages with name="Images" %}用来获取您在后台“Banner图”中上传的图片列表。由于这里可能有多张图片，所以需要用{% for img in pageImages %}循环来逐一显示它们。{% pageDetail pageLogo with name="Logo" %}则可以获取您在后台“缩略图”中上传的单张图片。
通过这些标签，您可以完全控制页面内容的排版和图片的展示方式。
四、将自定义模板应用到单页
完成了模板文件的制作，最后一步就是将这个模板与您的单页关联起来。
回到安企CMS后台的“页面管理”，编辑您想要应用模板的单页。在编辑页面中，找到名为“单页面模板”的输入框。在这里，您需要填入您的自定义模板文件的相对路径和名称。
例如，如果您创建的模板文件是/template/您的模板目录/page/about.html，那么在“单页面模板”字段中，您只需要填写page/about.html即可。保存设置后，访问该单页，您就会看到它已经焕然一新，采用了您专属的布局、内容和图片展示方式。
通过这几个步骤，您就可以让安企CMS的每个自定义页面都拥有独特的魅力，无论是内容还是视觉呈现，都能完美符合您的运营需求。
常见问题 (FAQ)
1. 如何为不同的自定义页面（单页）使用不同的模板？
您可以为每个需要独特设计的单页创建不同的模板文件，并使用“自定义名称模板”的方式命名，例如page/about-us.html、page/contact-us.html。然后在后台编辑相应的单页时，在“单页面模板”字段中填入对应的模板文件名（如page/about-us.html）。这样，每个单页就可以拥有自己专属的显示样式了。
2. 我的自定义页面内容或图片在前端没有正确显示，这是为什么？ 有几个常见原因：
- 模板路径不正确：请检查您在后台“单页面模板”字段中填写的路径是否与实际模板文件路径匹配（例如，确保
page/about.html确实存在于/template/您的模板目录/page/下）。 |safe过滤器缺失：如果您单页内容包含HTML代码（比如粗体、链接、图片等），在模板中调用{{ pageContent }}时必须加上|safe过滤器，即{{ pageContent|safe }}，否则系统会默认转义HTML代码，导致它们只显示文本而无法正常渲染。- 图片路径问题：确保您上传的图片在后台显示正常，并且模板中调用图片的代码无误。如果图片是上传到本地的，路径通常由系统自动生成；如果是外部图片，确保URL可访问。
- 缓存问题：有时浏览器或系统缓存可能会导致更改未能及时显示，尝试清除浏览器缓存或在AnQiCMS后台点击“更新缓存”再查看。
3. 除了内容和图片，自定义页面还可以设置哪些有利于SEO的信息？
在创建或编辑自定义页面时，您可以在后台填写“SEO标题”、“关键词”和“单页面简介”字段。这些信息将直接映射到页面的HTML <title> 标签