hexo-matery主题优化(二)

喜欢ヅ旅行 2022-11-24 14:09 156阅读 0赞

### 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]  
如果你发现文章的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目录展开收缩的按钮

#### 去掉友链下那不必要的一栏空白 ####

修改前：

![空白栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center]  
这个也简单，不必过于头疼！因为我已经改好了，直接卖就是了，白给不要钱！

友链下的那栏不必要的空白着实凸显了它的不必要性，所以我们要去掉它。直接把它的代码给注释掉，找到layout文件夹下的friends.ejs文件。hexo引擎渲染该文件生成html文件，变成了友链页面，其中友链的那一片作为一个模块卡片，valine留言板及空白一栏也是，空白的就是什么也没有，很容易发现，注释即可。

#### 最后 ####

以后还会继续更新站点，如果想看总体的效果就访问我的网站吧！最近的美化优化了很多，变化也很大！如果想深入了解就上公众号吧，**小码之光**，加群交流也行。后续会持续跟大家讲博客美化。

[个人站点][Link 1]https://maliaoblog.cn/

[toc]: /images/20221124/dc20bfb9f1f4407bb1948af1f772edd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/9d153761413e4350ab208af053946b53.png
[Link 1]: https://maliaoblog.cn/