飞只因太美，给你的首页装上吧！

原文链接：飞只因太美，给你的首页装上吧！

推荐阅读

• 基于 Hexo 从零开始搭建个人博客（一）
• 基于 Hexo 从零开始搭建个人博客（二）
• 基于 Hexo 从零开始搭建个人博客（三）
• 基于 Hexo 从零开始搭建个人博客（四）
• 基于 Hexo 从零开始搭建个人博客（五）
• 基于 Hexo 从零开始搭建个人博客（六）
• 基于 Hexo 键入搜索功能
• 基于 Hexo 键入分享功能
• 基于 Hexo 键入在线聊天功能
• 基于 Hexo 键入评论功能
• Hexo + Butterfly 自定义右键菜单
• Hexo + Butterfly 一些常见问题
• 请收下这只可爱的猫咪吧
• 关于Vercel被墙导致获取Twikoo评论失败的解决方案
• Hexo + Butterfly 自定义页脚
• Hexo + Butterfly 侧边栏公众号

效果预览

实际效果请移步 首页 。

步骤

1. 在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  

2. 在BlogRoot/themes/butterfly/layout/includes/header/index.pug中引入上一步中创建的plane.pug文件。

!=partial('includes/header/plane', {}, {cache: true})

跟#site-info、#scroll-down同级。
具体位置如下图：

3. 在主题配置文件_config.butterfly.yml中引入plane.css。

inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css">

4. 最后重新编译运行即可看见效果。

BUG 反馈

关于下方有横向滚动条的 bug , 如下图所示

我已经更新了 npm 包，但是回源好像并未及时生效。

为了及时解决这个 bug , 你可以在自定义的 css 中加入下面这个样式即可。

#drone .container {
    overflow: hidden;
}

重新编译运行即可看见效果。