安企CMS (AnQiCMS) 在内容管理方面提供了强大而灵活的功能，尤其是在构建文章详情页面时，能帮助我们高效地呈现高质量内容。一个设计良好的文章详情页，不仅能清晰地展示文章的核心信息，还能通过相关内容的推荐，有效提升用户的阅读体验和网站的粘性。

文章标题与核心内容：页面的灵魂

在安企CMS中，文章详情页面的核心是文章标题和主体内容。它们是吸引读者、传递信息的基础。

要显示文章的标题，最直接的方式是使用内置的 archive.Title 变量。例如，我们通常会把标题放在 <h1> 标签中：

<h1>{{archive.Title}}</h1>

文章的主体内容则通过 archive.Content 来展示。这里需要特别注意，由于文章内容通常包含HTML标签或Markdown语法，为了确保浏览器能正确解析并渲染这些内容，我们需要配合使用 safe 过滤器。如果内容是Markdown格式，还需额外添加 render=true 参数或 |render 过滤器，让系统将其转换为HTML。

<div>
    {{archive.Content|safe}}
</div>

如果内容是Markdown格式，则可以这样写：

<div>
    {{archive.Content|render|safe}}
</div>

或者使用 archiveDetail 标签更细致地控制：

{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}{% endarchiveDetail %}

safe 过滤器告诉浏览器这些内容是安全的，可以直接作为HTML渲染，而不是作为纯文本显示。

展示关键信息：丰富页面的上下文

除了标题和内容，文章详情页通常还需要展示一系列辅助信息，以提供更全面的上下文并提升用户体验。

  • 发布时间： 显示文章的发布或更新时间，让读者了解信息的时效性。安企CMS提供了 CreatedTime 和 UpdatedTime 字段，配合 stampToDate 标签可以灵活地格式化时间显示：

    <span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>

    这里的 "2006-01-02 15:04" 是Go语言的时间格式化标准，可以根据需要调整。

  • 阅读量： 统计并显示文章的阅读次数，可以增强文章的吸引力，显示其受欢迎程度。

    <span>阅读量：{{archive.Views}} 次</span>

  • 所属分类： 展示文章所属的分类，方便读者点击进入分类页面，浏览更多同类文章。我们可以通过 categoryDetail 标签获取分类信息：

    <span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>

    这里，我们先通过 archive.CategoryId 获取文章的分类ID，再用 categoryDetail 标签获取该分类的名称和链接。

  • 文章标签 (Tags)： 为文章添加标签是网站内容组织的重要方式，也能帮助读者快速了解文章主题。tagList 标签可以用于列出当前文章的所有相关标签：

    {% tagList tags with itemId=archive.Id %}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

    itemId=archive.Id 确保我们获取的是当前文章关联的标签。

  • 自定义字段： 安企CMS强大的内容模型功能允许我们为不同类型的文章添加独特的自定义字段。例如，产品模型可能需要“价格”、“库存”等字段，文章模型可能需要“作者”、“来源”等。这些自定义字段可以通过 archiveParams 标签或直接通过 archiveDetail 标签来获取和显示：

    {% archiveParams params %}
    {% for item in params %}
        <p>{{item.Name}}：{{item.Value}}</p>
    {% endfor %}
{% endarchiveParams %}

    如果只显示特定自定义字段，例如名为 author 的字段：

    <p>作者：{% archiveDetail with name="author" %}</p>

提升用户体验：导航与关联

为了让读者在阅读完当前文章后能够方便地继续浏览，提供清晰的导航和相关内容是必不可少的。

  • 上一篇/下一篇： 引导读者顺序浏览，常用于博客或系列文章。prevArchive 和 nextArchive 标签可以帮助我们实现这一功能：

    {% prevArchive prev %}{% if prev %}上一篇：<a href="{{prev.Link}}">{{prev.Title}}</a>{% else %}没有了{% endif %}{% endprevArchive %}
{% nextArchive next %}{% if next %}下一篇：<a href="{{next.Link}}">{{next.Title}}</a>{% else %}没有了{% endif %}{% endnextArchive %}

  • 相关文章推荐： 根据文章内容或分类推荐其他相关文章，能有效延长用户在网站上的停留时间。archiveList 标签配合 type="related" 参数可以实现此功能：

    <h3>相关文章</h3>
<ul>
{% archiveList archives with type="related" limit="5" %}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endarchiveList %}
</ul>

    limit="5" 控制显示相关文章的数量。

  • 面包屑导航： 面包屑导航能清晰地显示文章在网站结构中的位置，帮助用户理解当前页面的层级，并方便地返回上一级。breadcrumb 标签是实现它的利器：

    <nav class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        {% if loop.last %}{{item.Name}}{% else %}<a href="{{item.Link}}">{{item.Name}}</a> &gt; {% endif %}
    {% endfor %}
{% endbreadcrumb %}
</nav>

    index="首页" 定义了导航的起始点，title=true 则确保当前文章标题会作为面包屑的最后一项显示。

SEO优化：让文章更容易被发现

除了页面内容本身，页面的元信息（Meta Information）对搜索引擎优化（SEO）至关重要。安企CMS通过 tdk 标签提供灵活的TDK（Title, Description, Keywords）设置。

  • 页面标题 (<title>)： 通过 tdk 标签的 name="Title" 获取。通常我们会附加网站名称。

    <title>{% tdk with name="Title" siteName=true %}</title>

    siteName=true 会自动将网站名称添加到文章标题后，提升品牌曝光。

  • 关键词 (<meta name="keywords">)： 通过 tdk 标签的 name="Keywords" 获取。

    <meta name="keywords" content="{% tdk with name="Keywords" %}">

  • 描述 (<meta name="description">)： 通过 tdk 标签的 name="Description" 获取。

    <meta name="description" content="{% tdk with name="Description" %}">

  • 规范链接 (<link rel="canonical">)： 对于内容可能在多个URL出现的页面，规范链接可以指定首选版本，避免重复内容问题。

    {%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}<link rel="canonical" href="{{canonical}}" />{%- endif %}

    这里的判断确保只在规范链接存在时才输出标签。

整合示例：一个典型的文章详情模板片段

以下是一个结合了上述多个功能的安企CMS文章详情页模板片段，展示了如何将这些元素组合起来，构建一个内容丰富、用户友好的页面：

”`twig 

<!-- 面包屑导航 -->
<nav class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        {% if loop.last %}{{item.Name}}{% else %}<a href="{{item.Link}}">{{item.Name}}</a> &gt; {% endif %}
    {% endfor %}
{% endbreadcrumb %}
</nav>

<!-- 文章主标题 -->
<h1>{{archive.Title}}</h1>

<!-- 文章元信息：发布时间、分类、阅读量 -->
<div class="article-meta">
    <span>发布时间：{{stampToDate(archive.CreatedTime, "2006年01月02日")}}</span>
    <span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
    <span>阅读量：{{archive.Views}} 次</span>
</div>

<!-- 文章标签 -->
<div class="article-tags">
    <strong>标签：</strong>
    {% tagList