NexT 主题的图标基本上都是由 Font Awesome 提供,但是知乎、CSDN、bilibili等大多数国内应用软件的图标在Font Awesome都不支持。为了支持侧边栏各种应用小图标的显示,可以利用嵌入svg格式的图标进行实现。
本人博客实现效果如下:
本人使用博客主题为 NexT V8.11,具体的实现效果可以访问本人的博客:XiaoZeng's Blog
解决方法:
1. 通过阿里的 iconfont 下载软件的图标,比如知乎
选择 svg 格式下载,并将图片保存在 Hexo 文件下的 source\images 路径下,如果没有 images 文件夹,则新建 images 文件夹。(注意:这里是 Hexo下的文件夹下,不是主题文件 NexT 的路径下)
2. 设置图标格式
在 Hexo 的 source\_data 路径下,新建 styles.styl 文件, 如果没有 _data 文件夹,则新建文件夹。在 style.styl 文件中设置图标样式如下:
/* 侧边栏图标格式设置 */.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;}}
3. 设置主题配置文件 _config 参数
在 NexT 文件夹下的 _config.yml 设置自定义文件夹路径,找到 custom_file_path 下,取消对 style 路径的注释
custom_file_path:#head: source/_data/head.njk#header: source/_data/header.njksidebar: source/_data/sidebar.njk#postMeta: source/_data/post-meta.njk#postBodyEnd: source/_data/post-body-end.njkfooter: source/_data/footer.njk#bodyEnd: source/_data/body-end.njkvariable: source/_data/variables.styl#mixin: source/_data/mixins.stylstyle: source/_data/styles.styl
4.对 social 的图标进行设置,如下
social:GitHub: /zengfanyongcn || fab fa-githubE-Mail: mailto:zengfanyong@ || fa custom outlookzhihu: /people/ceng-ceng-42-83 || fa custom zhihuCSDN: /acknole?spm=1000.2115.3001.5343 || fa custom csdn