侧栏友链通讯录卡片

点击查看更新记录

更新记录

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-测试-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
    .js-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/测试-friends@latest/avatar/zfe.space.jpg
  descr: 做个有梦想的人！
  siteshot: https://npm.elemecdn.com/测试-friends@latest/siteshot/zfe.space.jpg