0.前言

　　我今天新发现个主题叫 Butterfly ，很美，还可以放图片。总之这个主题美轮美奂，功能很不错。功能多到配置文件竟然有这么一长串，我眼睛都快看瞎喽……
　　其实一开始我真的不想折腾这个，后来看到有网友说这个主题虽然没在Github上写下具体的教程，但是他们的【官方网站】上面已经有比较详细的教程了，从快速开始到主题安装配置，再到最后的进阶教程。关键，这个主题有热度而且有的核心代码、文档在更新。不像其他的一些Hexo主题，作者、开发者一次写好就不管了，而且预览的网址也失效了。
　　我这里就记录一下修改 Butterfly 主题的过程。

注意区分站点配置文件和主题配置文件，虽然名称都是 _config.yml ，但是路径是不一样的。
以我的博客目录为例，我的站点配置文件路径为 C:\blog2\_config.yml ；主题配置文件路径为 C:\blog2\themes\butt\_config.yml 。

就我的经验来看，在服务运行时（即 localhost:4000 可访问时）站点配置文件如果被修改，则需要重启服务应用修改；主题配置文件在服务运行时被修改，只需要刷新网页就能看到改动。

1.主题配色方案修改

　　修改主题配置文件 _config.yml。
　　找到里面的标签 theme_color:

yml是配置文件，对缩进要求严格，请注意！
刚下载的主题里，原始的主题配置文件将标签 theme_color: 注释掉了。

　　我这个博客网站的配色方案如下，限于篇幅就不放出整个主题配置文件了。旁边放上注释，解释每项是什么意思、表示哪里的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true # 是否启用
  main: "#f91075"  # 主色调
  paginator: "#f91075" # 分页器颜色，其实就是页码背景色
  button_hover: "#FF7242" # 鼠标放到按钮时，按钮的背景颜色
  text_selection: "#f91075" # 在电脑上选择文本时，高亮显示条的颜色
  link_color: "#f91075" # 文章里链接字体颜色
  meta_color: "#858585" # 首页卡片文章信息的字体颜色
  hr_color: "#f91075" # 分割线的颜色
  code_foreground: "#Fc4680" # 简单代码块的字体颜色
  code_background: "rgba(27, 31, 35, .05)" # 简单代码块的背景颜色
  toc_color: "#f91075" # 文章目录高亮显示条的背景色
  blockquote_padding_color: "#f91075" # 引用块的左边边框颜色
  blockquote_background_color: "#bbbbbb" # 引用块的背景颜色
  scrollbar_color: "#f91075" # 电脑上，滚动条的颜色
  meta_theme_color_light: "ffffff" # 明亮主题下，网站标题的颜色
  meta_theme_color_dark: "#0d0d0d" # 黑暗主题下，网站标题的颜色

　　粉红色是少女时代的应援色，所以我使用了这个颜色。

2.字体大小修改

　　Butterfly主题的默认字体大小我觉得太小了，好在主题配置文件可以修改字体大小。
　　打开主题配置文件，找到标签 font: ，默认没有设置。我的修改如下：

1
2
3
4
5
font:
  global-font-size: 16px
  code-font-size: 16px
  font-family:
  code-font-family:

　　修改后刷新网页，然后就发现字体变大了。

3.首页文章卡片调整

　　Butterfly主题的文章卡片默认缩略图和文章简要信息左右交错显示，比如 Butterfly 官网。

　　我习惯缩略图在左，文章简要信息在右。我还配置了文章没有设置 cover 时的默认滚动图片（网上抄的，哈哈）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: left
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    # - /img/snsd.jpg
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
    - https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/351448/pexels-photo-351448.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/46253/mt-fuji-sea-of-clouds-sunrise-46253.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/452780/pexels-photo-452780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/1832328/pexels-photo-1832328.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/933843/pexels-photo-933843.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/6758/wildernessculture-rei1440project-welltravelled-awesomeearth.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/655674/pexels-photo-655674.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/629159/pexels-photo-629159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/1005763/pexels-photo-1005763.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/747016/pexels-photo-747016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/611328/pexels-photo-611328.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/531602/pexels-photo-531602.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/164041/pexels-photo-164041.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/238622/pexels-photo-238622.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/868097/pexels-photo-868097.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/165505/pexels-photo-165505.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/358383/pexels-photo-358383.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/417222/pexels-photo-417222.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/1656687/pexels-photo-1656687.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/632522/pexels-photo-632522.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/2174656/pexels-photo-2174656.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/165505/pexels-photo-165505.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/71104/utah-mountain-biking-bike-biking-71104.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/390051/surfer-wave-sunset-the-indian-ocean-390051.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
    - https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500

第2章把字体改大了一点，但卡片只显示两行太少了点，所以此处需要更改显示的行数为3行。
还要注意Styl脚本对缩进要求严格，要谨慎！否则导致编译失败！

　　找到文件 homepage.styl ，我的路径是 C:\blog2\themes\butt\source\css\_page\homepage.styl 。
　　styl文件是递进式的，找到 #recent-posts > .recent-post-item >.recent-post-info > .content 其实是文件的最后一行。修改如下。

1
2
3
& > .content
  @extend .limit-more-line
  -webkit-line-clamp: 3

此外，注意观察相邻两个文章卡片之间，缩略图宽度不一样，看着强迫症都要犯了，因此需要调整。

　　还是那个文件 homepage.styl ，找到递进关系为 #recent-posts > .recent-post-item >.recent-post-info 的代码段。添加display和overflow。改动如下。
　　至于padding和width的值可以根据自己的喜好来改。

1
2
3
4
5
& >.recent-post-info
  display: inline-block
  overflow: hidden
  padding: 0 20px
  width: 60%

4.修改文章宽度和侧边栏宽度

文章宽度也包含首页文章卡片的宽度

4.1 文章宽度

　　找到 common.styl 文件，路径在 C:\blog2\themes\butt\source\css\_page\common.styl 。在31～33行，可以修改 width 的值，如下。

1
2
3
& > div:first-child
  width: 74%
  transition: all .3s

4.2 侧边栏宽度

　　找到 aside.styl 文件，路径在 C:\blog2\themes\butt\source\css\_layout\aside.styl 。在1～2行，修改 width的值，如下。

1
2
#aside-content
  width: 26%

这两个宽度的width相加一定得是100%，不然这两个组件整体显示不居中了。

5.数学公式水平滚动条

　　我还发现Butterfly主题在启用Mathjax后有时公式出现莫名的水平滚动条，即使字符不多。这也是可以调整的，找到文件third-party.styl，路径在E:\Myblog\blog2\themes\butt\source\css\_layout\third-party.styl

我的博客迁移了，所以路径跟前几个章节不一样。

　　差不多在89行，找到标签span.mathjax-overflow。将display: inline-block删除或注释掉就行。

1
2
3
4
5
span.mathjax-overflow
  /* 自己注释的 display: inline-block */
  padding: 0 2px
  max-width: 100%
  vertical-align: bottom