參考連結

Set Butterfly Environment

version 5.2.2
參考連結
參考連結

Use Search in Blog

note: 用太新的 Butterfly Theme 會出錯

1
npm install hexo-generator-search --save
1
2
3
4
5
6
# 修改: _config.butterfly.yml
search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: local_search
  placeholder:

參考連結

Music in Blog

Netease Api

Netease Music
參考連結
參考連結

Local

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
# _config.butterfly.yml
aplayerInject:
  enable: true
  per_page: true

pjax:
  enable: true
  # Exclude the specified pages from pjax, such as '/music/'
  exclude:
    - /music/


# _config.yml
aplayer:
  meting: true
  asset_inject: true # 造成點選頁面的 music 會重整頁面

# /music/index.md
{% aplayerlist %}
{
    "narrow": false,                          
    "autoplay": true,                         
    "mode": "random",                         
    "showlrc": 3,                             
    "mutex": false,                            
    "theme": "#e6d0b2",	                      
    "preload": "metadata",                    
    "listmaxheight": "513px",                
    "music": [
        {
            "title": "千年血戰op",
            "author": "キタニタツヤ",
            "url": "https://github.com/yuemusic0211/music/raw/refs/heads/main/%E6%AD%BB%E7%A5%9E/%E5%8D%83%E5%B9%B4%E8%A1%80%E6%88%B0op.mp3",
            "pic": "https://github.com/yuemusic0211/music/blob/main/picture/%E3%82%AD%E3%82%BF%E3%83%8B%E3%82%BF%E3%83%84%E3%83%A4.jpg?raw=true",
            "lrc": ""
        }
    ]
}
{% endaplayerlist %}

Comments in Blog

1
2
3
4
comments:
  use: 
    - Gitalk
# 記得寫這個

參考連結

custom loading page

  1. 此 butterfly 版本沒有 loading.pug, 而是變成 fullpage-loading.pug。
  2. script 也被包在 fullpage-loading.pug。
  3. default 的部分也要記得設定。
  4. layout.pug 要寫成 bash 那樣。
    1
    2
    3
    4
    if theme.preloader.enable
          !=partial('includes/loading/fullpage-loading', {}, {cache: true})
        else
          !=partial('includes/loading/index', {}, {cache: true})
    參考連結

SEO搜索引擎优化

  1. SEO (Search Engine Optimization)，是指搜尋引擎優化。SEO 就是可以提升網站排名的所有方法的總稱，SEO 用於確保網站及其内容在搜尋引擎頁面（SERP）上的可見性。查看部落格，是否被收錄，搜尋以下site: https://yue0211.github.io/，若未被搜尋引擎收錄，则需進行配置。
  2. 輸入以下指令:
    1
    npm install hexo-generator-sitemap --save
  3. 進入 google 搜索控制台，登入部落格網址。
  4. 選擇html文件驗證，將下載文件放在source下。在 _config.yml 中，加入忽略編譯的文件，如下：
    1
    2
    skip_render:
    - googlexxxxxxx.html
    然後 push 到 github，再點擊驗證，需等待一段時間才會成功。
  5. 驗證成功後可將 googlexxxxxxx.html 刪除。
  6. 點擊 google 搜索控制台，左側的 sitemap，加入路徑 : https://yue0211.github.io/sitemap.xml，狀態會是無法擷取。
  7. 設定 _config.yml
    1
    2
    3
    # hexo sitemap (google 搜尋引擎)
    sitemap:
      path: sitemap.xml
  8. 設定 _config.butterfly.yml，設定完後網頁的 head 會多一個 meta google-site-verification
    1
    2
    3
    site_verification:
      - name: google-site-verification
        content: xxxxxxxx  # 需去 google 搜索控制台查詢
  9. 需等待數天才會顯示成功。
    參考連結
    參考連結
    參考連結

Detail Setting in Blog

參考連結

Hexo 常用指令

1
2
3
4
5
6
7
8
hexo clean   # cleans the cache file (db.json) and generated files (public)
hexo g       # generate static files
hexo s       # starts a local server
hexo d       # deplay to github
hexo g -d    # deploy after generation finishes
hexo g -d -m "message"
hexo new <post-title>       # create new post
hexo new page <page-title>  # create new page