好看的tag算法

发表于 阅读次数：

算法示意图

寻找算法

也不知道该如何描述这种算法，做出来的效果很符合我的审美，简约优雅。

然后就开始找这种算法，这个网站所用到的代码框架是hexo，代码是由nodejs直接生成静态网页。

在生成的静态网页里，对比了半天没找到是控制字体大小的规律。

又不死心，于是就一步步去找具体实现的算法。

首先是在目录/themes/next/layout/page/tags.njk 里面找到了模板（姑且这么称呼）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="tag-cloud">
  <div class="tag-cloud-title">
    {{ _p('counter.tag_cloud', site.tags.length) }}
  </div>
  <div class="tag-cloud-tags">
    {{ tagcloud({
      min_font: theme.tagcloud.min,
      max_font: theme.tagcloud.max,
      amount  : theme.tagcloud.amount,
      orderby : theme.tagcloud.orderby,
      order   : theme.tagcloud.order,
      class   : 'tag-cloud'
      })
    }}
  </div>
</div>

基于主题的配置，调用 tagcloud 代码。

然后，全局搜索tagcloud，可是，没找到对应的实现代码。

后面直接本地搜索

findstr /s /i "tagcloud" *

最终在目录，node_modules\hexo\dist\plugins\helper找到了实现方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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="${hexo_util_1.url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}${showCount ? `<span class="${countClassName}">${tag.length}</span>` : ''}</a>`);
});