Hexo設定主題以及Next主題個性設定

hydCoder發表於2017-12-13
Hexo

1、前言

上篇文章已經在Windows上將個人部落格個搭建好了(如果還不知道怎麼搭建的，可以戳這裡，可是大家有沒有發現，搭建的Hexo部落格使用的是預設主題，而且不咋好看，跟那些大神們的個人部落格相比，還差了很多，不過不要緊，看完這篇文章，你也可以擁有那些炫酷吊炸天的效果。廢話少說，那就直接開始吧。

2、設定主題

Hexo給我們提供了很多的主題供我們選擇，你可以在更多主題裡選擇一款你喜歡的，我選來選去選了一個比較經典的Next主題，你想看下效果的話可以戳這裡。下面就已設定Next主題為例來看看怎麼安裝和設定主題。

2.1、安裝主題

首先你需要開啟你上次生成的Hexo目錄，然後右鍵開啟Git Bash here,輸入：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼

如果你選擇的是別的主題的話，只需要把URL換一下，和themes/next換成themes/你的主題名稱 (themes/next是安裝目錄，themes/next代表安裝在你的Hexo目錄下的themes目錄下的next資料夾下)

2.2、設定主題

這樣就安裝完了，不過不要以為這樣就可以了哦，我們還需要啟用Next主題，所以需要到站點配置檔案裡去設定一把，找到 theme 欄位，並將其值更改為 next。

theme: next
複製程式碼

說明：在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。為了描述方便，所以一般在描述的時候，將前者稱為 站點配置檔案， 後者稱為 主題配置檔案。

2.3、驗證主題

設定完了，沒有看到效果總是不放心對不對，那就先在本地預覽一下吧。 先輸入

hexo clean
複製程式碼

清除下 Hexo 的快取。然後再輸入

hexo g && hexo s
複製程式碼

接著你就可以開啟http://localhost:4000/驗證效果了。是不是已經有效果了？

到此為止，你已經成功安裝並啟用了 NexT 主題。

3、修改Hexo 站點配置檔案

我們找到上次生成的Hexo目錄，找到站點配置檔案_config.yml，可以用notepad++或者sublime Text開啟(上次部署到Github上的時候，已經改過這個檔案的，還記得嗎？)。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 網站
title: hydcoder's blog   #網站標題
subtitle: 愛好遊戲的碼農   #網站副標題
description: 以夢為馬，明日天涯。。。  #網站描述
author: hydcoder   #博主的名字
language: zh-Hans  #網站使用的語言
timezone:      #網站時區。Hexo 預設使用您電腦的時區

# 側邊欄頭像設定
avatar: http://q1.qlogo.cn/g?b=qq&nk=493654134&s=5
複製程式碼

先對網站的一些設定進行設定，至於其他的設定，等說到再貼。(因為整個檔案確實有點長。。。)

4、Hexo 主題配置檔案

其實這個檔案的配置才是重點，因為你們想要的吊炸天的效果差不多都與這個檔案有關。 開啟Hexo目錄/themes/next/_config.yml檔案,

4.1、開啟側邊欄社交連結

# Social links
social:
  GitHub: https://github.com/hydcoder
  Weibo: https://weibo.com/3180967953/profile?rightmod=1&wvr=6&mod=personinfo
  # 等等

social_icons:
  enable: true
  # Icon Mappings.
  GitHub: github
  Weibo: weibo
複製程式碼

反正我就只設定了這兩個，你們有多少可以設定多少哈。。。

4.2、開啟打賞功能

reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: 你的微信收款碼連結
alipay: 你的支付寶收款碼連結
複製程式碼

4.3、開啟友情連結

links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/
複製程式碼

4.4、開啟訂閱微信公眾號

wechat_subscriber:
enabled: true
qcode: /uploads/wechat-qcode.jpg
description: 歡迎您掃一掃上面的微信公眾號，訂閱我的部落格！
複製程式碼

4.5、選擇 Scheme

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製程式碼

更多請參考next主題文件

5、設定側邊欄設定圓形可旋轉頭像

找到生成的Hexo目錄\themes\next\source\css_common\components\sidebar下的sidebar-author.styl，將裡面的css樣式內容全部替換為：

.site-author-image {
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  transition: 1.4s all;
}

.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}
複製程式碼

6、設定首頁不顯示全文(只顯示預覽)

