**参考学习**:小康博客WF's Blog

平滑升级

为了主题的平滑升级,Butterfly 使用了 data files 特性。

推荐把主题默认的配置文件_config.yml 复製到 Hexo 工作目录下的 source/_data/butterfly.yml,如果 source/_data 的目录不存在那就创建一个。

注意,如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 (不是合并而是替换), 之后你就只需要通过 git pull 的方式就可以平滑地升级 theme-butterfly 了。

友情链接

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page link
  3. 你会找到 ``source/link/index.md` 这个文件
  4. 修改这个文件:
    1
    2
    3
    4
    5
    ---
    title: 友情链接
    date: 2020-02-02 10:00:00
    type: "link"
    ---
  5. 添加友链
    在 Hexo 博客目录中的 source/_data,创建一个文件 link.yml
    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
    class:
    class_name: 友情链接
    link_list:
    1:
    name: 元洪博客
    link: https://gyh.im/
    avatar: https://cdn.jsdelivr.net/gh/imgyh/cdn/img/avatar.png
    descr: 进一寸有一寸的欢喜
    2:
    name: 小康博客
    link: https://www.antmoe.com
    avatar: https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/avatar.jpg
    descr: 每天进步一点点
    3:
    name: JerryC
    link: https://jerryc.me/
    avatar: https://cdn.jsdelivr.net/gh/xingjiahui/[email protected]/2020/10/15/635a14181ef74897bea9297ae7568d86.png
    descr: 今日事,今日毕


    class2:
    class_name: 特别鸣谢
    link_list:
    1:
    name: HEXO
    link: https://hexo.io/zh-cn/
    avatar: https://cdn.jsdelivr.net/gh/imgyh/cdn/img/20200208180205.png
    descr: 网站由HEXO强力驱动
    2:
    name: GITHUB
    link: https://github.com/
    avatar: https://cdn.jsdelivr.net/gh/imgyh/cdn/img/20200208180539.png
    descr: 代码托管服务
    3:
    name: Jsdelivr
    link: https://www.jsdelivr.com/
    avatar: https://cdn.jsdelivr.net/gh/imgyh/cdn/img/20200208180804.jpg
    descr: 提供网站CDN加速服务

    此处如果在window下操作,新建link.yml时,需要注意设置为utf-8编码,不然会出现中文乱码

  6. 友情链接界面设置
    需要添加友情链接,可以在 Butterfly.yml 配置
    可在友情链接上写上自己的个人资料,方便其他人添加。
    1
    2
    3
    4
    5
    6
    7
    8
    Flink:
    headline: 友情链接
    info_headline: 我的Blog资料
    name: Blog 名字: 小康博客
    address: Blog 地址: https://www.antmoe.com/
    avatar: Blog 头像: https://img.antmoe.com/avatar.jpg
    info: Blog 简介: 一个收藏回忆与分享技术的地方!
    comment: 如果需要交换友链,请留言

文章打赏

在你每篇文章的结尾,可以添加打赏按钮。相关二维码可以自行配置 配置 butterfly.yml

1
2
3
4
5
6
7
8
9
reward:
enable: true
QR_code:
- itemlist:
img: /img/wechat.jpg
text: 微信
- itemlist:
img: /img/alipay.jpg
text: 支付宝

页面优化

butterfly.yml定位inject元素,配置如下:

1
2
3
4
5
6
7
8
9
10
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/bg.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/butterfly/css/index.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/butterfly/css/flink.min.css">
- <link rel="stylesheet" href="/css/macWhite.css">
bottom:
# - <script src="xxxx"></script>
- <script src="https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/Hexo/js/mouse_snow.min.js"></script>

说明:index.css美化改变 ol、ul、h1-h5 的样式,flink.min.css用于友情链接,mouse_snow.min.js用于鼠标飘雪动画。

导航菜单

配置 butterfly.yml

1
2
3
4
5
6
7
8
9
10
menu:
Home: / || fa fa-home
Archives: /archives/ || fa fa-archive
Tags: /tags/ || fa fa-tags
Categories: /categories/ || fa fa-folder-open
Link: /link/ || fa fa-link
About: /about/ || fa fa-heart
List||fa fa-list:
- Music || /music/ || fa fa-music
- Movie || /movies/ || fa fa-film

必須是 /xxx/,后面 || 分开,然后是图标名。菜单名称可自己修改。
菜单名 || 图标名(此主题默认使用 Font Awesome v4或v5

修改Tag和Category页面背景图

主页的顶部图可以在 Butterfly.yml 设置 index_img

archives 页的顶部图可以在 Butterfly.yml 设置 archive_img

其他 page 页的顶部图可以在各自的 md 页面设置 front-matter 中的 top_img

页面如果没有设置各自的 top_img,则会显示 default_top_img图片

canvas-nest(背景动图)

配置 butterfly.yml

1
2
3
4
5
6
7
canvas_nest:
enable: true
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false # false 手机端不显示 true 手机端显示
  • 效果如下:

修改首页文章数量

修改Blog下config.yml 文件

1
2
3
4
5
6
7
8
9
index_generator:
path: ''
per_page: 6 #由10修改为想显示的文章数
order_by: -date

# Pagination
## Set per_page to 0 to disable pagination
per_page: 6 #由10修改为想显示的文章数
pagination_dir: page

修改首页文章的高度

将首页文章高度变低一些,图片高度修改为与文章一致,文章摘要由3行修改为2行。

操作修改index.css或者自定义引用的css。
我修改好的index.css,需要的自行下载(解压后使用)。

  1. 修改#recent-posts>.recent-post-item .post_cover中height属性由280px为230px
  2. 修改#recent-posts>.recent-post-item>.recent-post-info>.content中-webkit-line-clamp属性由3改为2