Butterfly主题是自带浅色和深色模式切换的,在浅色模式下,由于之前配置了页面透明度,感觉字看不太清,所以决定把页面改为和深色模式一样,除了修改页面颜色外,还需把字体颜色改为白色,这里直接改了全局foot颜色,在主题下的source-css-var.styl文件里,修改: $font-color = #FFFFFF //#1F2D3D $font-black = #FFFFF...
去主题下面css文件夹下修改文件,此外发现仍有阴影,记得去(我本地设置)_config.butterfly.yml配置文件中将footer_bg: false 如上目录下把这个背景色注释掉发现问题解决(粗暴有侵入,所以另外引入CSS)
原文地址,阅读效果更佳:Hexo中Buttefly主题美化进阶续篇(十一) | 偷掉月亮 (moonshuo.cn) 大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly主题的我们页面的整体美化,其实前面已经出过两个这样的美化,但是随着时间的交替,发现可能适合我们的美化,这里将大家可以自由进行选择 个人卡片...
Butterfly配置 新建css文件 在Butterfly主题文件夹下的/source/css文价夹中新建font.css吧复制的代码粘贴进去 代码语言:css 复制 /* font.css */@font-face{font-family:"iconfont";src:url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff2?t=1671175363970')format('woff2'),url('//at.alicdn...
简介:Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。 Butterfly主题使用阿里巴巴iconfont ?yooo~ 今天教大家美化Butterfly的字体图标 ?Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?
打开主题配置文件(butterfly.yml) 定位搜索 inject 其中head是用来引入css的。bottom是用来引入js的。 示例: inject:head:-bottom:- 注:以上方式2.3.5版本可用,其他版本请自行查找引入自定义js及css的地方。 引用方式说明 引用方式二选一即可。 以相对路径引入 将写好的css文件移动到\Butterfly\source\css\目录...
星空背景流星特效 为了实现星空背景和流星特效，新建`universe.js`文件，并复制相应的代码。在自定义CSS文件中，添加对应代码。完成配置后，在Butterfly主题配置文件中引入CSS和JS文件，确保第一行代码不被遗漏。背景透明度优化 在《Hexo中Buttefly主题美化进阶（八）》中，我讲解了设置背景透明度的方法，但...
本文章介绍hexo博客菜单的图标设置方法,以本博客的butterfly主题为例 本文只介绍hexo怎么设置菜单图标,并不说明怎么安装Font Awesome字体(因为一般主题都已经带了),如需了解的请自行百度。 说明: hexo博客菜单所使用的图标都是用的Font Awesome(以下简称FA),它并不是一张图片,你可以理解他就是一种字体。它为...
基于Hexo和Butterfly创建个人技术博客,(8) 博客网站butterfly主题UI框架美化,基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入,详细记录了个人建站全过程。系列专题-博客网站主体butterfly主题UI框架美化
butterfly主题美化 接下来的美化是在官方文档的基础之上进行的美化 1:樱花飘落背景 Js文件下载地址 把下载好的Js文件放在~\Butterfly\source\js文件夹下 在~\Butterfly\layout\includes文件夹下找到head.pug文件,在最后引入 if theme.sakura.enable script(src="/js/sakura.js") 1 2 在主题的主配置文件加入...