网站运营中,文章详情页是用户与内容深度互动、了解产品或服务的关键环节。一个设计精良、信息呈现精准的详情页,不仅能显著提升用户体验,还能有效助力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 也支持通过 id 或 token 参数来指定:
{% archiveDetail otherArticle with name="Title" id="100" %}
<div>这篇是ID为100的文章标题:{{ otherArticle }}</div>
这里我们定义了一个名为 otherArticle 的变量来接收指定文章的标题。
基础信息展示:文章骨架的搭建
一篇完整的文章详情页,除了标题和内容,还需要展示许多辅助信息。AnQiCMS的标签能帮助您轻松实现这些。
发布与更新时间 文章的发布和更新时间对用户和搜索引擎都非常重要。
CreatedTime和UpdatedTime字段返回的是时间戳,我们可以利用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语言特有的时间格式化模板,非常灵活。文章浏览量 显示文章的阅读量通常能吸引更多用户点击。
<span>阅读量:{% archiveDetail with name="Views" %} 次</span>缩略图与图片 文章的封面图或组图能让页面更具吸引力。
<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内容。
关联内容与导航:丰富页面生态
详情页往往不是孤立的,它需要与其他内容进行关联,提供便捷的导航。
所属分类 展示文章所属的分类,并提供分类链接,方便用户浏览同类文章。可以直接通过
archive对象获取分类信息:<span>所属分类:<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>如果需要更详细的分类信息,也可以使用
categoryDetail标签:{% categoryDetail currentCategory with id=archive.CategoryId %} <span>分类描述:{{currentCategory.Description}}</span>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>上一篇/下一篇文章 在文章底部提供导航,