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

Posted on by hackdl

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

推荐阅读

  • 基于 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:
 -
  4. 最后重新编译运行即可看见效果。

BUG 反馈

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

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

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

#drone .container {
    overflow: hidden;
}

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 分享一些我技术成长的感悟

今晚来聊聊我在技术成长中的一些感悟，跟大家分享下。 BALABALA 在大学的时候，我一个计算机专业相关的证书都没考，自认为这些证书对我以后找工作没什么大的帮助。于是我把时间更多地花在研究八股文上，因为八股文在面试的时候是要用到的。 （利益化） 我会对我做的事…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: