Hexo搭建个人博客系列【八】- Butterfly侧边栏公众号

本期将为大家讲解如何在Hexo Butterfly主题的侧边栏显示公众号图片。

0. 前期回顾

最新Hexo+GitHubPages搭建个人博客【一】

最新Hexo+GitHubPages搭建个人博客【二】-使用Vercel加速和自定义域名

最新Hexo+GitHubPages搭建个人博客【三】-使用GitHub自带的自定义域名]

最新Hexo+GitHubPages搭建个人博客【四】-Hexo基础使用

最新Hexo+GitHubPages搭建个人博客【五】-主题Icarus使用

Hexo搭建个人博客系列【六】- NexT主题使用

Hexo搭建个人博客系列【七】- Butterfly主题使用及美化

1. 效果预览

2. 实现步骤

2.1 编辑挂件文件

在博客根目录下的themes/butterfly/layout/includes/widget文件夹下新建card_wx.pug文件。

文件位置如图：

复制以下代码到文件中。

#card-wechat.card-widget.tzy-right-widget
    #flip-wrapper
      #flip-content
        .face
        .back.face

2.2 引入挂件代码

编辑themes/butterfly/layout/includes/widget/index.pug文件，在其中引入上一步中创建的card_wx.pug文件。

文件位置如图：

参考下图修改

2.3 创建样式文件

创建自定义样式文件

在themes/butterfly/source/css 文件夹下创建自定义 css文件custom.css。

文件位置如下图

编辑自定义样式文件

编辑themes/butterfly/source/css/custom.css文件，复制以下代码到文件中：

/* 公众号 Start */

[data-theme='light'] #aside-content .card-widget#card-wechat {
    background: #49b1f5 !important;
}

#aside-content .card-widget#card-wechat {
    background: var(--card-bg);
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0;
    cursor: pointer !important;
    border: none;
    height: 110px;
}

/* 如果你设置了aside 的 mobile 为 false，记得放开下面这段注释；
   如果你设置了aside 的 mobile 为 true ，不需要改动。 */

/* @media screen and (max-width: 768px) {
    #aside-content .card-widget#card-wechat {
        display: none !important;
    }
} */

@media screen and (min-width: 1300px) {
    #aside-content .card-widget {
        margin-top: 1rem;
    }
}

#flip-wrapper {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: relative;
    width: 235px;
    height: 110px;
    z-index: 1;
}

#flip-wrapper:hover #flip-content {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#flip-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    #本地图片写法 background: url(二维码图片地址) center center no-repeat;
    background: url(二维码图片地址) center center no-repeat;
    background-size: 100%;
}

.back.face {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    #本地图片写法 background: url(二维码图片地址) center center no-repeat;
    background: url(二维码图片地址) center center no-repeat;
    background-size: 100%;
}

/* 公众号 End */

此段css中，你需要将background: #49b1f5 !important中的#49b1f5换成你自己的主题色。

另外还需要将其中的二维码图片地址替换成你的二维码图片地址，二维码图片地址支持两种模式

引入自定义样式文件

编辑主题配置文件是themes/butterfly/_config.yml，修改其中的inject内容如下：

inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="https://blog.csdn.net/css/custom.css">

2.4 验证效果

启动服务并访问http://localhost:4000查看效果.

hexo clean && hexo s

如果没有生效，请确保以上的步骤是否完全正确，文件是否在正确的位置。

总结