Hexo+Github搭建個人部落格(二)——配置&主題

在上一篇部落格 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
複制代碼

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

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

在主題配置檔案中找到 auto_excerpt屬性進行配置

auto_excerpt:
  enable: true #改寫為true
  length: 150 #預設展示的高度
複制代碼

你也可以在自己的博文中添加***

<!--more-->

***來決定在首頁展示到什麼位置（我就喜歡用這種方式），這個标簽後的内容就不會展示到首頁啦。

3. 內建多說評論

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

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

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

#多說評論
duoshuo_shortname: brightloong #設定為紅框中的值
複制代碼

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

duoshuo_hotartical: true
複制代碼

開啟後你可能會發現點選熱評文章并不能跳轉到對應的網頁，進入多說背景檢視，發現原來網址不正确，那簡單，點選編輯修改成正确的網址就OK了。

4. 閱讀次數統計

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

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下使用。

轉載于:https://juejin.im/post/5add8ea36fb9a07acb3c7a26

Hexo+Github搭建個人部落格(二)——配置&主題

釋出新的部落格

站點配置檔案_config.yml

主題更換

配置Next主題

1. 配置網站圖示

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

3. 內建多說評論

4. 閱讀次數統計

5. 內建百度分享

繼續閱讀

吳恩達j機器學習之過拟合

吳恩達機器學習(一) 介紹

阿裡巴巴Double分布式服務架構

深度學習模型分析人類複雜疾病的準确性

疾病研究：重症肌無力

人工智能如何有效地運用于自然語言處理

[Linux] diff 查找檔案的異同

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

IDEA以http形式clone代碼連接配接逾時

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

2021-2025年中國運動療法（KT）帶行業市場供需與戰略研究報告

2021年危險化學品經營機關安全管理人員考試題庫及危險化學品經營機關安全管理人員考試技巧

最小化DevOps自動化流程(Golang)

無人機--飛控科普

Git學習筆記5 merge沖突時二選一

vue-cli簡介（中文翻譯）

Hexo+Github搭建個人部落格(二)——配置&amp;主題

釋出新的部落格

站點配置檔案_config.yml

主題更換

配置Next主題

1. 配置網站圖示

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

3. 內建多說評論

4. 閱讀次數統計

5. 內建百度分享

繼續閱讀

Hexo+Github搭建個人部落格(二)——配置&主題