Butterfly安装文档(三)主题配置-1(一)

简介: Butterfly安装文档(三)主题配置-1

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)

网站资料

修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的_config.yml

导航栏设置 (Navigation bar settings)

参数设置

主题配置文件中

nav:
  logo: #image
  display_title: true
  fixed: false # fixed navigation bar

菜单/目录

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必须是 /xxx/,后面||分开,然后写图标名。

如果不希望显示图标,图标名可不写。

默认子目录是展开的,如果你想要隐藏,在子目录里添加 hide 。

List||fas fa-list||hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

注意: 导航的文字可自行更改

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码 (Code Blocks)

代码块中的所有功能只适用于 Hexo 自带的代码渲染

如果使用第三方的渲染器,不一定会有效

代码高亮主题

Butterfly 支持6种代码高亮样式:

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

修改 主题配置文件

highlight_theme: light

darker

pale night

light

ocean

mac

mac light

代码复制

highlight_copy: true

代码框展开/关闭

在默认情况下,代码框自动展开,可设置是否所有代码框都关闭状态,点击>可展开代码

  • true 全部代码框不展开,需点击>打开
  • false 代码框展开,有>点击按钮
  • none 不显示>按钮
highlight_shrink: true #代码框不展开,需点击 '>' 打开

你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。

当主题配置文件中的 highlight_shrink 设为true时,可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。

当主题配置文件中的 highlight_shrink 设为false时,可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代码换行

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

code_word_wrap: true

如果你是使用 highlight 渲染,需要找到你站点的 Hexo 配置文件_config.yml,将line_number改成false:

highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

如果你是使用 prismjs 渲染,需要找到你站点的 Hexo 配置文件_config.yml,将line_number改成false:

prismjs:
  enable: false
  preprocess: true
  line_number: false # <- 改这里
  tab_replace: ''

设置code_word_wrap之前:

设置code_word_wrap之后:

代码高度限制

3.7.0 及以上支持

可配置代码高度限制,超出的部分会隐藏,并显示展开按钮。

highlight_height_limit: false # unit: px

注意:

  1. 单位是 px,直接添加数字,如 200
  2. 实际限制高度为 highlight_height_limit + 30 px ,多增加 30px 限制,目的是避免代码高度只超出highlight_height_limit 一点时,出现展开按钮,展开没内容。
  3. 不适用于隐藏后的代码块( css 设置 display: none)


相关文章
|
7月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
|
数据采集 搜索推荐 数据挖掘
Hexo(3)-安装自己喜欢的主题
我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
butterfly主题的下载及美化
butterfly主题的下载及美化
220 0
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
188 0
|
前端开发
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。
586 0