哈嘍大家好，我是鹹魚。（博客網址: https://xxxsalted.github.io/） 在搭建了博客並換了主題之後，發現有許多細節方面的東西還需要完善和定製化一下，比如說行距和引用的樣式我不是很喜歡，以及沒有評論功能。 於是決定自己動手，說乾就乾。 PS：下文的修改操作僅限於博客主題（Kli ...
哈嘍大家好，我是鹹魚。（博客網址: https://xxxsalted.github.io/）
在搭建了博客並換了主題之後，發現有許多細節方面的東西還需要完善和定製化一下，比如說行距和引用的樣式我不是很喜歡，以及沒有評論功能。
於是決定自己動手，說乾就乾。
PS：下文的修改操作僅限於博客主題（Klise），不同主題的配置文件可能會不一樣，不過大體思路都是差不多的，即修改
scss | config | ejs文件。
Valine 評論系統
搜了網上的教程，決定採用 Valine 來實現博客評論功能。
因為 Valine 的存儲是基於 LearnCloud 的，所以我們要先註冊一個 LeanCloud 賬號。
登錄之後進入【控制台】點擊【創建應用】
應用創建好以後，進入剛剛創建的應用，選擇左下角的【設置】 > 【應用憑證】，然後就能看到你的 APP ID 和 APP Key 了：
進入到你的博客根目錄，找到你對應主題的主配置文件 _config.yml，添加關於 Valine 的配置欄位。
comments:
enable: true # 開啟評論系統
type: valine # 採用哪種評論系統
button: true
valine:
enable: true
appid: # 從 LeanCloud 的應用中得到的 appKey
appkey: # 從 LeanCloud 的應用中得到的 appId.
placeholder: "說點什麼吧！" # 評論框占位提示符
path: window.location.pathname # 當前文章頁路徑，用於區分不同的文章頁，以保證正確讀取該文章頁下的評論列表。
avatar: /img/redcat.jpg # Gravatar 頭像
guest_info: nick,mail,link
pageSize: 10 # 評論列表分頁，每頁條數。
recordIP: false # 是否記錄評論者IP
serverURLs: # 該配置適用於國內自定義功能變數名稱用戶, 海外版本會自動檢測
emojiCDN: # 設置表情包 CDN
enableQQ: true # 是否啟用昵稱框自動獲取QQ昵稱和QQ頭像, 預設關閉
配置好之後進入 Git bash 視窗，重新生成一下靜態文件：
hexo clean
hexo g
在本地測試一下：
hexo s
但是發現沒有生效，一開始我還以為配置格式不對（yaml 格式要求比較嚴格），再三重覆確認了格式沒問題之後，還是沒有生效。
我就在想是不是沒有渲染出來，然後去到主題目錄下的 layout 目錄，發現了 valine.ejs 文件。
<博客根目錄>\Klise\layout\partials\_comments\valine.ejs
打開一看發現裡面居然沒有內容，然後網上搜了下資料，把相關內容複製粘貼了進去。
結果發現還是不行，是不是沒有去調用這個 ejs 文件？
打開 <博客根目錄>\Klise\layout\partials\_comments\index.ejs 文件查看驗證一下，果然如此。
<%- partial('partials/_comments/waline') %>
因為我們用的是 Valine，所以把 partials/_comments/waline 改成 partials/_comments/valine 即可。
再試一下，成功了！
樣式定製化
正文預設的行間距我不是很滿意，所以打算改一下，打開我們的博客網頁然後點擊 F12 查看網頁元素。
發現正文內容的樣式欄位在 post 類下的 p 標簽中，而且在 main.css 文件裡面。
但是這個 main.css 是動態生成的，即 hexo 生成 public 目錄的時候會去找 主題\source 目錄下的 sass 文件然後生成 main.css 文件。
所以我們想要修改樣式，就必須找到標簽樣式對應的 sass 文件。
我們找到主題目錄下的 main.scss 文件，發現他還引用了其他的 sass 文件
<博客根目錄>\themes\Klise\source\css\main.scss
// Import sass files
@import "partials/fonts","partials/base","partials/layout","partials/post","partials/miscellaneous","partials/dark";
一個一個去找，最後在 _post.scss 文件下發現了對應的配置欄位。
.post{
......
p {
margin-top: 8px;
margin-bottom: 8px;
padding-top: 10px;
padding-bottom: 10px;
}
......
接下來修改引用樣式對應的配置，原本引用樣式是兩端對齊的方式，而且還是斜體，我不是很喜歡。
發現還是在 _post.scss 文件下，然後修改如下：
.post blockquote p {
font-size: 16px;
font-style: normal;
line-height: 1.8em;
color: #999;
text-align: start;
}
最後重新生成靜態文件併在本地驗證，沒什麼問題就把新修改的內容部署到 Git 上。
