本教程更新于2022年 10 月 25 日,教程的内容有可能过时,请留意.如遇到问题可在文章底部留言
建议提前下载vscode,vscode搜索功能可以帮你快速定位到代码位置

修改头像

在source文件夹下创建image文件夹,用于存放头像,网站背景,网站顶部图片等

1
2
3
avatar:
  img: /image/head.png
  effect: false

修改网页背景

1
background: url(/image/bg.jpg)

修改网页顶部图

1
index_img: /image/index_top.jpg

修改分类页和标签页顶部图


1
category_img: /image/top/default_top_img.jpg


标签页

1
tag_img: /image/top/default_top_img.jpg

修改网页字体

引用在线字体

  1. 新建css文件
    在node_modules\hexo-theme-butterfly\source\css目录新建一个css文件,文件名为font.css
  2. 打开下面的链接并复制全部代码到font.css中
    鸿蒙字体 - B 站
    400 字重 CSS：//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
    500 字重 CSS：//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css
    华康金刚黑 - 字节跳动
    400 字重 CSS：//fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap
    500 字重 CSS：//fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap
    思源黑体 - 谷歌字体库
    可变字重 CSS：//fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap
    该 CSS 可以通过链接控制字重，比如我只想要 400 字重，那么在链接@400;500;700 部分修改为@400，增加同理。
    小米字体 - 小米 MIUI 官网
    可变字重 CSS：//font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin&display=swap
    该 CSS 可以通过链接控制字重，比如我只想要 400 字重，那么在链接 MiSans:400,500,700 部分修改为 MiSans:400
    OPPO 字体 - OPPO 网站
    400 字重WOFF2：//www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
    500 字重 WOFF2：//www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
    该部分为woff2字体文件与上述css引入方式不同
    OPPO 字体 - MasterGo 网站
    400 字重 WOFF2：//static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2
    500 字重 WOFF2：//static.mastergo.com/static/font/.OPPOSans/OPPOSans-Medium.woff2
    600 字重 WOFF2：//static.mastergo.com/static/font/OPPOSans/OPPOSans-Bold.woff2
    700 字重 WOFF2：//static.mastergo.com/static/font/OPPOSans/OPPOSans-Heavy.woff2
    该部分为woff2字体文件与上述css引入方式不同
    我用的是 思源黑体,将代码全部复制到font.css中,如下图所示:
    css代码
  3. 引入字体
    打开__config.butterfly.yml
    修改inject
    1
    2
    3
    4
    inject:
      head:
        - <link rel="stylesheet" href="/css/font.css">
      bottom:
    修改font-family
    1
    2
    3
    4
    5
    font:
      global-font-size:
      code-font-size:
      font-family: "Noto Sans SC"
      code-font-family: "Noto Sans SC"
    然后hexo s重新部署即可

引用本地字体

  1. 下载字体文件
    可在googlefonts或者网上自行下载,不过要注意版权问题,下载完成后在source目录下新建font文件夹并把字体文件放在font下

  2. 打开node_modules\hexo-theme-butterfly\source\css下的font.css文件,追加以下代码

    1
    2
    3
    4
    @font-face {
        font-family: 'google';
        src: url('/font/gfont.otf');
    }

    其中名字可以自定义,地址注意改一下

  3. 修改_config.butterfly.yml

    1
    2
    3
    4
    5
    font:
      global-font-size:
      code-font-size:
      font-family: google, apple 
      code-font-family: apple, "Noto Sans SC"

    然后hexo cl && hexo g && hexo s即可在本地看到效果

修改主页标题和导航栏字体

1
2
3
blog_title_font:
  font_link: apple
  font-family: google

其中font_link为外部链接,font-family为本地字体

鼠标文字点击效果

1
2
3
4
5
6
7
8
9
10
11
# Mouse click effects: words (鼠标点击效果: 文字)
ClickShowText:
  enable: true
  text:
    - 躺平
    - 努力
    - 摆烂
    - 奋斗
  fontSize: 14px
  random: true
  mobile: true

Gitalk评论插件

新建仓库

github中新建一个blog-comments仓库用于专门存放评论

配置OAuth Apps

打开设置settings

然后选择Devleper settings


选择Register a new OAuth application
配置项如下:

Application name可以随便填一个

Homepage URL必须是博客仓库的域名
Authorization callback URL必须是博客的域名 https://lmxyz.xyz/

复制Client ID和Client secrets到_config.butterfly.yml

更改_config.butterfly.yml的comments

hexo cl hexo g hexo d以后随便打开一篇博客,在底部选择github登录以后便可发布评论了


侧边栏设置

修改公告


修改content

