hexo 實戰：（二）個人獨立部落格豪華裝修合集

前言

上次介紹了使用 Hexo+GitHub Pages，零成本搭建一個專屬自己的獨立部落格網站。我覺得那篇文章是沒有入門門檻的，不管你是什麼行業，只要想打造個人 IP，又不太想受部落格平臺約束，那麼讀完後動手操作一下也能輕鬆完成。而這次呢，上篇也說了 Hexo 會出三篇內容，這裡就要在前者基礎上做進一步升級，將完成下面七個主要的部落格常用功能。

指標

• Hexo 如何安裝 Butterfly 主題並配置？
• Hexo 如何建立頁面和新增文章？
• Hexo 如何新增第三方評論系統？
• Butterfly 主題如何新增站內搜尋？
• Butterfly 主題如何新增百度統計？
• Butterfly 主題如何新增文章置頂功能？
• Butterfly 主題如何配置 RSS 和 404 頁面？
• 如何配合 Typora 完成 md 的同步與本地備份？

主題新增與配置

Hexo 官網專門有一個欄目的主題列表，這裡我選的 “butterfly”，首先拉取主題程式碼到 themes 目錄下，然後在 Hexo 的配置中啟動主題。

拉取主題包

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

啟動主題

theme: butterfly

基礎配置

基礎配置主要是設定網站的標題、描述、SEO、選單等項，下面我就列出 hexo 的 config（根目錄下_config.yml），和主題 Butterfly 的 config（themes 的 Butterfly 下_config.yml），並註釋相關項的簡介僅供參考。

hexo_config.yml

title: ZERO開發                           #網站標題
subtitle: 一個獨立開發者的部落格               #網站副標題
description: 公眾號：ZERO開發               #網站描述
keywords: 技術部落格、獨立開發者、PHP開發、Pthon開發、人工智慧、物聯網、遊戲開發
author: 北橋蘇              #您的名字
language: zh-CN            #網站使用的語言
timezone:                   #網站時區。Hexo 預設使用您電腦的時區

# URL 網址
## 如果您的網站存放在子目錄中，
## 例如 http://yoursite.com/blog，則請將您的 url 
## 設為 http://yoursite.com/blog 並把 root 設為 /blog/。
url: http://z11r00.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 目錄配置
source_dir: source       #原始檔夾，這個資料夾用來存放內容。
public_dir: public       #公共資料夾，這個資料夾用於存放生成的站點檔案。
tag_dir: tags            #標籤資料夾
archive_dir: archives    #歸檔資料夾
category_dir: categories #分類資料夾
code_dir: downloads/code #nclude code 資料夾
i18n_dir: :lang          #國際化（i18n）資料夾
skip_render:             #跳過指定檔案的渲染，您可使用 glob 表示式來匹配路徑。

# Writing 文章
new_post_name: :title.md # 新建文章預設檔名
default_layout: post     # 預設佈局
titlecase: false # Transform title into titlecase
external_link: true # 在新標籤中開啟一個外部連結，預設為true
filename_case: 0    #轉換檔名，1代表小寫；2代表大寫；預設為0，意思就是建立文章的時候，是否自動幫你轉換檔名，預設就行，意義不大。
render_drafts: false  #是否渲染_drafts目錄下的文章，預設為false
post_asset_folder: false #啟動 Asset 資料夾
relative_link: false    #把連結改為與根目錄的相對位址，預設false
future: true        #顯示未來的文章，預設false
syntax_highlighter: highlight.js
highlight:    #程式碼塊的設定
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Category & Tag 分類和標籤的設定
default_category: uncategorized        #預設分類
category_map:                          #分類別名
tag_map:                               #標籤別名

# 全域性日期格式化
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
pagination_dir: page    #分頁目錄

## 外掛index，用於顯示分頁和排序配置
index_generator:
  path: ''
  per_page: 5    # 0.關閉分頁功能  >0.每頁條數
  order_by:
    top: -1        # 置頂排序： -1.倒序 1.正序
    date: -1    # 日期排序： -1.倒序 1.正序

# 主題啟動配置
theme: butterfly

# Deployment github部署配置
deploy:
  type: git
  repository: https://github.com/z11r00/z11r00.github.io
  branch: main
  
