Hexo | yilia主题下给github.io博客添加标签云

最新推荐文章于 2024-09-15 07:46:51 发布

原创最新推荐文章于 2024-09-15 07:46:51 发布 · 846 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#hexo #yilia #标签云

小工具专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Hexo的yilia主题下为GitHub.io博客添加标签云。通过编辑主题配置文件并引入特定代码，实现标签云页面的自动生成和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让 Hexo 自动生成 Tag Cloud 标签云页面

在主题yilia 中，须在 theme/yilia/layout/_partial/article.ejs下, div article-entry 中插入代码。

<div class="article-entry" itemprop="articleBody">
    <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
    <% } else { %>
        <% if (page.path === "tags/index.html"){ %>
            <引入 tags 页面的代码>
        <% } %>
        <%- post.content %>
    <% } %>
</div>

<引入tags页面的代码>为：

<% if (page.path === "tags/index.html"){ %>
    <hr>
    <br>
    <%- list_categories({
        depth: 1,
    }) %>
    <div class="tags">
        <%- tagcloud({
            min_font: 16, 
            max_font: 35, 
            amount: 999, 
            color: true, 
            start_color: 'gray', 
            end_color: 'black',
        }) %>
    </div>
    <style>
        .category-list li{
            display: inline-block;
            margin: 0 1em .5em 0;
            padding: 4px;
            border: 1px solid lightgray;
            font-size: 1.2em;
        }
        .category-list a {
            color: gray;
        }
        .category-list-item:hover a {
            color: gray;
            text-decoration: none;
            font-weight: bold;
        }
        .category-list-count {
            margin-left: 2px;
            font-size: .9em;
        }
        .article-entry ul li:before{
            display: none;
        }
        .article-inner  {
            text-align: center;
        }
        .tags {
            max-width: 40em;
            margin: 2em auto;
            margin-top: 0em;
        }
        .tags a {
            margin-right: 1em;
            border-bottom: 1px solid gray;
            line-height: 65px;
            white-space: nowrap;
        }
        .tags a:hover {
            border-bottom: 2px solid black;
            font-style: italic;
            text-decoration: none;
        }
    </style>
<% } %>