碼上快樂

相關內容    簡體    繁體

Butterfly美化

本文轉載自   查看原文   2021-02-10 16:03   1922    Hexo

Butterfly美化

Hexo系列文章已經完成上傳：
一、Hexo准備---Node.js、Vue
二、Hexo、主題、部署上線
三、Butterfly美化
四、Hexo之更換背景及透明度
五、Hexo-使用阿里iconfont圖標
六、PicGo：搭建圖床
七、Hexo-域名設置+收錄

首先提示，本文量特別大哦！基本上有所有的美化，還在持續更新ing，謹慎入坑.........

主題配置文件修改

基礎配置

最最最開始的，好不容易搭建了自己的個人博客，當然要寫上自己的名字、簽名......，證明身份。而且身為一個Chinese，還是中文舒服，所以主目錄下_config.yml的配置文件：

# Site
title: FATE      #標題名字
subtitle: ''
description: ''  #簽名
keywords:
author: MoYu-zc  #作者名字
language: zh-CN  #默認en  可以改為這個
timezone: ''

主題支持以下三種語言：

  • default(en)
  • zh-CN (簡體中文)
  • zh-TW (繁體中文)
1 2

導航欄修改

主目錄下\source\_data--butterfly.yml:

（如果沒有這個文件夾，創建一個_data，把\themes\butterfly也就是主題文件夾下的_config.yml移動到_data文件夾下，重命名為butterfly.yml，以后只需要修改這個文件。這樣為了留個備份，你搞壞了配置，還可以重新換成最開始的狀態） ↓： 名稱: /xxxx/ || 圖標

menu:
  首頁: / || fa fa-home
  歸檔: /archives/ || fa fa-archive
  標簽: /tags/ || fa fa-tags
  分類: /categories/ || fa fa-folder-open
  留言板: /messageboard/ || fa fa-paper-plane
  友鏈: /link/ || fa fa-link
  日志: /timeline/ || fa fa-bell
  菜單 || fa fa-list:
    - 關於 || /about/ || fa fa-sitemap
    - myself || /myself/ || fa fa-id-card
    - butterfly主題 || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart

3

代碼塊樣式

主目錄下/source/_data--butterfly.yml:

## 代碼塊樣式
highlight_theme: mac #default/darker/pale night/light/ocean/mac /false/  前面的參數任選一項為代碼塊顯示效果
highlight_copy: true # copy button  是否顯示復制按鈕
highlight_lang: true # show the code language 是否顯示代碼塊語言
highlight_shrink: false #true:打開文章默認折疊代碼塊內容/false:打開文章默認展開代碼塊/none:關閉代碼折疊按鈕
code_word_wrap: false  # 關閉滾動條

然后找到 Hexo 配置文件_config.yml，將line_number改成false:

highlight:
  enable: true
  line_number: false # 改為false
  auto_detect: false
  tab_replace:

4

本地搜索

# Local search 本地搜索
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果沒有查到內容相關內容顯示

需要安裝插件，不然hexo g直接報錯：

npm install hexo-generator-search --save

5

分割線圖標更換

本次修改基於Butterfly主題 3.0.0 ！

將圖標更換為“太空飛船”。

修改butterfly主題配置文件_data--_config.yml ：

hr_icon:
  enable: true
  icon: '\f197' # the unicode value of Font Awesome icon
  icon-top: -10px

icon-top常用數值：

-20px：圖標位於分割線上方

-10px：圖標位於分割線中間

0px：圖標位於分割線下方

6

創建標簽文件夾

會在\source中創建對應的文件夾和index.md

1.歸檔

這個頁面不用創建，自動已經帶了

2.標簽

命令行輸入：

hexo new page tags

出現source/tags/index.md文件：

---
title: 標簽
date: 2018-01-05 00:00:00
type: tags
---

以后上傳文章的md文件中，可以在標題頭中加入tags，包含 標簽 文章的例子：

