# 首页

butterfly提供了令人惊艳的首页展示,很多小伙伴都是被首页吸引而来。那么首页的魔改对于博客肯定是高优先级的调整了。

# 组件

在文章顶部添加一些自定义的组件用来展示信息。

首页磁贴 (opens new window) - Akilar

本项目是对冰卡诺老师写的教程:基于Butterfly主题的分类磁贴2.0版进行重构,去除了所有繁杂的引入js的过程,所以也就无需引入jquery和vue,也完美支持pjax。当前4.0版本可以自动获取分类及文章数。封面和描述配置项直接嵌入配置文件。支持自定义行数,超过自动切换为滚动显示。可选择三列或四列显示。

首页置顶轮播图 (opens new window) - Akilar

本项目是对冰卡诺老师写的教程:基于Butterfly主题的轮播手动置顶文章进行重构,精简了部分样式。适配pjax。

教程:hexo-swiper 文章置顶插件 (opens new window) - 小冰

NPM 插件安装的部署方法

gitcalendar (opens new window) - Akilar

基于@冰卡诺 (opens new window)老师的项目做了微调。进行pjax适配,提取配置项。转换成插件化配置,通过配置文件开关控制各类样式资源的引入。补全自建API的部署教程。

教程:hexo-githubcalendar 插件 1.0 (opens new window) - 小冰

最近在各个群友的催促下,小冰也不再咕咕咕了,首先第一弹则是经典魔改作品 githubcalendar 的插件化。鉴于对主题进行过度魔改会大大增加更新的难度以及主题作者的维护难度,本着简化更新步骤及降低魔改难度的目的,小冰特此学习了如***一般的 hexo api 文档,并在@lete 乐特老师的帮助下艰难的适配了 pjax(谁叫金牌售后@akilar被万恶的 mc 给拐跑了,可怜的小冰只好自己适配 pjax 了)。虽说插件目前还有些小 bug,但日常使用基本没啥问题,也欢迎提出 pr。

Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式 (opens new window) - 张洪Heo

好久没有写魔改教程了,今天带来一个最近琢磨的一个分类条的显示。以前非常喜欢这种tab切换就能更换列表文章的显示方式,可是静态博客想要做到这一点真的是太难了,而且是原生html,不是vue。我的博客一直没有能够在首页展示分类的入口。起初因为分类比较少,但是现在已经很多了。那么一个展示分类的条就是非常必要的了。

这个分类条非常简约,原生js。魔改需要自己具备一定的魔改基础。

Hexo博客 | 动态分类标签条,自动获取全站分类与标签进行展示 (opens new window) - Justlovesmile

本文是对Heo博主写的Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式文章的补充,增加了动态标签条,并且可以自动获取全站分类和标签名称。

教程:hexo-magnet 插件 1.0 (opens new window) - 小冰

其实这个插件和hexo-swiper-bar几天前就写好了,但是我懒,所以没写教程。

Hexo butterfly首页随便逛逛banner教程 (opens new window) - LYX

不出意外,这又是一篇水文。这段时间不怎么更新就是因为要开学了要赶作业,而且也在折腾其它的不少东西。相信你们也看到了博客的大变,具体见更新日志。

hexo-butterfly-首页改造 (opens new window) - holic-x

本篇文章距离上次更新已有 225 天, 篇中部分内容可能需做相应更新咯,如有问题请及时滴滴站长.

# 文章卡片

文章卡片的样式可以自定义成自己喜欢的。

首页文章卡片修改 (opens new window) - Akilar

贰猹和我交流了下他对主题首页卡片的设计想法,效果很不错。原本呢,贰猹是打算等自己学好了前端就把这个卡片写出来的。然后,就这么咕咕咕了一个寒假(其实是被木木抓起来关进小黑屋里写友链朋友圈后端API,写不好不给饭吃)。冰老师在鸽之灵,看到后继有鸽,也会很欣慰吧。 然后我就忍不住了啊,这么优秀的设计,等贰猹写出来我要等到啥时候。二话不说,征求了贰猹的授权以后,咱就开始动手进行试做。

几行代码实现最新文章标志 (opens new window) - Leonus

在开始之前,如果你没有自定义js和css文件,请先查看此文章:Hexo博客添加自定义css和js文件

Butterfly文章卡片加上最新文章标志 (opens new window) - 轻笑Chuckle

昨天@Leonus大佬用js给首页最新的文章卡片加上了最新标志:几行代码实现最新文章标志 | Leonus 不过每次切换到首页都要执行这个js,不然最新标志就不显示,开启了pjax之后,怎么让这js每次切换到首页都执行是个问题,而且每次都执行也会多吃一些性能

Butterfly给首页首个文章卡片加个class (opens new window) - 轻笑Chuckle

看@heo的博客首页,他的第一个文章卡片是其余卡片宽度的两倍,F12可知是首页的首个文章卡片多了一个class,虽然我的文章卡片暂时没这需求,但刚好有人问怎么才能控制首页第一个文章卡片的样式,也刚好我有思路,就实现一下吧

教程:butterfly主题文章双栏布局插件 (opens new window) - 小冰

NPM 插件安装的部署方法

最近更新时间: 2022-9-4