使用Hexo開源博客系統，輕鬆搭建你的個人博客（2）- 配置篇

来源:https://www.cnblogs.com/codernice/archive/2019/09/27/11599105.html
-Advertisement-
Play Games

上一章節，我們介紹了Hexo的基礎搭建，搭建完大家一定發現，是英文版本的，並且頁面有點醜陋。這一章節，就來跟大家介紹Hexo的配置和主題的設置。 站點信息 上一章有跟大家提到過_config.yml這個文件，這個我們先稱之為站點全局的配置文件，後續我們說到主題的時候，也會有一個這樣的文件，暫時稱它主 ...


上一章節，我們介紹了Hexo的基礎搭建，搭建完大家一定發現，是英文版本的，並且頁面有點醜陋。這一章節，就來跟大家介紹Hexo的配置和主題的設置。

站點信息

上一章有跟大家提到過_config.yml這個文件，這個我們先稱之為站點全局的配置文件，後續我們說到主題的時候，也會有一個這樣的文件，暫時稱它主題配置文件。
我們先來看一下全局配置文件主要有哪些內容：

# Site 站點主配置
title: Hexo  # 網站標題
subtitle:    # 網站副標題
description:   # 網站描述
keywords:      # 可以不填寫保持預設
author: John Doe  # 網站擁有者昵稱
language:    # 網站語言設置，一般根據依賴的主題而定
timezone:    # 網站時區設置，一般不填寫保持預設

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url:   # 網站url設置
root:  # 網站根目錄鏈接
permalink: :year/:month/:title.html  # 文章鏈接，預設是按照 /年/月/日/文章標題 設置的鏈接
permalink_defaults:  # 預設鏈接形式
......
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:  #主題

這些可根據需要設置，其餘預設即可，git配置和站點地圖配置後續用到再介紹。
信息配置完記得執行hexo g && hexo s，刷新瀏覽器查看效果。

安裝Next主題

主題大家可以在官網下載（https://hexo.io/themes）也可以到GitHub搜索，我推薦使用Next主題，該主題幾乎占領了Hexo博客的半壁江山。
Next主題下載地址：https://github.com/theme-next/hexo-theme-next.git
這邊介紹的版本是Next6，在Next6版本上其實增加了很多Next5需要手動配置的東西，並且Next5已經停止維護了，所以建議使用Next6版本。

下載Next主題

兩種方式：
1.使用git clone命令將Next倉庫克隆到hexo目錄下的themes/next，需要在根目錄下執行，命令為：git clone https://github.com/theme-next/hexo-theme-next.git themes/next
2.直接在Github頁面上選擇綠色的按鈕Clone or Download下載壓縮包，然後解壓到themes目錄下，名字可自行修改。

設置為Next主題

打開全局配置文件_config.yml，找到theme，設置如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next   #此處填入你在themes目錄下的next主題目錄名

測試Next主題

在Git Bash中執行如下命令：

hexo clean && hexo g && hexo s

命令執行完成後在瀏覽器中輸入http://localhost:4000即可查看安裝好的Next主題。

配置Next主題

在主題目錄下麵，也有一個_config.yml的配置文件，我們就叫它主題配置文件，下麵我們開始配置。

網站圖標設置

打開_config.yml，找到favicon的位置，如下所示：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

將圖片放到你的next主題下麵的source/images目錄下麵，然後在主題配置文件中設置即可。

關閉底部由hexo強力驅動

在footer中，將powered和theme下的屬性全部設置為false

footer:
  ...
  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

菜單欄設置

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  enable: true  #表示是否顯示菜單圖標icons
  badges: false  # 顯示每個菜單下麵有多少個內容

||後面是fontawesome中的圖標名稱，如果想要修改圖標，可以去FontAwesome官網找自己喜歡的圖標樣式。

主題風格設置

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

預設是Muse，我是使用Gemini，大家可以每個都試看看，看喜歡哪個。

