使用主题 & 平滑更换

下载并配置

进入主题目录, 下载主题

git clone https://github.com/yunwanjia-cloud/hexo-modify-theme-butterfly.git

将下载下来的主题文件夹名字改为 Butterfly , 同时修改hexo配置文件_config.yml，把主題改为Butterfly

theme: Butterfly

如果你没有 pug 以及stylus的渲染器, 请下载安装:

npm install hexo-renderer-pug hexo-renderer-stylus --save

yarn add hexo-renderer-pug hexo-renderer-stylus

如果你之前不是使用 butterfly 主题, 那么到这里你已经配置完毕, 接下来更改主题下 _config.yml 文件以个性化.

更换

对比魔改主题的 _config.yml 与原主题 _config.yml 的区别, 将魔改配置加上 (默认关闭, 所以加上并不会有什么变化), 并且将原主题多出的配置删除 (可能没有). 然后将更改过的 _config.yml 替换魔改主题的 _config.yml 就可以成功启用.

配置项

random_background

首先你要准备一系列的图片作为随机背景的图片. 你应该把图片放在 Github 的仓库. 图片的命名要求有一定的格式. 比如说, 如果有 5 张图片, 那么应该命名为 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg . 或者是 0.png, 1.png, 2.png, 3.png, 4.png . 即编号从 0 开始递增且后缀必须相同. 将这些图片存在 Github 仓库中的某个文件夹中, 就可以开始下一步配置.

post

值为 true 或 false , 值为 true 即在文章页开启随机背景, false 即在文章页不开启随机背景.

示例: false

page

值为 true 或 false , 值为 true 即在 page 页开启随机背景, false 即在 page 页不开启随机背景.

示例: true

username

填你的 Gthub 用户名.

示例: yunwanjia-cloud

repo

填存放图片的 Github 仓库名

示例: banner

path

填存放图片的路径, 记得在最后和前面加上一个 / . 比如说, 我将图片存放在仓库中的 source/img 文件夹中, 那么你应该填 /source/img/ . 如果你直接就放在根目录, 那么直接填一个 / 即可.

示例: /img/

img_num

即你的图片的数量

示例: 55

suffix

图片的后缀, 比如 .png , .jpg , .webp 等等.

示例: .jpg

footer_transparent

这个配置常常与随机背景配合 (更好看) . 与页脚动态颜色冲突, 请不要同时设置都为 true, 但是可以一个 post 是 true 一个 page 是 true.

post

值为 true 或 false , 值为 true 即在文章页使页脚透明, false 即在文章页不使页脚透明 (即原来页脚).

示例: false

page

值为 true 或 false , 值为 true 即在 page 页使页脚透明, false 即在 page 页不使页脚透明 (即原来页脚).

示例: true

footer_color_change

此配置是用来和随机背景配合使用的.

与页脚透明冲突, 请不要同时设置都为 true, 但是可以一个 post 是 true 一个 page 是 true.

post

值为 true 或 false , 值为 true 即在文章页使页脚具有动态颜色, false 即在文章页不具有动态颜色 (即原来页脚).

示例: true

page

值为 true 或 false , 值为 true 即在 page 页使具有动态颜色, false 即在 page 页不具有动态颜色 (即原来页脚).

示例: false

banner_transparent

值为 true 或 false , 值为 true 即隐层 banner, false 即保持原样. 此配置是用来和随机背景配合使用的.

示例: true

classify_fold

你们想要的分类折叠! 开启后, 主页侧边栏小卡片会启用目录折叠.

enable

值为 true 或 false , 值为 true 即开启分类折叠, false 即保持原状.

post

值为 true 或 false , 值为 true 即可从侧边栏直达文章, false 即保持原状.

示例: true

效果图:

jsdelivr_post

自动将图片替换为 cdn 加速过的链接, 仅对图片有部署在 github 上的博客有效 (双部署也算) , 因此不能有外链..

post_img

值为 true 或 false , 值为 true 即在文章自动将图片替换, false 即保持原状.

示例: true

dpost_cover

谨慎开启! 开启后文章 cover 只能使用文章资源文件夹中的图片, 否则会出错. 同时开启后本地预览可能会没有图片, 这是因为没有上传到 Github 仓库, 请执行 hexo d 后重试. 文章资源文件夹详情请看文章资源文件夹.

值为 true 或 false , 值为 true 即将所有 cover 图片替换, false 即保持原状.

示例: true

jsdelivr_url

格式为 "https://cdn.jsdelivr.net/gh/github用户名/博客仓库/ , 双引号要加.

示例: "https://cdn.jsdelivr.net/gh/yunwanjia-cloud/blog/"

blog_opacity

设置透明度.

post

设置文章页透明度, 值为 0~1, 0为完全透明, 1为完全不透明.

示例: 1

page

设置 page 页透明度, 值为 0~1, 0为完全透明, 1为完全不透明.

示例: 0.8

Hexo 魔改主题 butterfly相关推荐

一个自用Typora魔改主题
本主题是我将Orange主题和Newsprint主题进行合并修改后的主题样式,后续还会继续优化,如果有建议可以在评论区指出. 修改/添加Typora的步骤: 文件-偏好设置-外观-主题-打开主题文件 ...
苹果cmsV10魔改短视多功能主题5.2版本
主题介绍(带模板独立控制后台,无bug) 苹果 cmsv10mx魔改主题集合影视,专题,会员,资讯,美图为一身的多功能主题,并整合了 Discuz!支持 Discuz!同步登录退出的超强主题.后台设置 ...
【hexo】butterfly主题魔改之天气插件
前言最近我使用hexo博客框架搭建了我的个人框架萌新源的小窝主题使用的是butterfly 今天给大家带来的是导航栏天气插件效果如下: 放大一点看看面板展开开始 1.准备 hexo博客框架 ...
Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页前置说明魔改亮点
Butterfly主题背景魔改
Butterfly主题背景魔改顶部图片透明页脚透明随机背景图页脚养鱼预览顶部图片透明在hexoblog\themes\butterfly\layout\includes\header\i ...
Hexo主题Aurora的魔改（一）
Hexo主题Aurora的魔改(一) 刚接触Hexo,就碰到了这么好的主题,如图是Aurora作者的博客展示: 你可以从去Github了解Hexo和Aurora主题. 虽然主题很好看,但是对于刚接触H ...
butterfly配置 hexo_Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页直接体验魔改效果可以访问我的个人博客小康博客此文更新可能不及时,如果更新记录有新的方案后,本文没有那么请移至我的个人博客进行查找. 前置 ...
基于hexo搭建博客后更换主题butterfly
上一篇文章,介绍了如何利用 hexo+github pages 搭建个人博客.那么这篇文章则以我的博客为例详细教你打造个性超赞博客的主题. 现如今用的人最多的是next这个主题,而本人在昨天发现一个神 ...
【源码级】butterfly魔改
首页文章使用新标签页打开官方没有提供解决方案,但是可以通过修改源码的方式进行修改. 找到主题下的layout/includes/mixins/post-ui.pug,在第16行.第19行添加targ ...

Hexo 魔改主题 butterfly

到原文查看最新更新: https://yunist.cn/hexo/hexo_modify_theme_butterfly/

使用主题 & 平滑更换

下载并配置

更换

配置项

random_background

footer_transparent

footer_color_change

banner_transparent

classify_fold

jsdelivr_post

blog_opacity

Hexo 魔改主题 butterfly相关推荐

最新文章

热门文章