前言

這是我在建立過程中，設置的一些小細節，如果我的文章有幫助到你的話，希望可以在下面留言:D
給我一個“讚”～

修改 home aside 樣式

整體寬度

前往themes/butterfly/source/css/_layout/aside.styl 找到 card-widget 的樣式，然後修改成以下樣式。

1
2
3
4
5
6
7
.card-widget
  @extend .cardHover
  position: relative
  overflow: hidden
  margin-top: 20px
  margin-left: 15px # 添加這個
  padding: 20px 24px

tag

前往themes/butterfly/source/css/_layout/aside.styl找到 card-tag-cloud 的樣式，然後修改成以下樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.card-tag-cloud
  a
    display: inline-block;
    margin: 0.2rem 0.2rem 0.2rem 0;
    padding: 0 0.4rem;
    width: fit-content;
    border: 1px solid #f76b61;
    border-radius: 0.8rem;
    background: #f76b61;
    color: #fff !important;
    text-decoration: none;
    font-size: 12px !important;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    &:hover
      background: #42d3d8;
      color: #fff !important;
      border: 1px solid #42d3d8;
      -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.03);
      box-shadow: 0 4px 8px 6px rgba(7,17,27,0.03);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);

post 中把 tag 移動到上方

原本文章內的 tags 是顯示在版權下方，如要好像我這樣顯示在正文上方，在 .\themes\Butterfly\layout\post.pug 這個文件中，搜尋下面這段，把它移到至 block content 的下一行插入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

block content
  #post
    # ==== 移動到這裡 ====
    .tag_share
        if (theme.post_meta.post.tags)
          .post-meta__tag-list
            each item, index in page.tags.data
              a(href=url_for(item.path)).post-meta__tags #[=item.name]
    # ========End========
    if top_img === false
      include includes/header/post-info.pug

    article#article-container.post-content!=page.content
    include includes/post/post-copyright.pug
    
      include includes/third-party/share/index.pug
        
    if theme.reward.enable && theme.reward.QR_code
      !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    if theme.post_pagination
      include includes/pagination.pug
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

VScode in snippet

如果想要輸入特定符號，以快速輸入常用代碼。

1
2
3
4
5
6
7
<!-- 例如輸入：!note -->
!info  

<!-- 會自動出現以下 -->
{% note info %}

{% endnote %}

可以輸入ctrl[commend] + p 叫出視窗，輸入> 後搜尋功能 snippet，然後選擇 Configure User Snippets 後編輯 markdown.json 的相關設定。

以下是我的設定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{
	// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"NoteInfo": {
		"prefix": "!info",
		"body": [
			"{% note info %}",
			"$1",
			"{% endnote %}",
		],
		"description": "Note info"
	},
	"NoteWarning": {
		"prefix": "!warning",
		"body": [
			"{% note warning %}",
			"$1",
			"{% endnote %}",
		],
		"description": "Note info"
	},
	"NoteDanger": {
		"prefix": "!danger",
		"body": [
			"{% note danger %}",
			"$1",
			"{% endnote %}",
		],
		"description": "Note info"
	},
	"NotePrimary": {
		"prefix": "!primary",
		"body": [
			"{% note primary %}",
			"$1",
			"{% endnote %}",
		],
		"description": "Note info"
	},
	"mermaid sequence": {
		"prefix": "!sequenceDiagram",
		"body": [
		  "{% mermaid info %}",
		  "sequenceDiagram",
		  "    participant U as User ",
		  "    participant A as Device Agent",
		  "    U->>+A: request",
		  "    A-->>-U: response",
		  "{% endmermaid %}"
		],
		"description": "mermaid sequence"
	},
	"mermaid": {
		"prefix": "!mermaid",
		"body": [
		  "{% mermaid info %}",
		  "$1",
		  "{% endmermaid %}"
		],
		"description": "mermaid sequence"
	},
	"hideToggle": {
		"prefix": "!toggle",
		"body": [
			"{% hideToggle %}",
			"$1",
			"{% endhideToggle %}",
		],
		"description": "Hide toggle"
	},
	"quote": {
		"prefix": "!quote",
		"body": [
			"{% quote author link %}",
			"$1",
			"{% endquote %}",
		],
		"description": "quote"
	}
}

latex - Katex in Butterfly Theme Hexo

因為撰寫ML的相關技術文章，但是碰了不少壁，最後終於成功可以在文章中使用Latex撰寫。

  1. 先下載和解除相關套件
1
2
3
4
npm un hexo-renderer-marked --save # 卸载 marked 插件
npm un hexo-renderer-kramed --save # 卸载 kramed 插件
npm i hexo-renderer-markdown-it --save # 安装渲染插件
npm install @neilsustc/markdown-it-katex --save # 安装katex插件
  1. 設定_config.butterfly.yml
