侧栏友链通讯录卡片
点击查看更新记录
更新记录
2022-06-24:内测版v0.03
- 新增高度上限。避免占比过高。
- 新增夜间模式配色
- 调整padding
- 增加分组信息吸附显示
2022-06-24:内测版v0.02
- 实现离线头像和在线头像区分显示
- 自动计算在线头像人数并显示在分组栏
2022-06-23:内测版v0.01
- 实现侧栏友链通讯录
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
参考了折叠框的语法 | HTML 标签 |
参考了PC版腾讯QQ的通讯录样式 | 腾讯QQ界面 |
店长的碎碎念
感觉好久好久没有写友链魔改和侧栏魔改的教程了，之前都是在捣鼓各种各样的API插件。然后我这次写的时候发现，我本地的widget文件夹里居然就剩下SAO相关的侧栏卡片pug文件了。看来我插件化的还是很勤快的嘛。不过SAO UI PLAN相关的内容还不打算做插件化，一方面我当初写的代码还比较差，一方面最近看到yamapink用vue封装的SAO UI，顿时萌生了我也要用vue来封装我所有的魔改教程的兴趣。
要不干脆整个大礼包插件，就叫hexo-butterfly-akilar-extra怎么样。顺便再去给主题提个issues，提供些植入版块template的接口配置项之类的。插件化还不是美滋滋。
然后就是这次还久违的拿友链进行试做，想到整通讯录也是因为新版的友链页面我打算弄成点击侧栏在主页面显示对应人员的角色属性卡片，对，依然是SAO风格的那种。然后常态就显示我自己的角色属性卡片，多弄点悬停点击的按钮上去，这样就能把about和link页面合起来。
贰猹开始新建文件夹了，新版的友链企划应该会和友链朋友圈有联动，这次设计的友链头像离线灰色效果的功能到时候可以用来区分最近是否有更新的友链。
魔改步骤
预览效果
本企划还处于草创阶段，自适应样式有待优化，且版本针对当前所是用的butterfly_v4+，低版本用户不再另外支持。
新建[Blogroot]\themes\butterfly\layout\includes\widget\card_friend_link.pug
if theme.aside.card_friend_link.enable
.card-widget.card-friend-link
.item-headline
i.far.fa-address-book
span= _p('aside.card_friend_link')
.card-friend-link-container
if site.data.link
each i in site.data.link
if i.class_name
details.card-friend-class-name
summary.card-friend-class-desc(title=i.class_desc)
sapn!=i.class_name
span.online-friend-number
sapn!=i.link_list.length
each item in i.link_list
if !(item.offline)
a.card-friend-item.online-friend-link(href=url_for(item.link) title=item.name target="_blank")
img.no-lightbox.card-friend-avatar(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
.card-friend-details
.card-friend-name= item.name
.card-friend-descr(title=item.descr)= item.descr
each item in i.link_list
if item.offline
a.card-friend-item.offline-friend-link(href=url_for(item.link) title=item.name target="_blank")
img.no-lightbox.card-friend-avatar(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
.card-friend-details
.card-friend-name= item.name
.card-friend-descr(title=item.descr)= item.descr
.ja-pjax
script.
var addressbook = document.getElementsByClassName("card-friend-class-name");
for (var i=0; i<addressbook.length; i++){
var online = addressbook[i].getElementsByClassName("online-friend-link").length;
addressbook[i].getElementsByClassName("online-friend-number")[0].innerHTML = " "+online+"/";
}新建[Blogroot]\themes\butterfly\source\css\_layout\card_friend_link.styl
if hexo-config('aside.card_friend_link.enable')
:root
--card-friend-class-desc-bgcolor: #e7e7e7
--card-friend-name-color: #000
--card-friend-item-hover: #e1e1e1
--card-friend-descr-color: #797979
[data-theme="dark"]
--card-friend-class-desc-bgcolor: #111111
--card-friend-name-color: #fff
--card-friend-item-hover: #222222
--card-friend-descr-color: #797979
#aside-content
.card-widget.card-friend-link
padding: 20px 0px
.card-widget.card-friend-link
.card-friend-link-container
max-height 460px
overflow scroll
&::-webkit-scrollbar
display: none
summary.card-friend-class-desc
padding 0px 15px
details.card-friend-class-name[open]
summary.card-friend-class-desc
position: sticky;
top: 0px;
background: var(--card-friend-class-desc-bgcolor);
z-index: 1
a
&.card-friend-item
padding 0px 15px
height 60px
width auto
display flex
align-items center
flex-wrap nowrap
&:hover
background-color var(--card-friend-item-hover)
img
&.card-friend-avatar
width 40px
height 40px
border-radius 50%
margin 10px 10px
.offline-friend-link
img
&.card-friend-avatar
filter: grayscale(100%)
.card-friend-details
width auto
height 60px
display flex
flex-wrap nowrap
flex-direction column
justify-content center
align-items flex-start
.card-friend-name
color var(--card-friend-name-color)
.card-friend-descr
font-size 12px
white-space nowrap
overflow hidden
text-overflow ellipsis
width 12em
color var(--card-friend-descr-color)
修改[Blogroot]\themes\butterfly\layout\includes\widget\index.pug,视版本不同，此文件会有所出入，请读者参考以前的侧栏类魔改教程自行观察规律进行调整。我非常不建议你们在post页面添加友链通讯录版块。这会让你每页的dom数量爆表。我之前这么做，导致我在运行gulp时压缩html时直接内存溢出。
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
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_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_top_self', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
+ !=partial('includes/widget/card_friend_link', {}, {cache: true})
!=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})修改[Blogroot]\themes\butterfly\languages\zh-CN.yml,新增内容。非简中用户自行修改对应的language文件。
aside:
articles: 文章
tags: 标签
categories: 分类
card_announcement: 公告
card_categories: 分类
card_tags: 标签
card_archives: 归档
card_recent_post: 最新文章
+ card_friend_link: 通讯录
修改[Blogroot]\_config.butterfly.yml,新增配置项：
aside:
enable: true
hide: true
button: true
mobile: false # display on mobile
position: right # left or right
card_author:
enable: true
description:
button:
icon: fa fa-paper-plane faa-tada
text: 加入糖果屋群聊
link: https://jq.qq.com/?_wv=1027&k=tNuEdliQ
enable: true
card_announcement:
enable: false
content:
+ card_friend_link: #友链通讯录
+ enable: true
+ sort_order: # Don't modify the setting unless you know对需要显示离线状态的友链，可以在[Blogroot]\source\_data\link.yml中给他添加一个离线的标签,例如：
name: 🧊小冰博客 #152
+ offline: true
link: https://zfe.space/
avatar: https://npm.elemecdn.com/akilar-friends@latest/avatar/zfe.space.jpg
descr: 做个有梦想的人！
siteshot: https://npm.elemecdn.com/akilar-friends@latest/siteshot/zfe.space.jpgTO DO
仿照QQ样式添加友链侧栏卡片
实现离线头像和在线头像区分显示
实现自动计数在线友链数目
pjax适配
调整自适应
与友链朋友圈教程联动
NPM插件化
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-06-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录