首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo安装并使用Butterfly主题

Hexo安装并使用Butterfly主题

作者头像
Dreamy.TZK
发布2020-04-09 15:45:12
4.9K0
发布2020-04-09 15:45:12
举报
文章被收录于专栏:小康的自留地小康的自留地

前置说明

本片文章为本人想要换hexo的主题时所写。因此省略nodehexo的安装,直接在初始化博客开始

初始化博客

输入一下命令,并等待程序初始化完成。

hexo init MyHexoBlog
1.png
1.png

此时已初始化完成。

安装主题

如果没有cheerio安装npm install cheerio@0.22.0 --save

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly 如果想要安装比较新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

我这里选择dev分支。

等待克隆完成。

2.png
2.png

启用主题

修改站点配置文件_config.yml,把主题改为Butterfly

theme: Butterfly

如果你没有 pug 以及 stylus 的渲染器,请下载安装: npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus

平滑升级

为了主题的平滑升级, Butterfly 使用了 data files特性。

推荐把主题默认的配置文件_config.yml复製到 Hexo 工作目录下的source/_data/butterfly.yml,如果source/_data的目录不存在那就创建一个。

注意,如果你创建了butterfly.yml, 它将会替换主题默认配置文件_config.yml里的配置项 (不是合併而是替换), 之后你就只需要通过git pull的方式就可以平滑地升级 theme-butterfly了。

主题页面

Page Front-matter

---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---

Post Front-matter

---
title:
date:
tags:
categories:
keywords:
description:
top_img: (除非特定需要,可以不写)
comments  是否显示评论(除非设置false,可以不写)
cover:  缩略图
toc:  是否显示toc (除非特定文章设置,可以不写)
toc_number: 是否显示toc数字 (除非特定文章设置,可以不写)
copyright: 是否显示版权 (除非特定文章设置,可以不写)
mathjax:
katex:
hide:
---

标签页

  1. 前往你的 Hexo 博客的根目录
  2. 输入hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件: --- title: 标签 date: 2020-02-02 10:00:00 type: "tags" ---

分类页

  1. 前往你的 Hexo 博客的根目录
  2. 输入hexo new page categories
  3. 你会找到source/categories/index.md这个文件
  4. 修改这个文件: --- title: 分类 date: 2020-02-02 10:00:00 type: "categories" ---

