如何显示AnQiCMS的单页面内容和相关图片？

在网站运营中，我们经常需要创建一些独立页面，比如“关于我们”、“联系方式”或“服务介绍”等。这些页面的内容相对固定，不属于常规的文章或产品列表，安企CMS（AnQiCMS）将它们统一归类为“单页面”，并提供了非常便捷的管理和展示方式。通过这套系统，您可以轻松地发布和更新这些内容，同时灵活地控制它们的显示样式和图片呈现。

创建与管理您的单页面内容

首先，您需要在安企CMS的后台创建并管理这些单页面。这非常直观：

在后台管理界面的左侧导航栏，找到并点击“页面资源”下的“页面管理”选项。在这里，您可以浏览已有的单页面列表，或者点击“添加单页面”按钮来创建一个新页面。

在添加或编辑单页面时，系统提供了丰富的字段供您填写：

  • 页面名称：这是您页面在前端显示的标题，也是用户最先看到的内容。
  • SEO标题、关键词、单页面简介：这些是为搜索引擎优化（SEO）准备的，您可以为每个单页面设置独特的TDK（Title, Description, Keywords），以帮助搜索引擎更好地理解和收录您的页面。如果“单页面简介”留空，系统会自动从页面内容中提取部分文字作为简介。
  • 自定义URL：这是一个非常实用的功能，允许您为单页面设置一个简洁、有意义的URL地址，例如将“关于我们”页面的URL设置为/about.html。这不仅提升了用户体验，对SEO也大有裨益。如果留空，系统会根据页面名称自动生成拼音URL。
  • 显示顺序：您可以为单页面设置一个数字，数字越小，页面在列表中的排序越靠前。
  • 单页面模板：这是实现个性化展示的关键。您可以为某个特定的单页面指定一个独立的模板文件，而不是使用默认的通用模板。例如，为“联系我们”页面创建一个contact.html模板。
  • Banner图与缩略图：这些字段让您能够为单页面上传吸引人的图片。Banner图通常用于页面顶部的视觉展示，而缩略图则可能出现在页面列表中。
  • 单页面内容：这是页面的主体内容，您可以使用富文本编辑器进行编辑，它支持丰富的文本格式、图片、视频插入等功能。安企CMS还支持Markdown编辑器，让您可以用更简洁的方式编写内容，并能自动渲染为HTML，甚至支持显示数学公式和流程图（需额外配置）。

在网站前端模板中展示单页面内容

创建好单页面后，下一步就是在您的网站前端模板中将它们呈现出来。安企CMS采用了类似Django模板引擎的语法，让内容调用变得简单。

1. 默认与自定义模板

通常，安企CMS会自动为您的单页面内容匹配模板。如果您没有为某个单页面指定自定义模板，系统会默认使用page/detail.html（或扁平化模式下的page.html）来渲染。

如果您在后台为特定单页面设置了“单页面模板”（例如page/about.html），那么系统就会优先使用您指定的这个模板。此外，安企CMS还支持基于单页面ID或自定义URL别名的自动模板识别，例如page/{单页面ID}.html或page/{单页面URL别名}.html。这意味着您可以为每个特殊页面定制完全不同的布局和风格。

2. 使用 pageDetail 标签调用内容

在模板文件中，要显示单页面的内容和相关图片，您主要会用到 pageDetail 这个标签。这个标签能够获取当前页面的所有详细信息。

假设您正在访问某个单页面，您无需额外指定ID，pageDetail 标签会自动获取当前页面的数据。如果需要调用其他指定ID的单页面，可以通过 id="XXX" 或 token="URL别名" 参数来获取。

以下是一些常用的调用示例：

  • 显示页面标题： 
    
<h1>{% pageDetail with name="Title" %}</h1>
  • 显示页面描述（简介）： 
    
<p>{% pageDetail with name="Description" %}</p>
  • 显示页面主体内容： 
    
{% pageDetail pageContent with name="Content" %}
<div class="page-content">
    {{ pageContent|safe }}
</div>
    重要提示：当您调用 Content 字段时，如果其中包含HTML代码（比如段落、图片、链接等），为了让浏览器正确解析并显示这些HTML结构，您需要在变量后面加上 |safe 过滤器。否则，页面可能会显示原始的HTML标签而不是渲染后的内容。

灵活处理单页面图片

单页面的图片展示在网站的视觉呈现中扮演着重要角色。安企CMS提供了三种主要的图片字段，让您能够根据需求灵活展示：

  • 单页缩略图大图 (Logo)：通常用于突出显示单页面的主视觉图或重要配图。
  • 单页缩略图 (Thumb)：经过系统处理的缩略图版本，适合在列表、卡片等小尺寸区域展示，加载速度更快。
  • 单页幻灯片组图 (Images)：如果您需要在一个单页面中展示多张图片作为轮播图或图片画廊，这个字段就能派上用场。

调用这些图片字段也非常简单：

  • 显示单页面的Logo图片： 
    
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
  • 显示单页面的缩略图： 
    
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />
  • 展示幻灯片组图： 由于 Images 返回的是一个图片地址数组，您需要使用 for 循环来遍历并显示它们。 
    
{% pageDetail pageImages with name="Images" %}
<div class="image-gallery">
    {% for item in pageImages %}
        <img src="{{ item }}" alt="{% pageDetail with name="Title" %}" />
    {% endfor %}
</div>

图片优化提示：安企CMS在后台的“内容设置”中提供了强大的图片优化功能。您可以配置是否自动下载远程图片、是否启用WebP图片格式（以减小图片体积）、是否自动压缩大图以及缩略图的处理方式和尺寸。合理利用这些设置，可以显著提升网站的加载速度和用户体验。

提升单页面的SEO和用户体验

除了内容和图片展示，安企CMS还内置了多项功能，帮助您优化单页面的搜索引擎表现和用户体验：

  • 自定义URL的SEO价值：就像前面提到的，“自定义URL”不仅让链接看起来更友好，也为搜索引擎提供了清晰的页面主题信号，有助于提升页面的关键词排名。
  • TDK标签的精细化控制：通过 {% tdk %} 标签，您可以精确地控制每个单页面的 <title>、<meta name="keywords"> 和 <meta name="description"> 内容。例如，在 <title> 标签中，您可以选择是否附加网站名称，以保持标题的简洁性或完整性： 
    
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
  • 内容编辑器的强大功能：安企CMS的富文本编辑器让您轻松排版内容，插入多媒体。如果您习惯使用Markdown，只需在后台“全局设置”->“内容设置”中启用Markdown编辑器，便可在单页面内容中直接使用Markdown语法，系统会自动将其渲染为HTML。对于Markdown内容，您甚至可以通过 render=true 参数手动控制是否渲染，例如 {{pageContent|render|safe}}。

通过这些灵活的功能，安企CMS让单页面内容的管理和展示变得既高效又充满可能性，无论是技术新手还是经验丰富的运营者，都能轻松打造出专业且吸引人的网站页面。

常见问题解答 (FAQ)

1. 如何为不同的单页面设置不同的展示样式？ 您可以通过两种方式实现： 一是利用后台“页面管理”中的“单页面模板”字段。您可以在此填写一个自定义的模板文件路径，