Butterfly魔改10：给标签添加次方篇数

效果

效果如下图：

步骤

在主题文件中找到./scripts/helpers/page.js，搜索cloudTags，把函数最后的{tag.name}改成：

{tag.name + '<sup>' + tag.posts.length + '</sup>'}

过程

记录一下寻找过程，也许对你会有启发：

我是先找到./layout/tag.pug这个文件，看内容不是

然后我找到./layout/page/tags.pug这个文件，如下：

.tag-cloud-list.text-center
  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em'})

发现这个cloudTags是我要寻找的函数

然后我在theme根目录下打开git bash，使用grep来搜索cloudTags函数，如下：

最后找到了./scripts/helpers/page.js

进一步优化

考虑到原彩色的tag在黑暗模式下也是彩色的，但是会造成视觉上的障碍

因此我希望这个tag在白天模式下是彩色的，在黑暗模式下就是白的

首先修改./layout/page/tags.pug中关于注册tag的函数为如下代码，这里新加一个变量来控制颜色：

hexo.extend.helper.register('cloudTags', function (options = {}) {
  const env = this
  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order } = options

  if (limit > 0) {
    source = source.limit(limit)
  }

  const sizes = [...new Set(source.map(tag => tag.length).sort((a, b) => a - b))]

  const getRandomColor = () => {
    const randomColor = () => Math.floor(Math.random() * 201)
    const r = randomColor()
    const g = randomColor()
    const b = randomColor()
    return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
  }

  const generateStyle = (size, unit, color) =>
    `font-size: ${parseFloat(size.toFixed(2)) + unit}; --tag-color: ${color};` // 添加了 --tag-color 变量

  const length = sizes.length - 1
  const result = source.sort(orderby, order).map(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    const randomTagColor = getRandomColor(); // 获取随机颜色
    const style = generateStyle(size, unit, randomTagColor); // 将随机颜色传递给 generateStyle

    // 添加一个类名 'tag-cloud-item'
    return `<a href="${env.url_for(tag.path)}" class="tag-cloud-item" style="${style}">${tag.name + '<sup>' + tag.posts.length + '</sup>'}</a>`
  }).join('')

  return result
})

然后在custom.css最后添加如下片段：（请先完成魔改准备工作）

/* 针对白天模式下 .card-tag-cloud 内部链接的颜色 */
/* 使用 CSS 变量来获取 Hexo 辅助函数中生成的随机颜色 */
.card-tag-cloud .tag-cloud-item {
  color: var(--tag-color);
  text-decoration: none;
}

/* 暗黑模式下 .card-tag-cloud 内部链接的颜色 */
[data-theme="dark"] .card-tag-cloud .tag-cloud-item {
  color: rgba(255, 255, 255, 0.7) !important;
  /* 在暗黑模式下强制为灰白色 */
}