Shoka主题：修改标签页显示效果

# 前言

# 实现

# 主题 yml 文件

1. 找到主题配置文件 themes\shoka\_config.yml ;

2. 找到 tagcloud ：

# TagCloud settings for tags page.

tagcloud:

  # All values below are same as default, change them by yourself.

  min: 16 # Minimun font size in px

  max: 22 # Maxium font size in px

  start: "#72cecf" # Start color (hex, rgba, hsla or color keywords)

  end: "#ffbac3" # End color (hex, rgba, hsla or color keywords)

  amount: 200 # Amount of tags, change it if you have more than 200 tags

其中 start 和 end 可以修改字体颜色范围。

# 新增标签颜色

1. 找到 css 颜色文件 themes\shoka\source\css\_colors.styl ；

2. 可以在 50 行左右新增自定义的标签颜色设置；

--header-text-color: var(--grey-0);

--primary-color: var(--color-red);

--tags-background: #edf0f7;  // 新增，修改为自己喜欢的日间模式的背景颜色

接下来修改夜间模式颜色，大概 150 行左右

在 [data-theme="dark"] { 下新增夜间模式的颜色值

--text-color: var(--grey-5);

--header-text-color: var(--grey-9);

--tags-background: #30343f;  // 新增，修改为自己喜欢的夜间模式的背景颜色

3. 单独复制用：

   --tags-background: #edf0f7;

# 修改背景以及鼠标悬浮效果

1. 找到 themes\shoka\source\css\_common\components\pages\tag-cloud.styl 文件，修改如下：

   	.tag.cloud {
   	text-align: center;
   	a {
   	display: inline-block;
   	margin: .625rem;
   	&:hover {
   	color: var(--primary-color) !important;
   	}
   	}
   	}

   修改为

   	.tag.cloud {
   	text-align: center;
   	a {
   	display: inline-block;
   	margin: .625rem;
   	background: var(--tags-background);
   	padding: .3em .5em;
   	border-radius: 10px;
   	box-shadow: 0px 7px 23px rgba(0, 0, 0, 0.2);
   	&:hover {
   	color: var(--grey-3) !important;
   	transform:scale(1.25,1.25);
   	background: var(--primary-color);
   	}
   	}
   	}

# 增加右上角文章数量显示

1. 找到 node_modules\hexo\lib\plugins\helper\tagcloud.js 文件；

2. 60 行左右找到 tags.forEach(tag => { 部分

   	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="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
   	);
   	});

   在最后的 result.push 中，找到最后一个 tag.name ，修改

   新增上标：

   <sup>${tag.length}</sup>

   或者下标

   <sub>${tag.length}</sub>

   加入后如下（上标）：

   	result.push(
   	`<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}<sup>${tag.length}</sup></a>`
   	);

3. 最后 hexo clean ，重新生成即可。