原文链接：飞只因太美，给你的首页装上吧！
举荐浏览
- 基于 Hexo 从零开始搭建集体博客（一）
- 基于 Hexo 从零开始搭建集体博客（二）
- 基于 Hexo 从零开始搭建集体博客（三）
- 基于 Hexo 从零开始搭建集体博客（四）
- 基于 Hexo 从零开始搭建集体博客（五）
- 基于 Hexo 从零开始搭建集体博客（六）
- 基于 Hexo 键入搜寻性能
- 基于 Hexo 键入分享性能
- 基于 Hexo 键入在线聊天性能
- 基于 Hexo 键入评论性能
- Hexo + Butterfly 自定义右键菜单
- Hexo + Butterfly 一些常见问题
- 请收下这只可恶的猫咪吧
- 对于Vercel被墙导致获取Twikoo评论失败的解决方案
- Hexo + Butterfly 自定义页脚
- Hexo + Butterfly 侧边栏公众号
成果预览
实际效果请移步 首页 。
步骤
-
在
BlogRoot/themes/butterfly/layout/includes/header文件夹下新建一个plane.pug文件。
具体位置如下图：将以下代码复制到文件中。
#drone .container .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .trigger .monitor .opening .camera.o-x .camera.o-y .camera.o-z .awing .stars .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .star .fly.o-x .fly.o-y .fly.o-z .free_bounce .free_rotate .body .cockpit .under .back .left .right .edge_left .edge_right .boosts .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .boost .wing_left .under .back .left .right .wing_right .under .back .left .right -
在
BlogRoot/themes/butterfly/layout/includes/header/index.pug中引入上一步中创立的plane.pug文件。!=partial('includes/header/plane', {}, {cache: true})跟
#site-info、#scroll-down同级。
具体位置如下图： -
在主题配置文件
_config.butterfly.yml中引入plane.css。inject: head: - <link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css"> - 最初从新编译运行即可看见成果。
BUG 反馈
对于下方有横向滚动条的 bug , 如下图所示
我曾经更新了 npm 包，然而回源如同并未及时失效。
为了及时解决这个 bug , 你能够在自定义的 css 中退出上面这个款式即可。
#drone .container {
overflow: hidden;
}从新编译运行即可看见成果。
发表回复