Hexo+Github搭建個人博客(二)——配置&主題

title-picture

在上一篇博客Hexo+Github搭建個人博客(一)——開始搭建中介紹瞭如何安裝git、hexo以及將文件推送到github上，相信看到這篇博客的時候你已經有了一個漂亮的博客。這篇博客主要介紹如何發佈文章、在站點配置文件中配置一些個性化的信息，以及更換主題（我現在使用的是Next主題，所以關於主題配置以及之後的集成第三方工具等都是基於Next主題來說的），更換主題後如何集成第三方工具。

發佈新的博客

既然博客已經搭建好了，那麼不發幾篇博文有就沒有意義了，使用下面的命令來新建一篇叫做"brightloong"的文章。

hexo new 'brightloong'

命令執行之後，你會在你文件博客根目錄的source/_post目錄下找到你剛剛新建的md後綴的文件，比如我的是F:\myblog\source_posts\brightloong.md，hexo博客是使用markdown語法來書寫的，如果不熟悉markdown語法可以快速的看一下markdown語法說明，或者是認識與入門Markdown,後者也有推薦一些不同平臺下使用的編輯Markdown的工具，本人使用的是Cmd Markdown，它既支持在線的編輯，也可以下載下來使用。生成的md文件打開如下：

注意：在冒號後面一定要加上一個空格，否則在生成靜態文件的時候會報錯，並且也不能將其成功推送到github。

---
title: brightloong #文章標題
date: 2017-02-24 12:03:12 #創建時間
tags: #文章標籤，如果有多個標籤可以使用[1,2,3]的形式，還有其他形式自己摸索吧
---
#這之後是正文

文章編寫好之後，只用以下命令生成靜態文件並推送到github上，執行完成後打開自己的博客頁面，是不是發現剛剛編寫的文章出現了；如果你想刪除某一篇文章，那麼在source/_post目錄下找到對應的文章將其刪除後，同樣執行一下命令就OK了。

hexo clean
hexo g
hexo d

站點配置文件_config.yml

站點配置文件_config.yml是在你博客保存目錄的根目錄下，注意將它與主題配置文件進行區分，比如我保存的博客目錄爲F:\myblog那麼我站點配置文件爲F:\myblog_config.yml，我使用的主題是Next主題，所以我的主題配置文件爲F:\myblog\themes\next_config.yml。下面我先介紹下站點配置文件，我將一些主要的配置做了註釋，如果你想了解更多的配置的含義和作用，請訪問Hexo官方教程查看。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: BrightLoong's Blog #博客的標題
subtitle: #子標題
description: Remember what should be remembered, and forget what should be forgotten.Alter what is changeable, and accept what is mutable. #博客描述，可以是一段你喜歡的話，也可以是你博客的描述，只要你開心就好。
author: BrightLoong #作者
language: zh-Hans #語言（我使用的是簡體中文）
timezone: #時區（默認使用電腦時間）

