Tianyou Zhao 的个人博客
0%

解决hexo框架下next主题自定义侧边栏小图标

发表于 更新于 分类于 Valine：
本文字数： 2.1k 阅读时长 ≈ 2 分钟
next主题下侧边栏社交链接小图标默认从FontAwesome网站获取图标，但是国内某些网站，如Bilibili，网易云等等，并不支持。 本文提供一种自定义侧边栏小图标的方法。

背景

next主题下侧边栏社交链接小图标默认从FontAwesome网站获取图标，但是国内某些网站，如Bilibili，网易云等等，并不支持。
博主希望能够自定义各种侧边栏小图标，目前搜索到的教程并不能解决该问题。
hexo+next主题侧边栏社交小图标设置的问题
Hexo + NexT 通过自定义样式添加 Bilibili 图标
NexT sidebar setting document
经过一番尝试后，最终解决，效果图见右侧侧边栏小图标。

博主使用的版本号为：
hexo: 5.4.1
hexo-cli: 4.3.0
next：7.8

解决方法

下载小图标

在iconfont可以选择想要下载的图标，如Bilibili
在这里插入图片描述
选择svg格式下载
在这里插入图片描述
将图片保存在\source\images路径下，注意这里的source是在hexo文件夹中，不是next主题文件夹。
如果没有images文件夹请自行创建。

自定义图标格式

在hexo文件夹中，在\source\ _data路径下新建styles.styl文件。
如果没有_data文件夹请自行创建。
在styles文件中添加如下样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* sidebar social icon */
.bilibili {
  background-image: url('/images/bilibili.svg');
  background-size: 1em 1em;
  opacity: 0.55;
  background-position: 0.05rem 0.2rem;
  background-repeat: no-repeat;
  height: 1rem;
  width: 1rem; 
  border-radius: 0rem;
  /*鼠标停留在图标上时，图标呈现发光效果*/
  &:hover {
      opacity: 1;
    }
}

修改config文件

进入next主题下的config配置文件
找到custom file paths

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

取消对styles的注释
再找到social link对小图标进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  Bilibili: https://space.bilibili.com/yourname || custom bilibili
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

注意在图标前加上custom