飞只因太美,给你的首页装上吧!

晏明
• 阅读 424

原文链接:飞只因太美,给你的首页装上吧!

推荐阅读

效果预览

飞只因太美,给你的首页装上吧!

实际效果请移步 首页

步骤

  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;
}

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究