如何设置文档标题、简介、缩略图，并优化其在列表和详情页的显示效果？
AnQiCMS 提供了一套完善的机制，帮助我们细致地管理网站内容的标题、简介和缩略图。这些元素不仅是内容展示的基础，更是提升用户体验和搜索引擎优化（SEO）效果的关键。合理设置并优化它们在列表页和详情页的显示，能让我们的网站内容更具吸引力，也更容易被搜索引擎抓取和理解。
后台基础设置：让内容信息清晰准确
在 AnQiCMS 的后台，无论是发布文章、产品还是创建单页面，我们都会看到一系列用于设置这些核心信息的操作。
文档标题：内容的门面 每篇内容都需要一个引人注目的标题。在 内容管理 > 发布文档 页面，”文档标题” 是一个必填项。这个标题通常是用户在页面上看到的最大字号标题（通常映射为 HTML 的
<h1>标签），直观反映了文章或产品的核心内容。一个清晰、准确且具有吸引力的标题，是吸引用户点击和阅读的第一步。文档简介：内容的概览与摘要 “文档简介” 是对内容核心要点的精炼总结。它不仅能帮助用户快速了解内容梗概，也是搜索引擎判断内容相关性的重要依据。在发布内容时，如果手动填写了简介，系统会优先使用。如果留空，AnQiCMS 会很智能地从文档内容中自动提取前 150 字作为简介。我们建议手动撰写高质量的简介，因为它有机会在搜索结果中作为摘要显示，直接影响用户点击率。
文档缩略图：视觉焦点与内容预告 “文档图片”字段是用来设置文档缩略图的地方。缩略图是内容的视觉代表，在列表页中尤其重要，能大幅提升内容的吸引力。我们既可以选择从已上传的图片库中挑选，也可以上传新的图片。AnQiCMS 同样提供了贴心的自动处理功能：如果内容中包含图片但未手动指定缩略图，系统会自动将内容中的第一张图片提取出来作为缩略图。这意味着即使忘记上传，内容也不会缺少视觉元素。
SEO 专用信息：深化搜索引擎友好度 除了面向用户的标题和简介，AnQiCMS 还提供了专门用于搜索引擎优化的字段，如 “SEO标题”、”关键词” 和 “标签简介”（对于标签）或 “页面关键词”（对于单页面）。
- SEO标题 允许我们为页面的
<title>标签设置不同于主标题的内容。这对于在搜索引擎结果页中展示更具竞争力的标题，或者解决主标题过长的问题非常有用。 - 关键词 字段让我们能够明确告诉搜索引擎当前页面的核心主题。多个关键词之间用英文逗号
,分隔，这符合搜索引擎的收录习惯。 - 标签简介 或 页面简介 则为这些特定页面的
descriptionmeta 标签提供内容，进一步优化搜索结果摘要。
- SEO标题 允许我们为页面的
列表页的魅力：如何让内容脱颖而出
列表页是用户浏览网站内容的主要入口，在这里，标题、简介和缩略图的显示效果直接决定了内容的点击率。
在 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 在后台提供了多个全局设置，能进一步优化内容在列表和详情页的显示效果。
- 缩略图处理方式与尺寸（内容设置）： 在 后台设置 > 内容设置 中，我们可以找到 “缩略图处理方式