更新: pjax 魔改已上线! 传送门.

  所有魔改均可取消! 配置默认不开启, 因此可以平滑换到魔改 butterfly 主题.

  首先推介 butterfly 文档, 这里只介绍魔改部分的配置. 这里的示例仅为合法示例, 即你填了该示例不一定能正确显示, 仅供参考.

魔改主题 Github 地址

使用主题 & 平滑更换

下载并配置

  进入主题目录, 下载主题

1
git clone https://github.com/cnyist/hexo-modify-theme-butterfly.git

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

1
theme: Butterfly

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

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

or

1
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 用户名.
    • 示例: cnyist
  • repo

    • 填存放图片的 Github 仓库名
    • 示例: banner
  • path

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

    • 即你的图片的数量
    • 示例: 55
  • suffix

    • 图片的后缀, 比如 .png , .jpg , .webp 等等.
    • 示例: .jpg

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

效果图:

  • post

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

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

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

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

效果图:

  • post
    • 值为 true 或 false , 值为 true 即在文章页使页脚具有动态颜色, false 即在文章页不具有动态颜色 (即原来页脚).
    • 示例: true
  • page
    • 值为 true 或 false , 值为 true 即在 page 页使具有动态颜色, false 即在 page 页不具有动态颜色 (即原来页脚).
    • 示例: false
  • 值为 true 或 false , 值为 true 即隐藏 banner, false 即保持原样. 此配置是用来和随机背景配合使用的.
  • 示例: true

classify_fold

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

效果图:

  • enable

    • 值为 true 或 false , 值为 true 即开启分类折叠, false 即保持原状.
    • 示例: true
  • 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/cnyist/blog/"

blog_opacity

  设置透明度.

效果图:

  • post

    • 设置文章页透明度, 值为 0~1, 0为完全透明, 1为完全不透明.
    • 示例: 1
  • page

    • 设置 page 页透明度, 值为 0~1, 0为完全透明, 1为完全不透明.
    • 示例: 0.8

once_scack_bar

  进站弹窗.

效果图:

  • enable

    • 是否开启, 值为 true 或 false.
    • 示例 true
  • text

    • 内容, 即弹窗需要显示的内容
    • 示例 欢迎来到本站!
  • condition

    • js 条件, 判断是否需要弹窗, 如果不需要判断就填 true .
    • 示例 true
  • time

    • cookie 保存时间, 即多久后再次弹窗, 以小时为单位.
    • 示例 12
  • duration

    • 弹窗持续时间, 即多久后自动消失, 以毫秒为单位
    • 示例 5000