友链页

默认友链卡片调整

修改一行排列4个友链卡片，友链卡片添加阴影，卡片高度调整为80px，修改\themes\butterfly\source\css\_page\flink.styl

diff

      & > .flink-list-item
        position: relative
        float: left
        overflow: hidden
        margin: 15px 7px
-       width: calc(100% / 3 - 15px)
+       width: calc(100% / 4 - 15px)
-       height: 90px
+       height: 80px
        line-height: 17px
        -webkit-transform: translateZ(0)
        addBorderRadius(8)
+       box-shadow: var(--card-box-shadow)

图标大小调整为50x50px，修改\themes\butterfly\source\css\_page\flink.styl

diff

          .flink-item-icon
            float: left
            overflow: hidden
            margin: 15px 10px
-           width: 60px
-           height: 60px
+           width: 50px
+           height: 50px
            border-radius: 7px
            transition: width .3s ease-out

卡片信息位置调整，，修改\themes\butterfly\source\css\_page\flink.styl

diff

        &:hover
          .flink-item-icon
-           margin-left: -10px
+           margin-left: 5px
            width: 0

...

    .flink-item-name
      @extend .limit-one-line
-     padding: 16px 10px 0 0
+     padding: 10px 10px 0 0
-     height: 40px
+     height: 30px
      font-weight: bold
-     font-size: 1.43em
+     font-size: 1.33em
+     text-align: left

...

    .flink-item-desc
      @extend .limit-one-line
-     padding: 16px 10px 16px 0
+     padding: 5px 10px 10px 0
      height: 50px
      font-size: .93em
+     text-align: left
+     white-space: normal // 第二行文本超出省略号
+     text-overflow: ellipsis
+     display: -webkit-box
+     -webkit-box-orient: vertical
+     -webkit-line-clamp: 2
+     font-weight: 700 // 描述文本加粗
+     opacity: 0.7

宽屏适配（修改过宽屏的需要调整），修改\themes\butterfly\source\css\_page\flink.styl

diff

-       +maxWidth1024()
+       +maxWidth1200()
          width: calc(50% - 15px) !important

友链标题加数量

修改themes\butterfly\layout\includes\page\flink.pug

diff

      if site.data.link
        - let result = ""
        each i in site.data.link
-         - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
+         - let className = i.class_name ? markdown(`## ${i.class_name + "(" + i.link_list.length + ")"}`) : ""
          - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

友链卡片添加角标

修改themes\butterfly\layout\includes\page\flink.pug

diff

    else
      if site.data.link
        - let result = ""
        each i in site.data.link
          - let className = i.class_name ? markdown(`## ${i.class_name + "(" + i.link_list.length + ")"}`) : ""
          - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

          - let listResult = ""

          each j in i.link_list
            - 
              listResult += `
                <div class="flink-list-item">
+                 ${j.tag ? '<span class="flink-list-item-tag">' + j.tag + '</span>' : ''}
                  <a href="${j.link}" title="${j.name}" target="_blank">
                    <div class="flink-item-icon">
                      <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                    </div>
                    <div class="flink-item-name">${j.name}</div> 
                    <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                  </a>
                </div>`
            -

          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`

        - pageContent = result + pageContent
    != pageContent

CSS 这里角标放在右上角

css

span.flink-list-item-tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 8px;
    background-color: var(--btn-bg);
    box-shadow: var(--card-box-shadow);
    color: white;
    z-index: 1;
    border-radius: 0px 11px 0px 12px;
    transition: .3s;
    font-size: 12px;
}

.flink-list-item:hover span.flink-list-item-tag {
    right: -70px;
}

使用

yml

- class_name: 小伙伴们
  class_desc: 那些人，那些事
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
      tag: 测试角标

友链页 ​

默认友链卡片调整 ​

友链标题加数量 ​

友链卡片添加角标 ​

友链页

默认友链卡片调整

友链标题加数量

友链卡片添加角标