NexT 主题自定义侧边栏图标

发表于 分类于 ， 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

NexT 主题的图标基本上都是由 Font Awesome 提供，但是知乎、CSDN、bilibili等大多数国内应用软件的图标在 Font Awesome 都不支持。为了支持侧边栏各种应用小图标的显示，可以利用嵌入 svg 格式的图标进行实现。

下载 icon 图标

阿里的 iconfont 网站上拥有丰富的图标，通过这个网站下载 svg 格式的图标，并将图片保存在 Hexo 文件下的 source/images 路径下，如果 images 文件不存在，则新建 images 文件夹。（注意：这里是 Hexo下的文件夹下，不是主题文件 NexT 的路径下）

设置图标格式

在 Hexo 的 source\_data 路径下，新建 styles.styl 文件， 如果没有 _data 文件夹，则新建文件夹。在 style.styl 文件中设置图标样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 侧边栏图标格式设置 */
.zhihu {
  background-image: url('/images/zhihu.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.yml 设置自定义文件夹路径，找到 custom_file_path 下，取消对 style 路径的注释

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

对 social 的图标进行设置，如下

1
2
3
4
5
social:
  GitHub: https://github.com/zengfanyongcn || fab fa-github
  E-Mail: mailto:zengfanyong@live.cn || fa custom outlook
  zhihu: https://www.zhihu.com/people/ceng-ceng-42-83 || fa custom zhihu
  CSDN: https://blog.csdn.net/acknole?spm=1000.2115.3001.5343 || fa custom csdn
-------------本文结束 感谢您的阅读-------------