##之下的保持默認就好，沒有什麼需要更改的
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' #and root as '/child/'
url: https://brightloong.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source #source目錄
public_dir: public
tag_dir: tags #標籤目錄
archive_dir: archives 
category_dir: categories #分類目錄
code_dir: downloads/code
i18n_dir: :lang
skip_render: static/** #注意這個屬性（跳過渲染），你暫時不用配置，我之後會講到，這個也是我遇到的坑

##之下的保持默認就好，沒有什麼需要更改的
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #你設置的主題，接下來我會說到這個

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/BrightLoong/BrightLoong.github.io.git
  branch: master

主題更換

搭建自己的博客，最吸引人的莫過於那千變萬化的主題了，大家可以在Hexo官網上看到無數漂亮、大方、簡潔的主題。本人使用的是簡潔的Next主題，你可以選擇你喜歡的下載下來，將其解壓放入themes目錄中，比如我的目錄是F:\myblog\themes，然後修改我在上面提到的站點配置文件中的theme屬性，爲你剛剛放入themes目錄中文件的名字（最好是對解壓文件修改一個名字，否則名字可能會比較長，我把我下載下來的主題改文了next）,做完這些之後並不代表你完成了，你還需要參考你所下載的主題所說的配置步驟進行相關的配置，由於不同的主題配置過程也盡不相同，大家根據自己下載的主題去配置，我在這裏只說我使用的Next主題如何配置。

theme: next

注意：從下面開始所說的都是Next主題的相關配置。

配置Next主題

如果你使用的和我一樣，也是Next的主題，那麼你最好還是看官方提供Next使用文檔，並且文檔是中文版的,我也僅僅是講一些容易被忽略的配置，以及我使用的配置，以及在使用過程中遇到的問題;至於如何更換頭像，添加分類和標籤頁面、切換主題樣式（Next主題包含3中樣式）之類的，大家還是照着官方的做更好。

1. 配置網站圖標

如何讓網站前能顯示自己想要的圖標，我當時也是找了很久，最後發現是在主題配置文件（我的是F:\myblog\themes\next_config.yml）的最前面，有一個favicon屬性，我把一個名字叫favicon.ico的圖片放到了F:\myblog\source下，然後配置如下：

favicon: /favicon.ico

website ico

2. 首頁顯示閱讀全文按鈕

首頁的文章是不是默認展開了，顯示出了整篇文章，怎麼才能顯示出如下的閱讀全文的按鈕。

button

在主題配置文件中找到auto_excerpt屬性進行配置

auto_excerpt:
  enable: true #改寫爲true
  length: 150 #默認展示的高度

你也可以在自己的博文中添加來決定在首頁展示到什麼位置（我就喜歡用這種方式），這個標籤後的內容就不會展示到首頁啦。

3. 集成多說評論

登錄多說，登錄後在首頁選擇“我要安裝”。創建站點，填寫表單。多說域名這一欄填寫的即是你的 duoshuo_shortname，如圖：

duoshuo

創建站點完成後在 站點配置文件(我的是F:\myblog_config.yml) 中新增 duoshuo_shortname 字段，值設置成上一步紅框中的值。

注意：新增字段的時候一定不要讓字段前面有空格，否則會被認爲是子字段，無法正確解析

#多說評論
duoshuo_shortname: brightloong #設置爲紅框中的值

多說評論中可以開啓熱評文章，在站點配置文件中增加字段：

duoshuo_hotartical: true

開啓後你可能會發現點擊熱評文章並不能跳轉到對應的網頁，進入多說後臺查看，發現原來網址不正確，那簡單，點擊編輯修改成正確的網址就OK了。

duoshuo_hot

4. 閱讀次數統計

次數統計又leancloud提供，請參考由由Doublemine 貢獻提供的爲Next主題添加閱讀次數統計功能

leancloud

5. 集成百度分享

分享功能的集成是最坑的沒有之一，我大概花了半天多的時間查找各種方法纔將其解決，這裏我先說官網的配置：編輯 站點配置文件，添加字段 baidushare，值爲 true。

baidushare: true #百度分享功能

歡歡喜喜的打開自己的博客。咦！百度分享功能咋沒有添加上啊。不急，聽我慢道來。我在主題文件中發現一個文件
F:\myblog\themes\next\layout_partials\share\baidushare.swing，內容如下

{% if theme.baidushare.type === "button" %}
  <div class="bdsharebuttonbox">
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度貼吧"></a>
    <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
    <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a class="bds_count" data-cmd="count"></a>
  </div>
  <script>
    window._bd_share_config = {
      "common": {
        "bdText": "",
        "bdMini": "2",
        "bdMiniList": false,
        "bdPic": ""
      },
      "share": {
        "bdSize": "16",
        "bdStyle": "0"
      },
      "image": {
        "viewList": ["tsina", "douban", "sqq", "qzone", "weixin", "twi", "fbook"],
        "viewText": "分享到：",
        "viewSize": "16"
      }
    }
  </script>
{% elseif theme.baidushare.type === "slide" %}
  <script>
    window._bd_share_config = {
      "common": {
        "bdText": "",
        "bdMini": "1",
        "bdMiniList": false,
        "bdPic": ""
      },
      "image": {
        "viewList": ["tsina", "douban", "sqq", "qzone", "weixin", "twi", "fbook"],
        "viewText": "分享到：",
        "viewSize": "16"
      },
      "slide": {
        "bdImg": "5",
        "bdPos": "left",
        "bdTop": "100"
      }
    }
  </script>
{% endif %}
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];</script>

注意到最開始的語句了嗎if theme.baidushare.type === "button"，以及之後的else if theme.baidushare.type === "slide"什麼意思，在theme下也就是主題配置文件中，baidushare字段下的type字段，我們打開主題配置文件(我的是F:\myblog\themes\next_config.yml)，這個配置是不是被註釋掉了：

baidushare: 
  type: button #百度分享展示的方式button|slide

修改之後，再啓動，發現還是沒有（如果你是用的本地啓動用local的方式訪問可能會看到百度分享功能已經出現了），這個是後打開瀏覽器F12的調試功能，是不是發現控制檯報錯了，提示你從https中去訪問http的資源是不行的。不知道大家有沒有看到剛剛我們修改的主題配置文件中，在上面有一段註釋：

# Warning: Baidu Share does not support https.百度分享不支持https
baidushare: 
  type: button

是的不支持https的方式，自己的域名是用https開頭的（除非你自己購買了域名，如何購買更換域名請大家參考【Hexo+Github】域名和github綁定的問題）。並且，JiaThis等都不支持https，怎麼辦？我將在下一篇博客中單獨介紹我在搭建博客中遇到的最大的坑，百度分享如何在https下使用。

Hexo+Github搭建個人博客(二)——配置&主題

發佈新的博客

站點配置文件_config.yml

主題更換

配置Next主題

1. 配置網站圖標

2. 首頁顯示閱讀全文按鈕

3. 集成多說評論

4. 閱讀次數統計

5. 集成百度分享

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

【Python】保存gym截圖

【譯】使用 GitHub Copilot 作爲你的編碼 GPS

Linux 服務器配置-安裝portainer-ce社區版

外行也能讀懂的網絡硬件設備功能原理速成

安裝Auto-GPT

Hexo+Github搭建個人博客(一)——開始搭建

Hexo+Github搭建個人博客(二)——配置&主題

關於jeecms日期控件格式顯示問題

Java同步器——AQS學習

SSM整合&單元測試集成備忘

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結