hexo-matery主題優化(二)
作者：流浪舟
目錄：
- hexo搜索
- hexo代碼高亮
- 消除文章toc目錄的那一豎杠杠
- 去掉友鏈下那不必要的一欄空白
- 最后
前段時間，我好像寫過一篇文章講hexo-matery主題的配置優化，隔了很久，自己都忘了，應該是第一次安裝主題的時候。那現在有些一篇關於這樣的文章幫助大家繼續增強美化自己的博客，因為本人最近也在做這件事，搭博客已經3個月了，選了喜歡的主題，卻還是有一點點不滿意，雖然創建主題的都是大佬，但是也有瑕疵的地方。更頭疼的是，到最后也沒人來告訴我們怎么把我們的博客做的漂亮一點，還是要自己來親手改改，直接弄成博客是自己親生的一樣！到時候也能吹吹！這次不介紹太多，怕一下弄不過來，主要就講最近接觸過的。
hexo搜索
如果你已經做了這個搜索可以跳過，沒有就一起干！過程非常可樂，呃，是非常簡單！前提是使用的是hexo主題，配置了相應的環境。主題最開始弄下來是沒有搜索插件的，需要下載，接下來你懂的，用npm包管理工具下載插件(如果不會用，可以搜索相應的文章看看，有需要會專門講一下npm是何物，不會有同學還沒安裝好npm吧？不會吧！不會吧！)。進入到當前博客根目錄下，在命令行里：
npm i hexo-generator-search -s
就這樣下好了！同時需要再當前根目錄配置文件中添加配置：
#search search: path: search.xml field: post hexo代碼高亮
還是不要用主題里的高亮了，enable就false掉，還是同樣的“騷操作”，下一個代碼高亮的插件，這里用hexo-prism-matery,相同的手法下載下來后，在根目錄下的配置文件里添加：
prism_plugin: mode: 'preprocess' # preprocess/realtime theme: 'tomorrow' line_number: true #default false custom_css: # 消除文章toc目錄的那一豎杠杠
修改前是這樣的：
如果你發現文章的toc目錄有一條豎杠，不好看，那么就去掉。之前toc目錄一直是這樣的，我也不想要了。做博客開始的時候發現了，沒太在意，終究是影響了美觀。現在就要把目錄弄得正常點。來到主題目錄下，找到source目錄，找到lib目錄，里面也是一些css和js文件。其中找到tocbot文件夾，打開它的css文件，找到toc-link::before
.toc-link::before{ background-color:#EEE;content:' '; display:inline-block;height:inherit;/*left:0;*/ margin-top:-1px; position:absolute; width:0px; /*之前是2px*/ }
里面可能很亂，就一兩行代碼，找到后將width值改成0就行了。另外解析的文章目錄不完整可能是標題有些不支持:
#是否激活文章 TOC 功能，並配置TOC支持選中哪些標題類型，這是全局配置。
#可以在某篇文章的 Front-matter 中再加上`toc: false`，使該篇文章關閉TOC目錄功能
toc:
enable: true
heading: h2, h3, h4, h5, h6 #選中除h1以外的標題，之前沒有h6
collapseDepth: 0 # 目錄默認展開層級
showToggleBtn: true # 是否顯示切換TOC目錄展開收縮的按鈕
去掉友鏈下那不必要的一欄空白
修改前：
這個也簡單，不必過於頭疼！因為我已經改好了，直接賣就是了，白給不要錢！
<div class="card">
<!--<div class="card-content">
<%- page.content %>
</div>-->
</div>
友鏈下的那欄不必要的空白着實凸顯了它的不必要性，所以我們要去掉它。直接把它的代碼給注釋掉，找到layout文件夾下的friends.ejs文件。hexo引擎渲染該文件生成html文件，變成了友鏈頁面，其中友鏈的那一片作為一個模塊卡片，valine留言板及空白一欄也是，空白的就是什么也沒有，很容易發現，注釋即可。
最后
以后還會繼續更新站點，如果想看總體的效果就訪問我的網站吧！最近的美化優化了很多，變化也很大！如果想深入了解就上公眾號吧，小碼之光，加群交流也行。后續會持續跟大家講博客美化。
公眾號：小碼之光（文章首發）
個人站點https://index.maliaoblog.cn/