Hexo + Butterfly 侧边栏公众号

原文链接 :Hexo + Butterfly 侧边栏公众号

推荐阅读

  • 基于 Hexo 从零开始搭建个人博客(一): 环境准备
  • 基于 Hexo 从零开始搭建个人博客(二): 项目初识
  • 基于 Hexo 从零开始搭建个人博客(三): 主题安装
  • 基于 Hexo 从零开始搭建个人博客(四): 基础配置
  • 基于 Hexo 从零开始搭建个人博客(五): 详细配置
  • 基于 Hexo 从零开始搭建个人博客(六): 主题美化
  • 基于 Hexo 键入搜索功能
  • 基于 Hexo 键入分享功能
  • 基于 Hexo 键入在线聊天功能
  • 基于 Hexo 键入评论功能
  • Hexo + Butterfly 自定义右键菜单
  • Hexo + Butterfly 一些常见问题
  • 请收下这只可爱的猫咪吧
  • 关于Vercel被墙导致获取Twikoo评论失败的解决方案
  • 飞只因太美,给你的首页装上吧!
  • Hexo + Butterfly 自定义页脚

效果预览

Hexo + Butterfly 侧边栏公众号_第1张图片
Hexo + Butterfly 侧边栏公众号_第2张图片
Hexo + Butterfly 侧边栏公众号_第3张图片
Hexo + Butterfly 侧边栏公众号_第4张图片

这里用 4.5.1 版本跑了【侧边栏公众号】的功能,主题是新拉的,未过多美化,只是为了验证下该功能有没有问题。如果你在使用此功能时遇见了 BUG ,请检查card_wx.pug是否正确引入以及custom.css是否正确引入。

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

步骤

  1. BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget文件夹下新建card_wx.pug文件,
    具体位置如下图:
    Hexo + Butterfly 侧边栏公众号_第5张图片
    将以下代码复制到文件中。
#card-wechat.card-widget.tzy-right-widget
    #flip-wrapper
      #flip-content
        .face
        .back.face
  1. BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug中引入上一步中创建的card_wx.pug文件。
    具体位置如下图:
    Hexo + Butterfly 侧边栏公众号_第6张图片
  2. 将以下代码复制到自定义的custom.css中,不会自定义css的请阅读 Hexo + Butterfly 一些常见问题 一文中关于【关于自定义的 js 和 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(https://img.zhheo.com/i/2022/08/31/630efc6e3e794.png) center center no-repeat;
    background-size: 100%;
}

.back.face {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    background: url(https://bu.dusays.com/2022/10/30/635e9c6a228a3.png) center center no-repeat;
    background-size: 100%;
}

/* 公众号 End */

此段css中,你需要将background: #49b1f5 !important中的#49b1f5换成你自己的主题色,另外还需要将 https://bu.dusays.com/2022/10/30/635e9c6a228a3.png 这个图片中的二维码部分换成你自己公众号的二维码,你可以使用 在线PS图片 工具,将图中的二维码换成你公众号的二维码。
4. 最后重新编译运行即可看见效果。

你可能感兴趣的:(前端,javascript,vue.js)