这个稍有点复杂,教程是用butterfly 4.9.0版本改的,这个功能一般用于page类型的页面会比较合适。 修改custom.css添加如下代码 /*视频功能*/ #index-video { z-index: 0; position: absolute; top: 0; left: 0; height: 80vh; width: 100%; object-fit: cover; } @media only screen and (max-width: ...
Hexo+Butterfly主题设置背景透明度和字体 效果 新建css文件 引入css改变页面的样式,推荐在一个自己新建目录创建。有人选择在主题文件夹下找到css文件夹(\themes\Butterfly\source\css),这样系统升级可能会把自己的代码覆盖掉。本人是在Blog\CodeRain\source\css新建一个transpancy.css文件(文件名可以自取),修改最右边的...
style=flat&logo=hexo" title="博客框架为Hexo">
原文地址,阅读效果更佳:Hexo中Buttefly主题美化进阶续篇(十一) | 偷掉月亮 (moonshuo.cn) 大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly主题的我们页面的整体美化,其实前面已经出过两个这样的美化,但是随着时间的交替,发现可能适合我们的美化,这里将大家可以自由进行选择 个人卡片...
基于Hexo和Butterfly创建个人技术博客,(8) 博客网站butterfly主题UI框架美化,基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入,详细记录了个人建站全过程。系列专题-博客网站主体butterfly主题UI框架美化
⛄yooo~ 今天教大家美化Butterfly的字体图标 ⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢? ⛄可以使用阿里巴巴iconfont来拓展啦 Butterfly版本:4.5.1 选择图标 iconfont图标库地址:iconfont-阿里巴巴矢量图标库 找到自己需要的图标之后点击添加入库 ...
打开主题配置文件(butterfly.yml) 定位搜索 inject 其中head是用来引入css的。bottom是用来引入js的。 示例: inject:head:-bottom:- 注:以上方式2.3.5版本可用,其他版本请自行查找引入自定义js及css的地方。 引用方式说明 引用方式二选一即可。 以相对路径引入 将写好的css文件移动到\Butterfly\source\css\目录...
首先,在使用Butterfly主题之前,我们需要确保已经安装了Hexo,并成功创建了一个博客。 一、查找SCSS变量文件 Butterfly主题的SCSS变量文件位于themes/butterfly/source/scss/_variables.scss路径下。打开这个文件,我们可以看到其中定义了一系列的变量,用于控制主题的颜色、字体、边框等样式。 二、修改变量 根据个人喜好,我们...
为了实现星空背景和流星特效，新建`universe.js`文件，并复制相应的代码。在自定义CSS文件中，添加对应代码。完成配置后，在Butterfly主题配置文件中引入CSS和JS文件，确保第一行代码不被遗漏。背景透明度优化 在《Hexo中Buttefly主题美化进阶（八）》中，我讲解了设置背景透明度的方法，但后来发现一个关键...
2、将需要使⽤的字体⽂件放⼊博客⽬录下，我这⾥是放在blog/source/butterfly/css下，⽅便css⽂件引⼊。3、如有有css⽂件，就在最下⾯继续写；如果没有，则新建⼀个css⽂件，⽂件名任取 @font-face{ font-family: 'FZFW' ; /* ⾃定义字体名称 */ src: url('FZFWZhu.ttf'...