优化link标签

scripts/tags/link.js

@@ -1,36 +1,59 @@
 /**
- * link.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * link.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% link url title [description] [img:src] %}
+ * {% link url title [description] [icon:src] %}
  */
 
 'use strict';
 
 hexo.extend.tag.register('link', function(args) {
-  args = hexo.args.map(args, ['img'], ['url', 'title', 'description']);
+  args = hexo.args.map(args, ['icon'], ['url', 'title', 'description']);
 
   var el = '';
   el += '<div class="tag-plugin link dis-select">';
-  el += '<a class="link-card" title="' + args.title + '" href="' + args.url + '"';
+  el += '<a class="link-card' + (args.description ? ' rich' : ' plain') + '" title="' + args.title + '" href="' + args.url + '"';
   if (args.url.includes('://')) {
     el += ' target="_blank" rel="external nofollow noopener noreferrer"';
   }
   el += '>';
-  // left
-  el += '<div class="left">';
-  el += '<span class="title fs14">' + args.title + '</span><span class="url fs12">' + (args.description || args.url) + '</span>';
-  el += '</div>';
 
-  // right
-  el += '<div class="right">';
+  function loadIcon() {
+    var el = '';
     if (hexo.theme.config.plugins.lazyload && hexo.theme.config.plugins.lazyload.enable) {
-    el += '<div class="lazy img" data-bg="' + (args.img || hexo.theme.config.default.link) + '"></div>';
+      el += '<div class="lazy img" data-bg="' + (args.icon || hexo.theme.config.default.link) + '"></div>';
     } else {
-    el += '<div class="lazy img" style="background-image:url(&quot;' + (args.img || hexo.theme.config.default.link) + '&quot;)"></div>';
+      el += '<div class="lazy img" style="background-image:url(&quot;' + (args.icon || hexo.theme.config.default.link) + '&quot;)"></div>';
+    }
+    return el;
+  }
+  function loadTitle() {
+    return '<span class="title fs14">' + args.title + '</span>';
+  }
+  function loadDesc() {
+    return '<span class="url fs12">' + (args.description || args.url) + '</span>';
   }
 
+  if (args.description) {
+    // top
+    el += '<div class="top">';
+    el += loadIcon();
+    el += '<span class="url fs12">' + args.url + '</span>';
     el += '</div>';
+    // bottom
+    el += '<div class="bottom">';
+    el += loadTitle() + loadDesc();
+    el += '</div>';
+  } else {
+    // left
+    el += '<div class="left">';
+    el += loadTitle() + loadDesc();
+    el += '</div>';
+    // right
+    el += '<div class="right">';
+    el += loadIcon();
+    el += '</div>';
+  }
 
   // end
   el += '</a></div>';

source/css/_layout/tag-plugins/link.styl

@@ -1,5 +1,5 @@
 .md .tag-plugin.link
-  max-width: 360px
+  max-width: 400px
   margin: 1em auto
   display: flex
   justify-content: center
@@ -24,26 +24,59 @@
     box-shadow: $boxshadow-card-float
     transform: translateY(-1px)
 
+.md .link-card.plain
+  flex-direction: row
+
+.md .link-card.rich
+  flex-direction: column
+  align-items: flex-start
+  width: 400px
 
 .md .link-card
-  div.left,div.right
+  > div
     pointer-events: none
-  div.right
+  >.top
+    display: flex
+    margin: .75rem 1rem .25rem
+    overflow: hidden
+    max-width: 'calc(100% - %s * 2)' % 1rem
+    align-items: center
+    .img
+      line-height: 0
+      height: 16px
+      width: 20px
+      margin-right: 4px
+      background-repeat: no-repeat
+      background-size: contain
+      background-position: left center
+    .url
+      opacity: .75
+    span
+      txt-ellipsis()
+      max-width: 100%
+  >.bottom
+    margin: 0 1rem .75rem 1rem
+  >.right
     width: 2.5rem
     height: 2.5rem
-    margin: 0.75rem
+    margin: .75rem
     overflow: hidden
     flex-shrink: 0
-  div.left
+  >.left
     overflow: hidden
-    margin-left: 1rem
+    margin: .5rem 0 .5rem 1rem
+    .url
+      flex-shrink: 0
+      txt-ellipsis()
   span
     margin: 0
     display: block
-    txt-ellipsis()
   span.title
     font-weight: 500
     color: var(--text-p1)
+    line-height: 1.2
+    margin: 4px 0
   span.url
-    flex-shrink: 0
     color: var(--text-p3)
+    line-height: 1.4
+    margin: 2px 0