AI 摘要

作者在 Hexo 的 Shoka 主题中，为标签云增加显示标签对应文章数量的数字角标。他通过 F12 和源码定位到 Hexo 内置的 tagcloud 辅助函数，在主题 scripts/helpers 下新建 tagcloudplus.js，复制并改写源码，在链接中插入 sup 标签输出 tag.length，再调整标签云样式、颜色变量，并将 page.njk 中的调用替换为 tagcloudplus。这样避免直接修改 node_modules，便于跨设备维护。

AI 生成 · 仅供参考

# 引言

多出去看看，见的多了，就知道该折腾啥了~

Demo地址， Click here!

没错，这是一个闲逛其他博主的博客时，逛出来的一个需求 🤣

最近重启了自己的个人博客，告别了 WordPress 拥抱了 Hexo，机缘巧合之下用上了 Shoka 主题，在作者的博客扒拉食用指南时，进入了灵香轩(Lavender)的站点，当看到了他主题的标签云时(比原主题的标签云更得劲儿，效果丰富还显示了标签对应文章数量)，只剩下了四个字，我也想要~

由于在 Lavender 的站点和网上都没有找到相关教程，于是乎开始了自己的逆向之旅，再然后就有了这篇文章。

# 逆向工程

F12 一波，窥探到了样式的秘密修改 themes/shoka/source/css/_common/components/pages/tag-cloud.styl 即可
主题搜索 tag 关键字，在主题文件 themes/shoka/layout/page.njk 中找到了 tag cloud 的生成调用 tagcloud, 传入的即主题文件 tagcloud 相关配置

<div class="collapse wrap">
    <h2 class="item title">
        <a href="{{ url_for(site.path) }}">{{ __('menu.home') }}</a>
        <small>/</small>
        {{ _p('counter.tag_cloud', site.tags.length) }}</h2>
    <div class="tag cloud">
        {{ tagcloud({
            min_font   : theme.tagcloud.min,
            max_font   : theme.tagcloud.max,
            amount     : theme.tagcloud.amount,
            color      : true,
            start_color: theme.tagcloud.start,
            end_color  : theme.tagcloud.end})
        }}
    </div>
</div>

官网 api 找到 tagcloud函数说明，确认这是一个内置的工具函数
本地 node_modules 下定位到了源代码原件 node_modules/hexo/lib/plugins/helper/tagcloud.js

逆向结束，拿到了源码就可以方便的进行修改了，毕竟源码面前，了无秘密

# 实现

# 源码分析

源码的关键部分如下