開啟主題配置檔案_config.yml，ctrl + F搜尋找到"auto_excerpt"，可以看見

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
複製程式碼

把enable改為對應的false改為true，length就是預覽顯示的文字長度，你可以根據你的需要進行更改，然後重新部署，再進主頁，你就發現你首頁的文章多了一個閱讀全文的按鈕。

7、新增動態背景

先上張圖

網站動態背景

記得第一次在別人的部落格裡看到這個動態背景的時候覺得好好玩，當時覺得自己可以玩一天，哈哈。。。現在你只需要稍微設定一下，你的部落格也能馬上擁有這個效果咯。

開啟生成的Hexo目錄\themes\next/layout/_layout.swig檔案， 在 < /body>上面新增程式碼(注意不要放在< /head>的後面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
複製程式碼

開啟主題配置檔案，在裡面新增如下程式碼：(可以放在最後面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
複製程式碼

就這麼簡單，再執行 hexo clean，然後執行 hexo g,然後執行 hexo s，最後開啟瀏覽器在瀏覽器的位址列輸入 localhost:4000 就能看到效果了。是不是很好玩。。。

什麼？線條太多了？沒事，來看看怎麼讓線條變少點

在上一步修改的主題配置檔案中，把剛才的那些程式碼改成下面這樣：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% e
複製程式碼

怎麼樣，是不是少了很多了？沒事，你開心就好(^▽^)

配置項說明
color ：線條顏色, 預設: '0,0,0'；三個數字分別為(R,G,B)
opacity: 線條透明度（0~1）, 預設: 0.5
count: 線條的總數量, 預設: 150
zIndex: 背景的z-index屬性，css屬性用於控制所在層的位置, 預設: -1

8、分類和標籤設定

這裡主要說的是在編寫文章的時候，怎麼給文章設定標籤和分類。

首先通過**hexo n "name"**命令來新建一個頁面，在source/_posts目錄下找到剛才新建的name.md檔案，用notepad++或者sublime text開啟。

title: name
date: 2014-08-05 11:15:00 
tags: 
---
複製程式碼

頁面預設就是長這樣的，可以編輯標題、日期、標籤和內容，但是沒有分類的選項。我們可以手動加入categories:項,但是下次建立新的頁面的時候還是沒有，所以我們直接開啟scaffolds/post.md檔案，在tages:上面加入categories:,儲存後，重新執行hexo n 'name'命令，會發現新建的頁面裡有categories:項了。

scaffolds目錄下，是新建頁面的模板，執行新建命令時，是根據這裡的模板頁來完成的，所以可以在這裡根據你自己的需求新增一些預設值。

8.1、設定分類列表

在我們編輯文章的時候，直接在categories:項填寫屬於哪個分類，但如果分類是中文的時候，路徑也會包含中文。

比如分類我們設定的是：

categories: 開車
複製程式碼

那在生成頁面後，分類列表就會出現開車這個選項，他的訪問路徑是：

*/categories/開車
複製程式碼

我們都知道，有時候中文路徑可能會出現一些奇奇怪怪的問題，所以我們需要路徑名和分類名分別設定。

開啟站點配置檔案_config.yml，找到如下位置做更改：

# Category & Tag
default_category: uncategorized
category_map:
	開車: drive
	生活: life
	其他: other
tag_map:
複製程式碼

在這裡category_map:是設定分類的地方，每行一個分類，冒號前面是分類名稱，後面是訪問路徑。
可以提前在這裡設定好一些分類，當編輯的文章填寫了對應的分類名時，就會自動的按照對應的路徑來訪問。

8.2、設定標籤

在編輯文章的時候，tags:後面是設定標籤的地方，如果有多個標籤的話，可以用下面兩種辦法來設定：
第一種：

tages: [標籤1,標籤2,...標籤n]
複製程式碼

第二種：

 tages: 
- 標籤1
- 標籤2
...
- 標籤n
複製程式碼

9、最後

Hexo和Next主題的一些常用設定差不多就是這麼多了，下篇將會說一下在Hexo部落格裡整合一些第三方的服務，下面你可以去你自己的部落格裡開車了，哈哈。。。

一寫就沒忍住寫了這麼長，其實很多都是參考了很多篇文章總結下來的，真的感謝那些大神們的分享，也希望我的文章能幫到你。謝謝您的閱讀！

謝謝

相關文章