##hexo-generator-search搜尋外掛配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
## rss配置
feed:
  type: atom
  path: atom.xml
  limit: 20

## rss位置
rss: /atom.xml

hexo_butterfly_config.yml

nav:
  logo: /img/logo.png  # 導航欄左側LOGO
  display_title: true
  fixed: true # 是否置頂導航欄

## 選單圖示配置
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

# Menu 選單跳轉配置
menu:
  首頁: / || fas fa-home
  時間軸: /archives/ || fas fa-archive
  標籤: /tags/ || fas fa-tags
  分類: /categories/ || fas fa-folder-open
  #清單||fa fa-heartbeat:
    #音樂: /music/ || fas fa-music
    #照片: /Gallery/ || fas fa-images
    #電影: /movies/ || fas fa-video
  友鏈: /link/ || fas fa-link
  關於: /about/ || fas fa-heart

# Code Blocks (程式碼相關)
# --------------------------------------
highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false   # 程式碼是否自動換行

# Social Settings (社交圖示設定)
social:
  fab fa-github: https://github.com/z11r00 || Github || '#24292e'
  fas fa-envelope: 2652364582@qq.com || Email || '#4a7dbe'
  fas fa-rss: /atom.xml || RSS
  

# Image (圖片設定)
# --------------------------------------

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

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

# 是否禁用所有跳轉頁的頂部圖片
disable_top_img: true

# 首頁圖
index_img: /img/index_img.jpg

# 所有頁面的預設頂部圖
default_top_img: /img/default_top_img.jpeg

# 歸檔（時間線）頁面頂部圖
archive_img: /img/archive_img.jpg

# 標籤頁面頂部圖
tag_img:

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# 分類頁面頂部圖
category_img:

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

## 封面配置
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
  (當沒有設定cover時，預設的封面顯示)
  default_cover:
    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# 404 頁面配置
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/404.jpg

## 文章配置
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是建立日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是建立日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

# 錨點配置
anchor:
  # when you scroll, the URL will update according to header id.
  auto_update: false
  # Click the headline to scroll and update the anchor
  click_to_scroll: false

# figcaption (圖片描述文字)
photofigcaption: false

# 複製功能的配置
# copyright: Add the copyright information after copied content (複製的內容後面加上版權資訊)
copy:
  enable: true      # 是否開啟網站複製許可權
  copyright:
    enable: false   # 是否開啟複製版權資訊新增
    limit_count: 50 # 字數限制，當複製文字大於這個字數限制時，將在複製的內容後面加上版權資訊

# Post
# --------------------------------------

# toc (文章的目錄配置)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false 
  scroll_percent: true

# 文章版權設定
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# Sponsor/reward 文章打賞
reward:
  enable: true
  text: 打賞一下~
  QR_code:
    - img: /img/qrcode/wechat_trade.jpg
      link:
      text: 微信
    - img: /img/qrcode/alipay_trade.jpg
      link:
      text: 支付寶

# 文章編輯器配置
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 文章推薦配置
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示建立日或者更新日

# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 500 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

# Footer Settings（頁尾設定）
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2017
  custom_text: Copyright© ZERO開發-獨立開發者的日常總結<br/><a href="https://beian.miit.gov.cn/" target="_blank">贛ICP備16002525號-1</a>
  # copyright: true # Copyright of theme and framework
  copyright: false
  

# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fas fa-video
      text: 關注我
      link: https://space.bilibili.com/286666708/
  card_announcement:
    enable: true
    content: 微信公眾號：ZERO開發，致力於為猿友們提供有價值的內容
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  card_post_series:
    enable: true
    series_title: false # The title shows the series name
    orderBy: 'date' # Order by title or date
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁執行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date:

# Aside widget - 最新評論
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

# Bottom right button (右下角按鈕)
# --------------------------------------

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: false
  # The text of a button
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '簡'

# Read Mode (閲讀模式)
readmode: true

# Local search (hexo-generator-search建立搜尋)
local_search:
  enable: true
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  CDN:

# Docsearch
docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

# Share System (分享)
# --------------------------------------
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true
  sites: weibo,wechat,qq,facebook,twitter

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# Comments System （評論系統）
# --------------------------------------
# 評論配置
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/Remark42/Artalk
  use: gitalk # Valine,Disqus
  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: true
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

