本站所使用的是双栏文章布局，原先想用我的旧站mccsjs🍋の小家的三栏布局的，但是发现新版butterfly已经不支持了

双栏实现方法

新版butterfly支持直接在主题文件中修改
打开config.butterfly.yml，翻到约168行找到如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Article layout on the homepage
# 1: Cover on the left, info on the right
# 2: Cover on the right, info on the left
# 3: Cover and info alternate between left and right
# 4: Cover on top, info on the bottom
# 5: Info displayed on the cover
# 6: Masonry layout - Cover on top, info on the bottom
# 7: Masonry layout - Info displayed on the cover
index_layout: 3

# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 3
  # If you set method to 2 or 3, the length need to config
  length: 500

英文看不懂没关系，我们给他翻译一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 首页文章布局方式
# 1: 封面图在左，信息在右
# 2: 封面图在右，信息在左
# 3: 封面图与信息左右交替排列
# 4: 封面图在上，信息在下
# 5: 信息直接显示在封面图上
# 6: 瀑布流布局 - 封面图在上，信息在下
# 7: 瀑布流布局 - 信息直接显示在封面图上
index_layout: 6

# 首页文章摘要显示设置
# 1: 显示文章描述的description
# 2: 智能显示（存在description则显示，否则显示自动截取的内容）
# 3: 自动截取内容（默认，从前N个字符截取）
# false: 不显示文章摘要
index_post_content:
  method: 1         # 选择摘要显示方式
  length: 500       # 当method为2或3时，指定截取长度（单位：字符）

注释内容随便改，不影响，看懂之后就好配置了，照着中文自行修改自己喜欢的布局

关于文心一言

文心一言就是标题底下的打字效果
1

继续打开config.butterfly.yml，翻到约149行找到如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# The subtitle on homepage
subtitle:
  enable: false
  # Typewriter Effect
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - https://api.aa1.cn/doc/yiyan.html
  # 3 - jinrishici.com
  source: false
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub:

其中的各项意义

  • enable：是否启用
  • loop: 是否循环打字
  • source: 服务商，这里填的1、2、3而非true，个人推荐1
  • sub：自定义字符，你可以输入自己想要的文字
    sub项可以这样写：
    1
    2
    - "Welcome to mccsjsのHome!🤣🤣🤣"
    - "Hope you have a nice day!🍭🍭🍭"

关于文章图片放大功能

butterfly自带了图片放大功能，但是需要手动启用
打开config.butterfly.yml，翻到约910行找到如下内容

1
2
3
4
5
# Choose: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# Leave it empty if you don't need lightbox
lightbox:

在lightbox后填入fancybox即可实现图片放大功能，twikoo的评论图片也可适用