feat(tagcloud): new option class & level

[stevenjoezhang]

What does it do?

The color of the tag in the tag-cloud is defined by the inline style, e.g.

<a href="/tags/bcd/" style="font-size: 20px; color: #4682b4">bcd</a>

However, for themes that support the dark mode, it's necessary to display different tag colors for different background colors. Class name will be a better choice.
See also next-theme/hexo-theme-next@cbcd3f0

Usage:

{{ tagcloud({ class: 'tag-cloud' }) }}

for $tag-cloud in (0 .. 10) {
  $tag-cloud-color = mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
  .tag-cloud-{$tag-cloud} {
    color: $tag-cloud-color;
  }
}

@media (prefers-color-scheme: dark) {
  for $tag-cloud in (0 .. 10) {
    $tag-cloud-color = mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
    .tag-cloud-{$tag-cloud} {
      color: $tag-cloud-color;
    }
  }
}

How to test

git clone -b tagcloud https://github.com/hexojs/hexo.git
cd hexo
npm install
npm test

Screenshots

Pull request tasks

• Add test cases for the changes.
• Passed the CI test.

[jiangtj]

I perfer ceil

if use round

Level	0	1	...	9	10
Probability	5%	10%	...	10%	5%

if use ceil

Level	1	2	...	9	10
Probability	10%	10%	...	10%	10%

[stevenjoezhang]

But how about level 0? Math.ceil(0) == 0, but there is no level 0 in your Math.ceil table.
Your theory seems to describe the case where tag.length approaches infinity

Level	0	1	2	...	9	10
Probability	0%	10%	10%	...	10%	10%

However, the actual situation is that tag.length is finite (and ratio is discrete), so the probability of level 0 must be greater than 0.

[stevenjoezhang]

Suggested change

	const name = className ? ` class="${className}-${Math.round(ratio * 10)}"` : '';
	let level = Math.ceil(ratio * 10);
	if (level === 0) level ++;
	const name = className ? ` class="${className}-${level}"` : '';

[stevenjoezhang]

In fact the asymmetry of level 0 and level 10 comes from this line

const ratio = length ? sizes.indexOf(tag.length) / length : 0;

const ratio = length ? (sizes.indexOf(tag.length) + 0.5) / length : 0;

Of course, I don't think this change is necessary. We are designing a blog system instead of some sort of scientific computing. Such an error (0.5 / length) is acceptable.

My conclusion is that there is no big difference between Math.ceil and Math.round in this situation.

[SukkaW]

name could be replaced with attr.

Suggested change

	const name = className ? ` class="${className}-${Math.round(ratio * 10)}"` : '';
	const attr = className ? ` class="${className}-${Math.round(ratio * 10)}"` : '';

[coveralls]

Coverage remained the same at 97.827% when pulling e6e587e on tagcloud into 2dfaa6a on master.

[SukkaW]

LGTM!