我的博客傳送門:https://xiehao.xyz/
配置 hexo pure 主題樣式詳解(後續補充更多樣式)
1: hexo 主題使用的是:hexo-theme-pure
1.1 克隆主題並剪切到 \hexo\themes 文件夾下
git clone git@github.com:cofess/hexo-theme-pure.git
1.2 配置 使用 hexo-theme-pure 主題,在站點配置文件_config.yml中修改以下文件
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-pure
2: 配置hexo 的 pure 主題注意點
2.1 編輯文件全程使用 sublime 編輯,不要用記事本打開,不會出現亂碼的情況,相信搭建都知道原因
2.2 編輯文件基本都是兩個文件(注意下面配置說明配置哪個文件,不要錯了)
- 配置站點文件 _config.yml
- 配置主題文件 _config.yml
3: 解決中文亂碼問題
在站點配置文件_config.yml中添加
language: zh-CN
4: 文章設置屬性(Typora 編輯 md 文件)
打開需要編輯的文章
---
title: 文章標題
date: 2017-05-27 13:47:40 // 設置文件發佈時間(默認是當前時間)
categories: // 設置文章分類
- 分類名稱
tags: // 設置文章標籤
- 標籤名稱
toc: true //是否啓用文字目錄
5: 分類 標籤 項目 書單 友鏈 關於設置(C:\hexo\source)
// 使每個目錄都有自己的功能
title: 分類 // 標題
date: 2019-02-28 23:56:22 // 時間
layout: categories // 輸出類型
type: categories // 類別
// 目錄結構
分類:categories
標籤:tags
項目:repository
書單:books
友鏈:links
關於:about
6: 友鏈的編輯(C:\hexo\source_data\links.yml)
// links
創造獅:
link: http://chuangzaoshi.com/
avatar: /images/favatar/chuangzaoshi-logo.png
desc: 爲創意工作者而設計
騰訊設計導航:
link: http://idesign.qq.com/
avatar: /images/favatar/idesign-logo.png
desc: 網羅全網高逼格的設計站點
7: 搜索功能
7.1 安裝
npm i hexo-generator-json-content --save
7.2 主題設置
search:
insight: true # you need to install `hexo-generator-json-content` before using Insight Search
baidu: true # you need to disable other search engines to use Baidu search
8: 文字字數,閱讀時長
8.1 安裝
$ npm install hexo-wordcount --save
8.2 主題設置
# wordcount
postCount:
enable: true
wordcount: true # 文章字數統計
min2read: true # 閱讀時長預計
9: 評論功能
參考:https://blog.csdn.net/blue_zy/article/details/79071414
參考:https://notes.doublemine.me/2015-10-21-爲NexT主題添加文章閱讀量統計功能.html#配置LeanCloud
10: 主題背景特效
背景動畫 基於canvas,在\themes\pure\layout\layout.ejs的中面添加
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
11: 閱讀次數統計
本來想用leancloud來統計,因爲不蒜子不能管理相關博文的閱讀量,但是配置完leancloud會報錯…只能選用不蒜子,在主題配置文件 中把busuanzi設置爲true即可:
pv:
busuanzi:
enable: true # 不蒜子統計
12:hexo-admin
Github:https://github.com/jaredly/hexo-admin
簡介:可以直接在網頁端創建、編輯markdown文章內容,並將內容發佈到_posts裏。最方便的是可以很方便的給文章加標題、分類、打標籤。
12.1 安裝這個插件需要升級npm,先升級
npm install -g npm
12.2 然後安裝
npm install --save hexo-admin
12.3 配置:
在站點配置文件 _config.yml中添加
admin:
username: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: a secret something
這個配置可以直接在admin Settings > Setup authentification 頁面中輸入數據獲取,secret是用於產生cookie值的。
13: hexo-wordcount
簡介:爲文章添加文章字數統計、文章預計閱讀時間
13.1 安裝:
npm install hexo-wordcount --save
13.2 配置:
在主題配置文件 中設置爲true:
# wordcount
postCount:
enable: true
wordcount: true # 文章字數統計
min2read: true # 閱讀時長預計
14:hexo-neat
Github:https://github.com/rozbo/hexo-neat
簡介:自動壓縮html、css、js代碼
14.1 安裝:
npm install hexo-neat --save
14.2 配置:
在站點配置文件_config.yml中添加
neat_enable: true
neat_html:
enable: ture
exclude:
neat_css:
enable: true
exclude:
- '*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
15:單擊頁面出現小愛心
找到主題下面 layout.ejs 文件夾:
themes\hexo-theme-pure\layout\layout.ejs 最下面添加以下代碼
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/ygbhf/clicklove/clicklove.js"></script>