---
title: 標簽測試
tags:
  - 1111                 （這個就是文章的標簽了）
  - 2222              （這個就是文章的標簽了）
---

3.分類

命令行輸入：

hexo new page categories

出現source/categories/index.md文件：

---
title: 分類
date: 2018-01-05 00:00:00
type: categories
---

以后上傳文章的md文件中，可以在標題頭中加入categories，包含 分類 文章的例子：

---
title: 分類測試
categories:
  - 1111                   （這個就是文章的分類了）
  - 2222                   （這個就是文章的分類了）
---

4.留言板

命令行輸入：

hexo new page messageboard

出現source/messageboard/index.md文件：

---
title: 留言板
date: 2018-01-05 00:00:00
type: messageboard
---

5.友鏈

5.1、創建友情鏈接頁面

命令行輸入：

hexo new page link

出現source/link/index.md文件：

---
title: 友鏈
date: 2018-01-05 00:00:00
type: link
---
5.2、友情鏈接添加

在Hexo目錄中的source/_data，創建一個文件link.yml，內容如下：

class:
  class_name: 友情鏈接
  link_list:
    1:
      name: 姓名
      link: 鏈接
      avatar: 圖片
      descr: 簽名
    2:
      name: 姓名
      link: 鏈接
      avatar: 圖片
      descr: 簽名

6.日志

命令行輸入：

hexo new page timeline

出現source/timeline/index.md文件：

---
title: 日志
date: 2018-01-05 00:00:00
type: timeline
---

7.關於

命令行輸入：

hexo new page about

出現source/about/index.md文件：

---
title: 關於
date: 2018-01-05 00:00:00
type: about
---

8.myself

命令行輸入：

hexo new page myself

出現source/myself/index.md文件：

---
title: This is me
date: 2018-01-05 00:00:00
type: myself
---

標題樣式

1.副標題設置

如果沒設置副標題，上面的description：簽名，就是顯示在主頁面。而設置的話，簽名自動不顯示，副標題出現。

在\source\_data中的butterfly.yml:

subtitle:
  enable: true

 sub:
    - 何其榮幸 何德何能
    - 所有的不平凡都來自平凡

這個他們可以設置以下，打字效果可以開啟，個人感覺不錯，但是需要注意：

 # 如果有英文逗號' , ',使用轉義字元 ,
 # 如果有英文雙引號' " ',使用轉義字元 "
 # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
 # 如果關閉打字效果，subtitle只會顯示sub的第一行文字

我嘗試了轉義字符，但是會到“，”時，可能會有點卡，可以用空格代替。

7

2.副標題字體大小顏色

在\themes\butterfly\source\css\_layout中的head.styl:

#site-subtitle
    color: var(--white)   此處修改為白色
    font-size: 1.05em     字體大小

    +minWidth768()
      font-size: 1.40em   字體大小

圖片設置

圖片可以使用網上的圖片(即使用該圖片鏈接)，也可以使用\themes\butterfly\source\img下的圖片。

1.網站圖標

# Favicon（網站圖標）
favicon: /img/favicon.png

2.頭像

# Avatar (頭像)
avatar:
  img: /img/tit.png
  effect: false

3.主頁面圖片

# The banner image of home page (主頁的橫幅圖像)
index_img: /img/index_img.jpg

4.子標簽頁圖片

# The banner image of archive page
archive_img: /img/tag.jpg

