在翻开往的时候看到了一位老哥的博客里面正好有这个教程,整了一下发现效果还不错!
注:文中的代码部分均引用自原博客
添加文件到hexo-butterfly主题中
前置条件
首先,魔改hexo主题最好是用git方式安装的主题,即主题的文件是在你的hexo目录的themes
文件夹下,而不是用npm安装的主题(那样安装的主题是在node_modules下,换设备或者更新主题的时候修改会被覆盖)
添加相关文件
添加pug文件
在themes/butterfly/layout/includes/page/equipment.pug
中写入如下内容
添加pug注册
在themes\butterfly\layout\page.pug
中添加如下修改
我的butterfly主题是未魔改过的4.9.0版本,添加后的page.pug文件如下
添加css文件和引用
在source
中创建一个equipment文件夹,方便定位新添加文件。在equipment文件夹中添加equipment.css文件。
该文件的完整路径为source/equipment/equipment.css
,内容如下
在butterfly的配置文件中添加css的引用,这里我添加到了head部分中
添加index文件
在source/equipment
中添加index.md
文件,写入如下内容
这里的标题可以根据你的需要修改。
添加data文件(配置)
随后就是data文件的添加了,这部分和link里面的友链配置很类似。
在source/data
文件夹下添加equipment.yml
文件,并写入如下内容:
注意,这里面的图片链接都是源博主heo的博客链接,它们都有防盗链,所以在你的本地测试中应该是无法访问这些图片的,这都是正常情况。你应该根据自己的需要将其替换成你自己的图片。
效果
效果还是很不错的,虽然没有原博主使用的主题中那么炫酷,但作为一个展示页面肯定是够用啦!
这里我发现了一个问题,就是整个框框没有描边,边界感很差,甚至说看不到哪里是边界。为了更好的辨认每一个框框,我们可以修改一下原博主的css文件
将原本的css文件中如上部分里面的border修改一下就可以了,颜色根据你的喜好调整。有了描边之后,看起来会舒服一些!
改成我自己的图片后的最终效果