魔改必看

魔改前建议先按 Butterfly 主题部署，查看相关设置，更多魔改教程可以关注 Butterfly主题美化教程。

以下内容若无说明均在博客目录下的 _config.yml 文件添加，https://npm.elemecdn.com/eurkon-cdn/hexo/ 是博主的 CDN，可能会失效，可以自己保存资源在本地，然后引用自己的。

魔改主题会跟随 Butterfly 官方主题升级，有什么建议和疑问可联系博主邮箱 [email protected]。

如果你沒有安装cheerio，会出现一下报错 err: Error: Cannot find module 'cheerio'，請下載安裝： npm install cheerio —save

全局字体大小

建议在 _config.butterfly.yml 设置全局字体大小为 16px 更好适配魔改样式。

1
2
3
font:
  global-font-size: 16px
  code-font-size: 16px

5.0 版本以上需要修改：

1
2
3
font:
  global_font_size: 16px
  code_font_size: 16px

魔改自定义文件目录

  • source/js/eurkon/*
  • source/css/eurkon/*

分类页样式有需要可自行调整

source/css/eurkon/eurkon.css 搜索 .category-lists 修改相关 emoji 和 背景色

分类标签前面增加emoji

1
2
3
4
5
6
7
8
9
emoji: 
  categories:
    面试系列: 📝
    魔改教程: 🎨
  tags:
    Butterfly: 🦋
    Docker: 🐳
    ECharts: 📊
    Git: 💠

首页公告轮播

1
2
swiperNotice:
  enable: true

博客目录下 _data 新建 notice.yml 添加下列格式内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- date: <b>置顶</b>
  msg: 用户发言前，请认真阅读 <a href='/protocol/comment/'>评论协议</a>
- date: 2022.08.15
  msg: <a href='/post/1213ef82.html'>Hexo 博客文章统计图</a> 已发布 <b>V2.0</b> 版本，适配多分类文章
- date: 2022.05.23
  msg: 主题版本已更新到 butterfly4.2.2，同步更新自定义样式
- date: 2022.03.29
  msg: <a href='https://github.com/Eurkon/baidu-tongji-api'>baidu-tongji-api</a> 项目重构，使用了 Github + LeanCloud + Vercel 实现 Token 更新。
- date: 2022.03.04
  msg: 朋友圈版本大更新，优化自定义样式
- date: 2022.03.01
  msg: 主题版本已更新到 butterfly4.1.0，同步更新自定义样式
- date: 2021.09.01
  msg: 有关本博客的更新记录以及参考教程均在 <a href='/update/'>博客更新</a>
- date: 2021.01.01
  msg: Eurkon 博客正式上线

首页 homeCard 与 推荐文章

建议同时开启 技能轮播卡片 和 推荐文章卡片。

1
2
homeCard:
  enable: true

homeCard 分类卡片样式可在 source/css/eurkon/eurkon.css 搜索 .category-lists 修改相关 emoji 和 背景色，以及通过 .home-card .category-lists .category-list li.category-list-item:nth-child(1) 设置显示哪些分类，默认显示前三个，即 :nth-child(1)、:nth-child(2)、:nth-child(3)。

技能轮播卡片：新建 source/_data/skill.yml 文件，添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class_name: 开启创造力
class_desc: 技能
link_list:
  - name: SQL
    color: '#4d4d4d'
    star: 4.5
    image: /images/user/sql.png
  - name: ECharts
    color: 
    star: 4.5
    image: /images/user/echarts.png
  - name: HTML5
    color: '#d84925'
    star: 4
    image: /images/user/html5.png
  - name: JS
    color: '#f0c901'
    star: 4
    image: /images/user/js.png

推荐文章卡片：在需要推荐文章的 文章.md 增加 recommend: 100 值越大越前，如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Butterfly 微博热搜侧边栏
categories:
  - 魔改教程
tags:
  - Hexo
  - Butterfly
recommend: 100 # index越大越前
swiper: 90 # index越大越前
abbrlink: '38b005e1'
cover: /images/cover/butterfly_weibo.jpg
top_img: /images/cover/butterfly_weibo.jpg
date: 2021-06-03 09:00:00
updated: 2021-09-28 09:00:00
---

首页文章轮播

1
2
swiperPost:
  enable: true

在需要文章轮播的 文章.md 增加 swiper: 100 值越大越前，建议配置两篇及以上数量的文章，否则可能会出现无法显示轮播效果，如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Butterfly 微博热搜侧边栏
categories:
  - 魔改教程
tags:
  - Hexo
  - Butterfly
recommend: 100 # index越大越前
swiper: 90 # index越大越前
abbrlink: '38b005e1'
cover: /images/cover/butterfly_weibo.jpg
top_img: /images/cover/butterfly_weibo.jpg
date: 2021-06-03 09:00:00
updated: 2021-09-28 09:00:00
---

首页分类磁贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
catalogMagnet:
  enable: true
  type: categories # categories / tags
  devide: 2 # 一行展示几个
  display:
    # - name: categories / tags 名称
    #   display_name: categories / tags 展示的名称
    - name: 面试系列
      display_name: 📝 Eurkonの面试系列
    - name: 魔改教程
      display_name: 🎨 Eurkonの魔改教程
    - name: 生活随笔
      display_name: 💬 Eurkonの生活随笔
    - name: 学习笔记
      display_name: 📚 Eurkonの学习笔记
    - name: 分享转载
      display_name: 🌐 Eurkonの分享转载
    - name: 作品案例
      display_name: 🖥️ Eurkonの作品案例

侧栏电子钟

1
2
3
card_clock:
  enable: true
  CDN: https://npm.elemecdn.com/eurkon-cdn/hexo/js/card_clock.js

侧栏历史今日

1
2
3
card_history: 
  enable: true
  CDN: https://npm.elemecdn.com/eurkon-cdn/hexo/js/card_history.js

侧栏微博热搜

1
2
3
card_weibo:
  enable: true
  CDN: https://npm.elemecdn.com/eurkon-cdn/hexo/js/card_weibo.js

关于本站GitHub项目

新建 source/_data/github.yml 文件，添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class_name: 协作贡献代码
class_desc: 项目
link_list:
  - name: hexo-theme-butterfly-eurkon
    link: https://github.com/Eurkon/hexo-theme-butterfly-eurkon
    # image: https://github-readme-stats.eurkon.com/api/pin/?username=Eurkon&show_owner=true&theme=react&repo=hexo-theme-butterfly-eurkon
    image: https://github-readme-stats.eurkon.com/api/pin/?username=Eurkon&theme=react&hide_border=true&repo=hexo-theme-butterfly-eurkon
  - name: weibo-top-api
    link: https://github.com/Eurkon/weibo-top-api
    image: https://github-readme-stats.eurkon.com/api/pin/?username=Eurkon&theme=react&hide_border=true&repo=weibo-top-api
  - name: baidu-tongji-api
    link: https://github.com/Eurkon/baidu-tongji-api
    image: https://github-readme-stats.eurkon.com/api/pin/?username=Eurkon&theme=react&hide_border=true&repo=baidu-tongji-api
  - name: api
    link: https://github.com/Eurkon/api
    image: https://github-readme-stats.eurkon.com/api/pin/?username=Eurkon&theme=react&hide_border=true&repo=api

博客美化JS和CSS

_config.butterfly.yml 根据上面使用情况选择引入以下资源。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"> # 首页公告轮播 / 首页文章轮播 / 侧栏历史今日
    - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script> # 首页公告轮播 / 首页文章轮播 / 侧栏历史今日
    - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script> # 页面加载进度条

  bottom:
    # - <script src="xxxx"></script>
    - <script defer data-pjax async src="//at.alicdn.com/t/font_2358265_expoyqe85d4.js"></script> # 阿里图标