NexT 主题自定义侧边栏图标

article/2025/11/11 3:10:55

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: https://github.com/zengfanyongcn || fab fa-githubE-Mail: mailto:zengfanyong@live.cn || fa custom outlookzhihu: https://www.zhihu.com/people/ceng-ceng-42-83 || fa custom zhihuCSDN: https://blog.csdn.net/acknole?spm=1000.2115.3001.5343 || fa custom csdn


http://chatgpt.dhexx.cn/article/ULepL9kB.shtml

相关文章

hexo next 主题安装 livere 评论插件

之前用gitalk评论插件,但是访问github登录授权感人,有时还要开代理,体验不佳,而且每次都要初始化评论,偶然访问别人的博客发现了一款比较好用的评论插件:livere , 我按照官网研究了一会,发现h…

Hexo博客进阶:为 Next 主题添加 Waline 评论系统

前言 在之前的 Hexo博客进阶:为Next主题添加Valine评论系统 | 谢同学的博客 (qianfanguojin.top) 文章中,我叙述了如何 在 Next主题下配置 Valine 评论系统。 但是,根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.) 以上已…

Hexo+Next主题的一些实用插件和美化升级

HexoNext主题的一些实用插件和美化升级 添加右上角图标folk github添加站内搜索主页显示项目moon-cake 进度显示和上下滑动代码颜色首页只显示文章摘要NexT8动画背景Canvas Nest修改链接样式LaTeX公式编辑问题使用mermaid绘制流程图mermaid的flowchart基础语法 访客统计文章目录…

Hexo博客主题安装及Next主题个性化修改

原文链接https://www.lixint.me/hexo-theme-diy.html 欢迎加入博客搭建交流群&#xff08;QQ群号60429576&#xff09;>点击加入< 写在最前面&#xff1a; 1.在修改时请注意博客配置文件与主题配置文件的区别&#xff1a;博客配置文件是指博客根目录下的_config.yml文件…

Hexo-Next主题优化

添加动态背景添加背景图片侧边栏设置头像设置&#xff08;圆形旋转&#xff09;浏览页面显示当前浏览进度添加顶部加载条Hexo-Next代码复制功能 1. 添加动态背景 动态背景就是我的博客背景中动的那些粒子。 只需修改主题配置文件 /themes/next/_config.yml # Canvas-nest c…

基于Hexo搭建Next主题博客

Next 链接地址&#xff1a;https://github.com/caozongpeng/hexo-theme-next NexT 是一个高质量并且优雅的Hexo 主题。这是精心制作做出来的 hexo 主题。 如果你对此主题非常喜欢&#xff0c;欢迎Star & Fork&#xff0c;非常感谢。 预览界面 首页 底部 相册 文章 搜索…

Next主题添加背景图片

文章目录 操作步骤添加背景图片设置透明边框圆角 hexo 和 Next 的版本如下&#xff1a; hexo: 5.2.0 NexT: 7.8.0 操作步骤 进入 themes\next\source\css 目录中打开 main.styl 文件在末尾添加 css 代码即可 添加背景图片 值得注意的是&#xff0c;在 main.styl 文件末尾写的…

Hexo-Next主题博客个性化配置

Hexo版本&#xff1a;6.2.0、NextT版本&#xff1a;7.8.0 一、主题安装 打开Git Bash&#xff0c;cd到站点根目录&#xff0c;输入 git clone https://github.com/theme-next/hexo-theme-next themes/next打开站点根目录下的_config.yml文件&#xff0c;landscape修改为next …

hexo下next主题的优化

1.站点信息的配置。 修改一些基本的配置&#xff0c;比如站点名、站点描述等等。 # Site title: halisi7 subtitle: 一个专注技术的组织 description: 涉猎的主要编程语言为 c语言、Java、mysql、linux、docker&#xff0c;领域涵盖算法、服务研发和对象存储等。 keywords: c…

Hexo博客-NexT主题自定义主页配置方法

