Hexo博客标签的魔改

前言

逛别人博客时经常看见标签页后面加了一个数量，起初因为懒没弄，但是最近几天感觉标签确实有一点的不好看，于是决定改一下。

教程

修改源码

打开butterfly\scripts\helpers\page.js文件

如果你只是想添加一个数量的话，在第52行的${tag.name}后增加 (${tag.length})，如下：

1	result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name} (${tag.length})</a>`

如果你不想要字体有大有小的话，可以采用css + !important的方法，也可以选择删除如下代码：

// 需要删除的
const minfontsize = options.minfontsize 
const maxfontsize = options.maxfontsize 
const unit = options.unit || 'px' 
const sizes = []
source.sort('length').forEach(tag => {
  const { length } = tag
  if (sizes.includes(length)) return
  sizes.push(length)
})
const length = sizes.length - 1
const ratio = length ? sizes.indexOf(tag.length) / length : 0
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`

// 最后需要修改以下代码
source.forEach(tag => {
  const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
  let style = ` color: ${color}`
  result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
})

如果你还想再给标签从大到小排个序的话，那么就是我正在使用的这个了：

hexo.extend.helper.register('cloudTags', function(options = {}) {
    const env = this
    let source = options.source
    const limit = options.limit
    // 从小到大排序然后再翻转，即从大到小排序
    source = source.sort('length').reverse()
    let result = ''
    if (limit > 0) source = source.limit(limit)

    source.forEach(tag => {
        const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
        result += `<a href="${env.url_for(tag.path)}" style="color: ${color}">${tag.name} (${tag.length})</a>`
    })
    return result
})

修改样式

打开我们的自定义css文件，不会创建自定义css的看这篇文章：Hexo博客添加自定义css和js文件
添加如下代码：


/* 标签 */

#aside-content .card-tag-cloud a {
    border: 1px solid;
    line-height: 1.5;
    border-radius: 6px;
    margin: 3px;
    padding: 0 5px;
}

.tag-cloud-list a {
    border: 1px solid;
    line-height: 1.5;
    border-radius: 6px;
    padding: 5px 15px;
    font-size: 1.2rem;
    margin: 5px;
}