在安QiCMS中,有效管理和展示文章的标签(Tag)列表,不仅能帮助内容组织,更能显著提升网站的内部链接结构和搜索引擎优化(SEO)效果。标签作为一种灵活的分类方式,可以将跨分类、主题相关的文章关联起来,为用户提供更丰富的浏览路径。

在后台管理和创建文章标签

首先,了解如何在AnQiCMS后台为文章添加和管理标签是基础。当你发布或编辑一篇文档时,会看到一个专门的“Tag标签”输入框。在这里,你可以选择已有的标签,也可以直接输入新的标签名称,然后按回车键将其转换为一个新标签。这意味着标签的创建过程非常便捷,你可以根据文章内容随时新增。

标签的强大之处在于其灵活性:它不依赖于固定的分类层级,同一个标签可以被不同内容模型(如文章、产品)的文章所共享。在“内容管理”模块下的“文档标签”功能中,你可以集中查看、编辑、删除所有已创建的标签。这里还能为每个标签设置独立的“自定义URL”,这对于提升标签页面的SEO表现至关重要,让搜索引擎更好地抓取和索引。此外,标签也支持“SEO标题”、“标签关键词”、“标签简介”等设置,帮助你精细化管理每个标签页面的元信息。

在文章详情页显示关联标签

在AnQiCMS中,要在文章的详情页面底部或侧边栏显示与当前文章关联的标签列表,你需要使用模板标签tagList。这个标签专门用于获取指定文档的标签数据。

通常,在文章详情页的模板(例如archive/detail.html或自定义的文章模板)中,你可以这样来调用:

<div>
    <strong>相关标签:</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
    {% if tags %}
        {% for item in tags %}
            <a href="{{item.Link}}" class="tag-link">{{item.Title}}</a>{% if not forloop.Last %}, {% endif %}
        {% endfor %}
    {% else %}
        暂无相关标签
    {% endif %}
    {% endtagList %}
</div>

这段代码中:

  • {% tagList tags with itemId=archive.Id limit="10" %}tagList是获取标签列表的标签。tags是我们为标签列表数据定义的变量名。itemId=archive.Id是关键,它告诉系统获取当前文章(由archive.Id标识)所关联的所有标签。limit="10"则限制了最多显示10个标签,你可以根据设计需求调整数量。
  • {% for item in tags %}:循环遍历获取到的每个标签。
  • {{item.Link}}:显示标签的URL链接,点击后会跳转到该标签下的文章列表页面。
  • {{item.Title}}:显示标签的名称。
  • {% if not forloop.Last %}, {% endif %}:这是一个小技巧,用于在每个标签名称后添加逗号分隔符,但最后一个标签不加,使显示更美观。

这样,访问文章详情页时,用户就能看到这篇内容涉及到的所有标签,方便他们进一步探索相关主题。

创建独立的标签列表页面

除了在文章详情页展示,你可能还希望有一个专门的页面,列出网站上的所有标签,或者热门标签。这通常可以在模板目录的tag/index.html文件中实现。

要显示网站上的所有标签,可以这样使用tagList标签:

<h1>所有标签</h1>
<div class="tag-cloud">
    {% tagList allTags with itemId="0" limit="50" %}
    {% if allTags %}
        {% for item in allTags %}
            <a href="{{item.Link}}" title="查看所有含“{{item.Title}}”标签的文章" class="tag-item">{{item.Title}} ({{item.ArchiveCount}})</a>
        {% endfor %}
    {% else %}
        目前还没有创建任何标签。
    {% endif %}
    {% endtagList %}
</div>

这里,itemId="0"表示获取所有标签,而不是某个特定文章的标签。limit="50"则限制了最多显示50个标签。你甚至可以在item.Title旁加上item.ArchiveCount来显示该标签下有多少篇文章,增加用户选择的参考。

显示某个标签下的文章列表

当用户点击一个标签链接(例如{{item.Link}})时,他们通常期望看到所有包含该标签的文章列表。AnQiCMS为此提供了tagDataList标签,通常这个功能会在tag/list.html模板中实现。

在这个模板中,系统会自动识别当前访问的标签ID。你可以这样来显示该标签下的所有文章:

<h1>标签:{% tagDetail with name="Title" %} 下的文章</h1>
<div class="article-list">
    {% tagDataList archives with type="page" limit="10" %}
    {% if archives %}
        {% for article in archives %}
            <div class="article-item">
                <h2><a href="{{article.Link}}">{{article.Title}}</a></h2>
                <p>{{article.Description}}</p>
                <div class="article-meta">
                    <span>发布于:{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
                    <span>阅读量:{{article.Views}}</span>
                </div>
            </div>
        {% endfor %}
    {% else %}
        当前标签下暂无文章。
    {% endif %}
    {% endtagDataList %}

    {# 分页导航 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for pageItem in pages.Pages %}
                <a href="{{pageItem.Link}}" class="{% if pageItem.IsCurrent %}current{% endif %}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
</div>

这里:

  • {% tagDetail with name="Title" %}:用于获取当前标签页面的标题,确保用户知道他们正在浏览哪个标签的内容。
  • {% tagDataList archives with type="page" limit="10" %}tagDataList用于获取属于当前标签的文章列表。archives是文章数据变量名。type="page"表示启用分页,limit="10"设置每页显示10篇文章。