New tag link-grid

scripts/tags/link-grid.js

@@ -0,0 +1,19 @@
+/* global hexo */
+
+'use strict';
+
+function linkGrid(args, content) {
+  const links = content.split('\n').map(item => {
+    const args = item.split('|').map(arg => arg.trim());
+    if (args[0][0] === '%') return '';
+    return `<div>
+      <img src="${args[3] || '/images/avatar.gif'}" onerror="this.src='/images/avatar.gif';">
+      <p>${args[0]}</p><p>${args[2] || args[1]}</p>
+      <a href="${args[1]}"></a>
+    </div>`;
+  });
+  return `<div class="link-grid">${links.join('')}</div>`;
+}
+
+hexo.extend.tag.register('linkgrid', linkGrid, {ends: true});
+hexo.extend.tag.register('lg', linkGrid, {ends: true});

source/css/_common/scaffolding/tags/link-grid.styl

@@ -0,0 +1,101 @@
+.post-body .link-grid {
+  display: grid;
+  grid-gap: 1.5rem 1.5rem;
+  grid-template-columns: 1fr 1fr;
+  padding: 1.5rem;
+  user-select: none;
+
+  +mobile() {
+    grid-template-columns: 1fr;
+  }
+
+  div {
+    border: solid #ddd;
+    box-shadow: 1rem 1rem 0.5rem gray;
+    height: 5rem;
+    transition: background 0.3s;
+    padding: 0.5rem;
+    position: relative;
+
+    &:hover {
+      animation: shake 0.5s;
+      background: rgba(230,244,250,.5);
+    }
+
+    &:active {
+      box-shadow: 0.5rem 0.5rem 0.25rem gray;
+      transform: translate(0.2rem, 0.2rem);
+    }
+
+    img {
+      border: 1px solid #ddd;
+      border-radius: 50%;
+      box-sizing: border-box;
+      height: 5rem;
+      left: 0.5rem;
+      padding: 3px;
+      position: absolute;
+      top: 0.5rem;
+      width: 5rem;
+    }
+
+    p {
+      margin: 0 1rem 0 6rem;
+
+      &:first-of-type {
+        font-size: 1.2em;
+      }
+
+      &:last-of-type {
+        font-size: 0.8em;
+        line-height: 1.3rem;
+        opacity: 0.7;
+      }
+    }
+
+    a {
+      border: none;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(1pt, 1pt) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1pt, -2pt) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3pt, 0pt) rotate(1deg);
+  }
+  30% {
+    transform: translate(3pt, 2pt) rotate(0deg);
+  }
+  40% {
+    transform: translate(1pt, -1pt) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1pt, 2pt) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3pt, 1pt) rotate(0deg);
+  }
+  70% {
+    transform: translate(3pt, 1pt) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1pt, -1pt) rotate(1deg);
+  }
+  90% {
+    transform: translate(1pt, 2pt) rotate(0deg);
+  }
+  100% {
+    transform: translate(1pt, -2pt) rotate(-1deg);
+  }
+}

source/css/_common/scaffolding/tags/tags.styl

@@ -1,6 +1,7 @@
 @import 'blockquote-center';
 @import 'group-pictures';
 @import 'label';
+@import 'link-grid';
 @import 'tabs';
 
 @import 'note' if (hexo-config('note.style') != 'disabled');