社区首页 >专栏 >飞只因太美，给你的首页装上吧！

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

唐志远

发布于 2023-08-01 11:49:20

14400

代码可运行

文章被收录于专栏：FE32 CodeFE32 Code

运行总次数：0

代码可运行

效果预览

实际效果请移步首页。

步骤

在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

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

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

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

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

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

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

BUG 反馈

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

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

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

#drone .container {
    overflow: hidden;
}

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-06，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

2525

Go 开发者必备：Protocol Buffers 入门指南

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

1380

60页PPT全解：DeepSeek系列论文技术要点整理

2459

Hexo + Butterfly 侧边栏公众号

hexo 编译二维码工具公众号

本人用的是npm方式安装的 hexo-theme-butterfly，后续魔改时更改的文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone方式安装的主题，请在【BlogRoot/themes/butterfly】文件夹下修改对应的文件。

唐志远

2023/04/22

6730

个人小站折腾后记

容器博客插件教程配置

🧑个人简介：大家好，我是 shark-Gao，一个想要与大家共同进步的男人😉😉

程序员Leo

2023/08/08

1.2K0

基于 Hexo 从零开始搭建个人博客（六）

node.js javascript css hexo

2021-04-27 butterfly3.4.0 -> butterfly3.7.1

唐志远

2022/10/27

1.1K0

SAO-UI-PLAN-LINK-START

网站存储 css

又到了店长的执念时间。ヾ(≧▽≦*)o 这次在浏览codepen上的有趣项目时看到了一个星际穿越效果的项目-Hyperspace，瞬间来了兴趣，只要稍加变形，把底图从星空换成一张彩色点阵图就可以实现刀剑神域里经典的登录画面了。

Akilar

2022/03/30

7410

源计划-方舟：首页轮播图

javascript css

本篇讨论的轮播图的配置项可能与hexo-butterfly-swiper插件的配置项有冲突，如果您曾经安装过该插件或者该插件的衍生插件(例如anzhiyu、anzhiyupro、allbs、ihao、lyx、btmuli,一查才知道已经有这么多亚种了吗)。请确保您已经卸载了它们。

Akilar

2023/01/30

7150

请收下这只可爱的猫咪吧

css background image transparent 编译

制作一个盛放内容的盒子，在BlogRoot/themes/butterfly/layout/includes/head.pug最后一行加入如下代码：

唐志远

2023/08/01

2240

侧栏友链通讯录卡片

网站

感觉好久好久没有写友链魔改和侧栏魔改的教程了，之前都是在捣鼓各种各样的API插件。然后我这次写的时候发现，我本地的widget文件夹里居然就剩下SAO相关的侧栏卡片pug文件了。看来我插件化的还是很勤快的嘛。不过SAO UI PLAN相关的内容还不打算做插件化，一方面我当初写的代码还比较差，一方面最近看到yamapink用vue封装的SAO UI，顿时萌生了我也要用vue来封装我所有的魔改教程的兴趣。

Akilar

2022/11/28

5110

Hexo-悬挂灯笼

css hexo node.js

新建CSS样式在BlogRoot/node_modules/hexo-theme-butterfly/source/css文件下新建 CSS 文件，并命名为 lantern.css( 当然名字随便取，只要在主题配置文件中引入对应的CSS文件即可 )，将以下代码复制到新建的lantern.css中。

唐志远

2022/10/27

3220

SAO-UI-PLAN-Controlldot

编程算法

虽然当时构思的时候想法很丰满，但是做出来以后突然觉得功能好鸡肋。左右浮动切换上下篇算是唯一的亮点了。上下按钮用拖动方式体感上还不如直接用侧栏菜单的按钮功能来的方便。尤其是考虑到PC端，手机端，窄屏设备，触屏电脑等设备动作的监测判断。总是牵扯到一大堆的交集。然后就是点击动作在某个屏宽比下会执行两次。 Dorakika的代码我也没吃透，似乎有个长按以后能够拖动悬浮菜单的功能，搞不好我多删了一些代码，长按以后拖动的结束动作一直没法按照期望的来。这个悬浮按钮不打算实装了，作为学习用吧。bug太多，不修啦。

