实际效果请移步 首页

步骤

  1. BlogRoot/node_modules/hexo-theme-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/node_modules/hexo-theme-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. 最后重新编译运行即可看见效果。