function tagcloudHelper(tags, options) {
    // ...
    tags.forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0;
        const size = min + ((max - min) * ratio);
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;
        const attr = className ? ` class="${className}-${Math.round(ratio * level)}"` : '';

        if (color) {
            const midColor = startColor.mix(endColor, ratio);
            style += ` color: ${midColor.toString()}`;
        }

        // 关键代码
        result.push(
            `<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
        );
    });
    // ...
}
function tagcloudHelperFactory(tags, options) {
    // ...
}
hexo.extend.helper.register('tagcloud', tagcloudHelperFactory);

可以得到如下2个结论

注册了一个辅助函数（Helper） tagcloud
主要通过 tagcloudHelper 生成对用的标签云 html 文本

# 具体实现

在主题文件夹 themes/shoka/scripts/helpers/ 新增文件 tagcloudplus.js
拷贝 node_modules/hexo/lib/plugins/helper/tagcloud.js 文件内容到 tagcloudplus.js
替换 tagcloud 名称为 tagcloudplus 这样我们就注册了一个名为 tagcloudplus 的辅助函数
tag 数据结构内部的 length 即我们需要的标签文章数量，需要生成文章数量角标修改关键代码如下

// 70行左右
result.push(
      `<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}<sup>${tag.length}</sup></a>`
    );
// <sup>${tag.length}</sup> 为新增上标，如果喜欢下标则改为 <sub>${tag.length}</sub>

完整代码如下

'use strict';

const { Color, url_for } = require('hexo-util');
const { default: moize } = require('moize');

function tagcloudplusHelper(tags, options) {
    if (!options && (!tags || !Object.prototype.hasOwnProperty.call(tags, 'length'))) {
        options = tags;
        tags = this.site.tags;
    }

    if (!tags || !tags.length) return '';
    options = options || {};

    const min = options.min_font || 10;
    const max = options.max_font || 20;
    const orderby = options.orderby || 'name';
    const order = options.order || 1;
    const unit = options.unit || 'px';
    const color = options.color;
    const className = options.class;
    const level = options.level || 10;
    const { transform } = options;
    const separator = options.separator || ' ';
    const result = [];
    let startColor, endColor;

    if (color) {
        if (!options.start_color) throw new TypeError('start_color is required!');
        if (!options.end_color) throw new TypeError('end_color is required!');

        startColor = new Color(options.start_color);
        endColor = new Color(options.end_color);
    }

    // Sort the tags
    if (orderby === 'random' || orderby === 'rand') {
        tags = tags.random();
    } else {
        tags = tags.sort(orderby, order);
    }

    // Limit the number of tags
    if (options.amount) {
        tags = tags.limit(options.amount);
    }

    const sizes = [];

    tags.sort('length').forEach(tag => {
        const { length } = tag;
        if (sizes.includes(length)) return;

        sizes.push(length);
    });

    const length = sizes.length - 1;

    tags.forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0;
        const size = min + ((max - min) * ratio);
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;
        const attr = className ? ` class="${className}-${Math.round(ratio * level)}"` : '';

        if (color) {
            const midColor = startColor.mix(endColor, ratio);
            style += ` color: ${midColor.toString()}`;
        }

        result.push(
            `<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}<sup>${tag.length}</sup></a>`
        );
    });

    return result.join(separator);
}

function tagcloudplusHelperFactory(tags, options) {
    const transformArgs = () => {
        if (!options && (!tags || !Object.prototype.hasOwnProperty.call(tags, 'length'))) {
            options = tags;
            tags = this.site.tags;
        }

        return [tags.toArray(), options];
    };

    return moize(tagcloudplusHelper.bind(this), {
        maxSize: 5,
        isDeepEqual: true,
        transformArgs
    }).call(this, tags, options);
}

hexo.extend.helper.register('tagcloudplus', tagcloudplusHelperFactory);

修改主题标签云样式文件

.tag.cloud {
    text-align: center;

    a {
        display: inline-block;
        margin: 0.625rem;
        background: var(--tags-background);

        /* 增加边框及阴影 */
        padding: 0.3em 0.5em;
        border-radius: 10px;
        box-shadow: 0 7px 23px rgba(0, 0, 0, 0.2);

        &:hover {
            color: var(--grey-3) !important;

            /* hover放大效果 */
            transform: scale(1.25, 1.25);
            color: var(--primary-color) !important;
        }
    }
}

其中颜色变量 --tags-background 定义在主题文件 themes/shoka/source/css/_colors.styl 中

:root {
    // ...
    /*
     * 新增
     */
    --tags-background: #edf0f7;
}

[data-theme="dark"] {
    &:root {
        // ...
        /*
        * 新增
        */
        --tags-background: #30343f;
    }
}

替换主题文件 themes/shoka/layout/page.njk 中 tagcloud 函数为我们自定义的辅助函数 tagcloudplus

<div class="collapse wrap">
    <h2 class="item title">
        <a href="{{ url_for(site.path) }}">{{ __('menu.home') }}</a>
        <small>/</small>
        {{ _p('counter.tag_cloud', site.tags.length) }}</h2>
    <div class="tag cloud">
        {{ tagcloudplus({
            min_font   : theme.tagcloud.min,
            max_font   : theme.tagcloud.max,
            amount     : theme.tagcloud.amount,
            color      : true,
            start_color: theme.tagcloud.start,
            end_color  : theme.tagcloud.end})
        }}
    </div>
</div>

建议修改下主题配置文件的 start 和 end 颜色代码，原始的颜色色系比较偏青绿和这个背景叠在一起视觉效果很不友好，下面是一个我个人觉得还行的色域范围，当然修改背景的颜色也没毛病

tagcloud:
    # All values below are same as default, change them by yourself.
    min: 16 # Minimun font size in px
    max: 22 # Maxium font size in px
    start: '#ff5ad1' # Start color (hex, rgba, hsla or color keywords)
    end: '#9968ec' # End color (hex, rgba, hsla or color keywords)
    amount: 200 # Amount of tags, change it if you have more than 200 tags

hexo 三连，不出意外就能看到效果了，完结撒花~

# 结语

标签云数字角标的实现，本质上是狸猫换太子替换了生成处调用系统函数为我们自定义的辅助函数。

其实直接修改 hexo 插件下原生的 tagcloud.js 文件也可以有一样的效果，但是考虑到跨设备工作的场景，所以尽可能将修改放在了主题内部(虽然新增文件比直接修改麻烦了点，但我认为很值)，避免修改 node 的模块。

Hexo: 自定义过滤器重定向资源文件夹图片相对路径引用
AI 摘要
Hexo 启用资源文件夹后，本地 Markdown 常用相对路径插入图片以便预览，但发布时需专用标签，导致图片链接异常。本文提出兼容方案：编写 after_post_render 过滤器，用 cheerio 解析文章内容中的 img 标签，把本地资源路径替换为发布后的正确链接，使本地预览与线上发布都能正常显示图片。文章还说明可按此原理集成到主题中。
基于GitHub Pages + Hexo搭建个人博客
AI 摘要
文章介绍 Hexo 静态博客框架及搭建教程。先对比静态与动态博客，指出 Hexo 省心、省钱、速度快、利于 SEO，但缺动态功能、维护成本较高；随后讲解环境准备，包括安装 Git、Node.js、Hexo CLI，初始化博客并执行 clean、generate、server 三连预览；再说明安装 butterfly 等主题、配置部署插件并发布到 GitHub Pages，最后介绍绑定腾讯云或阿里云域名并做 DNS 解析。
Hexo: 文章加密
AI 摘要
作者重启Hexo静态博客后，为保护隐私文章，采用hexo-blog-encrypt插件实现文章加密。文章介绍了插件安装、Front-matter配置、基于tag的全局加密，以及利用优先级实现单篇豁免或自定义密码。随后针对Shoka主题，通过修改模板解决解密后目录不显示的问题，并添加加密图标提示。整体分享了Hexo文章加密的完整实践与主题适配经验。
Shoka主题: 自定义过滤器重定向资源文件夹图片相对路径引用
AI 摘要
文章讨论 Hexo 启用资源文件夹后，Markdown 用相对路径引用图片便于本地预览，却与生成发布时的资源路径重定向冲突，官方方案又会破坏本地预览。作者提出利用 Hexo 的 after_post_render 过滤器，通过 cheerio 处理文章内容中的 img 标签，将 data-src 修改为指向文章资源文件夹的正确路径，从而兼顾本地预览和发布重定向。

本文作者：Seiun@繁夜
本文链接：https://onlyzyx.com/posts/57917.html
版权声明：本站所有文章除特别声明外，均采用 (CC)BY-NC-SA 许可协议。转载请注明出处！

循着字句，邂逅星光

输入关键词

发现内容

快速直达

Hexo: 标签云TagCloud标签文章数量数字角标

# 引言

# 逆向工程

# 实现

# 源码分析

# 具体实现

# 结语

标签漫游

再读一篇

最近的声音

# 引言

# 逆向工程

# 实现

# 源码分析

# 具体实现

# 结语

继续阅读

Hexo - Shoka主题使用手册

Shoka主题: 文章更新历史记录时间轴