嗨，大家好，今天還是繼續next主題的美化教程。加油。
教程：
1.修改主題頁面布局為圓角
修改主題頁面為圓角，有兩種方法：
第一種：
打開文件，路徑：/themes/next/source/css/_variables/custom.styl
複製粘貼以下代碼：
// 修改主題頁面布局為圓角// Variables of Gemini scheme// =================================================@import "Pisces.styl";// Settings for some of the most global styles.// --------------------------------------------------$body-bg-color = #eee// Borders.// --------------------------------------------------$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)$border-radius-inner = initial$border-radius = initial$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;
保存後本地預覽，可以看到四周都為圓角了。
第二種：
打開文件，路徑：\themes\next\source\css\_variables\Gemini.styl ，添加以下代碼：
// 修改主題頁面布局為圓角$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;
保存後本地預覽，四周為圓角。
2.去掉頂部黑線
頂部黑線如下圖：
打開文件，路徑：themes\next\source\css\_custom\custom.styl ，添加以下代碼：
//去掉頂部黑線：.headband {display:none;}
保存後本地預覽，頂部黑線已經去掉。
3.添加動態背景—粒子漂浮聚合
我還以為把動態背景已經寫到了教程裡了，結果一看沒有，趕緊補上。還有好幾種動態背景，之後補上。
該功能由 theme-next-canvas-nest 插件提供，在根目錄下執行如下命令：
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
然後在主題配置文件中找到canvas_nest，修改為：canvas_nest: true 。
保存後本地預覽，可以看到線條漂浮聚合效果。
4.文章添加結束標記
在路徑：themes\next\layout\_macro下新建passage-end-tag.swig文件。
打開passage-end-tag.swig，粘貼以下代碼：
<div>{% if not is_index %} <div style="text-align:center;color:#bfbfbf;font-size:16px;"> <span>-------- 本文結束 </span> <i></i> <span> 感謝閱讀 --------</span> </div> {% endif %}</div>
字體、顏色等等我按照我的喜好修改的，你們按照自己的喜好來。
打開文件，路徑：themes\next\layout\_macro\post.swig，在post-body之後，post-footer之前（如果找不到位置的按照我下圖的位置添加）添加以下代碼：
<div>{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}</div>
打開主題配置文件，在最後位置添加以下代碼：
post_end_tag:enabled: true # 是否開啟文末的本文結束標記
保存後本地預覽，打開文章後會發現文章結束時出現以下效果。
5.設置標題樣式
打開文件，路徑：themes\next\source\css\_common\components\post\post.styl
粘貼以下代碼：
/*修改博文標題樣式*/.page-post-detail .post-title {font-size: 26px; text-align: center; word-break: break-word; font-weight: $posts-expand-title-font-weight background-color: #b9d3ee; border-radius:.3em; line-height:1em; padding-bottom:.12em; padding-top:.12em; box-shadow:2px 2px 7px #9fb6cd; +mobile() { font-size: 22px; }}
保存後本地預覽，可以看到文章標題樣式效果出現。
如果想把主頁文章標題一起修改，那麼只要去掉 .page-post-detail即可。如下：
保存後本地預覽，可以看到主頁文章標題也已經有了樣式。
6.修改文章底部#為圖標
我們正常寫的文章，如果有標籤的話會在文章末尾出現標籤。像這樣：
但是#不太好看，我們把它換為圖標。
打開文件，路徑：/themes/next/layout/_macro/post.swig 搜索找到 rel="tag"># 把#替換為如下代碼：
<i></i>
保存後本地預覽，可以看到文章末尾標籤不再是#了，換成標籤圖標了。
7.設置博客的圖標
首先訪問網站：
https://www.easyicon.net/
找一張（32*32）的ico圖標，或者自己製作也行，圖標名稱改為favicon.ico 。放在路徑：/themes/next/source/images 裡。
之後打開主題配置文件，搜索並找到favicon，修改為：
favicon:small: /images/favicon.ico medium: /images/favicon.ico
保存後本地預覽，可以看到博客圖標已經不是默認的了。
8.創建標籤頁
看似最簡單的一個問題搞得我差點心態崩了。請看我踩的坑。
新建標籤頁首先在根目錄下執行命令：
hexo new page tags
執行後會在根目錄source文件夾裡新建tags。而index.md就是標籤頁。
打開index.md，最後面添加一行type: "tags" 注意冒號後有一空格。
保存之後本地預覽，出現了錯誤，還是顯示找不到標籤。
這個看似簡單的問題真的是搞得我，查找了好多資料。在快要放棄時找到了，原來是Bug。在主題配置文件裡，菜單設置裡/後面應該沒有空格直接跟||。但是主題默認的是有空格的。所以導致找不到標籤頁。
刪除中間的空格。
保存後本地預覽，可以看到標籤頁已經可以使用了。至於標題是英語，換一下標題就行。
在tags文件夾裡的index.md文件把title修改為標籤就OK 了。
看到已經完全OK了。太難了，這個坑的我。
9.創建分類頁
創建分類頁、關於頁等等菜單與第8步一樣。
命令：
hexo new page categories
修改.md文件，主要title和type，type為categories。相對應。
10.創建關於頁
命令：
hexo new page about
修改.md文件，主要title和type，type為about。相對應。
11.顯示當前瀏覽進度
打開主題配置文件，搜索找到b2t和scrollpercent。修改為true。
保存後本地預覽，效果如圖。
12.個性化回到頂部
自己找一張圖片，或者直接用我這張。
下載連結：
https://www.lanzous.com/i8nozmh
把圖片放在source\images\ 下。
打開文件，路徑：themes\next\source\css\_custom\custom.styl。在最後粘貼以下代碼：
//自定義回到頂部樣式.back-to-top {right: 60px; width: 70px; //圖片素材寬度 height: 900px; //圖片素材高度 top: -900px; bottom: unset; transition: all .5s ease-in-out; background: url("/images/scroll.png"); //隱藏箭頭圖標 > i { display: none; } &.back-to-top-on { bottom: unset; top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px; }}
保存後本地預覽，就可以看到動態效果了，但是這種返回頂部要使第11步的兩項為false，否則會出現Bug。
13.修改博客字體
訪問網站：
https://fonts.google.com/
找到自己想要設置的字體。
打開主題配置文件，找到font。
font:enable: true # 外鏈字體庫地址，例如 //fonts.googleapis.com (默認值) host: # 全局字體，應用在 body 元素上 global: external: true family: Monda # 標題字體 (h1, h2, h3, h4, h5, h6) headings: external: true family: Roboto Slab # 文章字體 posts: external: true family: # Logo 字體 logo: external: true family: # 代碼字體，應用於 code 以及代碼塊 codes: external: true family:
按照這種形式修改字體類型。字體為剛才網站上的字體名稱。修改後保存。
14.添加站內搜索
首先安裝插件，輸入以下兩個命令：
npm install hexo-generator-search --savenpm install hexo-generator-searchdb --save
之後先在站點配置裡末尾增加以下代碼：
search:path: search.xml field: post format: html limit: 10000
再在主題配置文件裡搜索找到local_search修改為如下：
local_search:enable: true
保存後本地預覽，效果如下：
15.去掉文章中圖片默認的邊框
打開文件，路徑：/themes/next/source/css/_common/components/post/post-expand.styl。
找到img，把border修改為none。
保存後本地顯示，文章中的圖片就沒有邊框了。
OK！那本次分享就到這兒，喜歡的話記得打卡支持管家小e哦！！！
製作教程不易，以上教程內容均為管家小e原創，請勿搬運，轉載請註明來源，如有錯誤，請指正，謝謝。
·end·
管家小e
你身邊的電腦管家