推薦閱讀
- 基于 Hexo 從零開始搭建個(gè)人博客（一）: 環(huán)境準(zhǔn)備
- 基于 Hexo 從零開始搭建個(gè)人博客（二）: 項(xiàng)目初識(shí)
- 基于 Hexo 從零開始搭建個(gè)人博客（三）: 主題安裝
- 基于 Hexo 從零開始搭建個(gè)人博客（四）: 基礎(chǔ)配置
- 基于 Hexo 從零開始搭建個(gè)人博客（五）: 詳細(xì)配置
- 基于 Hexo 從零開始搭建個(gè)人博客（六）: 主題美化
- 基于 Hexo 鍵入搜索功能
- 基于 Hexo 鍵入分享功能
- 基于 Hexo 鍵入在線聊天功能
- 基于 Hexo 鍵入評(píng)論功能
- Hexo + Butterfly 自定義右鍵菜單
- Hexo + Butterfly 一些常見問題
- 請(qǐng)收下這只可愛的貓咪吧
- 關(guān)于Vercel被墻導(dǎo)致獲取Twikoo評(píng)論失敗的解決方案
- 飛只因太美酪穿，給你的首頁裝上吧业扒！
- Hexo + Butterfly 自定義頁腳
這里用 4.5.1 版本跑了【側(cè)邊欄公眾號(hào)】的功能秽五，主題是新拉的，未過多美化，只是為了驗(yàn)證下該功能有沒有問題。如果你在使用此功能時(shí)遇見了 BUG ，請(qǐng)檢查
card_wx.pug是否正確引入以及custom.css是否正確引入呻逆。
本人用的是npm方式安裝的 hexo-theme-butterfly簿废，后續(xù)魔改時(shí)更改的文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夾中的文件空入。如果你是git clone方式安裝的主題，請(qǐng)?jiān)凇綛logRoot/themes/butterfly】文件夾下修改對(duì)應(yīng)的文件族檬。
步驟
- 在
BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget文件夾下新建card_wx.pug文件歪赢，
具體位置如下圖：
image
將以下代碼復(fù)制到文件中。
#card-wechat.card-widget.tzy-right-widget
#flip-wrapper
#flip-content
.face
.back.face
- 在
BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug中引入上一步中創(chuàng)建的card_wx.pug文件导梆。
具體位置如下圖：
image - 將以下代碼復(fù)制到自定義的
custom.css中轨淌，不會(huì)自定義css的請(qǐng)閱讀 Hexo + Butterfly 一些常見問題 一文中關(guān)于【關(guān)于自定義的 js 和 css 文件】部分。
/* 公眾號(hào) 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;
}
/* 如果你設(shè)置了aside 的 mobile 為 false看尼，記得放開下面這段注釋递鹉；
如果你設(shè)置了aside 的 mobile 為 true ，不需要改動(dòng)藏斩。 */
/* @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%;
}
/* 公眾號(hào) End */
此段css中躏结，你需要將background: #49b1f5 !important中的#49b1f5換成你自己的主題色，另外還需要將 https://bu.dusays.com/2022/10/30/635e9c6a228a3.png 這個(gè)圖片中的二維碼部分換成你自己公眾號(hào)的二維碼狰域，你可以使用 在線PS圖片 工具媳拴，將圖中的二維碼換成你公眾號(hào)的二維碼。
- 最后重新編譯運(yùn)行即可看見效果兆览。