Refrence https://zhuanlan.zhihu.com/p/366761432 问题 在使用Hexo博客框架的Next主题时&#xff0c;默认主页是数篇博客的摘要。想要修改主页&#xff08;也即首页&#xff09;的内容&#xff08;例如给出网站的介绍等&#xff09;&#xff0c;需要进行自定义配置。 步骤 …

Hexo-Next主题搭建个人博客最新配置教程!

个人博客 网页预览&#xff1a;https://benn314.github.io/ Hexo-Next 是一款我很喜欢的主题&#xff0c;布局简约&#xff0c;很适合用于搭配 live-2d 和 网格动画&#xff0c;打造属于自己的个人博客。博客目前部署于 Github Pages 相关Github仓库 https://github.com/Ben…

NexT主题优化

前言 这算是各种文章的集合了&#xff0c;如果你有耐心就看完吧(&#xff34;▽&#xff34;) 如果是明确想要哪一种功能的童鞋&#xff0c;那就直接查找吧( • ̀ω•́ )✧ 本篇文章是在已经搭建好gitpagehexo的博客的前提下&#xff08;不懂怎么搭建的可以参考我的另一篇…

Hexo+next主题美化静态博客

前言 需要在Hexo下配置next主题 Hexo配置next主题教程&#xff1a;点我跳转 更改配置以后使用素质三连&#xff1a;hexo clean && hexo g && hexo s即可本地看到效果。 hexo clean && hexo g && hexo s注&#xff1a;部分参考自互联网&…

Next主题美化

写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了&#xff0c;但是在作者去一一尝试的时候&#xff0c;却发现有很多博客中提供的方法现在已经不支持或者过时了&#xff0c;为了避免大家和作者一样花费大量时间去一一尝试&#xff0c;所以作者考虑再三&#xff0c;决定…

Hexo博客优化之Next主题美化

前言 有了前面几篇博客的介绍,我们就可以很容易的搭建并编辑我们的博客了,不过既然是属于自己的博客网站,自然也就想让其更加美观,更有意思,所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,…

Django CBV ( 类视图函数 )

Django 类视图函数 写在前面1、先创建一个新的应用2、写一个类视图函数3、post访问试试4、再创建一个类视图函数5、as_view()里面可以传参6、TemplateView6.1、template_name写到路由里6.2、template_name写到视图里 7、ListView8、DetailView8.1、DetailView还可以不指定templ…

详解Django中FBV开发模式与CBV开发模式的区别.

你可能会好奇为什么在这里我们又要介绍CBV开发模式&#xff0c; 在前面的文章中&#xff0c; 我们调用视图函数都是使用 FBV 开发模式&#xff0c; 用的好好的为什么又要换呢&#xff1f; 其实不然&#xff0c;这是一个循序渐进的过程&#xff0c; 就像编程基础 和 框架开发&am…

什么是ccv

ccv是一个以不成熟的openframeworks为基础作的一个开源的软件。注意它并不是一个库。并且她早就不再更新了。现在openframeworks已经很成熟了&#xff0c;openframeworks提供的函数完全可以替代ccv&#xff0c;所以想继续使用ccv的同学们&#xff0c;赶紧回头是岸&#xff0c;使…

Django----FBV 与 CBV 介绍、CBV源码分析

文章目录 一、CBV和FBV二、CBV 源码分析 一个视图函数&#xff08;类&#xff09;&#xff0c;简称视图&#xff0c;是一个简单的Python 函数&#xff08;类&#xff09;&#xff0c;它接受Web请求并且返回Web响应。 响应可以是一张网页的HTML内容&#xff0c;一个重定向&#…

FBV和CBV

一、FBV FBV&#xff08;function base views&#xff09; 就是在视图里使用函数处理请求。 看代码&#xff1a; urls.py from django.conf.urls import url, include # from django.contrib import admin from mytest import viewsurlpatterns [# url(r‘^admin/‘, admin.s…