社交鏈接設置

social:
  GitHub: https://github.com/codernice || github
  #E-Mail: mailto:[email protected] || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

yourname改成你自己在對應網站的ID，前面的#註釋去掉即可。

友情鏈接設置

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  #Title: http://example.com

#Title: http://example.com換成對於網站名稱和鏈接即可

開啟閱讀更多按鈕

auto_excerpt:
  enable: true
  length: 150

預設是false，首頁上會顯示整篇文章，設置為true開啟閱讀更多按鈕。

文章元數據設置

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

顯示在home頁的文章創建於、更新於、閱讀次數之類的數據

文章字數統計設置

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

該設置必須要添加hexo-symbols-count-time模塊依賴，在hexo站點根目錄下使用npm install hexo-symbols-count-time --save命令安裝模塊。

側邊欄頭像設置

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: 你的頭像地址
  # If true, the avatar would be dispalyed in circle.
  rounded: true # 設置頭像是否為圓形
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1 # 設置不透明度，1為完全不透明，0為完全透明
  # If true, the avatar would be rotated with the cursor.
  rotated: true # 設置滑鼠放到頭像上是否旋轉

代碼塊設置

codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius: 7   # 按鈕圓滑度
  # Add copy button on codeblock
  copy_button:
    enable: true # 設置是否開啟代碼塊複製按鈕
    # Show text copy result
    show_result: true # 是否顯示覆製成功信息

開啟文章打賞按鈕

# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
  enable: true #開啟打賞功能
  animation: false
  #comment: Donate comment here

reward:
  wechatpay: # 微信收款圖片地址
  alipay: # 支付寶收款圖片地址
  #bitcoin: /images/bitcoin.png

開啟相關文章推薦功能

related_posts:
  enable: true #開啟
  title: # custom header, leave empty to use the default one
  display_in_home: false #顯示在首頁
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

需要安裝hexo-related-popular-posts模塊，在hexo站點根目錄下執行npm install hexo-related-popular-posts --save安裝模塊。

代碼塊風格設置

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

有normal 、night 、 night eighties 、 night blue 、night bright這幾種風格，大家可以都試看看。

添加valine評論系統

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
  enable: true # 開啟valine評論
  appid: # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder:  # comment box placeholder
  avatar: monsterid # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  language: # language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

valine是第三方插件，需要到https://leancloud.cn註冊賬號，獲取到appid和appkey後放到這裡即可。avatar是設置預設頭像，可以到https://valine.js.org/avatar選擇預設頭像，然後在這裡設置名字即可。

開啟百度分享

# Baidu Share
# Available values: button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button  # 設置分享按鈕的風格，有button何slide形式

開啟needmoreshare分享

needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

needmoreshare2依賴theme-next-needmoreshare2模塊，要開啟的朋友可以到https://github.com/theme-next/theme-next-needmoreshare2找到方法。

設置文章閱讀量

leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: false
  betterPerformance: true

appid和appkey跟上面開啟valine評論使用的leanCloud是一樣的。如果發現文章閱讀量不顯示，可以到leanCloud後臺的存儲菜單下，創建Class，命名為Counter.

開啟不蒜子統計功能

busuanzi_count:
  enable: true
  total_visitors: true #開啟總訪客（uv）
  total_visitors_icon: user
  total_views: true #開啟總訪問數（pv）
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

這邊的post_views和上面的leanCloud_visitors衝突，兩者都是顯示文章閱讀量，只開啟一個就可以了。

開啟本地博客搜索功能

local_search:
  enable: false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # 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

該功能依賴hexo-generator-searchdb插件，使用命令npm install hexo-generator-searchdb --save來進行安裝，然後在全局配置文件的末尾，加入以下代碼即可。

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

總結

以上就是hexo博客常用的基本配置以及基於Next主題的一些設置，更多功能大家可在使用中逐摸索，歡迎討論交流。

需要安裝的模塊依賴