5.推薦

  1. 主頁的頂部圖可以在butterfly.yml設置index_img
  2. ``archives頁的頂部圖可以在Butterfly.yml設置archive_img`
  3. 其他page頁的頂部圖可以在各自的md頁面設置front-matter中的top_img
favicon: /img/favicon.png
avatar:
  img: /img/tit.png
  effect: false
index_img: /img/index_img.jpg
default_top_img: /img/tag.jpg #這個推薦：不加入可能部分標簽頁不出現圖片
archive_img: /img/tag.jpg
tag_img: /img/tag.jpg
category_img: /img/tag.jpg
8 9

6.文章列表圖片

在\source\_data中的butterfly.yml修改：

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  default_cover:

文章封面設置：

一個:

 default_cover: https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

多個:

此時會隨機選擇一張。

  default_cover:
     - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
     - https://upimage.alexhchu.com/2020/10/21/671e773d973ae.jpg
     - https://upimage.alexhchu.com/2020/10/21/f5ac68ddaaf64.jpg
     - https://upimage.alexhchu.com/2020/10/21/5fecb0b094b73.jpg

or文章內

10

7.圖片查看大圖

主目錄下/source/_data--butterfly.yml:

這是兩種方式，只能選擇一個 或者 兩個都不選

11

8.圖片懶加載

1.新增hexo-lazyload-image模塊

npm install hexo-lazyload-image --save

2.在主目錄配置文件_config.yml增加配置

lazyload:
  enable: true
  loadingImg: /img/loading.gif

這個就是圖片沒加載出來的時候，出現一個動圖轉轉轉。

文章頁樣式

1.復制的內容后面加上版權信息

# copy settings
# copyright: Add the copyright information after copied content (復制的內容后面加上版權信息)
copy:
  enable: true

（↑這個相信大家都見過，不演示了）

2.文章版權信息

在底部會出現對應的作者、鏈接、聲明

在\source\_data中的butterfly.yml修改：

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

3.TOC目錄

在文章頁，會有一個目錄，用於顯示TOC。

在\source\_data中的butterfly.yml修改：

# toc (目錄)
toc:
  enable: true
  number: true
  auto_open: true # auto open the sidebar
13

4.相關文章

在文章最下面，會出現相關信息文章的推送。

在\source\_data中的butterfly.yml修改：

# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed  顯示的文章數
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

5.打賞

在你每篇文章的結尾，可以添加打賞按鈕。對應二維碼可以自行配置。

沒有提供二維碼的，可配置icon圖片，然后在link上添加相應的打賞鏈接。用戶點擊圖片就會跳轉到對應鏈接去。

link可以不寫，會默認為圖片的鏈接。

在\source\_data中的butterfly.yml修改：

# Sponsor/reward
reward:
  enable: false
  QR_code:
     - img: /img/wechat.jpg
       link:
       text: wechat
     - img: /img/alipay.jpg
       link:
       text: alipay
14

側邊框樣式

1.側邊框出現位置

在\source\_data中butterfly.yml修改：

# aside (側邊欄)
# --------------------------------------
aside:
  enable: true
  mobile: true # display on mobile
  position: left # left or right

left：側邊框出現在左側

right:：側邊框出現在右側

15

2.Follow me信息修改

在\source\_data中butterfly.yml修改：

16

圖中icon圖標使用的阿里iconfont圖標

具體可參考：本站文章--Hexo-使用阿里iconfont圖標

3.公告

在\source\_data中butterfly.yml修改：

card_announcement:
    enable: true
    content: This is my Blog  #修改此處

17

4.訪問人數和運行時間

# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true
  
  # 網頁運行時間
runtimeshow:
  enable: true
  publish_date: 10/11/2020 00:00:00
  #格式: 月/日/年 時間
  #也可以 年/月/日 時間

18

19

20

特效部分

1.鼠標點擊特效

在\source\_data中butterfly.yml修改：

21

2.鼠標移動特效

在\themes\butterfly\source\css中創建一個css文件，將以下代碼復制進去：

(function fairyDustCursor() {

  var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  var particles = [];

  function init() {
    bindEvents();
    loop();
  }

  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchstart', onTouchMove);

    window.addEventListener('resize', onWindowResize);
  }

  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }

  function onTouchMove(e) {
    if( e.touches.length > 0 ) {
      for( var i = 0; i < e.touches.length; i++ ) {
        addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
      }
    }
  }

  function onMouseMove(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;

    addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  }

  function addParticle(x, y, color) {
    var particle = new Particle();
    particle.init(x, y, color);
    particles.push(particle);
  }

  function updateParticles() {

    for( var i = 0; i < particles.length; i++ ) {
      particles[i].update();
    }

    for( var i = particles.length -1; i >= 0; i-- ) {
      if( particles[i].lifeSpan < 0 ) {
        particles[i].die();
        particles.splice(i, 1);
      }
    }

  }

  function loop() {
    requestAnimationFrame(loop);
    updateParticles();
  }

  function Particle() {

    this.character = "*";
    this.lifeSpan = 120; //ms
    this.initialStyles ={
      "position": "fixed",
      "top": "0", //必須加
      "display": "block",
      "pointerEvents": "none",
      "z-index": "10000000",
      "fontSize": "20px",
      "will-change": "transform"
    };

    this.init = function(x, y, color) {

      this.velocity = {
        x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
        y: 1
      };

      this.position = {x: x - 10, y: y - 20};
      this.initialStyles.color = color;
      console.log(color);

      this.element = document.createElement('span');
      this.element.innerHTML = this.character;
      applyProperties(this.element, this.initialStyles);
      this.update();

      document.body.appendChild(this.element);
    };

    this.update = function() {
      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;
      this.lifeSpan--;

      this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
    }

    this.die = function() {
      this.element.parentNode.removeChild(this.element);
    }

  }

  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  init();
})();

接着，在\source\_data的butterfly.yml引入：

  bottom:
     - <script type="text/javascript" src="/js/fairyDustCursor.js"></script>

22

忽略以下圖片，可以自行嘗試。

23

3.打字特效

在\source\_data中butterfly.yml修改：

24

4.頁面特效

靜態彩帶

在\source\_data中butterfly.yml修改：

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: true

點擊頁面，彩帶會進行變化。

動態彩帶

在\source\_data中butterfly.yml修改：

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: true
  mobile: true

這個彩帶可以動態變換。

canvas_nest

在\source\_data中butterfly.yml修改：

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' #線條顏色, default: '0,0,0'; 
  opacity: 0.7 # 線條的不透明度 (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # 線條數量, default: 99.
  mobile: false

這個可以鼠標自動吸附。

Snackbar 彈窗

在\source\_data中butterfly.yml修改：

# Snackbar (Toast Notification 彈窗)
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: top-right
  bg_light: '#49b1f5' # light 背景下的樣式
  bg_dark: '#121212' # dark 背景下的樣式

開啟后，在你設置的位置會有可愛的小彈窗出現。

大家可以嘗試一下，按個人愛好開啟。

25

底部設置

在 butterfly.yml中配置：

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2020
  custom_text: 11111
  copyright: true # false： Hexo那句不顯示
  ICP: # Chinese ICP License   #最后一句
    enable: true
    url: http://www.beian.gov.cn
    text: 豫ICP備20001029號
    icon: /img/icp.png

26

修改主題文件美化

添加404頁面

1.找到自己心儀的404頁面，這個網站很多很多呦。

https://404.life/

2.在\source中創建一個404文件夾和一個404.html

27

3.修改404.html內容

​ 紅線的地方，可以自行選擇是否修改

​ 紅框的地方，必須修改 (可以按照圖片中修改)

28 29

4.設置404跳過渲染，在主目錄_config.yml中：

skip_render:
  - 404.html

5.butterfly.yml 可以關掉默認的404頁面

# A simple 404 page
error_404:
  enable: false  # 關閉
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
30

修改滾動條

1.創建一個css文件移動到\themes\butterfly\source\css目錄下。

31

2.引入方式

32

將以下代碼復制到你所創建的css文件,引入即可。

/* 滾動條 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
 
::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}
 
::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}
 
::-webkit-scrollbar-corner {
  background-color: transparent;
}
 
::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}

頁腳漸變

將以下代碼復制到你所創建的css文件,引入即可。

可參考：修改滾動條部分中的引入方式

/* 頁腳footer */
/* 漸變色滾動動畫 */
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0 50%;
    }
}
 
@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0 50%;
    }
}
 
@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0 50%;
    }
}
#footer {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#footer:before {
    background-color: rgba(0, 0, 0, 0);
}

更換背景及透明度

1.透明度

將以下代碼復制到你所創建的css文件,引入即可。

可參考：修改滾動條部分中的引入方式

/* 文章頁背景 */
.layout_post>#post {
    /* 以下代表白色透明度為0.3 */
    background: rgba(255,255,255,.3);
}

/* 所有背景（包括首頁卡片、文章頁、頁面頁等） */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表白色透明度為0.3 */
    background: rgba(255,255,255,.3);
}

2.更換背景

老規矩，復制到你所創建的css文件,引入即可。

#web_bg {
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

當然這是我的博客背景。

如果你想更改，具體可以參考本博客文章：Hexo之更換背景及透明度

移動端優化

\themes\butterfly\source\css\_third-party\normalize.min.css添加如下css代碼：

/*移動端優化：去除歸檔、標簽、最新文章、公告、、只保留網站統計*/
@media screen and (max-width: 800px) {
    #aside_content
    div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

查看網頁RSS

本次修改基於Butterfly主題 3.0.0 ！

實現：增加社交圖標RSS，點擊可查看網頁RSS。

1.下載插件hexo-generator-feed

npm install hexo-generator-feed --save

2.在hexo的主配置文件_config.yml中任意位置添加以下代碼：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

3.修改butterfly主題配置文件_config.yml ，添加RSS的圖標：

social:
  fa fa-rss: /atom.xml || RSS鏈接

社交信息設置

在\source\_data中的butterfly.yml修改social：

(可以選擇使用fa fa-xxx圖標，也可以選擇使用阿里iconfont圖標)

具體可參考：本站文章--Hexo-使用阿里iconfont圖標

33 34

此處要注意：

​ 很多人不知道自己上方填的網址怎么找

​ RSS上面有教程，Giuhub、Github、CSDN、bilibili直接個人主頁網址就可以

​ QQ：下方 xxxxxxx 填上對應的qq號碼即可

tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=xxxxxxx&website=www.oicqzone.com

標簽外掛

1.Note語法

​ 移植於next主題：可以在\source\_data中的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 
  style: flat
  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

​ 該標簽有兩種使用方法。

​ 默認模板：

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名稱
用法
class 【可選】標識，不同的標識有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon 【可選】不顯示 icon
style 【可選】可以覆蓋配置中的 style
（simple/modern/flat/disabled）

一、simple

{% note simple %}
默認 提示塊
{% endnote %}

{% note default simple %}
default 提示塊
{% endnote %}

{% note primary simple %}
primary 提示塊
{% endnote %}

{% note success simple %}
success 提示塊
{% endnote %}

{% note info simple %}
info 提示塊
{% endnote %}

{% note warning simple %}
warning 提示塊
{% endnote %}

{% note danger simple %}
danger 提示塊
{% endnote %}

更多可以在我的個人博客觀看

2.圖片放置

可以根據圖片長度自行排列

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

例如：

{% gallery %}
![](https://upimage.alexhchu.com/2020/10/21/f5ac68ddaaf64.jpg)
![](https://upimage.alexhchu.com/2020/10/21/0d1b78c7157d4.jpg)
![](https://upimage.alexhchu.com/2020/10/19/34446d0d37dde.jpg)
{% endgallery %}

因為這個功能是用在Hexo美化中，在此博客效果不顯示，具體可移步我的博客（最下方鏈接）

3.tag-hide

這個可以提供一個按鈕，點擊它，顯示你隱藏的文字、圖片等。

Inline

這個可以隱藏文字，僅限於此。( content不能包含英文逗號，可用&sbquo;)

{% hideInline content,display,bg,color %}

  • content: 文本內容

  • display: 按鈕顯示的文字(可選)

  • bg: 按鈕的背景顏色(可選)

  • color: 按鈕文字的顏色(可選)

Demo

座右銘座右銘！！ {% hideInline 何其榮幸 何德何能,別點我,#FF7242,#fff %}

平平無奇。。。  {% hideInline 上面太花里胡哨了,上面真秀 %}

Block
這個也是提供一個按鈕，而他可以隱藏文字、圖片、代碼塊等。( dispaly不能包含英文逗號，可用&sbquo;)

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

  • content: 文本內容

  • display: 按鈕顯示的文字(可選)

  • bg: 按鈕的背景顏色(可選)

  • color: 按鈕文字的顏色(可選)

Demo

座右銘座右銘！！ 
{% hideBlock  別點我,#FF7242,#fff %}
何其榮幸 何德何能
{% endhideBlock %}
平平無奇。。。  
{% hideBlock 上面真秀 %}
 上面太花里胡哨了
{% endhideBlock %}

Toggle
如果你需要展示的內容太多，可以把它隱藏在收縮框里，需要時再把它展開。

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

{% hideToggle Wecome to my Blog %}
 歡迎歡迎歡迎
 MoYu‘s Blog
 Gitee：https://moyu-zc.gitee.io/
 Github：https://moyu-zc.github.io/
{% endhideToggle %}

因為這個功能是用在Hexo美化中，在此博客效果不顯示，具體可移步我的博客（最下方鏈接）

4.mermaid

mermaid標簽不允許嵌套於一些隱藏屬性的標簽外掛

例如: tag-hide內的標簽外掛和tabs標簽外掛，也不能壓縮代碼

這會導致mermaid圖示無法正常顯示，使用時請留意。

使用mermaid標簽可以繪制Flowchart（流程圖）、Sequence diagram（時序圖 ）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和Pie Chart（圓形圖），具體可以查看mermaid文檔
在\source\_data中的butterfly.yml中修改:

mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

寫法：

{% mermaid %}
內容
{% endmermaid %}

Demo

{% mermaid %}
pie
   Test X
    "A" : 50
    "B" : 20
    "C" : 10
    "D" :  5
{% endmermaid %}

因為這個功能是用在Hexo美化中，在此博客效果不顯示，具體可移步我的博客（最下方鏈接）

5.Tabs

Demo1------默認方式

{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo2------預設選擇``tabs`

