hexo使用(二) 配置 pure 主題樣式

我的博客傳送門: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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章