Hexo安裝并使用Butterfly主題

前置說明

本片文章為本人想要換hexo的主題時所寫。是以省略

node

和

hexo

的安裝，直接在初始化部落格開始

初始化部落格

輸入一下指令，并等待程式初始化完成。

hexo init MyHexoBlog

複制

此時已初始化完成。

安裝主題

如果沒有cheerio安裝 npm install [email protected] --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分支。

等待克隆完成。

啟用主題

修改站點配置檔案_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:
---

複制

标簽頁

前往你的 Hexo 部落格的根目錄
輸入 hexo new page tags
你會找到 source/tags/index.md 這個檔案
修改這個檔案：

--- title: 标簽 date: 2020-02-02 10:00:00 type: "tags" ---

分類頁

前往你的 Hexo 部落格的根目錄
輸入 hexo new page categories
你會找到source/categories/index.md這個檔案
修改這個檔案：

--- title: 分類 date: 2020-02-02 10:00:00 type: "categories" ---

友情連結

前往你的 Hexo 部落格的根目錄
輸入 hexo new page link
你會找到``source/link/index.md`這個檔案
修改這個檔案：

---
title: 友情連結
date: 2020-02-02 10:00:00
type: "link"
---

複制

添加友鍊

在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

複制

友情連結界面設定

需要添加友情連結，可以在
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 v4和 font-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:[email protected]
  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圖檔

當頂部圖留白，

true

和

false

首頁會顯示純顔色的頂部圖

其他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

複制

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 %}

複制

搜尋系統

Algolia

你需要安裝 hexo-algolia或 hexo-algoliasearch. 根據它們的説明文檔去做相應的配置。
配置 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"

本地搜尋系統

你需要安裝 hexo-generator-search. 根據它的文檔去做相應配置。注意格式隻支援 xml。
配置 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: #騰訊分析

複制

公式

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

檔案

煙花

fireworks:
  enable: true

複制

愛心

click_heart:
  enable: true

複制

文字

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配上字數統計特性, 你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-wordcount --save or yarn add hexo-wordcount
配置 butterfly.yml
:

wordcount: enable: true

文章置頂

要為你一些文章置頂，你需要如下步驟:

打開 hexo 工作目錄
npm uninstall hexo-generator-index --save 然後 npm install hexo-generator-index-pin-top --save
你要在文章的 front-matter 區域裡添加 top: True 屬性來把這篇文章置頂。
你可以參考 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時彈窗背景

複制