100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > NexT 主题自定义侧边栏图标

NexT 主题自定义侧边栏图标

时间:2024-07-26 00:10:50

相关推荐

NexT 主题自定义侧边栏图标

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。