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

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

推荐阅读

效果预览

实际效果请移步 首页

步骤

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

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

你可能感兴趣的:(前端hwnd)