Xdogの文档站

主题

友链页5.5.3 ​

默认友链卡片调整 ​

  1. 修改一行排列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)
  1. 图标大小调整为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
  1. 卡片信息位置调整，，修改\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
  1. 宽屏适配（修改过宽屏的需要调整），修改\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>` : ""

友链卡片添加角标 ​

  1. 修改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
  1. CSS 这里角标放在右上角
css
.flink-list-item .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 .flink-list-item-tag {
    right: -70px;
}
  1. 使用
yml
- class_name: 友链一组
  class_desc: 友链一组描述
  link_list:
    - name: 博客园
      link: https://www.cnblogs.com/
      avatar: https://www.cnblogs.com/favicon.ico
      descr: 开发者的网上家园

- class_name: 友链二组
  class_desc: 友链二组描述
  link_list:
    - name: 阿里云
      link: https://www.aliyun.com/
      avatar: https://img.alicdn.com/tfs/TB1_ZXuNcfpK1RjSZFOXXa6nFXa-32-32.ico
      descr: 为了无法计算的价值
    - name: 腾讯云
      link: https://cloud.tencent.com/
      avatar: https://cloud.tencent.com/favicon.ico
      descr: 产业智变·云启未来
      tag: 测试角标