生成中. . .
这篇文章是教大伙儿如何给博客的侧边栏中加上一个微信公众号的卡片,文章中贴上了实现该功能和美化的源码,需要修改添加pug和css代码才能实现这个功能。
It has been 896 days since the last update, the content of the article may be outdated.
前言 这个效果我很喜欢,所以专门写一篇美化教程,希望能帮到一样喜欢这种效果的小伙伴们。鸣谢安知鱼大佬 的指导!
预览 效果如下图:
修改主题配置文件 找到主题配置文件 _config.butterfly.yml ,开启侧边栏微信,修改如下:
1 2 3 4 5 6 7 8 9 10 11 card_announcement: enable: false content: Welcome to my blog !!! </br> Here you can find some help documents about my open source projects. card_weixin: - enable: false + enable: true card_recent_post: enable: true limit: 5 # if set 0 will show all sort: updated # date or updated sort_order: # Don't modify the setting unless you know how it works
添加pug模板文件 新建themes/butterfly/layout/includes/widget/card_weixin.pug,编写如下代码:
1 2 3 4 5 6 if theme.aside.card_weixin.enable .card-widget.anzhiyu-right-widget#card-wechat(onclick="window.open("/")") #flip-wrapper #flip-content .face .back.face
引入新添加的card_weixin.pug文件,修改themes/butterfly/layout/includes/widget/index.pug,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 #aside-content.aside-content //- post if is_post() - const tocStyle = page.toc_style_simple - const tocStyleVal = tocStyle if showToc && tocStyleVal .sticky_layout include ./card_post_toc.pug else !=partial('includes/widget/card_author', {}, {cache: true}) !=partial('includes/widget/card_announcement', {}, {cache: true}) + !=partial('includes/widget/card_weixin', {}, {cache: true}) !=partial('includes/widget/card_top_self', {}, {cache: true}) .sticky_layout if showToc include ./card_post_toc.pug !=partial('includes/widget/card_recent_post', {}, {cache: true}) !=partial('includes/widget/card_ad', {}, {cache: true}) else //- page !=partial('includes/widget/card_author', {}, {cache: true}) !=partial('includes/widget/card_announcement', {}, {cache: true}) + !=partial('includes/widget/card_weixin', {}, {cache: true}) !=partial('includes/widget/card_top_self', {}, {cache: true}) .sticky_layout if showToc include ./card_post_toc.pug !=partial('includes/widget/card_recent_post', {}, {cache: true}) !=partial('includes/widget/card_ad', {}, {cache: true}) !=partial('includes/widget/card_newest_comment', {}, {cache: true}) !=partial('includes/widget/card_categories', {}, {cache: true}) !=partial('includes/widget/card_tags', {}, {cache: true}) !=partial('includes/widget/card_archives', {}, {cache: true}) !=partial('includes/widget/card_webinfo', {}, {cache: true}) !=partial('includes/widget/card_bottom_self', {}, {cache: true})
新建css样式 新建source/css/aside_content_card_widget.css样式,内容添加如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 #aside-content .card-widget #card-wechat { background : #57bd6a ; display : flex; justify-content : center; align-content : center; padding : 0 ; cursor : pointer; border : none; height : 110px ; } #aside-content .card-widget { border-radius : 12px ; transition : 0.3s ; } #flip-wrapper { -webkit-perspective : 1000 ; perspective : 1000 ; } #flip-wrapper { position : relative; width : 235px ; height : 110px ; z-index : 1 ; } #flip-content { width : 100% ; height : 100% ; -webkit-transform-style : preserve-3 d; transform-style : preserve-3 d; transition : cubic-bezier (0 , 0 , 0 , 1.29 ) 0.3s ; } #aside-content #flip-wrapper #flip-content .face { position : absolute; width : 100% ; height : 100% ; -webkit-backface-visibility : hidden; backface-visibility : hidden; background : url (https://img02.anzhiy.cn/adminuploads/1/2022/09/11/631ddb7c9b250.png ) center center no-repeat; background-size : 100% ; } #aside-content #flip-wrapper #flip-content .back .face { display : block; -webkit-transform : rotateY (180deg ); transform : rotateY (180deg ); box-sizing : border-box; background : url (https://img02.anzhiy.cn/adminuploads/1/2022/09/11/631ddeb0900b7.png ) center center no-repeat; background-size : 100% ; } #flip-wrapper :hover #flip-content { -webkit-transform : rotateY (180deg ); transform : rotateY (180deg ); }
将 background: url(xxx) center center no-repeat; 中的xxx换成自己的公众号图片即可,两处的正反图片可以自行尝试。
引入css 修改 _config.butterfly.yml 主题配置文件,修改内容如下:
1 2 3 4 5 6 7 8 9 # Inject # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag) # 插入代码到头部 </head> 之前 和 底部 </body> 之前 inject: head: # 自定义css + - <link rel="stylesheet" href="/css/aside_content_card_widget.css"> #添加的自定义css文件 bottom: # 自定义js
Hexo三连 1 hexo clean && hexo g && hexo s