hexo-matery主题优化(二)


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目录一直是这样的,我也不想要了。做博客开始的时候发现了,没太在意,终究是影响了美观。现在就要把目录弄得正常点。来到主题目录下,找到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留言板及空白一栏也是,空白的就是什么也没有,很容易发现,注释即可。

最后

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


公众号:小码之光


文章作者: 小码
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小码 !
评论
 上一篇
hexo-matery主题美化(三)-音乐播放器 hexo-matery主题美化(三)-音乐播放器
hexo-matery主题美化(三)-音乐播放器配置音乐播放器要支持音乐播放,在主题的 _config.yml 配置文件中激活music配置即可: # Whether to display the musics. # 是否在首页显示音乐.
2020-08-09
下一篇 
计算机网络-01网络模型 计算机网络-01网络模型
计算机网络——01网络模型目录: 概念 分类 网络分层 TCP确认机制 连接与关闭 TCP/UDP TCP/ISO面向连接与无连接 总结 一、概念计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在
  目录