蓋瑞的學習筆記室

hexo Blog頁面與Next主題

發表於 更新於 分類於

延續 hexo 架設Blog紀錄 後續，繼續添加分類頁面標籤頁面等，並使用Next主題修改的紀錄過程。

新增標籤及分類頁面

hexo部分頁面是要手動生成，使用Git Bash Here 陸續打下以下指令

1
2
3
hexo new page tags  //新增標籤頁面
hexo new page categories  //新增分類頁面
hexo new page about  //新增關於頁面

打完指令會可以到 source 資料夾出現相對應名稱的資料夾，皆有各自的 index.md 檔案

先選tags，打開index.md，輸入 type: “tags”

1
2
3
4
5
---
title: tags
date: 2020-02-08 21:48:38
type: "tags"
---

選categories，打開index.md，輸入 type: “categories”

1
type: "categories"

選about，打開index.md，輸入 type: “about”

1
type: "about"

顯示滾動百分比

在主題 (Theme) 配置文件_config.yml中，找到scrollpercent: false 修改成 scrollpercent: true 即可呈現滾動百分比

1
scrollpercent: true

修改頭像

在主題 (Theme) 配置文件_config.yml中，查詢 avatar，修改以下資料

1
2
3
4
5
avatar:
  url: /images/avatar.gif // 頭像路徑
  rounded: false // 頭像是否為圓形
  opacity: 1 // 透明度
  rotated: false // 滑鼠移過去是否自動旋轉

版權宣告

取消底下的由 Hexo 強力驅動 vX.X.X | 主題 — NexT
在主題 (Theme) 配置文件_config.yml中，查詢 powered:與 theme:，將其中屬性 enable: 都改成 false

1
2
3
4
5
powered:    
  enable: false  //取消由 Hexo 強力驅動

theme:    
  enable: false  //取消主題 — NexT

找到copyright:，可換上自己想要的文字，例如 Gary - 轉載文章請附上作者及原文連結

增加書籤功能

就像實體書的書籤，點擊書籤後可以記住這篇文章看到哪裡，需安裝外掛元件，複製以下連結安裝

1
git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

再到主題 (Theme) 配置文件_config.yml中，查詢bookmark，將 enable 修改為 true

Note標籤

Note標籤 (Bootstrap Callout) 寫法

1
2
3
{% note [class] [no-icon] %}
要寫在標籤內的內容
{% endnote %}

要寫在標籤內的內容

[class]有以下幾種，選擇更換 : default | primary | success | info | warning | danger.
[no-icon] : 主題 (Theme) 配置文件有開啟標籤小圖示，可以直接加上直接隱藏

以下各種個顏色模式的標籤 :

1
{% note default %}  **default**  {% endnote %}

default 

1
{% note primary %}  **primary**  {% endnote %}

primary 

1
{% note success %}  **success**  {% endnote %}

success 

1
{% note info %}  **info**  {% endnote %}

info 

1
{% note warning %}  **warning**  {% endnote %}

warning 

1
{% note danger %}  **danger**  {% endnote %}

danger

在主題 (Theme) 配置文件_config.yml中，查詢 note:裡的style，有四個模式

1
2
3
4
simple    //預設全線框，左側邊粗線框
modern    //全底色無線框
flat      //全底色線框，左側邊粗線框
disabled  //無效果

下一排icons:裡的用 false/true 決定是否開啟標籤內的小圖示

1
icons: true

另外其他標籤寫法可以參考 完整的標籤列表

加入Google Analytics

在主題 (Theme) 配置文件_config.yml中，查詢google_analytics:

1
2
google_analytics:
  tracking_id:

加入GA ID追蹤碼

1
2
google_analytics:
  tracking_id: UA-XXXXXX-1 //加入GA ID追蹤碼

參考文章
如何使用GA來替自己網站作分析

加入 Sitemap

sitemap要讓Google取得網站資料，需安裝外掛元件，複製以下連結安裝

1
npm install hexo-generator-sitemap

安裝完成，在Hexo生成靜態網頁( hexo g )就會在public裡出現sitemap.xml
到 Google Search Console 提交sitemap.xml

加入 Search 功能

預設是沒有，需安裝外掛元件，複製以下連結安裝

1
npm install hexo-generator-searchdb --save

安裝完在到站點配置文件_config.yml，貼上以下程式碼

1
2
3
4
5
search:
  path: search.json
  field: post
  format: html
  limit: 10000

再到主題 (Theme) 配置文件_config.yml中，查詢Local search，將 enable 修改為 true

Url優化(SEO)

參考Ray大寫的 Hexo Url優化(SEO)

燈箱效果

需安裝外掛元件，複製以下連結安裝

1
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

再到主題 (Theme) 配置文件_config.yml中，查詢fancybox，修改為 true

讀取進度條

需安裝外掛元件，複製以下連結安裝

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

再到主題 (Theme) 配置文件_config.yml中，查詢pace，將 enable 修改為 true

樣式可以觀看 pace官網範例

換讀取條顏色，我選取的模式是 flash
到站點資料夾中的 source 找到安裝外掛資料夾 lib \ pace 的 pace-theme-flash.min.css (不同模式對應不同CSS) 找到 

1
.pace-progress{background:#29d;.....}  //預設顏色

將色碼改成你想要的顏色我是改成翠綠色

1
.pace-progress{background:#52bf8b;.....}

圖片延遲加載

需安裝外掛元件，複製以下連結安裝

1
npm install hexo-lazyload-image --save

安裝完在到站點配置文件_config.yml，貼上以下程式碼。

1
2
3
4
lazyload:
  enable: true
  onlypost: false
  loadingImg: /images/loading.gif
  • onlypost 是否只針對文章中的圖片做加載，若為 false 會包含大頭貼等等都做處理
  • loadingImg 圖片還沒加載進來時的代替圖，將代替圖片放在 theme/source/images 下
  • loadingImg 圖片可以觀看範例

Next主題客製化

稍微修改一些CSS，幫助更美化一點。

更改標題與內文間距

預設的間距感覺都很大，所以稍微調整一下
因為我主題模式是選擇Gemini 所以到以下位置

1
Next主題\source\css\_schemes\Gemini.styl

找到以下CSS.post-body 加入 margin-top:-XXpx; ，用負值才能往上

1
2
3
4
5
6
7
8
9
10
// ==================================================
// Headers.
// ==================================================
.post-body {
  margin-top:-36px; //加入這一段，數值憑感覺微調
  h1， h2 {
    border-bottom: 1px solid $body-bg-color;
  }
  ......
}