# disqus
# https://disqus.com/
disqus:
  shortname:
  apikey: # For newest comments widget

# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，相容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname:
  apikey:
  option:

# livere (來必力)
# https://www.livere.com/
livere:
  uid:

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: Ov23…………1C6fM
  client_secret: 4304…………44433f77352
  repo: z11r00.github.io
  owner: z11r00
  admin: z11r00
  option:

# Analysis （第三方統計配置）
# --------------------------------------

# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics: 74270…………………………………………

# Advertisement
# --------------------------------------

# Google Adsense (谷歌廣告)
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true

# Verification (站長驗證)
# --------------------------------------

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

建立選單頁面

頁面包括標籤頁（tags）、分類頁（categories）、友鏈頁（link）、關於頁（about），當然也可以自行新增，比如音樂電影之類。不過新增這種頁面方式都大同小異，以下以標籤頁舉例。

執行命令

hexo new page tags

編輯 MD

執行命令後，會在 source 下根據 butterfly 模板生成對應的 md 檔案，tags 就是 tags，不過要將 md 檔案的 type 修改為對應的型別，型別見上。

title: 標籤頁 date: 2024-05-02 21:01:24 type: "tags"

Page（頁面）front-matter

title: 頁面名稱
date:  建立日期
type: （tags,link,categories這三個頁面需要配置）
comments: (是否需要顯示評論，預設true)
description: 用於SEO最佳化
top_img: (設定頂部圖)
mathjax: (數學公式顯示是否支援)
katex:   (Tex公式顯示是否支援)

建立文章

寫文章，可以透過命令建立，也可以在 source/_posts 目錄下，自行新建 markedown 檔案，因為命令也是在_posts 資料夾下新建。

執行命令

hexo new "文章的大標題"

Post（文章）front-matter

title: CentOS7下Tomcat啟動慢的原因及解決方案
date: 2017-12-02 21:01:24
description：文章描述，用於做SEO最佳化的
keywords: 文章SEO關鍵詞
top_img: 文章頂部圖
cover: 文章縮圖（封面圖）
toc: true (是否顯示文章目錄)
toc_number: true (是否顯示文章目錄的標識數字)
copyright: true (是否顯示版權)
mathjax: (數學公式顯示是否支援)
katex:   (Tex公式顯示是否支援)
hide: false (是否隱藏當前文章)
comments: true #是否可評論
toc: true #是否顯示文章目錄
categories: "雲伺服器" #分類
tags:   #標籤
 - centOS
 - tomcat

站內搜尋新增

站內搜尋，我是採用的 hexo-generator-search 外掛解決方案，安裝完外掛，然後配置一下，最後用 hexo 清理再生成一下全站靜態，同時在根目錄也會生成一個 search.xml，用於做字串模糊匹配的。

外掛安裝

npm install hexo-generator-search --save

新增或配置

-config（hexo配置）

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

-butterfly-config（butterfly主題配置）

local_search:
  enable: true
  preload: false
  CDN:

清理與生成

hexo clean && hexo g

評論系統新增

第三方評論系統我這裡使用的是 Gitalk ，Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論外掛。使用 GitHub 登陸，能支援多國語言，至於他的原理，其他博主有介紹。這裡就不展開了，如果有時間以後可能會整體介紹一下常用的第三方評論系統，因為我還是希望評論能支援多種方式登陸的，目前沒有找到合適的就先選擇 Gitalk。

註冊應用賬號

獲取引數

註冊成功後拿到 “Client ID” 和 “Client secrets”（點選生成再複製），其中注意的是 Homepage URL 要設定為 使用者名稱.github.io 精確到 https 的地址。Authorization callback URL 填寫註冊的域名，如果繫結了個性化域名就填自己的域名，也是要精確到 https 的位置。

修改 Butterfly 配置

開啟 butterfly 主題的配置檔案，第一個找到 “gitalk” 項，將上面複製的 client id 和 client secrets 貼上。

第二個找到 “comments”，將 use 配置為 "gitalk"，當然也可以用 valine、Disqus 之類的第三方評論系統。

