Halo自定义文章分类

最新推荐文章于 2024-06-10 01:41:41 发布

web前端进阶者

最新推荐文章于 2024-06-10 01:41:41 发布

阅读量493

点赞数 5

分类专栏： Halo 文章标签：前端框架

本文链接：https://blog.csdn.net/u014708123/article/details/137905757

版权

Halo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在自定义站点的时候，往往需要再特定的页面展示个性的内容，为了满足这个特殊的要求，就需要文章自定义标签，然后挂载到自定义下面达到自己要的效果。

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>