1
2
3
card_announcement:
   enable: true
   content: 正经人谁写公告

侧边栏在左侧

1
position: left  # left or right

最新评论

开启左侧的最新评论界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: false
  github_issues:
    enable: true
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: true

标签

1
2
card_tags: # 标签卡片是否显示
   enable: false

clustrmaps访问者地图

注册账号

打开clustrmaps官网注册账号clustrmaps

Website Widget



注意上图中的两个链接,等会有用

hexo主题引入

1.打开根目录的_config.butterfly.yml,声明一个侧边栏给地图显示

1
card_maps: true

2.添加一个界面元素
新建card_maps.pug文件

1
2
3
4
5
6
7
.card-widget.card-map
  .card-content
    .item-headline
        i.fa.fa-map-marker(aria-hidden="true")
        span= _p('访客')
    a(href=url_for('https://clustrmaps.com/site/1br19'))
        img(src=url_for('//www.clustrmaps.com/map_v2.png?d=55vqLBmKtbmFk1NB1haMvcb7m22OgNsSb4o3-OczBC8&cl=ffffff'))

这两个url_for链接,填写你刚才注册clustrmaps时生成的

然后修改index.pug

1
!=partial('includes/widget/card_maps', {}, {cache: true})

最后,重新部署即可
打开任意一篇博客即可在侧边栏最底部看到

友情链接

为你的博客创建一个友情链接！

创建友情链接页面

前往你的Hexo博客的根目录
输入 hexo new page link
你会找到source/link/index.md这个文件
修改这个文件：

记得添加 type: "link"

1
2
3
4
5
6
---
title: link
date: 2022-10-28 14:02:14
type: "link"
---

友情链接添加

本地生成

在Hexo博客目录中的source/_data(如果没有_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
- class_name: 友情链接
  class_desc: 珍惜一切就算没有拥有
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: /image/youtube.png
      descr: 视频网站
    - name: wiki
      link: https://zh.wikipedia.org/wiki/Wiki
      avatar: /image/wiki.png
      descr: 维基百科
    - name: Twitter
      link: https://twitter.com/
      avatar: /image/twitter.png
      descr: 社交分享平台

class_name 和 class_desc 支持 html 格式书写，如不需要，也可以留空

本地搜索

先安装插件

1
npm install hexo-generator-search --save

然后修改butterfly主题配置文件

1
2
3
4
5
6
7
8
# Local search
local_search:
  enable: true
  labels:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示
  preload: false
  CDN:

分割线图标更换

1
2
3
4
hr_icon:
  enable: true
  icon: '\f1d9'# the unicode value of Font Awesome icon, such as '\3423'
  icon-top:

icon-top常用数值：
-20px：图标位于分割线上方
-10px：图标位于分割线中间
0px：图标位于分割线下方

社交信息设置

1
2
3
4
5
social:
  fab fa-telegram: https://t.me/+YrQL4IDg1n82ZTFl || Telegram
  fab fa-github: https://github.com/DogInNoSense || Github
  fas fa-envelope: mailto:xieyinzhang@gmail.com || Email


可以更换fontawesome CDN源,不过那样几乎所有的图标代码都要更改

修改页面背景透明度

透明效果
在 butterfly主题的 \source\css目录下新建tranpancy.css

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
/* 文章页背景 */

.layout_post>#post {
    /* 以下代表透明度为0.5 可以自行修改*/
    background: rgba(255, 255, 255, .5);
}


/* 所有页面背景 */

#aside_content .card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
    /* 以下代表透明度为0.5 */
    background: rgba(255, 255, 255, .5);
}


/*侧边卡片的透明度 */

:root {
    --card-bg: rgba(255, 255, 255, .5);
}

引入到主题配置文件

1
- <link rel="stylesheet" href="/css/transpancy.css">

代码相关

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

修改 主题配置文件

1
code_word_wrap: true

代码主题

1
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false

自动切换夜间模式

1
autoChangeMode: 2

更改后晚6点到早6点自动设置为夜间模式

彩带背景

动态彩带

1
2
3
canvas_fluttering_ribbon:
  enable: true
  mobile: false

静态彩带

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

mobile代表手机端是否开启

修改首页文章卡片高度

打开路径node_modules\hexo-theme-butterfly\source\css\_page,打开homepage.styl

1
height: 14em

效果如下:

标题前的图标改为小风车

1
2
3
4
5
6
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1'
  title-prefix-icon: '\f863'
  title-prefix-icon-color: '#F47466'

复制添加版权信息

1
2
3
4
5
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 150 # 复制字数限制

升级 butterfly

在主题目录下

1
git pull

发现报错

解决方法:

1
git stash

成功升级主题