1
2
3
4
5
# KaTeX
katex:
  enable: true
  per_page: false # 如果使用 false 就要在每個 post 的標頭添加 katex: true 
  hide_scrollbar: true
  1. 我是參考到github上的issues，裡面偶然看到hexo-renderer-makrdown-it，才發現需要在 _config.yml 追加以下設定：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Katex
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
   - plugin:
     name: '@neilsustc/markdown-it-katex'
     options:
       strict: false
  anchors: 
    level: 1 # 這底是最重要的不然一級毛點會失效 
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline
  1. 在文章中啟用katex可以設定如下，更詳細的使用可以參考katex。
1
2
3
4
5
6
7
8
9
#【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
---
title: All basic concept of Mechine Learning - ML 的重點知識整理
date: 2023-09-30 11:36:29
abbrlink: 'ML'
katex: true # 設定為true如果你的_config.yml設定per_page是false
---

$\bar{y}$ #要使用 $ 把公式包圍起來

調整 blog 中圖片大小

  1. 先在自己的 /source/js/ 底下建立一個 hexo_resize_image.js 檔案。
  2. 貼上以下內容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function set_image_size(image, width, height) 
{
    image.setAttribute("width", width + "px");
    image.setAttribute("height", height + "px");
}

function hexo_resize_image()
{
    var imgs = document.getElementsByTagName('img');
    for (var i = imgs.length - 1; i >= 0; i--) 
    {
        var img = imgs[i];

        var src = img.getAttribute('src').toString();

        var fields = src.match(/(?<=\?)\d*x\d*/g);
        if (fields && fields.length == 1)
        {
            var values = fields[0].split("x");
            if (values.length == 2)
            {
                var width = values[0];
                var height = values[1];

                if (!(width.length && height.length))
                {
                    var n_width = img.naturalWidth;
                    var n_height = img.naturalHeight;
                    if (width.length > 0)
                    {
                        height = n_height*width/n_width;
                    }
                    if (height.length > 0)
                    {
                        width = n_width*height/n_height;
                    }
                }
                set_image_size(img, width, height);
            }
            continue;
        }

        fields = src.match(/(?<=\?)\d*/g);
        if (fields && fields.length == 1)
        {
            var scale = parseFloat(fields[0].toString());
            var width = scale/100.0*img.naturalWidth;
            var height = scale/100.0*img.naturalHeight;
            set_image_size(img, width, height);
        }
    }
}
window.onload = hexo_resize_image;
  1. 在 _config.butterfly.yml 做以下設置。
1
2
3
4
inject:
  bottom:
    - <script src="/js/hexo_resize_image.js"></script>

mermaid 循序圖繪製

參考：https://butterfly.js.org/posts/4aa8abbe/#tag-hide

使用mermaid標籤可以繪製Flowchart（流程圖）、Sequence diagram（時序圖 ）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和Pie Chart（圓形圖），具體可以查mermaid文檔

主題配置文件

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
1
2
3
4
5
6
7
8
9
10
11
12
13
{% mermaid %}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
{% endmermaid %}

hidden toggle

參考：https://butterfly.js.org/posts/4aa8abbe/#tag-hide

( display 不能包含英文逗號，可用‚)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏

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

{% endhideToggle %}
Butterfly安裝方法

在你的博客根目錄裏

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

URL網址連結 abbrlink

hexo 默認生成的文章地址路徑是 【網站名稱／年／月／日／文章名稱】
這種鏈接對搜索爬蟲是很不友好的，第一它的 url 結構超過了三層，太深了。

Step1: 安裝 abbrlink 插件：

1
npm install hexo-abbrlink --save

Step2: 修改 hexo 根目錄下 config.yml 中的 permalink 的值：

  • 插件可以參考官方文檔。
  • 作用是將文章的鏈接轉換成數字後字母，即將博客網站的網頁轉成.html 永久鏈接的格式，有利於搜索引擎的收錄。
1
2
3
4
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://shannonhung.github.io
permalink: posts/:abbrlink.html

Step3: 在 config.yml 最底下添加 abbrlink config

1
2
3
4
5
# abbrlink config
abbrlink:
  alg: crc32      # support crc16(default) and crc32
  rep: hex        # support dec(default) and hex
# 不用添加其它代碼

Check: 配置完成後，網站的鏈接應該類似這樣：

1
https://qmike.top/posts/77940e6f.html        # 有.html後綴

客製化css樣式設定

