注意:
该主题是我开发的另一个不完善的hexo博客主题并非nothinglin主题。
截止至今天,CoolShell主题还处在完善当中,虽然现在我使用的主题就是我参考CoolShell官网开发的一套Hexo主题,但是我的主题代码还没有进行完善和优化,有许多的功能还未开发,所以还是一种比较不完善的状态当中。
我是因为在Hexo官网中找不到一个自己喜欢的主题,然而偶然进入陈皓前辈的官网中时,被前辈的博客主题样式给吸引了。整体给我的感觉就是非常简洁,很干净,很适合阅读。所以,我就非常希望能够有一个这样的主题,可以前辈的主题是power by wordpress的。目前来说,我并没有服务器,所以我只能搭建一些静态博客而已,但是又没办法,我是真的非常喜欢这个主题,于是就有了自己搭建一个hexo主题的想法。
其实这个想法并不是这个时候才有的,其实很早的时候就有了,大概是在大一那时候吧,那时候在B站观看了程序羊的博客搭建视频系列,于是之后就开始入坑博客了。对于我们学生党来说,静态博客是最实惠的,可惜的是但是不懂得进行博客速度的优化,还有一直很不满意现有主题库中的主题。于是大一的时候就将博客部署到gitee上就没再折腾了。
大二之后又开始接触Hexo博客,其实前段时间是准备放弃hexo的,因为我开始接触到了非常多的静态博客框架,比如Hugo、vuepress、Hexo、gitbook、Docusaurus、Pelican、Jekyll还有盖茨比等等这些博客框架。但是综合来说吧,Hexo的教程比较多还有就是主题选择也比较多,苦于不了解hexo的运行机制和接口罢了。
其实有很多的博客主题是改一改就能够满足自己的需求的,但是不会改,不懂得这个博客主题的接口设计。所以一直就没有过一个满意的博客主题,再到后来随着对前端知识的稍微深入理解,我开始学会了使用浏览器的开发者工具来进行前端代码CSS的调试之后,我开始具备改造博客主题的能力了,大概也就是四五个月前吧。
于是我就开始疯狂搜索有关hexo博客改造的博文进行参考和学习,其实大概知道怎么一回事之后,便开始有了想自己亲手创建一个主题的想法。忘记从哪里看到的一句话:
“想要了解一只青蛙光是解剖还是不够的,你必须要去制造一只青蛙”
改造博客主题其实是很容易的,其实大部分规范化开发的主题都是没有使用!important这个属性来声明CSS样式的,因为这样可以方便别人后面的修改,用于覆盖已经设置好的CSS属性,我就是这样子进行博客改造的,首先就是先使用开发者工具进行调试,将需要的样式调整好之后,再重新创建一个自定义css样式文件到主题开发文件夹theme的css文件夹中,并且在这个主题文件夹的头文件中将自定义css文件进行引入,然后对原css进行覆盖,如果覆盖不了的就使用!important属性来强制覆盖。
也就在一个月前,我对我的博客稍微满意的时候(使用的是fluid主题),我看到了CoolShell官网的主题,这下我对我原有的博客主题又开始不满意了。可能因为我太喜欢CoolShell这个主题了,所以我花了两三天的时间对博客主题开发进行研究,主要是调查两个方面:
好在我在谷歌搜索的时候,有许多前辈毫不吝啬地分享了他们hexo主题开发地经验和总结,他们也提醒了我hexo官网地主题开发说明文档还有建议最好是先多看现有地主题源码,看看别人是怎么实现博客功能的。
我觉得源码参考非常重要,我到主题官网中找了非常多的主题进行比对,最后我发现hexo-theme-snippet
这个主题是对接近CoolShell的,并且使用的文件是EJS格式的文件,这样的话我也可以看得懂,因为EJS和HTML文件的格式是非常相近的。于是hexo-theme-snippet
和hexo官方文档说明便是我的主题开发的一手资料。
其实想真正徒手开发难度是非常大的,比如很多样式排版、代码高亮、站内搜索功能、代码优化等等这些功能,像我这种只有一点前端基础能力的人是不可能做到徒手开发完整的主题功能的。好在其实在开发主题过程中是有非常多的插件给我们直接使用的,这样就大大节省了我们的开发成本。
比如,代码框高亮,就像你能够在我的博客文章中看到的代码块高亮的样式,是不是很炫酷?是不是跟CoolShell官网的样式一模一样?其实这个代码块高亮的样式是有现成的插件给我们使用的,只不过更倾向于wordpress这样的博客,对wordpress其实已经有了现成的插件,Hexo的话是没有的,我大概花了两三天的时间来对hexo博客进行对接Enlighter.js的接口。官网:Enlighter.js
能够发现这个插件也是多亏了开发者工具,我看见CoolShell官网中的源文件的名字是Enlighter.min.css,看到这个我立刻明白,这肯定是一款插件。照着名字取谷歌搜索了一下,果然发现了它是开源插件,当时可把我高兴坏了。
就这样我咬着牙坚持了半个多月的开发,终于初步完成了主题的整体架构。但是缺点却还是有非常多的,还有bug:
Hexo-theme-CoolShell还没有正式上线,如果目前你对这个主题感兴趣的话,我也非常欢迎大家使用,最好是能有小伙伴一起参与博客的完善。
官网:https://github.com/Nothing-lin/hexo-theme-coolshell
首先是把主题下载到本地中,在这里默认你已经会搭建Hexo博客了,并且知道如何更换Hexo主题。如果有小伙伴还不知道的话,我后期也会专门写一些我个人理解的教程给大家参考。
安装相关依赖
//这个是关于相关文章的插件,如果没有的话那么文章页面会进不去 npm install hexo-related-popular-posts --save //这个是博客站内搜索引擎,如果没有的话就不能进行站内搜索 npm hexo-generator-search --save
//这个是关于静态资源文件的压缩,目的是为了能够优化hexo的访问速度 npm hexo-neat --save
对于neat这个插件需要在全局配置文件中添加:
# hexo-neat # md博文压缩 neat_enable: true # 压缩html(ejs,swig等也属于html格式片段) neat_html: enable: true exclude: # 压缩css neat_css: enable: true exclude: - '*.min.css' - '**/*.min.css' # 压缩js neat_js: enable: true mangle: true #打印日志 output: compress: exclude: #排除文件 - '*.min.js' - '**/*.min.js'
还有的就是,对于全局配置文件中,我们需要把hexo的默认高亮代码给关闭,因为Enlighter.js和hexo的highlight是冲突的,所以我们需要关闭:
highlight: enable: false line_number: false auto_detect: false tab_replace: '' wrap: false hljs: false prismjs: enable: false preprocess: false line_number: false tab_replace: ''
所以,完成了上面的这些步骤之后,只要是按照正常流程更换hexo博客主题的,都能够正常显示主题的样式了。
我想说的是,目前这个主题还处于初步完善阶段,还有非常多的bug和没有优化的地方,手机端更是没有响应式功能,目前我还在学习当中,并且更新速度也不会像以前那么快了,主要是慢慢进行完善,我现在也开始使用这个主题了。
如果有小伙伴还不清楚如何搭建博客或者是如何使用我这个博客的话,大家可以再等一等哈,我后面知识积累的足够的时候我会写一些hexo系列的文章,如果大家有问题在留言中得不到回复的话,大家可以到我GitHub开放的issues上进行提问,我有时间并且能回复的我一定尽力回复,回复不了的也希望大家多多体谅。