[feat] 动态友链重磅升级

Author: xaoxuu

_cdn.yml

@@ -49,6 +49,13 @@ volantis_tags_friends:
   npm: true
   static: false
   cdnjs: false
+volantis_tags_friends_and_posts:
+  name: hexo-theme-volantis
+  file: source/js/plugins/tags/fposts.js
+  local: true
+  npm: true
+  static: false
+  cdnjs: false
 volantis_tags_contributors:
   name: hexo-theme-volantis
   file: source/js/plugins/tags/contributors.js

_config.yml

@@ -755,6 +755,8 @@ plugins:
     enable: true
   friendsjs:
     enable: true
+  fpostsjs:
+    enable: true
   contributorsjs:
     enable: true
 

layout/_plugins/github-api/script.ejs

@@ -12,6 +12,12 @@
         volantis.js("<%- theme.cdn.volantis_tags_friends %>")
       }
     <% } %>
+    <% if (theme.plugins.fpostsjs.enable) { %>
+      const fpostsjs = document.getElementById('fposts-api');
+      if (fpostsjs != undefined && typeof FpostsJS === 'undefined') {
+        volantis.js("<%- theme.cdn.volantis_tags_friends_and_posts %>")
+      }
+    <% } %>
     <% if (theme.plugins.contributorsjs.enable) { %>
       const contributors_api = document.getElementById('contributors-api');
       if (contributors_api != undefined && typeof ContributorsJS === 'undefined') {

scripts/tags/friends.js

@@ -8,7 +8,7 @@
 'use strict';
 
 hexo.extend.tag.register('friends', function(args) {
-  args = hexo.args.map(args, ['only', 'not', 'repo', 'api']);
+  args = hexo.args.map(args, ['only', 'not', 'repo', 'api', 'posts']);
   if (args.only) {
     if(/::/g.test(args.only)){
       args.only = args.only.split('::');
@@ -70,12 +70,21 @@ hexo.extend.tag.register('friends', function(args) {
           el += groupHeader(group);
         }
         if (group.api) {
-          el += '<div class="friendsjs-wrap"';
-          el += ' id="friends-api"';
+          if (args.posts) {
+            el += '<div class="users-posts-wrap"';
+            el += ' id="fposts-api"';
+          } else {
+            el += '<div class="friendsjs-wrap"';
+            el += ' id="friends-api"';
+          }
           el += ' api="' + group.api + '"';
           el += '>';
           el += '<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>';
-          el += '<div class="group-body"></div>';
+          if (args.posts) {
+            el += '<div class="grid-box"></div>';
+          } else {
+            el += '<div class="group-body"></div>';
+          }
           el += '</div>';
         } else if (group.items) {
           el += '<div class="group-body">';

source/css/_style/_tag-plugins/fposts.styl

@@ -0,0 +1,160 @@
+.users-posts-wrap .grid-box
+  display: grid
+  grid-template-columns: 1fr
+  grid-gap: 2px
+  overflow: hidden
+  border-radius: $border-card
+
+.users-posts-wrap .user-post-card
+  display: grid
+  grid-template-columns: 1fr 2fr
+  grid-gap: 16px
+  font-weight: 500
+  border-radius: 4px
+  background: var(--color-block)
+  padding: 1rem
+  div,span
+    line-height: 1.2
+  .labels
+    margin-top: 4px
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    justify-content: center
+    pointer-events: none
+    user-select: none
+    .label
+      color: white
+      font-size: 12px
+      padding: 2px 6px
+      margin: 4px 2px 0 2px
+      line-height: 1
+      border-radius: 16px
+  .avatar-box
+    display: flex
+    justify-content: center
+    flex-direction: column
+    align-items: center
+    padding: 1rem
+  .card-link
+    color: var(--text-p1)
+    display: flex
+    justify-content: flex-start
+    flex-direction: column
+    align-items: center
+    text-align: center
+    border-radius: 4px
+    position: relative
+    flex-shrink: 0
+    trans1 width 
+    span
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+      position: relative
+    .title
+      font-size: $fs-14
+      font-weight: 500
+      margin-top: 1rem
+      max-width: 100%
+    img
+      object-fit: cover
+      display: block
+      width: 64px
+      height: 64px
+      background: var(--color-card)
+      border-radius: 64px
+      floatable-trans()
+    
+  .previews
+    display: flex
+    justify-content: space-between
+    flex-direction: column
+    height: 100%
+    position: relative
+    .empty
+      min-height: 1rem
+    .desc
+      font-size: 1.2rem
+      color: var(--text-p3)
+      font-weight: 400
+      margin: 1rem 0
+      margin-right: auto
+      position: relative
+      &:before
+        position: absolute
+        font-weight: 900
+        font-size: 32px
+        color: var(--color-block)
+        top: 0
+        content: '“'
+        left: -16px
+        trans1 all
+    .spacer
+      height: 100%
+    .posts
+      margin: 0.5rem 0 1rem 0
+      display: flex
+      flex-direction: column
+      align-items: flex-start
+    .post-link
+      display: flex
+      flex-direction: column
+      color: var(--text-p1)
+      position: relative
+      trans1 color
+      &+.post-link
+        margin-top: 1rem
+      &:before
+        content: ''
+        position: absolute
+        left: -12px
+        top: 2px
+        height: 'calc(%s - 2px)' % $fs-14
+        width: 4px
+        border-radius: 4px
+        background: var(--color-block)
+        trans1 all
+      &:hover:before
+        background: $color-hover
+        // height: calc(100% - 4px)
+        height: 100%
+        top: 0
+      span 
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 1
+        position: relative
+     .title
+        font-size: $fs-14
+        font-weight: 500
+        max-width: 100%
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 2
+        position: relative
+      .date
+        font-size: $fs-12
+        color: var(--text-p3)
+        margin-top: 0.25rem
+      .no-post
+        font-size: $fs-13
+        color: var(--text-p4)
+
+
+// transform
+.users-posts-wrap .user-post-card
+  &:hover
+    .desc
+      &:before
+        color: $color-hover
+        transform: scale(1.2) translateX(-4px)
+  .card-link:hover
+    img
+      transform: scale(1.2) rotate(8deg)
+      box-shadow: $boxshadow-card-float
+  .post-link:hover
+    color: $color-hover

source/css/_style/_tag-plugins/tag.json

@@ -30,6 +30,6 @@
   "videos": ["media.styl"],
   "frame": ["frame.styl"],
   "contributors": ["friends.styl"],
-  "friends": ["friends.styl"],
+  "friends": ["friends.styl","fposts.styl"],
   "swiper": ["swiper.styl"]
 }

source/js/plugins/tags/fposts.js

@@ -0,0 +1,125 @@
+const FpostsJS = {
+  requestAPI: (url, callback, timeout) => {
+    let retryTimes = 5;
+
+    function request() {
+      return new Promise((resolve, reject) => {
+        let status = 0; // 0 等待 1 完成 2 超时
+        let timer = setTimeout(() => {
+          if (status === 0) {
+            status = 2;
+            timer = null;
+            reject('请求超时');
+            if (retryTimes == 0) {
+              timeout();
+            }
+          }
+        }, 5000);
+        fetch(url).then(function (response) {
+          if (status !== 2) {
+            clearTimeout(timer);
+            resolve(response);
+            timer = null;
+            status = 1;
+          }
+          if (response.ok) {
+            return response.json();
+          }
+          throw new Error('Network response was not ok.');
+        }).then(function (data) {
+          retryTimes = 0;
+          callback(data);
+        }).catch(function (error) {
+          if (retryTimes > 0) {
+            retryTimes -= 1;
+            setTimeout(() => {
+              request();
+            }, 5000);
+          } else {
+            timeout();
+          }
+        });
+      });
+    }
+    request();
+  },
+  layout: (cfg) => {
+    const el = cfg.el;
+    const default_avatar = cfg.avatar;
+    
+    FpostsJS.requestAPI(cfg.api, function (data) {
+      el.querySelector('.loading-wrap').remove();
+      const arr = data.content;
+      var cellALL = "";
+      arr.forEach((item, i) => {
+        var cell = `<div class="grid-cell user-post-card">`;
+        cell += `<div class="avatar-box">`;
+        cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.html_url || item.url}">`;;
+        cell += `<img src="${item.avatar_url || item.avatar || item.icon || default_avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${default_avatar}\';"/>`;
+        cell += `<span class="title">${item.title || item.login}</span>`;
+        cell += `</a>`;
+        cell += `<div class="labels">`;
+        for (let label of item.labels) {
+          if (label.lightness > 75) {
+            cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, ${label.saturation}%, 20%, 1);">${label.name}</div>`;
+          } else if (label.saturation > 90 && label.lightness > 40) {
+            cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, 50%, 20%, 1);">${label.name}</div>`;
+          } else {
+            cell += `<div class="label" style="background:#${label.color};color:white">${label.name}</div>`;
+          }
+        }
+        cell += `</div>`;
+        cell += `</div>`;
+        cell += `<div class="previews">`;
+        if (item.description) {
+          cell += `<div class="desc">${item.description || item.issue_number || ''}</div>`;
+        } else {
+          cell += `<div class="desc">#${item.issue_number}</div>`;
+        }
+        cell += `<div class="posts">`;
+        
+        if (item.posts?.length > 0) {
+          for (let post of item.posts) {
+            cell += `<a class="post-link" target="_blank" rel="external nofollow noopener noreferrer" href="${post.link}">`;
+            cell += `<span class="title">${post.title}</span>`;
+            cell += `<span class="date">${post.published}</span>`;
+            cell += `</a>`;
+          }
+        } else {
+          cell += `<span class="no-post">${item.feed?.length > 0 ? 'RSS 解析失败' : '未设置 RSS 链接'}</span>`;
+        }
+        cell += `</div>`;
+        cell += `</div>`;
+        cell += `</div>`;
+        cellALL += cell;
+      });
+      
+      el.querySelector('.grid-box').innerHTML = cellALL;
+    }, function () {
+      try {
+        el.querySelector('.loading-wrap svg').remove();
+        el.querySelector('.loading-wrap p').innerText('加载失败，请稍后重试。');
+      } catch (e) { }
+    });
+  },
+  start: () => {
+    const els = document.getElementsByClassName('users-posts-wrap');
+    for (var i = 0; i < els.length; i++) {
+      const el = els[i];
+      const api = el.getAttribute('api');
+      if (api == null) {
+        continue;
+      }
+      var cfg = new Object();
+      cfg.el = el;
+      cfg.api = api;
+      cfg.class = el.getAttribute('class');
+      cfg.avatar = volantis.GLOBAL_CONFIG.default.avatar;
+      FpostsJS.layout(cfg);
+    }
+  }
+}
+
+
+
+FpostsJS.start();