fix: Solved that friends plugin not show normally when lazyload enabled

scripts/tags/friends.js

@@ -15,28 +15,33 @@ function friends(args) {
     }
   });
 
-  return fs.readFile(path).then(function(datas) {
-    if (!datas) {
+  return fs.readFile(path).then(function(data) {
+    if (!data) {
       hexo.log.warn('Include file empty.');
       return;
     }
 
-    var datas = JSON.parse(datas);
-    var result = '<div class="friends-plugin">';
-
-    datas.forEach(data => {
-      result += `<a class="friends-plugin__item" href="${data.url}">`;
-      result += `<img class="friends-plugin__item-avatar" src="${data.avatar}" data-zoom="none">`;
-      result += '<div class="friends-plugin__item-info">';
-      result += `<p class="friends-plugin__item-info__name">${data.name}</p>`;
-      result += `<p class="friends-plugin__item-info__intro">${data.introduction}</p>`;
-      result += '</div>';
-      result += '</a>';
-    });
+    var imgClassName = 'friends-plugin__item-avatar ';
+    var theme = hexo.theme.config;
+    if (theme.lazyload && theme.lazyload.enable) {
+      imgClassName += `lazyload lazyload-${theme.lazyload.placeholder}`;
+    }
 
-    result += '</div>';
+    var friends = JSON.parse(data);
+    var renderHtml = '<div class="friends-plugin">';
+    friends.forEach(f => {
+      renderHtml +=
+        `<a class="friends-plugin__item" href="${f.url}">` +
+          `<img class="${imgClassName}" src="${f.avatar}" data-zoom="none">` +
+          '<div class="friends-plugin__item-info">' +
+            `<p class="friends-plugin__item-info__name">${f.name}</p>` +
+            `<p class="friends-plugin__item-info__intro">${f.introduction}</p>` +
+          '</div>' +
+        '</a>';
+    });
+    renderHtml += '</div>';
 
-    return result;
+    return renderHtml;
   });
 }
 

source/css/_common/components/plugins/friends.styl

@@ -3,12 +3,13 @@
   max-width: 100%;
 
   &__item {
-    display: block;
+    display: flex;
     float: left;
     padding: .5rem 1rem;
     width: 50%;
     height: 100px;
     transition: background-color .3s;
+    align-items: center;
 
     &:hover {
       background-color: alpha($blue-light, .1);
@@ -21,22 +22,15 @@
     avatar-width = 60px;
 
     &-avatar {
-      display: inline-block;
+      margin: 0 1rem 0 0;
       border-radius: 50% !important;
       width: avatar-width;
       height: avatar-width;
-      vertical-align: middle;
     }
 
-    info-margin = 20px;
-
     &-info {
-      display: inline-block;
-      margin-left: info-margin;
-      padding-top: .6rem;
-      width: 'calc(100% - %s)' % (avatar-width + info-margin);
-      height: 100%;
-      vertical-align: middle;
+      overflow: hidden;
+      width: 100%;
       color: var(--color-gray-800);
 
       &__name,
@@ -46,6 +40,10 @@
         text-overflow: ellipsis;
       }
 
+      &__name {
+        font-weight: $font-weight-bolder;
+      }
+
       &__intro {
         font-size: .9em;
         color: #999;