1.字數統計：npm install hexo-symbols-count-time --save
2.相關文章推薦：npm install hexo-related-popular-posts --save
3.本地博客搜索功能：npm install hexo-generator-searchdb --save，然後在全局配置文件末尾加入代碼

第三方插件

1.valine評論系統：需要到https://leancloud.cn註冊賬號，獲取到appid和appkey
2.文章閱讀量：同樣需要用到leancloud的appid和appkey


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql57重新安裝後無法再次啟動mysql57服務“本地電腦上的MySQL服務啟動後停止。某些服務在未由其他服務或程式使用時將自動。”--解決方法
    本地電腦上的MySQL服務啟動後停止。某些服務在未由其他服務或程式使用時將自動。 （win10,mysql5.7+） 解決方法： 第一步：查看MySQL57安裝路徑 只要在programData路徑下有data文件就沒問題；正常安裝的都會有data目錄的 ， data目錄是在MySQL數據存儲路徑 ...
  • MySQL學習——操作視圖
    MySQL學習——操作視圖 摘要：本文主要學習了使用DDL語句操作視圖的方法。 瞭解視圖 是什麼 視圖是從一個、多個表或者視圖中導出的表，包含一系列帶有名稱的數據列和若幹條數據行。 特點 視圖不是資料庫中真實的表，而是一張虛擬表，其結構和數據是建立在對數據中真實表的查詢基礎上的。 視圖是查看數據表的 ...
  • oracle基礎語法
    ORACLE支持五種類型的完整性約束NOT NULL (非空)--防止NULL值進入指定的列,在單列基礎上定義,預設情況下,ORACLE允許在任何列中有NULL值.CHECK (檢查)--檢查在約束中指定的條件是否得到了滿足.UNIQUE (唯一)--保證在指定的列中沒有重覆值.在該表中每一個值或者 ...
  • 鬆軟科技web課堂:SQLServer之NOW() 函數
    NOW() 函數 NOW 函數返回當前的日期和時間。 提示：如果您在使用 Sql Server 資料庫，請使用 getdate() 函數來獲得當前的日期時間。 SQL NOW() 語法 SQL NOW() 實例 我們擁有下麵這個 "Products" 表： Prod_IdProductNameUni ...
  • 我想要送你資料 @程式猿 測試媛
    24日上午 ​ 朋友圈都在跟微信官方要國旗！ 一瞬間刷了屏 後來朋友圈又變成了許願池 紛紛喊話 請給我一頓吃不胖的午餐 @微信官方 請讓我變白 @微信官方 請給我一個億 @中國人民銀行 請給我一座別墅 @萬科地產 可是喊完話並沒有出現 重點來了！！！ 我的福利來了！！！ 現在立即打開微信，按掃一掃下 ...
  • iOS編譯自動升級版本號腳本
    版權申明： 本文原創首發於以下網站，您可以自由轉載，但必須加入完整的版權聲明 博客園MogooStudio： csdn博客MogooStudio： 使用方法 Shell代碼設置到xcode運行腳本里 在每次成功構建後版本號會改變 Shell代碼 我的聯繫方式： QQ：2161044579 郵箱：mo ...
  • MAC安裝Flutter
    系統環境要求 Flutter因為是新出的框架，所以對系統還是有一定的要求的。 MacOS（64 bit） 磁碟空間：大於700M，如果算上Android Studio等編輯工具，儘量大於3G。 命令號工具：bash、mkdir、rm、git、curl、unzip、which、brew 這些命令在都可 ...
  • jQuery中$()可以有兩個參數
    jQuery(expression, [context]) 返回值:jQuery 概述 這個函數接收一個包含 CSS 選擇器的字元串，然後用這個字元串去匹配一組元素。 jQuery 的核心功能都是通過這個函數實現的。 jQuery中的一切都基於這個函數，或者說都是在以某種方式使用這個函數。這個函數最 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類