文章链接 ：Hanging lanterns | 唐先森の博客

前言

之前有小伙伴留言问我博客悬挂灯笼如何实现的，现在写一篇简单的教程。

悬挂灯笼效果

效果如下：

1. PC端

2. Mobile端

步骤

1.  新建CSS样式

    在  themes\Butterfly\source\css  文件下新建 CSS 文件，并命名为 lantern.css ( 当然名字随便取，只要在主题配置文件中引入对应的 CSS文件即可 )，将以下代码复制到新建的 lantern.css 中。

css代码过多，请到该地址进行复制。

2. 新建PUG

在 themes\Butterfly\layout\includes 文件夹下新建  lantern.pug ，

``` CODE

.dengl

  .d-box

    .d1

      span

      span

        p

      ul

        li

        li  

        li

          span

        li  

        li  

    .d2

      span

      span

        p

      ul

        li

        li  

        li

          span

        li  

        li  

  .d-box1

    .d1

      span

      span

        p

      ul

        li

        li  

        li

          span

        li  

        li  

    .d2

      span

      span

        p

      ul

        li

        li  

        li

          span

        li  

        li   

```

3. 在 themes\Butterfly\layout\includes\head.pug  中引入 lantern.pug 。

具体位置请参考下图：

4. 在（_config.butterfly.yml）的inject.head中引入 `lantern.css`。

具体位置请参考下图：

5.重新编译文件再运行，即可看到效果。

遇到问题

如果在阅读过程中遇到什么问题 ，请在 评论区 留言 ，我会在第一时间内帮助您解决问题 。