comments:
  use: # 使用的第三方評論系統名稱
  text: true # 是否在按鈕旁顯示評論名稱
  # If you set it to true, the comment count will be invalid
  lazyload: false # 是否設定評論窗為懶載入
  count: true # 是否設定評論數統計
  card_post_count: true # 是否將評論數顯示到首頁
  
gitalk:
  client_id: # github應用ID
  client_secret: # github應用金鑰
  repo: 使用者名稱.github.io
  owner: 使用者名稱
  admin: 使用者名稱

部落格倉庫設定

進入倉庫，點選 “Settings”，找到 “Features”， 將 “Issues” 勾選。

文章置頂功能新增

開啟 hexo 配置檔案 _config.yml，如果前面有 per_page 的關閉，使用的是 hexo-generator-index 外掛排序，可以自定義序號和日期排序。

如何要置頂文章，只需在文章 md 的 front-matter 裡新增一個 top 引數，數值自定。文章列表會出現一個釘子圖示，要看到效果則要 hexo 先清理再生成。

新增配置

index_generator:
  path: ''
  per_page: 5  # 每頁條數
  order_by:	   
    top: -1	   # 置頂： -1.倒序 1.順序
    date: -1   # 日期： -1.倒序 1.順序

md 文章設定

清理與生成

hexo clean && hexo g

RSS 配置

對於 RSS 輸出功能，需要安裝 hexo-generator-feed 外掛。最後使用 hexo 清理再生成，部落格根目錄就會生成 atom.xml

外掛安裝

npm install hexo-generator-feed --save

新增配置

feed:
  type: atom
  path: atom.xml
  limit: 20

設定 RSS 地址

rss: /atom.xml

設定 404 頁面

在 hexo 的_config.yml 找到或新增 error_404，設定開啟，分別新增標題和背景圖。

error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/404.jpg

　　

新增百度統計

先登陸或註冊百度統計平臺，找到 “使用設定” -> “程式碼獲取” -> “新版統計程式碼獲取”，然後會看到一段 js 程式碼，只需要複製如下的一個 32 位長度的字串。最後將該字串貼上到 butterfly 的 config.yml 中的 baidu_analytics 中，部署後一天就可以在後臺檢視統計報表了。

MarketDown 用法

關於新建的文章，我希望本地能備份一份，有 md 檔案和圖片，方便上傳到其他平臺部落格。那要怎麼做呢，這裡我用一個免費的 md 工具 ——Typora 為例。

建立檔案和資料夾

建立一個以文章標題的資料夾，裡面再分別建立一 img 資料夾和同文章標題的 md 檔案，img 下再建立一個與文章標題同名的資料夾。

Typora 設定

依次找到 “檔案” -> “偏好設定” -> "影像" , 將插入圖片時的下拉選中 “複製到指定路徑”，填入下面的值。

./img/${filename}/

第二步找到 “格式” -> "影像" -> “設定圖片根目錄”，選擇 markdown 檔案同級的目錄，最後複製圖片時就會複製到 img 下的文章同名目錄下。

為什麼要這樣設定？因為 Hexo 的圖片在打包前都是在主題包 /source/img 裡，而為了方便本地能按文章儲存，也方便將本地的文章圖片直接丟到 img 下，然後 md 檔案放到_post 中。打包之後就能以倉庫圖片展示，而且按文章分類儲存，以後刪除起來也一目瞭然。

寫在最後

這次的最佳化看起來好像是面面俱到了，但其實關於 Hexo 主題還有更細節的處理。比如可以新增部落格看板精靈，酷炫的動態大背景，還有滑鼠跟隨或點選特效等等。但是我這部落格目前定位主要以內容為主，所以暫時就就演示了，當然，如果有使用者喜歡也可以馬上加上去的。

最後呢，就是三部曲的第二篇結束了，那下次就自然地要開始進入 Hexo 章最後一篇。現在是計劃介紹一下怎麼讓部落格被各大搜尋引擎收錄，以及一些推廣心得等等。具體的詳細內容未定，更新時間也還不知道，因為在等我那個小遊戲的軟著下來，下來後我一定要好好寫一篇軟著申請避坑的文章，可實在是太難等了！

（我是一個持續摸索個人副業的普通程式設計師，關注我，和你一起探索更多可能。——ZERO 開發）