友情链接

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page link
  3. 你会找到``source/link/index.md`这个文件
  4. 修改这个文件:
---
title: 友情链接
date: 2020-02-02 10:00:00
type: "link"
---
  1. 添加友链 在Hexo博客目录中的source/_data,创建一个文件link.yml
class:
  class_name: 友情链接
  link_list:
    1:
      name: 小康博客
      link: https://www.antmoe.com
      avatar: https://img.antmoe.com/avatar.png
      descr: 每天进步一点点
    2:
      name: test
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: test  


class2:
   class_name: 链接无效
   link_list:
     1:
       name: test
       link: https://blog.xxx.com
       avatar: https://img.antmoe.com/avatar.png
       descr: test
     2:
       name: test
       link: https://www.axxxx.cn/
       avatar: https://img.antmoe.com/avatar.png
       descr: test
  1. 友情链接界面设置 需要添加友情链接,可以在Butterfly.yml配置 可在友情链接上写上自己的个人资料,方便其他人添加。
Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字: 小康博客
  address: Blog 地址: https://www.antmoe.com/
  avatar: Blog 头像: https://img.antmoe.com/avatar.jpg
  info: Blog 简介: 一个收藏回忆与分享技术的地方!
  comment: 如果需要交换友链,请留言

音乐界面

音乐界面参考https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

电影

电影界面参考https://github.com/mythsman/hexo-douban

本人没有设置这两个界面,因此也没有详细的安装教程

配置

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

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

网站资料

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

title: 小康博客
subtitle: '小康博客'
description: '一个收藏回忆与分享技术的地方!'
keywords: 关键词
author: 作者
language: zh-CN
timezone: '时区'
email: 邮箱

导航菜单

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

必须是 /xxx/,后面||分开,然后写图标名。菜单名称可自己修改 格式: 显示名称: 路径||icon sub-menu格式 名称||icon: 名称 || 路径 || icon

导航的文字可以更改

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

代码

Butterfly 支持了 Material Theme全部 5 种代码高亮样式:

  • default
  • darker
  • pale night
  • light
  • ocean

配置butterfly.yml

highlight_theme: light #代码高亮主题
highlight_copy: true #代码是否启用复制功能
highlight_shrink: true #true代码框不展开,需点击 '>' 打开 false展开 none不显示'>'按钮,代码块展开
自动换行

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

配置butterfly.yml

code_word_wrap: true #代码自动换行

然后找到你站点的 Hexo 配置文件_config.yml,将line_number改成false:

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

Butterfly支持 font-awesome v4font-awesome v5. 如需开启font-awesome v5,需要在Butterfly.yml上开启

CDN_USE:
  css:
    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    - https://use.fontawesome.com/releases/v5.8.1/css/all.css

无论V4还是V5,书写格式都是一样的图标名:url

social:
  fa fa-qq: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=535668586
  fa fa-envelope: mailto:sviptzk@163.com
  fa fa-rss: /atom.xml

主页文章节选(自动节选和文章页description)

因为主题UI的关系,主页文章节选只支持自动节选和文章页description。优先选择自动节选。

butterfly.yml里可以开启auto_excerpt的选项,你的文章将会在自动截取部分显示在主页。(默认显示150个字)。

auto_excerpt:
  enable: true
  length: 150

如果没有开启自动节选,则会显示文章页front-matter里面设置的description

注意:如果开启了自动节选功能,代码块的显示将有可能不正常。

顶部图

顶部图有2种配置:具体url 和(留空,true和false,三个效果一样)

page页

当具体url时 主页的顶部图可以在Butterfly.yml设置index_img

archives页的顶部图可以在Butterfly.yml设置archive_img

其他page页的顶部图可以在各自的md页面设置front-matter中的top_img

页面如果没有设置各自的top_img,则会显示default_top_img图片

当顶部图留空,truefalse 主页会显示纯颜色的顶部图

其他page的顶部图没有设置时,也会显示纯颜色的顶部图

post页

post页的顶部图会优先显示各自front-matter中的top_img,如果没有设置,则会缩略图(即各自front-matter中的cover),如果没有则会显示显示default_top_img图片

文章相关项

这个选项是用来显示文章的相关信息的。配置butterfly.yml

post_meta:
  date_type: both #可设置文章日期显示创建日期(created)或者更新日期(updated)或者两种都显示(both)
  categories: true # or false 是否显示分类
  tags: true # or false 是否显示标签

文章版权

为你的博客文章展示文章版权和许可协议。配置butterfly.yml

post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

如果有文章(例如:转载文章)不需要显示版权,可以在文章Front-matter单独设置

copyright: false

文章打赏

在你每篇文章的结尾,可以添加打赏按钮。相关二维码可以自行配置 配置butterfly.yml

reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付宝

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。 如果不配置cover,可以设置显示默认的cover.

配置butterfly.yml

default_cover: https://tva1.sinaimg.cn/large/832afe33ly1gbhxplql40j22801e0q3c.jpg

当配置多张图片时,会随机选择一张作爲cover.此时写法应为

default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章隐藏

参考https://github.com/printempw/hexo-hide-posts/blob/master/README_ZH.md

在文章的Front-matter添加

hide: true

头像

配置butterfly.yml

avatar: https://img.antmoe.com/avatar.jpg

TOC

在文章页,会有一个目录,用于显示TOC。 手机端默认显示按钮。

配置butterfly.yml

toc:
  enable: true
  number: true   #显示章节数字

为特定的文章配置是否显示TOC和特定的目录章节数字 在你的文章md文件的头部,加入toc_numbertoc项,并配置true或者false即可。

toc是否显示文章TOC

toc_number 是否显示章节数

配置之后你的特定的文章将会拥有它自己的目录数字的显示与否,而不会受全局的配置影响。

自动打开TOC

可选择进入文章页面时,是否自动打开sidebar显示TOC

auto_open_sidebar:
  enable: true

相关文章

相关文章推荐的原理是根据文章tags的比重来推荐

配置butterfly.yml

related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

Footer设置

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

配置butterfly.yml

since: 2020

页脚自定义文字

footer_custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

配置butterfly.yml

footer_custom_text: Hi, welcome to my <a href="https://www.antmoe.com/">blog</a>!

ICP

对于部分有备案的域名,可以在ICP配置显示。

配置butterfly.yml

ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/
  text: 粤ICP备xxxx
  icon: /img/icp.png

右下角按钮

简繁转换 简体繁体互换

右下角会有简繁转换按钮。

配置butterfly.yml

translate:
  enable: true
  # 默认按钮显示文字(网站是简体,应设置为'default: 繁')
  default: 简
  #网站默认语言,1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #博客网址
  cookieDomain: "https://jerryc.me/"
  #当文字是简体时,按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时,按钮显示的文字
  msgToSimplifiedChinese: "简"

夜间模式

右下角会有夜间模式按钮

配置butterfly.yml

# 夜间模式
darkmode:
  enable: true

V2.0.0 开始增加一个选项,可开啓自动切换light mode 和 dark mode autoChangeMode: 1 跟随系统而变化,不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode autoChangeMode: 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode autoChangeMode: false 取消自动切换

# 自动切换 dark mode和 light mode
autoChangeMode: false

阅读模式

閲读模式下会去掉除文章外的内容,避免干扰閲读。

只会出现在文章页面,右下角会有閲读模式按钮。

配置butterfly.yml

readmode:
  enable: true

侧边设置

可自行决定哪个项目需要显示,可决定位置。(至少需要显示一个)

配置butterfly.yml

aside:
  position: right # left or right
  card_author: true #作者卡片
  card_announcement: true #公告卡片
  card_recent_post: false #最新文章卡片
  card_categories: false #分类卡片
  card_tags: true #标签卡片
  card_archives: false #归档卡片
  card_webinfo: true #网站信息卡片

访问人数

访问 busuanzi 的官方网站查看更多的介绍。

配置butterfly.yml

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间

配置butterfly.yml

runtimeshow:
  enable: true
  start_date: 2020/2/2 10:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

标签外挂

Note

移植于next主题(注意,书写不是markdown规范,而是hexo特有的功能,故在其它地方会显示不出效果) 配置butterfly.yml

note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

效果看这里

Gallery相册

{% gallery %}
markdown 图片格式
{% endgallery %}

例如:

{% gallery %}
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-scary-pumpkin-hand-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-fresh-fish-dinner-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-mountain-cloud-landscape-900x600.jpg)
![](https://picjumbo.com/wp-content/uploads/iphone-free-stock-photos-2210x3315.jpg)
![](https://picjumbo.com/wp-content/uploads/young-millennial-girl-drinking-lemonade-and-overlooking-the-city-2210x1473.jpg)
![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer-essentials_free_stock_photos_picjumbo_HNCK4919-2210x1474.jpg)
{% endgallery %}

评论

评论我只觉得Valine好用。配置遵循Valine

分享

我选择默认的Sharejs就好

搜索系统

Algolia

  1. 你需要安装 hexo-algoliahexo-algoliasearch. 根据它们的説明文档去做相应的配置。
  2. 配置butterfly.yml algolia_search: enable: true hits: per_page: 6 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result hits_stats: "${hits} results found in ${time} ms"

本地搜索系统

  1. 你需要安装 hexo-generator-search. 根据它的文档去做相应配置。注意格式只支持 xml。
  2. 配置butterfly.yml local_search: enable: false labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

网页验证

如果需要搜索引擎收录网站,可能需要登录对应搜索引擎的管理平台进行提交。 各自的验证码可从各自管理平台拿到

配置butterfly.yml

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:

# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:

分析统计

统计找到各个平台找到代码即可

baidu_analytics: #百度统计
google_analytics: # 谷歌分析通常以`UA-`打头
tencent_analytics: #腾讯分析

广告

google_adsense:
  enable: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入个人识别码
  enable_page_level_ads: true

公式

MathJax

配置butterfly.yml:

mathjax:
  enable: true
  # true 表示每一页都加载mathjax.js
  # false 需要时加载,须在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false

然后你需要修改一下默认的markdown渲染引擎来实现 MathJax 的效果。

查看https://www.npmjs.com/package/hexo-renderer-kramed

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

KaTeX(推荐)

首先禁用MathJax(如果你配置过 MathJax 的话),然后修改你的butterfly.yml以便加载katex.min.css:

katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载,须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

你不需要添加katex.min.js来渲染数学方程。相应的你需要卸载你之前的 hexo 的 markdown 渲染器以及hexo-math,然后安装新的hexo-renderer-markdown-it-plus:

# 替换 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json里找到hexo的markdwon渲染器,并将其卸载
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# 卸载 `hexo-math`
npm un hexo-math --save

# 然后安装 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus已经无人持续维护, 所以我们使用 @upupming/hexo-renderer-markdown-it-plus。 这份 fork 的代码使用了 @neilsustc/markdown-it-katex同时它也是 VSCode 的插件 Markdown All in One所使用的, 所以我们可以获得最新的 KaTex 功能例如 \tag{}

你还可以通过 @neilsustc/markdown-it-katex控制 KaTeX 的设置,所有可配置的选项参见 https://katex.org/docs/options.html。 比如你想要禁用掉 KaTeX 在命令行上输出的宂长的警告信息,你可以在根目录的 _config.yml 中使用下面的配置将 strict 设置为 false:

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

美化/特效

自定义颜色

配置butterfly.yml,比如:

颜色值必须被双引号包裹,就像"#000"而不是#000。否则将会在构建的时候报错!

theme_color:
  enable: true
  main: "#9370DB"
  paginator: "#7A7FF1"
  button_hover: "#FF7242"
  text_selection: "#69c46d"
  link_color: "#858585"
  hr_color: "#A4D8FA"
  read-mode-bg_color: '#FAF9DE'

网站背景

默认显示白色,可设置图片或者顔色

配置butterfly.yml

# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background: "#efefef"
# background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

footer背景

footer 的背景会与top_img的一致, 当设置false时,将与主题色一致。

配置butterfly.yml

# footer是否显示图片背景(与top_img一致)
footer_bg: true

打字效果

打字效果

配置butterfly.yml

# 打字效果
activate_power_mode:
  enable: true
  colorful: true # 冒光特效
  shake: false # 抖动特效

彩带

参考配置文件

鼠标点击效果

配置butterfly.yml文件

  1. 烟花
fireworks:
  enable: true
  1. 爱心
click_heart:
  enable: true
  1. 文字
ClickShowText:
  enable: false
  text: 
    - 富强
    - 民主
    - 文明
    - 和谐
    - 自由
    - 平等
    - 公正
    - 法治
    - 爱国
    - 敬业
    - 诚信
    - 友善
  fontSize: 15px

文章页美化

会改变ol、ul、h1-h5的样式

配置butterfly.yml

post_beautify:
  enable: true
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon填写的是fontawesome的icon的Unicode数

自定义字体

可自行设置字体的font-family

配置butterfly.yml

font:
  enable: true
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。

配置butterfly.yml

# 主页subtitle
# 打字效果
subtitle: 
  enable: true
  # source调用第三方服务
  # source: false 关闭调用 
  # source: 1  调用金山词霸的每日一句(简体)
  # source: 2  调用一言网的一句话(简体) #https://hitokoto.cn/
  # source: 3  调用一句网(简体) http://yijuzhan.com/
  # source: 4  调用今日诗词(简体) https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # (如果有英文逗号' , ',请使用转义字符 &#44;)
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

主页文章cover位置

# 主页文章COVER显示位置
# 三个值可配置 left , right , both
# left(全部图片显示在左边),right(全部图片显示在右边),both(左右左右顺序显示)
index_post_cover: left

主页top_img显示大小,默认的显示为全屏。site-info的区域会居中显示

# 主页设置
# 默认top_img全屏,site_info在中间
# 使用默认, 都无需填写(建议默认)
index_top_img_height:  #主页top_img高度 例如 300px/300em/300rem  不能使用百分比

注意:index_top_img_height的值不能使用百分比。 2个都不填的话,会使用默认值

字数统计

要为Butterfly配上字数统计特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录
  2. npm install hexo-wordcount --save or yarn add hexo-wordcount
  3. 配置butterfly.yml: wordcount: enable: true

文章置顶

要为你一些文章置顶,你需要如下步骤:

  1. 打开 hexo 工作目录
  2. npm uninstall hexo-generator-index --save 然后 npm install hexo-generator-index-pin-top --save
  3. 你要在文章的front-matter区域里添加top: True属性来把这篇文章置顶。
  4. 你可以参考 hexo-generator-index-pin-top这个仓库来了解更多细节。

图片放大查看模式

fancybox

配置butterfly.yml

# fancybox http://fancyapps.com/fancybox/3/
fancybox:
  enable: true
medium_zoom

配置butterfly.yml

medium_zoom:
  enable: true

Snackbar 弹窗

Snackbar弹窗,根据自己爱好开啓

配置butterfly.yml

# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

插件安装

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前置说明
  • 初始化博客
  • 安装主题
  • 启用主题
  • 平滑升级
  • 主题页面
    • Page Front-matter
      • Post Front-matter
        • 标签页
          • 分类页
            • 友情链接
              • 音乐界面
                • 电影
                • 配置
                  • 语言
                    • 网站资料
                      • 导航菜单
                        • 代码
                          • 自动换行
                      • 社交图标
                      • 主页文章节选(自动节选和文章页description)
                        • 顶部图
                          • page页
                          • post页
                        • 文章相关项
                          • 文章版权
                            • 文章打赏
                              • 文章隐藏
                                • 头像
                                  • TOC
                                    • 自动打开TOC
                                  • 相关文章
                                  • Footer设置
                                    • 博客年份
                                      • 页脚自定义文字
                                        • ICP
                                          • 右下角按钮
                                            • 夜间模式
                                              • 阅读模式
                                              • 侧边设置
                                                • 访问人数
                                                  • 运行时间
                                                  • 标签外挂
                                                    • Note
                                                      • Gallery相册
                                                      • 评论
                                                      • 分享
                                                      • 搜索系统
                                                        • Algolia
                                                          • 本地搜索系统
                                                          • 网页验证
                                                          • 分析统计
                                                          • 广告
                                                          • 公式
                                                            • MathJax
                                                              • KaTeX(推荐)
                                                              • 美化/特效
                                                                • 自定义颜色
                                                                  • 网站背景
                                                                    • footer背景
                                                                      • 打字效果
                                                                        • 彩带
                                                                          • 鼠标点击效果
                                                                            • 文章页美化
                                                                              • 自定义字体
                                                                                • 网站副标题
                                                                                  • 主页文章cover位置
                                                                                    • 字数统计
                                                                                      • 文章置顶
                                                                                        • 图片放大查看模式
                                                                                          • fancybox
                                                                                          • medium_zoom
                                                                                        • Snackbar 弹窗
                                                                                        • 插件安装
                                                                                        相关产品与服务
                                                                                        内容分发网络 CDN
                                                                                        内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
                                                                                        领券
                                                                                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档