{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo3------沒有預設

{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo4------自定義Tab名、 只有icon、icon和Tab名

{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-bell -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 身份證@fas fa-address-card -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

因為這個功能是用在Hexo美化中，在此博客效果不顯示，具體可移步我的博客（最下方鏈接）

6.Button

模板：

{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 鏈接
[text]        : 按鈕文字
[icon]        : [可選] 圖標
[color]       : [可選] 按鈕背景顏色(默認style時）
                      按鈕字體和邊框顔色(outline時)
                      default/blue/pink/red/purple/orange/green
[style]       : [可選] 按鈕樣式 默認實心
                      outline/留空
[layout]      : [可選] 按鈕布局 默認為line
                      block/留空
[position]    : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
                      center/right/留空
[size]        : [可選] 按鈕大小
                      larger/留空

{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block center larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block right outline larger %}

More styles:

{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,blue larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,pink larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,red larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline purple larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline orange larger %}
{% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline green larger %}

因為這個功能是用在Hexo美化中，在此博客效果不顯示，具體可移步我的博客（最下方鏈接）

分享功能

分享功能有兩種：

第一種：

如果你不知道 sharejs，可以查看說明

主目錄下/source/_data--butterfly.yml中修改:

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要顯示的內容

35

第二種：

如果你不知道addtoany，可以查看說明

主目錄下/source/_data--butterfly.yml中修改:

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
36

在線聊天

通用設置

在butterfly中，有幾種內置的在線聊天工具。

簡單的，打開chat_btn，在右下角開啟小按鈕。

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true
37

為了不影響訪客體驗，可以開啟chat_hide_show，開啟后，只有向上滾動才會顯示聊天按鈕，向下滾動時會隱藏按鈕。

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: true

如果使用工具自帶的聊天按鈕，位置可能會遮擋右下角圖標，可以配置``rightside-bottom`調整右下角圖標位置

chatra
在chatra中注冊賬號.

可以在Preferences中找到Public key

38

之后/source/_data--butterfly.yml中修改:

# chatra
# https://chatra.io/
chatra:
  enable: true
  id:           #這個就是Public key

tidio

在tidio中注冊賬號。

可以在Preferences中找到Public key。

在設置中還可以設置樣式。

39

之后/source/_data--butterfly.yml中修改:

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key:    #這個就是Public key
40

daovoice

在daovoice中注冊。

在應用設置----安裝到網站 之中的app id

可在聊天設置里可以配置聊天按鈕等樣式

41

之后/source/_data--butterfly.yml中修改:

# daovoice
# http://daovoice.io/
daovoice:
  enable: true 
  app_id:      #這個就是app id
42

gitter

在gitter中登錄上賬號。

創建一個community或者room,復制名稱到設置去。

# gitter
# https://gitter.im/
gitter:
  enable: true
  room: MoYuzc/community   #名稱放這兒
43 44

crisp

打開crisp，注冊賬號。

在設置中，找到網站ID。

45

之后，在butterflt.yml中修改：

# crisp
# https://crisp.chat/en/
crisp:
  enable: true
  website_id:    #網站ID填寫這兒
46

評論功能

開啟評論需要在butterfly.yml---comments---use中填寫你需要的評論。

支持雙評論顯示，只需要配置兩個評論（第一個為默認顯示）

comments:
  use:
   - Valine
  # - Disqus    
  text: true 
  lazyload: false
  count: false
參數 解釋
use 使用的評論（填寫的評論首字母需要大寫。最多支持兩個，不需要就留空）
text 是否顯示評論服務商的名字
lazyload 是否為評論開啟lazyload，開啟后，只有滾動到評論位置時才會加載評論所需要的資源（開啟lazyload后，評論數將不顯示）
count 是否在文章頂部顯示評論數
livere 和 utterances 不支持評論數顯示

注意：雙評論不能是 Disqus 和 Disqusjs 一起，由於其共用同一個 ID，會出錯。

以下是舉例的我在用的：Valine

1.在LeanCloud中注冊賬號，並進入。

47

2.創建應用，命名就隨便啦

48

3.創建成功后，進入設置

49

4.進入應用Keys

應用Keys中有AppID和AppKey，這兩個需要填寫到你的butterfly.yml中

50

5.填寫butterfly.yml

# valine
# https://valine.js.org
valine:
  appId:              #  app id
  appKey:              # app key
  pageSize: 10
  avatar: monsterid 
  lang: zh-CN 
  placeholder: Please leave your footprints p
  guest_info: nick,mail,link 
  recordIP: true 
  serverURLs: 
  bg: 
  emojiCDN: 
  enableQQ: true 
  requiredFields: nick,mail
52

​ 持續更新ing~~

個人博客為：
MoYu's Github Blog
MoYu's Gitee Blog


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Hexo+Butterfly主題美化 Hexo博客美化之蝴蝶(butterfly)主題魔改 Butterfly透明背景設置 hexo butterfly優化 Ocelot中使用Butterfly實踐 Butterfly 主題魔改記錄 基於 Butterfly 的外掛標簽引入-筆記 搭建基於Hexo+Butterfly主題的個人博客站 Butterfly側邊欄引入一言 hexo-butterfly魔改記錄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM