如何利用AnQiCMS模板标签精准控制文章详情页的显示内容?

网站运营中,文章详情页是用户与内容深度互动、了解产品或服务的关键环节。一个设计精良、信息呈现精准的详情页,不仅能显著提升用户体验,还能有效助力SEO优化。在安企CMS(AnQiCMS)这样灵活高效的内容管理系统中,我们可以通过巧妙运用其模板标签,实现对文章详情页内容的精细化控制。

AnQiCMS基于Go语言开发,以其简洁高效的架构,提供了类似Django模板引擎的强大功能。这意味着即使您不具备深厚的开发背景,也能通过直观的标签语法,像搭建积木一样,精准地控制页面上每一个元素的显示。

核心标签:archiveDetail 掌控一切

在文章详情页中,所有内容都围绕着当前展示的文章展开。安企CMS为此提供了核心的 archiveDetail 标签,它是获取文章所有详细信息的入口。

通常,在文章详情页的模板文件(例如 archive/detail.html)中,您无需额外指定文章ID,archiveDetail 标签会自动识别当前页面的文章,并提供其所有数据。最直接的调用方式就像这样:

<h1>{{archive.Title}}</h1>
<div class="article-content">
    {{archive.Content|safe}}
</div>

这里 archive 是系统默认提供的当前文章对象,通过 archive.Title 可以获取文章标题,archive.Content 则获取文章内容。需要特别注意的是,文章内容通常包含HTML代码,为了让浏览器正确解析而非将其作为纯文本显示,我们需要配合 |safe 过滤器使用。

当然,如果想获取 非当前页面 的特定文章详情,archiveDetail 也支持通过 idtoken 参数来指定:

{% archiveDetail otherArticle with name="Title" id="100" %}
<div>这篇是ID为100的文章标题:{{ otherArticle }}</div>

这里我们定义了一个名为 otherArticle 的变量来接收指定文章的标题。

基础信息展示:文章骨架的搭建

一篇完整的文章详情页,除了标题和内容,还需要展示许多辅助信息。AnQiCMS的标签能帮助您轻松实现这些。

  1. 发布与更新时间 文章的发布和更新时间对用户和搜索引擎都非常重要。CreatedTimeUpdatedTime 字段返回的是时间戳,我们可以利用 stampToDate 标签将其格式化为易读的日期时间:

    <span>发布日期:{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</span>
    <span>最后更新:{{stampToDate(archive.UpdatedTime, "2006-01-02")}}</span>
    

    其中 "2006-01-02 15:04" 是Go语言特有的时间格式化模板,非常灵活。

  2. 文章浏览量 显示文章的阅读量通常能吸引更多用户点击。

    <span>阅读量:{% archiveDetail with name="Views" %} 次</span>
    
  3. 缩略图与图片 文章的封面图或组图能让页面更具吸引力。

    <img src="{% archiveDetail with name="Logo" %}" alt="{{archive.Title}}" class="article-cover">
    

    Logo 字段通常返回文章的第一张图片或缩略图。如果文章包含多张图片作为组图(例如产品详情页),Images 字段会返回一个图片URL数组,您可以通过 for 循环遍历显示:

    <div class="image-gallery">
        {% archiveDetail articleImages with name="Images" %}
        {% for imgUrl in articleImages %}
            <img src="{{imgUrl}}" alt="{{archive.Title}}的图片" loading="lazy">
        {% endfor %}
        {% endarchiveDetail %}
    </div>
    

    这里的 loading="lazy" 是一个HTML属性,用于实现图片懒加载,提升页面性能,与AnQiCMS标签配合使用可以达到很好的效果。此外,archiveDetail 标签的 Content 字段还支持通过 lazy="data-src" 参数来实现图片懒加载,或通过 render=true 参数在前端渲染Markdown内容。

关联内容与导航:丰富页面生态

详情页往往不是孤立的,它需要与其他内容进行关联,提供便捷的导航。

  1. 所属分类 展示文章所属的分类,并提供分类链接,方便用户浏览同类文章。可以直接通过 archive 对象获取分类信息:

    <span>所属分类:<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>
    

    如果需要更详细的分类信息,也可以使用 categoryDetail 标签:

    {% categoryDetail currentCategory with id=archive.CategoryId %}
    <span>分类描述:{{currentCategory.Description}}</span>
    
  2. Tag标签 标签是文章的另一种归类方式,能帮助用户发现相关主题。利用 tagList 标签,并传入当前文章的ID,可以获取并显示所有相关标签:

    <div class="article-tags">
        {% tagList tags with itemId=archive.Id limit="10" %}
        {% for tag in tags %}
            <a href="{{tag.Link}}" class="tag-item">{{tag.Title}}</a>
        {% endfor %}
        {% endtagList %}
    </div>
    
  3. 上一篇/下一篇文章 在文章底部提供导航,