点击查看更新记录

更新记录

2022-06-24:内测版v0.03

  1. 新增高度上限。避免占比过高。
  2. 新增夜间模式配色
  3. 调整padding
  4. 增加分组信息吸附显示

2022-06-24:内测版v0.02

  1. 实现离线头像和在线头像区分显示
  2. 自动计算在线头像人数并显示在分组栏

2022-06-23:内测版v0.01

  1. 实现侧栏友链通讯录
点击查看参考教程
参考方向教程原贴
参考了折叠框的语法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+,低版本用户不再另外支持。

  1. 新建[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+"/";
    }
  2. 新建[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)

  3. 修改[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})
  4. 修改[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: 通讯录

  5. 修改[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
  6. 对需要显示离线状态的友链,可以在[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.jpg

    TO DO

    仿照QQ样式添加友链侧栏卡片

    实现离线头像和在线头像区分显示

    实现自动计数在线友链数目

    pjax适配

    调整自适应

    与友链朋友圈教程联动

    NPM插件化