本文教程主要针对Hexo Butterfly主题博客，在Butterfly主题中，文章标签页和标签侧边栏都有文章标签的词云图 但仅仅用字体大小表示某个标签下的文章数量是不明显的，可以在这个基础上加上表示某个标签下文章数的上下标，其中<sup>表示上标，<sub>表示下标。

魔改教程

  1. 打开\themes \butterfly\layout\includes\page\tags.pug文件和
    themes\butterfly\layout\includes \widget\card_tags.pug文件，发现绘制彩色标签云都是使用了cloudTags函数。
    另外一个绘制标签云的 函数是hexo自带的，有兴趣的可以到
    \node_modules\hexo\lib\plugins \helper\tagcloud.js研究，这里不多介绍。
  2. 搜索cloudTags函数，可以在
    \themes \butterfly\scripts \helpers\page.js找到绘制标签云的代码，增加
    <sup>${tag.length}< / sup>或<sub>${tag.length}</sub>可绘制表示标签文章数的上下标。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    hexo.extend.helper.register('cloudTags', function (options = {}) {
      const theme = hexo.theme.config
      const env = this
      let source = options.source
      const minfontsize = options.minfontsize
      const maxfontsize = options.maxfontsize
      const limit = options.limit
      const unit = options.unit || 'px'

      let result = ''
      if (limit > 0) {
        source = source.limit(limit)
      }

      const sizes = []
      source.sort('length').forEach(tag => {
        const { length } = tag
        if (sizes.includes(length)) return
        sizes.push(length)
      })

      const length = sizes.length - 1
      source.forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0
        const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
        const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
        style += ` color: ${color}`
    -   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
    +   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
      })
      return result
    })
  3. 最后Hexo三连即可。