如何设置文档标题、简介、缩略图，并优化其在列表和详情页的显示效果？

AnQiCMS 提供了一套完善的机制，帮助我们细致地管理网站内容的标题、简介和缩略图。这些元素不仅是内容展示的基础，更是提升用户体验和搜索引擎优化（SEO）效果的关键。合理设置并优化它们在列表页和详情页的显示，能让我们的网站内容更具吸引力，也更容易被搜索引擎抓取和理解。

后台基础设置：让内容信息清晰准确

在 AnQiCMS 的后台，无论是发布文章、产品还是创建单页面，我们都会看到一系列用于设置这些核心信息的操作。

  1. 文档标题：内容的门面 每篇内容都需要一个引人注目的标题。在 内容管理 > 发布文档 页面，”文档标题” 是一个必填项。这个标题通常是用户在页面上看到的最大字号标题（通常映射为 HTML 的 <h1> 标签），直观反映了文章或产品的核心内容。一个清晰、准确且具有吸引力的标题，是吸引用户点击和阅读的第一步。

  2. 文档简介：内容的概览与摘要 “文档简介” 是对内容核心要点的精炼总结。它不仅能帮助用户快速了解内容梗概，也是搜索引擎判断内容相关性的重要依据。在发布内容时，如果手动填写了简介，系统会优先使用。如果留空，AnQiCMS 会很智能地从文档内容中自动提取前 150 字作为简介。我们建议手动撰写高质量的简介，因为它有机会在搜索结果中作为摘要显示，直接影响用户点击率。

  3. 文档缩略图：视觉焦点与内容预告 “文档图片”字段是用来设置文档缩略图的地方。缩略图是内容的视觉代表，在列表页中尤其重要，能大幅提升内容的吸引力。我们既可以选择从已上传的图片库中挑选，也可以上传新的图片。AnQiCMS 同样提供了贴心的自动处理功能：如果内容中包含图片但未手动指定缩略图，系统会自动将内容中的第一张图片提取出来作为缩略图。这意味着即使忘记上传，内容也不会缺少视觉元素。

  4. SEO 专用信息：深化搜索引擎友好度 除了面向用户的标题和简介，AnQiCMS 还提供了专门用于搜索引擎优化的字段，如 “SEO标题”、”关键词” 和 “标签简介”（对于标签）或 “页面关键词”（对于单页面）。

    • SEO标题 允许我们为页面的 <title> 标签设置不同于主标题的内容。这对于在搜索引擎结果页中展示更具竞争力的标题，或者解决主标题过长的问题非常有用。
    • 关键词 字段让我们能够明确告诉搜索引擎当前页面的核心主题。多个关键词之间用英文逗号 , 分隔，这符合搜索引擎的收录习惯。
    • 标签简介 或 页面简介 则为这些特定页面的 description meta 标签提供内容，进一步优化搜索结果摘要。

列表页的魅力：如何让内容脱颖而出

列表页是用户浏览网站内容的主要入口，在这里，标题、简介和缩略图的显示效果直接决定了内容的点击率。

在 AnQiCMS 的模板中，我们主要通过 {% archiveList %} 标签来获取文档列表。在这个循环中，每个 item 都包含了我们所需的信息：

  • 标题：{{item.Title}} 通常以超链接的形式展示，链接到内容的详情页。确保标题简洁明了，能瞬间吸引用户。
  • 简介：{{item.Description}} 作为标题的补充，简要说明内容要点。如果简介过长，可以结合 truncatechars 过滤器进行截取，例如 {{item.Description|truncatechars:80}}，以保持列表页的整洁。
  • 缩略图：{{item.Thumb}} 或 {{item.Logo}} item.Thumb 通常是经过系统处理的缩略图版本，适合在列表页直接使用。item.Logo 可能是原始的首图。在模板中，我们可以使用 <img> 标签来展示它，例如 <img src="{{item.Thumb}}" alt="{{item.Title}}">。别忘了给图片添加 alt 属性，这不仅有助于 SEO，也能在图片加载失败时提供文本说明。

例如，一个典型的列表项可能这样呈现：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            {% if item.Thumb %}
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
            {% endif %}
            <h5>{{item.Title}}</h5>
            <div>{{item.Description|truncatechars:100}}</div>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

这样的布局能让用户一眼看到标题、图片和简短的描述，快速判断是否感兴趣。

详情页的呈现：深入内容的视觉引导

详情页是用户深入阅读内容的场所，这里需要全面而精美地展示内容信息。

在详情页，我们主要利用 {% archiveDetail %} 标签来获取当前文档的详细信息。

  • 页面标题 (<title> 标签)： 为了优化 SEO，页面的 <title> 标签应该使用 {% tdk with name="Title" siteName=true %} 来动态生成，它会优先使用我们设置的 “SEO标题”，否则回退到文档标题，并可以根据配置附加网站名称，确保每个详情页都有一个独特且优化的页面标题。
  • 主标题：{{archive.Title}} 直接展示为页面上的 <h1> 标签，这是内容的视觉重心。
  • 简介：{{archive.Description}} 在主标题下方或内容区域上方展示，作为用户阅读前的再次确认。
  • 缩略图或主图：{{archive.Logo}} 或 {{archive.Thumb}} 在详情页通常会展示更清晰、更大尺寸的图片。archive.Logo 通常能提供更原始的图片，而 archive.Thumb 是系统生成的缩略图。我们可以根据模板设计选择合适的一个，或者在内容中插入多图展示。
  • 内容：{{archive.Content|safe}} 或 {{archive.Content|render|safe}} 这是详情页的核心。|safe 过滤器是必须的，以确保 HTML 内容能够正确解析显示，而不是作为纯文本输出。如果后台启用了 Markdown 编辑器，内容是 Markdown 格式，则需要使用 |render|safe 过滤器来将其转换为 HTML。

例如，一个详情页的简化结构可能如下：

<head>
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
</head>
<body>
    <h1>{{archive.Title}}</h1>
    <p class="description">{{archive.Description}}</p>
    {% if archive.Logo %}<img src="{{archive.Logo}}" alt="{{archive.Title}}" class="main-image">{% endif %}
    <div class="article-content">
        {{archive.Content|render|safe}}
    </div>
</body>

全局优化：让图片和元数据更高效

AnQiCMS 在后台提供了多个全局设置，能进一步优化内容在列表和详情页的显示效果。

  1. 缩略图处理方式与尺寸（内容设置）： 在 后台设置 > 内容设置 中，我们可以找到 “缩略图处理方式