背景

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.stylstyle: 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

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

uniapp自定义H5页面浏览器标签栏小图标
在web页面经常能看到下图的情况,在标签栏中并不是显示的默认的图标,在html和Vue中能很方便的自定义,但是在uniapp中会相对的麻烦 1. 在项目根目录下创建一个html文件这个htm ...
第三方网站接入微信JS-SDK的分享自定义设置，微信分享小图标以及标题
首先这个坑是工作遇到的问题,正好需要分享链接有小图,于是各种百度,发现这里第三方网址需要接入微信的东西,才能正常的显示出小图等. 对于想了解如何操作的,觉得我的博客看不太懂的,可以参考慕课网-微信相 ...
hexo博客kaze主题自定义社交链接
主题自带的icon图标 # 社交链接 about:description: descriptionsocial_links:- { icon: icon-sina, link: https://wei ...
Hexo博客Next6.0版本主题配置（背景图片加载、侧边栏社交小图标设置、设置网站图标）
随机背景图片加载原理自动更换背景是修改添加背景的css样式实现图片来源 https://source.unsplash.com/ 修改背景样式修改themes\next\source\css\ ...
编写简单的连接MongoDB数据库C++程序解决编译C++程序时链接MongoDB动态库失败的问题...
一. 安装好mongo数据库以后,创建一个用来链接数据库的简单C++程序mon2.cpp,发现很多网站都用这个程序做示例. 不过重点在于如何让这个程序真正可以跑起来显示出来结果,着实费了一番功夫. 1 ...
微信公众号发送小程序卡片_微信公众号将能够直接给用户推送小程序卡片，社交电商开始发力...
公众号或能在对话框中直接给粉丝推送小程序卡片了,这个功能似乎正在灰度测试中. 微信公众号将能够直接给用户推送小程序卡片,社交电商开始发力一直以来,微信公众号和微信小程序一直是腾讯基于微信生态的两款明 ...
Hexo + NexT 通过自定义样式添加 Bilibili 图标
NexT 默认使用 Font Awesome 库作为 icon 库.美中不足的是,有一些中国的社交网站的图标在 Font Awesome 库中并没有提供,包括我们熟悉的哔哩哔哩.豆瓣.简书等等.所以如 ...
uniapp h5 公众号自定义卡片式分享链接
描述: 首次开发卡片式分享链接,过程中遇到许多坑,查阅了几十篇博客终于完成了这个功能,记录的开发过程不一定符合你的需求,但如果你也是用uniapp开发,希望本篇能够帮助到你. 效果图: 准备工作: 设 ...
百度地图解决自定义图标显示问题
百度地图解决自定义图标太大不显示问题这几天碰到这个需求, 需要在百度地图上显示头像,因为图片太大一直没有显示,百度了几天,解决都长一样,心累. 提供以下几种解决思路: 检查图片路径是否错误图标大小 ...

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

背景

解决方法

下载小图标

自定义图标格式

修改config文件

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

最新文章

热门文章