如何获取并展示特定单页面的完整内容和图片？

使用AnQiCMS来管理和展示网站内容，尤其是在处理像“关于我们”、“联系方式”这类独立且内容丰富的单页面时，其灵活性和强大功能就显得尤为突出。我们常常需要将这些页面的文字、图片甚至是图片集完整地呈现在网站上，而AnQiCMS提供了非常直观的方式来实现这一点。

接下来，我们将一起探索如何在AnQiCMS中获取并展示特定单页面的完整内容和图片，让你的网站内容呈现更加生动和多样。

内容创作：在AnQiCMS后台管理单页面

首先，要展示单页面的内容，我们当然需要在后台创建和填充它。在AnQiCMS的管理界面，你会找到“页面资源”下的“页面管理”功能。这里就是你创建、编辑所有独立页面的地方。

创建一个新的单页面或编辑已有的页面时，你会看到一系列可供填充的字段：

  1. 页面名称：这是页面的标题，也是用户在前台看到的主要名称。
  2. SEO标题、关键词、单页面简介：这些是为搜索引擎优化准备的，有助于你的单页面在搜索结果中获得更好的展示。
  3. 自定义URL：如果你希望这个单页面有一个更具描述性或更短的链接地址，可以在这里设置。AnQiCMS会自动根据页面名称生成拼音作为默认URL，但你完全可以手动调整，确保它在全站中是唯一的。
  4. 单页面内容：这是页面的主体部分，你可以在这里使用AnQiCMS强大的富文本编辑器来编写文字、插入图片、视频，甚至可以启用Markdown编辑器来编写更具结构化的内容。
  5. 缩略图：为一个页面设置缩略图，这通常用于在列表或导航中作为页面的代表性图片展示。
  6. 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标签提供了多种图片获取方式：

  1. 主图/缩略图：通常用于页面头部或在其他地方引用时的代表图。

    • 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">

  2. 幻灯片组图（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" %}