0
点赞
收藏
分享

微信扫一扫

Hexo + NexT 通过自定义样式添加 Bilibili 图标


NexT 默认使用 Font Awesome 库作为 icon 库。美中不足的是,有一些中国的社交网站的图标在 Font Awesome 库中并没有提供,包括我们熟悉的哔哩哔哩、豆瓣、简书等等。所以如果想使用这些图标,就需要我们使用本地图标进行手动添加。

首先,可以在 ​​阿里巴巴矢量图标库​​ 之类的网站找到你需要的图标,下载 SVG 格式文件。以 Bilibili 为例,将 SVG 文件放置在 hexo 工程的 /source/images/bilibili.svg 中。

编辑 source/_data/styles.styl 文件(如果没有请自行创建),并添加如下样式:

.fa-bilibili {
background: url(/images/bilibili.svg);
background-position: 50% 75%;
background-repeat: no-repeat;
height: 1rem;
width: 1rem;
}

注意:是 hexo 工程目录下的 source 目录,不是 theme 主题下的 source 目录哦~

接下来在主题配置文件(比如 theme/next/_config.yml)中取消 custom_file_path 的 style 段的注释。

custom_file_path:
style:

最后,在主题配置文件(比如 theme/next/_config.yml)的社交链接中进行引用即可。

social:
Bilibili: https://space.bilibili.com/userid/ || fab fa-bilibili

Hexo + NexT 通过自定义样式添加 Bilibili 图标_NexT

T T 哈哈,可是我使用 hexo-cli 4.2.0 和 NexT 8.2.1 没弄成功,谁能告诉我怎么弄?

参考阅读:

  • ​​https://theme-next.js.org/docs/advanced-settings/custom-files.html#Custom-Icon-Image​​
  • ​​https://www.zywvvd.com/2020/03/28/next/20_custom_style/custom-style/​​


举报

相关推荐

0 条评论