配置hexo主题记录…

hexo-theme-butterfly

Demo：butterfly || JerryC。
Doc: 安装详情

GIT

1
2
cd blog/
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

configure

Set theme in the hexo work folder’s root config file _config.yml:

theme: butterfly

安装插件

如果你沒有 pug 以及 stylus 的渲染器，在根blog/目录下安裝：

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

configure

升级建议
升級完成後，請到 Github 的 Releases 界面 或者 文檔七 查看新版的更新內容。

裏面有標注 _config 文件的變更內容（如有），請根據實際情況更新你的配置內容。

為了減少升級主題後帶來的不便，請使用以下方法（建議，可以不做）。

此方法只支持 Hexo 5.0.0 以上版本，建議使用。

如果已經在 source/_data/ 創建了 butterfly.yml，請記得刪除掉。

把主題文件夾中的 _config.yml 複製到 Hexo 根目錄裏，同時重新命名為 _config.butterfly.yml。

以後只需要在 _config.butterfly.yml進行配置就行。

Hexo會自動合併主題中的_config.yml和 _config.butterfly.yml裏的配置，如果存在同名配置，會使用_config.butterfly.yml的配置，其優先度較高。

主题配置

官方文档

魔改

一直魔改一直爽。

背景修改

参考文章

  1. 直接修改源文件
    也就是直接修改主题目录下的 index.sty 文件，这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。
  2. 引入一个新的 css 文件
    这个是我比较推荐的做法，毕竟” 魔改一时爽，一直魔改一直爽 “。
  3. 使用 js 文件
    最不推荐的做法，这种做法会在一定程度上延缓网页加载的时间，并且修改方式较为复杂。

使用第二种方式。
创建层叠样式表
添加文件css/background.css，或其他位置，编辑：

1
2
3
4
5
6
/* 背景图像的地址（url括号里）  */
 background: url();
 /* 背景图像不重复 */
 background-repeat: no-repeat;
 /* 背景图像大小 */
 background-size: cover;

相对路径引入，修改_config.butterfly.yml:

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/backgourd.css">
  bottom:
    # - <script src="/js/pumpkin/bottom.js"></script>