前提是你使用Butterfly的template

  1. 先於 專案的根目錄建立 /source/css/style.css (不是theme的喔，因為我希望盡量跟theme解開耦合，才方便更新)
  2. 建立好後，去 _config.butterfly.yml 檔案做以下設定，目的是為了引用剛剛建立的style.css
1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/style.css">
  bottom:
    # - <script src="xxxx"></script>
  1. 然後開始設定css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#footer {
  background: rgba(0, 153, 255, 0.3);
}

#footer-wrap {
  color: #ffffff;
}

/* 鼠標樣式 */
body {
  cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/default.cur),
    default;
}
a,
img {
  cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/pointer.cur),
    default;
}

/* 滾動條樣式 */
::-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;
}

post/title

樣式設計

  1. 前往_config.butterfly.yml設置以下內容，prefix-icon可以參考fontawesome網站，並且貼上unicode。
1
2
3
4
5
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f52d' # '\f0c1'
  title-prefix-icon-color: '#F47466'  # '#F47466'
  1. 就會有以下效果囉：滑鼠點擊過去會反白

複製連結+錨點

  1. 如果想要title有錨點可以供別人進行複製，可以做以下設定
1
2
3
4
5
6
7
# anchor
anchor:
  button:
    enable: true
    always_show: false
    icon: '\f0c1' # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: true # when you scroll in post, the URL will update according to header id.
  1. 就會有以下效果囉：可以複製當前的錨點

留言板功能

github 建立 client app

  1. 前往自己github頁面/Setting/Developer Setting(在旁邊sidebar最下面)
  2. 先去建立OAuth Application
  3. 創建完成，取得Client ID和Client secrets，第一次創建application需要點擊Generate a new client secret來生成第一個secret

_config.butterfly.yml設定gitalk與啟用

  • client_id—你的Client ID
  • client_secret—你的Client secrets
  • repo—你的公開靜態網頁repo名稱
  • owner—你的帳號名稱
  • admin—你的帳號名稱
1
2
3
4
5
6
7
8
9
# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: xxx
  client_secret: xxx
  repo: shannonhung.github.io
  owner: ShannonHung
  admin: ShannonHung
  option:

以gitalk啟用留言系統

1
2
3
4
5
6
7
8
9
10
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use: Gitalk
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Pag

front-matter啟用留言板

在butterfly Front-matter的comments變數設定true or false(啟用/關閉)

1

不同樣式的Quote

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标籤
{% endnote %}

{% note primary no-icon %}
primary 提示块标籤
{% endnote %}

{% note success %}
success 提示块标籤
{% endnote %}

{% note info %}
info 提示块标籤
{% endnote %}

{% note warning %}
warning 提示块标籤
{% endnote %}

{% note danger %}
danger 提示块标籤
{% endnote %}

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

如何改變自己css？

  1. 請在 source 底下建立 style.css

    • 建立完後檔案會放置在： source/css/style.css

  2. 在 _config.butterfly.yml 中複寫以下資訊：

1
2
3
4
5
6
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/style.css">
  1. 如果你想要我主體中的一些樣式可以參考…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* 背景渐变 */
body{
  background-image: linear-gradient(-225deg, #edd5bd6f 0%, #f9c7998d 48%, rgba(0, 153, 255, 0.149) 100%);
}

/* footer */
#footer {
  background: rgba(0, 153, 255, 0.4);
}

#footer-wrap {
  color: #fff;
}
/* 粗體字 特效 */
strong {
  color: rgba(0, 153, 255);
}
/* 斜線 */
[data-theme="light"] em {
  /* bold */
  padding: 0.3rem;
  font-weight: bold;
  font-size: 15px;
  background: linear-gradient(180deg, transparent 50%, #fdda5a 0);
}
[data-theme="dark"] em {
  /* bold */
  padding: 0 0.2rem;
  font-weight: bold;
  font-size: 15px;
  color: black;
  background: linear-gradient(180deg, transparent 0%, #fdda5a 0%);
}

/* 鼠標樣式 */
body {
  cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/default.cur),
    default;
}
a,
img {
  cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/pointer.cur),
    default;
}

/* 滾動條樣式 */
::-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;
}

幫你的post添加背景

  1. 可以去 unsplash 找一張圖片!上面有圖片的 code

  2. 開新的分頁，輸入 https://source.unsplash.com/圖片的code，他會幫你引導到新的圖片網址，複製那個圖片網址。

  3. 貼上post上面的header

1
2
3
4
5
6
7
8
9
10
---
title: 一次搞懂Java中的equals()和hashCode()
abbrlink: equals-hashCode
date: 2023-06-20 15:21:48
cover: {貼在這裡} ＃貼這裡
tags:
  - Java
  - 物件導向
categories: ["Code", "Java"]
---

主要參考了哪些網站