如何获取并展示特定单页面的完整内容和图片？
使用AnQiCMS来管理和展示网站内容，尤其是在处理像“关于我们”、“联系方式”这类独立且内容丰富的单页面时，其灵活性和强大功能就显得尤为突出。我们常常需要将这些页面的文字、图片甚至是图片集完整地呈现在网站上，而AnQiCMS提供了非常直观的方式来实现这一点。
接下来，我们将一起探索如何在AnQiCMS中获取并展示特定单页面的完整内容和图片，让你的网站内容呈现更加生动和多样。
内容创作：在AnQiCMS后台管理单页面
首先，要展示单页面的内容，我们当然需要在后台创建和填充它。在AnQiCMS的管理界面，你会找到“页面资源”下的“页面管理”功能。这里就是你创建、编辑所有独立页面的地方。
创建一个新的单页面或编辑已有的页面时，你会看到一系列可供填充的字段：
- 页面名称：这是页面的标题，也是用户在前台看到的主要名称。
- SEO标题、关键词、单页面简介：这些是为搜索引擎优化准备的，有助于你的单页面在搜索结果中获得更好的展示。
- 自定义URL：如果你希望这个单页面有一个更具描述性或更短的链接地址，可以在这里设置。AnQiCMS会自动根据页面名称生成拼音作为默认URL，但你完全可以手动调整，确保它在全站中是唯一的。
- 单页面内容：这是页面的主体部分，你可以在这里使用AnQiCMS强大的富文本编辑器来编写文字、插入图片、视频，甚至可以启用Markdown编辑器来编写更具结构化的内容。
- 缩略图：为一个页面设置缩略图，这通常用于在列表或导航中作为页面的代表性图片展示。
- Banner图：这个功能非常实用，你可以为单页面上传一组Banner图片，用于在页面顶部做轮播展示，让页面更具视觉冲击力。
填写完这些信息后，保存页面，你的单页面内容就准备好了。
前端展示：如何利用模板标签呈现单页面信息
接下来，我们就要在网站前端的模板文件中，通过AnQiCMS提供的标签来获取并展示这些单页面的内容和图片。AnQiCMS的模板系统非常强大，使用了类似Django模板引擎的语法，即使是初学者也能很快上手。
要获取特定单页面的详细信息，我们主要会用到pageDetail这个标签。
获取单页基础信息
pageDetail标签可以帮助我们获取页面的标题、描述等基本信息。
如果你在当前正在浏览的就是这个单页面，那么直接使用不带id或token参数的pageDetail即可自动获取当前页面的信息。
{# 获取当前页面的标题 #}
<title>{% pageDetail with name="Title" %}</title>
{# 获取当前页面的描述 #}
<meta name="description" content="{% pageDetail with name="Description" %}">
如果需要获取指定ID或URL别名的单页面信息，例如，你的“关于我们”页面ID是10，或者其自定义URL别名是about-us，你可以这样获取：
{# 通过ID获取页面标题 #}
<h1>{% pageDetail with name="Title" id="10" %}</h1>
{# 通过URL别名获取页面描述 #}
<p>{% pageDetail with name="Description" token="about-us" %}</p>
展示单页面内容
单页面的核心自然是其丰富的内容。pageDetail标签同样可以帮助我们展示“单页面内容”字段。
{# 展示当前页面的内容 #}
<div class="page-content">
{% pageDetail pageContent with name="Content" %}
{{ pageContent|safe }}
</div>
这里需要特别注意|safe这个过滤器。AnQiCMS出于安全考虑，默认会对所有输出内容进行HTML转义，防止XSS攻击。但是，单页面内容往往包含我们编辑时添加的HTML标签（如图片、段落格式等），如果不对其进行|safe处理，这些HTML代码就会被原样显示出来，而不是被浏览器解析。
如果你的单页面内容启用了Markdown编辑器，那么你还需要添加render=true参数，让AnQiCMS在前端渲染时将Markdown语法转换为HTML：
{# 展示并渲染Markdown格式的单页面内容 #}
<div class="page-content">
{% pageDetail pageContent with name="Content" render=true %}
{{ pageContent|safe }}
</div>
呈现单页面图片
单页面中的图片是提升用户体验的重要元素。pageDetail标签提供了多种图片获取方式：
主图/缩略图：通常用于页面头部或在其他地方引用时的代表图。
Logo：通常是设置的原始大图或尺寸较大的图。Thumb：通常是经过AnQiCMS自动处理的缩略图，尺寸较小。
{# 获取单页面的主图 #} {% pageDetail pageLogo with name="Logo" %} <img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="page-main-image"> {# 获取单页面的缩略图 #} {% pageDetail pageThumb with name="Thumb" %} <img src="{{ pageThumb }}" alt="{% pageDetail with name="Title" %}" class="page-thumbnail">幻灯片组图（Banner图）：如果你在后台上传了多张Banner图，可以使用
Images字段来获取一个图片URL数组，然后通过循环来展示。{# 获取单页面的幻灯片组图，并循环展示 #} {% pageDetail pageBanners with name="Images" %} {% if pageBanners %} <div class="page-banner-slider"> {% for imgUrl in pageBanners %} <img src="{{ imgUrl }}" alt="{% pageDetail with name="Title" %}-banner" class="banner-item"> {% endfor %} </div> {% endif %}
综合运用：一个展示单页面的模板片段示例
现在，让我们把这些元素组合起来，看一个完整的单页面展示模板片段：
”`twig {# page/detail.html 或 page/{自定义别名}.html #} <!DOCTYPE html>
<meta charset="UTF-8">
{# 获取并设置页面标题，并附加网站名称后缀 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取并设置页面关键词 #}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
{# 获取并设置页面描述 #}
<meta name="description" content="{% tdk with name="Description" %}">
{# 如果页面有规范链接，则添加 #}
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{# 导航栏通常会使用 navList 标签引入 #}
{% include "partial/header.html" %}