Akilar

2022/03/31

9220

Hexo + Butterfly 自定义页脚

css hexo footer pug 编译

唐志远

2023/04/22

6300

如何新窗口打开导航链接？

trim 博客测试服务器域名

像没有服务器，没弄多个Github账号的人，比如我（资深白嫖党），可能会遇到这个问题。

唐志远

2023/08/01

4620

纯CSS实现侧栏卡片显隐

css 网站

以前我有写过一篇基于Butterfly的手机端fixed定位侧栏布局魔改方案,抛开被洪哥忽悠而起的这么长的标题不谈，在这篇中是通过编写一个手机端fixed定位的样式，并通过js监测到对应的点击动作后，给相应的侧栏卡片添加上这个样式。同时也是通过js不断的进行样式初始化和class的增减。

Akilar

2023/03/08

1K0

Hexo博客 | 如何为博客添加顶部轮播图和文章推荐卡片

hexo css javascript 腾讯云开发者社区

最近看了zhheo大佬的博客首页，发现大佬的布局还是那么的好看，于是果断COPY，再加上我一直想要在我的博客首页加一个大画幅的轮播图插件，于是又参考了Hassan的文章轮播图…经过一番折腾，效果如下：

Justlovesmile

2022/09/02

1.3K1

Hexo侧边栏添加知乎热榜

css 网站

1.在\themes\butterfly\layout\includes\widget目录下新建card_zhihu.pug文件，并写入如下代码：

花猪

2023/03/01

6940

关于 Hexo + Butterfly 的常见问题

hexo javascript github css git

如果改动了站点配置文件_config.yml 和主题配置文件_config.butterfly.yml，需要重新编译才能看到效果。

唐志远

2022/10/27

2.5K0

SAO-UI-PLAN-Notify

css

故事还要从上一篇教程说起，本来嘛，我只是打算写个左右翻页的上下篇UI重写。然后dorakika从我的魔改里得到灵感，写了个悬浮按钮。

Akilar

2022/03/31

5980

butterfly文章页美化教程

css cdn https 网络安全腾讯云开发者社区

在ROOT\themes\butterfly\source\css\page目录新建topimg.styl

小N同学

2022/03/01

9030

Hexo添加首页置顶轮播图

css 缓存 cdn 腾讯云开发者社区

在写系列博文时对于某一篇文章的寻找过程会比较繁琐（对于博主而言自然会简单些，但是对于访客来讲就没那么轻松），因此参考Akilar的博文弄了一个置顶轮播图。可以把系列博文的链接汇总起来做一个索引，放置在轮播图中。这样既可以展示博主想对外展示的内容，又方便快速进行文章跳转。

花猪

2022/02/22

1.1K0

魔改笔记三：网站插件添加及显示效果美化

搜索网站笔记插件兼容性

前些天，LongHe站长评论了我说，猫猫挡住我的备案号了，我看了一下我的电脑上其实显示正常，就回了一句正在搞（其实是之前研究过但是懒得搞搁置了QAQ），但是这两天搜索了一下，故意遮挡备案号会被吊销备案号，并且罚款，有点害怕赶紧添加了一个，但是感觉一个这个功能有点水，所以又分享了今天才加上的毛玻璃背景特效和右上角和风天气插件。

柳神

2024/05/30

1250

源计划-赛博风格侧栏按钮样式修改

css

本项目目前还是内测状态，样式优先考虑与本站的兼容，对于默认主题的兼容性适配暂时延后。一切以将本站装点完成为最优先事项。我以前往侧栏按钮里丢过不少功能按钮，所以rightside.pug已经和原版不一样了，但是原理还是基本不变的。我会尽可能在文章里给出示例和声明一些必要的改动步骤。源计划-赛博的魔改内容本就不是为零基础的小白设计的。所以没有前端基础的不要来使用，我也没有足够的精力来辅导。

Akilar

2023/01/30

5410