hexo建站笔记——带图标的标签云

小鸡
阅读1400 喜欢9 教程 更新2019-5-7

最近闲着没事看到掘金的网站标签带有icon图标,想着自己也搞一个。想到的实现方法很简单,也有很多种,比如像之前做彩色标签云一样用页面脚本在加载的时候修改标签云dom并且添加相应节点。

不过考虑到这样回影响页面渲染效率,还是应该在hexo引擎本地渲染的时候就把标签云的icon节点渲染好。这时候我去看标签云的生成函数,有一个tagcloud函数,应该就是生成标签云的主函数,于是在node_modules文件中找到tagcloud.js文件,进行简单的修改。

效果

先展示修改后的效果,这是放在主页的效果

这是放在文章评论栏上方的

如何实现

前期准备

一个存储标签图标的文件夹和一堆与标签名字相同的图标图片,并且这些图片应该有统一的后缀名,比如统一为jpg格式的图片,或者统一为png格式的图片。(我这里用的是png格式,如果不同请做相应更改)

如果想要方便的话,建议把图标直接都放在主题的images文件夹下。放在其他地方需要做相应改动,后面会提到。

修改tagcloud.js文件

找到我刚说的tagcloud.js文件,在tagcloudHelper这个函数中定位到tags.forEach这个循环体。

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};`;

if (color) {
const midColor = startColor.mix(endColor, ratio);
style += ` color: ${midColor.toString()}`;
}
result.push(
`<a href="${self.url_for(tag.path)}" style="${style}">${transform ? transform(tag.name) : tag.name}</a>`
);
});

找到其中的这个push语句。

result.push(
`<a href="${self.url_for(tag.path)}" style="${style}">${transform ? transform(tag.name) : tag.name}</a>`
);

修改为

result.push(
`<a href="${self.url_for(tag.path)}" style="${style}"><div class="tag_img" style="background-image:url(/images/${transform ? transform(tag.name) : tag.name}.png);"></div>${transform ? transform(tag.name) : tag.name}</a>`
);

重要的地方

  1. 如果你存放图标的位置不在images文件夹或者你存储在别的域名下,将上面修改的语句中,我的文件夹位置images修改为你的存储标签图标的文件夹位置

  2. 如果图片后缀不为png格式,将上面的png后缀改为你的图片的后缀

修改css文件

我们的标签云原来的css样式可能会有所不同,显示出来的效果也会不同,这里写一下我自己的css配置,你可以根据个人喜好自行修改.

因为我的主题是基于next修改的,所以可以在**themes extsourcecss\_custom**文件夹下的custom.styl文件添加相应样式,如果你没有这个文件,可以找一下自己主题的主css文件在哪,并进行修改。

添加样式内容如下

.tag-cloud a{
border-radius:4px;
padding-right:5px;
padding-left:2px;
margin-right:3px;
margin-left:0;
color:#555;
margin-top:8px;
margin-bottom:0;
background-color: rgb(245, 247, 241);
border:none;
}
.tag-cloud a:hover{
text-decoration: none;
border: none;
}

.tag-cloud-tags{text-align:left;counter-reset:tags}

.tag_img{
background-size: contain;
width:24px;height:24px;
margin-right: 3px;position: relative;
top: 5px;background-repeat: no-repeat;
display: inline-block;
background-position-x: center;
background-position-y: center;
}

如果样式不合口味,可以自行更改。
如果图标没有显示出来,请在浏览器页面按F12自行检查

写在后面

其实修改很简单,如果按上面步骤没法修改成功,你也可以按照我的思路自己根据实际情况进行修改。

  1. 准备好各个标签图标(我是直接从掘金网站拷下来的)
  2. tagcloud.js文件中修改渲染标签的函数,在渲染<a>节点时,在其中添加一个<div>,标签,并且设置背景图片为你的图标。
  3. 修改主题css文件,对标签云的css样式做相应调整。

世上无难事,只要肯折腾哈哈。
感觉自己已经把next主题魔改地越来越偏离原主题了
什么时候看人多了,整理一下把自己的主题打包发出来