hexo next 解决自定义侧边栏用户社交链接小图标 custom sidebar social icon

牛奶牛撕面包

已于 2022-02-04 20:54:09 修改

阅读量2.2k

点赞数 3

文章标签：前端 hexo

于 2022-02-03 20:32:36 首次发布

本文链接：https://blog.csdn.net/weixin_44634406/article/details/122777058

版权

背景

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文件中添加如下样式

/* 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

# 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对小图标进行修改

# 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