在自定义站点的时候,往往需要再特定的页面展示个性的内容,为了满足这个特殊的要求,就需要文章自定义标签,然后挂载到自定义下面达到自己要的效果。
Halo版本
版本:2.12
在theme.yaml指定文章分类页
spec:
customTemplates:
category:
- name: 新闻资讯
description: 新闻资讯列表
screenshot:
file: category_news_information.html
在目录新建"templates/category_news_information.html"
<div th:with="tags = ${tagFinder.listAll()}">
<div data-value="全部">
<!-- /categories/xin-wen-zi-xun 是后台使用自定义模块配置的访问连接 -->
<a href="/categories/xin-wen-zi-xun">全部</a>
</div>
<!-- 获取当前分类下面所有的标签_通过点击不同的标签来调整不同的页面 -->
<div
th:classappend="(${tag} and ${tag.metadata.name == tagItem.metadata.name}) ? 'news_information_tab_bar_item_activate' : ''"
th:each="tagItem : ${tags}"
th:attr="data-value=${tagItem.spec.displayName}">
<a
th:href="@{${tagItem.status.permalink}}"
th:text="${tagItem.spec.displayName}"></a>
</div>
</div>
后台配置
- 找到文章点击分类
- 创建分类,使用自定义模板,跳转连接和html"全部"a标签href保持一致
实现效果
category_news_information.html 遍历属于这个分类下的所有文章
<div th:if="${posts.total gt 0}">
<div>
<div>
<!--循环遍历-->
<a
th:each="post : ${posts.items}"
th:href="@{${post.status.permalink}}"
>
<!--封面-->
<div>
<img th:src="${post.spec.cover}" alt=""/>
</div>
<div>
<!--文章标题-->
<div
th:text="${post.spec.title}"></div>
<div>
<!--自定义摘要-->
<span
th:if="${!post.spec.excerpt.autoGenerate}"
th:text="${post.spec.excerpt.raw}"></span>
</div>
<div>
<div>
<span
th:each="tag : ${post.tags}"
th:title="${tag.spec.displayName}"
th:text="${tag.spec.displayName}"
></span>
</div>
<div>
<span
th:text="${#dates.format(post.spec.publishTime,'yyyy年MM月dd日 HH:ss')}">
</span>
</div>
</div>
</div>
</a>
</div>
</div>
<!--没有文章时-->
<div th:if="${posts.total == 0}">
此标签下没有文章
</div>
<!--分页-->
<div th:if="${posts.hasPrevious() || posts.hasNext()}">
<a
th:href="@{${posts.prevUrl}}">
上一页
</a>
<span th:text="|${posts.page} / ${posts.totalPages}|"</span>
<a
th:href="@{${posts.nextUrl}}">
下一页
</a>
</div>
</div>