[TOC]

修改代码块主题

Butterfly 支持6種代碼高亮樣式：darker、pale night、light、ocean、mac、mac light

在主题配置文件下，找到highlight_theme字段，修改对应名称即可。

  • mac
image-20230724143514191

查看其他效果点击：Butterfly官方文档

1
2
3
4
5
6
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # 代码一键复制按钮
highlight_lang: true # 显示代码语言
highlight_shrink: false # true: 代码块不展开/ false: 代码块自动展开 | none: 代码块自动展开，且无收缩按钮 | 在font-matter中可对单个文文章进行配置
highlight_height_limit: 200 # 高度限制，单位px像素
code_word_wrap: false	#代码自动换行，一般为滚动条形式

自定义代码块

除了上述6种样式，如果喜欢其他的样式，可以通过标签插件实现。

官方文档中举了两个例子：自定義代碼配色

效果：

image-20230724195407039 image-20230724195426216

调整字体

找到主题配置文件中的font字段

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px # 默认14px
  code-font-size: 15px # 默认14px
  font-family: HYSongYunLangHeiW,AlibabaPuHuiTi-3-55-Regular,"Microsoft YaHei", sans-serif
  code-font-family: HYSongYunLangHeiW,AlibabaPuHuiTi-3-55-Regular,"Microsoft YaHei", sans-serif

修改字体大小

global-font-size是全局字体大小，code-font-size是代码大小，个人感觉有点小，所以调高了一点，需要注意的是，作者提醒了非必要不要修改，因为改动是全局字体，一些插件中的字体会出范围，如下所示：

image-20230725013845063

修改字体样式

参考文章：

Blog by Eacls

Ordis Blog

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程（20230606更新）

其中需要注意的是，修改字体两种方式中，本地引入通常会非常拖慢速度，故多使用外链引入。

Blog 标题字体修改

butterfly主题还单独提供了标题字体的修改。(页面加粗白色字段)

image-20230725032729164

依然还是找到主题文件中相关字段，就在font下面

1
2
3
4
5
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: /css/iconfont.css # css路径
  font-family: AlibabaPuHuiTi-3-55-Regular # 同上

遇到的问题

修改这个样式遇到好几个奇奇怪怪的问题，熬夜弄也没弄明白。

  1. font-family和code-font-family的字段，第一位接带“”双引号的字体名字时，会报错

    解决办法：

    • 第一个字段随便写一个名字，第一个找不到会顺位到第二位。
    • 修改css中引入字体的font-family，改为英文，去掉引号

  2. css外链引入时，诡异错误。

    (8R0Y9F)PJZIQ2RAG6XWV@Q

上面是正常引入的，但只要把第一个@font-face完全注释掉，字体就不会显示该样式了。

QQ图片20230725031205