01_Hexo-Hexo + Pure搭建博客-自定義

[文章路徑]: 
	\source\_posts
[站點配置文件]: 
	\_config.yml
[主題配置文件]: 
	\themes\pure\_config.yml	"關於、個人介紹、公告"
[友鏈文件]: 
	\source\_data\links.yml
[語言]: 
	\themes\pure\languages
[左下角運行時間]: 
	\themes\pure\layout\_common\footer.ejs	"時間、版權"
[評論角色配置]: 
	\themes\pure\layout\_script\_comment\valine.ejs
[css樣式]:
	\themes\pure\source\css\style.css
[搜索欄限制]: 
	\themes\pure\source\js\insight.js	"160行"

六。內容範例#

---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://image.cpen.top/image/test.png
tags:
    - Test
category:
    - Test
toc: true
top: true
---
描述<!-- more -->

文章指定多個 category#

多個分類

如果我們的要求是將文章同時分到兩個或者多個不同的類目下呢？官方給出的方法是：
categories:
  - [Sports]
  - [Baseball]
參考文章：Hexo 一篇文章多個 categories https://www.jianshu.com/p/4438c417611e

七。自定義#

7.1 搜索框索引突破 5#

F12 定位到搜索框的類選擇器為 ins-section-header
grep，定位到配置文件為 \themes\pure\source\js\insight.js
Ctrl + F，搜索 5，定位到第 160 行，修改限制

7.2 左側頭像鏈接，target 修改為 _self#

a 標籤，修改 target: '_blank' → '_self'

7.3 文章目錄，一级標題不跳轉#

有時發現一级標題不會跳轉

~~配置文件 \node_modules\hexo\lib\plugins\helper\toc.js~~

~~更新下 \node_modules\hexo\lib\plugins\helper\toc.js 文件，又正常了。時靈時不靈的。。。~~

修改 ".\node_modules\hexo-renderer-markdown-it\index.js" level 為 1

參考文章：

https://blog.csdn.net/Fosu_Chenai/article/details/111192850 評論

7.4 滾動條加粗 + 加小箭頭#

修改 css 樣式，路徑 .\hexo-source\themes\pure\source\css\style.css

Ctlrl + F 定位 scrollbar；
調高 height，使代碼框右拉滾動條加粗；
右側下拉條變粗；

7.4.1 代碼框加粗

/*
 * scrollbar
 */

::-webkit-scrollbar {
  width: 15px;
  height: 14px;					# 調高
  background: transparent;
}

7.4.2 右側下拉條變粗 + 添加小箭頭

/*
 * 滾動條箭頭							
 */
::-webkit-scrollbar-button {
    width: 0px;
    height: 4px;
    display: block; 
    background-color: #c3c3c3;
}
::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0px 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

參考文章

7.5 Valine 評論框添加一言#

參考文章

https://blog.justlovesmile.top/posts/27831.html

偶然看到的文章，然後自己就加了這個功能。

路徑：.\themes\pure\layout\_script\_comment\valine.ejs；

加到最後 </script> 標籤之前；c=j 請求獲得網易雲的句子，開始網抑雲吧；

    fetch('https://v1.hitokoto.cn/?c=j')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)

修改方法：
找到博客對應添加 valine 的位置，例如 Ayer 主題的位於 hexo\themes\ayer\layout_partial\post\valine.ejs
在內部添加一段代碼：
<script type="text/javascript">
   fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)
</script>
Api 接口說明：
（1）https://v1.hitokoto.cn/ （從 7 種分類中隨機抽取）
（2）https://v1.hitokoto.cn/?c=b （請求獲得一個分類是漫畫的句子）
參數說明
a 動畫
b 漫畫
c 遊戲
d 文學
e 原創
f 來自網絡
g 其他
h 影視
i 詩詞
j 網易雲
k 哲學
l 抖機靈
其他作為動畫類型處理
可選擇多個分類，例如： ?c=a&c=c
（3）https://v1.hitokoto.cn/?c=f&encode=text （請求獲得一個來自網絡的句子，並以純文本格式輸出）

返回的格式說明
返回參數名稱描述
id 一言標識
hitokoto 一言正文。編碼方式 unicode。使用 utf-8。
type 類型
from 一言的出處
from_who 一言的作者
creator 添加者
creator_uid 添加者用戶標識
reviewer 審核員標識
uuid 一言唯一標識；可以鏈接到 https://hitokoto.cn?uuid=[uuid] 查看這個一言的完整信息
commit_from 提交方式
created_at 添加時間
length 句子長度
例如：返回的 data, 通過 data.hitokoto 獲取句子正文

作者: Justlovesmile
鏈接: https://blog.justlovesmile.top/posts/27831.html
來源: Justlovesmile's BLOG
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

PS：這位大佬的博客真好看～～

7.6 左側归档、分類改為默認收起#

默認是展開的

修改以下文件，改為收起狀態。如圖
- style="height: 0px" 應該可以不用寫，收起狀態默認就是 0 ~~

.\themes\pure\layout\categories.ejs

.\themes\pure\layout\_partial\archive.ejs

八。未解決的小需求#

（已解決，#7.3）一级目錄，右側導航欄有時跳轉失敗；
Valine 評論系統，下面的評論被 @後，未顯示 @信息，而別人的是成功的；

我的

其他大佬的
引用時使用 #，會被導航目錄誤認為一级標題；
（已解決）生成在 /public 目錄的靜態文件都被壓縮了，~~我看別人的沒被壓縮，不清楚啥原因。~~ 因為配置了這個 https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md 博客優化壓縮了文件
（已解決）文章內部一级、二級...... 標題左側無錨點

理想效果圖

~~似乎是環境配置問題，我用虛擬機推送靜態文件，就有顯示；用真實 win 機推送就沒有錨點，重裝 git 也沒顯示（可能不是 git 的問題）。。。~~

因為壓縮了靜態文件，全部註釋 hexo-neat 配置。
參考
https://github.com/cofess/hexo-theme-pure#hexo-neat
https://github.com/rozbo/hexo-neat#options