related posts

_config.yml

@@ -55,7 +55,6 @@ article:
   related_posts:
     enable: false
     max_count: 5
-    auto_cover: true # 如果没有封面就根据 tags 作为关键词搜索封面，开了此项将不会自动从文章中提取首张图片作为封面了。
 
 
 ######## Comments ########

languages/zh-CN.yml

@@ -15,10 +15,10 @@ meta:
   recent_update: 最近更新
   toc: 本文目录
   read_next: 接下来阅读
-  prev: 上一篇
+  prev: 回顾上一篇
-  next: 下一篇
+  next: 接下来阅读
-  older: 较早
+  older: 较早文章
-  newer: 较新
+  newer: 较新文章
   references: 参考资料
   related_posts: 您可能感兴趣的文章
   comment_title: 快来参与讨论吧

languages/zh-TW.yml

@@ -15,10 +15,10 @@ meta:
   recent_update: 最近更新
   toc: 本文目錄
   read_next: 接下來閱讀
-  prev: 上一篇
+  prev: 回顧上一篇
-  next: 下一篇
+  next: 接下來閱讀
-  older: 較早
+  older: 較早文章
-  newer: 較新
+  newer: 較新文章
   references: 參考資料
   related_posts: 您可能感興趣的文章
   comment_title: 參與討論

layout/_partial/main/article/read_next.ejs

@@ -25,30 +25,26 @@ function layoutDiv() {
         }
       });
     }
-    if (next == undefined) {
-      // 项目的最后一篇文档
-      return '<br>';
-    }
   }
   let el = '';
   if (prev || next) {
     el += '<div class="related-wrap reveal" id="read-next">';
-    el += '<section class="header cap theme">';
+    el += '<section class="body">';
-    el += '<span>' + title + '</span>';
-    el += '</section>';
-    el += '<section class="body fs14">';
     if (next) {
       el += '<a id="next" href="' + url_for(next.path) + '">';
-      el += next.title || next.seo_title || next.wiki;
       el += '<span class="note">' + title_next + '</span>';
+      el += next.title || next.seo_title || next.wiki;
       el += '</a>';
+    } else {
+      el += '<div id="next"></div>';
     }
-    el += '<div class="line"></div>';
     if (prev) {
       el += '<a id="prev" href="' + url_for(prev.path) + '">';
-      el += prev.title || prev.seo_title || prev.wiki;
       el += '<span class="note">' + title_prev + '</span>';
+      el += prev.title || prev.seo_title || prev.wiki;
       el += '</a>';
+    } else {
+      el += '<div id="prev"></div>';
     }
     el += '</section>';
     el += '</div>';

scripts/helpers/related_posts.js

@@ -25,58 +25,30 @@ hexo.extend.helper.register('popular_posts_wrapper', function(args){
 
   const posts = this.site.posts;
   const root = this.config.root;
-  function generateHTML(list){
 
+  function listItem(obj){
     var el = '';
-    el += '<a class="item" href="' + list.path + '" title="' + list.title + '">';
+    el += '<a class="item" href="' + obj.path + '" title="' + obj.title + '">';
     var p = posts.filter(function(p) {
-      return root + p.path == list.path;
+      return root + p.path == obj.path;
     });
     if (p && p.length > 0) {
       p = p.data[0];
     }
-    if (p) {
+    el += '<span class="title">' + obj.title + '</span>';
-      if (p.cover) {
+    if (obj.excerpt && obj.excerpt.length > 0) {
-        if (p.cover.includes('/')) {
+      el += '<span class="excerpt">' + util.truncate(util.stripHTML(obj.excerpt), {length: 120}) + '</span>';
-          list.img = p.cover;
-        } else {
-          list.img = 'https://source.unsplash.com/1280x640/?' + p.cover;
-        }
-      } else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
-        var params = '';
-        p.tags.reverse().forEach((tag, i) => {
-          if (i > 0) {
-            params += ',';
-          }
-          params += tag.name;
-        });
-        list.img = 'https://source.unsplash.com/1280x640/?' + params;
-      }
     }
-    if (hexo.theme.config.default.cover) {
-      el += '<div class="img">'
-      if (list.img && list.img != "") {
-        el += '<img src="' + list.img + '" />';
-      } else {
-        el += '<img src="' + hexo.theme.config.default.cover + '" />';
-      }
-      el += '</div>';
-    }
-
-    el += '<span class="title">' + list.title + '</span>';
-
-    if (list.excerpt && list.excerpt.length > 0) {
-      el += '<span class="excerpt">' + util.truncate(util.stripHTML(list.excerpt), {length: 120}) + '</span>';
-    }
-
     el +=  '</a>';
     return el;
   }
 
-  for(var i = 0; i < json.length; i++) {
+  if (json.length > 0) {
-    returnHTML += generateHTML(json[i]);
+      for(var i = 0; i < json.length; i++) {
+        returnHTML += listItem(json[i]);
+      }
   }
-
+  
   if (returnHTML != "") returnHTML = "<div class=\"" + cls + "\">" + returnHTML + "</div>";
   div += returnHTML;
   div += '</section>';

source/css/_layout/partial/related.styl

@@ -21,105 +21,71 @@
 .related-wrap#related-posts
   .related-posts
     width: 100%
-    display: flex
     margin: 1rem 0
-    overflow-x: scroll
-    align-items: flex-start
-    scrollbar(8px, 4px)
-    padding-bottom: 8px
     border-radius: $border-block
-    a
+    background: var(--block)
-      flex-grow: 0
+    overflow: hidden
-      flex-shrink: 0
+    border: 1px solid var(--block-border)
-      background: var(--card)
+    .item
-      border-radius: $border-block
-      padding-bottom: 1rem
       line-height: 1.2
-      display: flex
+      display: block
-      flex-direction: column
+      padding: 1rem
-      overflow: hidden
-      min-width: 280px
-      width: 40vw
-      max-width: 460px
-      border: 1px solid var(--block-hover)
-      z-index: 1
-      .img
-        min-width: 100%
-        min-height: 140px
-        height: "calc(%s * 0.5)" % @width
-        max-height: 230px
-        overflow: hidden
-        img
-          width: 100%
-          height: 100%
-          object-fit: cover
-          &:not(.lazy)
-            trans1: transform 1s
-      @media screen and (max-width: $device-tablet)
-        width: 70vw
-        .img
-          height: "calc(%s * 0.5)" % @width
       .title
         color: var(--text-p1)
         font-weight: 500
-        font-size: $fs-15
+        font-size: 1rem
-        margin: .75rem .75rem 0 .75rem
         display: -webkit-box
         -webkit-box-orient: vertical
         overflow: hidden
         -webkit-line-clamp: 2
       .excerpt
-        color: var(--text-p2)
+        color: var(--text-p3)
-        font-size: $fs-13
+        font-size: $fs-12
-        margin: 0.4rem .75rem 0 .75rem
+        margin-top: 0.5rem
         display: -webkit-box
         -webkit-box-orient: vertical
         overflow: hidden
         -webkit-line-clamp: 3
       &:hover
-        img
+        background: var(--block-hover)
-          transform: scale(1.04)
+    .item+.item 
-    a+a
+      border-top: 1px dashed var(--block-border)
-      margin-left: 1rem
 
 
 .related-wrap#read-next
   .body
-    background: var(--block)
-    border-radius: $border-block
-    border: 1px solid var(--block-border)
     margin-top: 1rem
-    overflow: hidden
+    display: grid
-    .line
+    grid-gap: 16px
-      margin: 0
+    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
-      height: 1px
-      background: var(--block-border)
-      &+.line,&:first-child,&:last-child
-        display: none
     >a
       display: flex
+      flex-direction: column
       margin: 0
       line-height: 1.2
       padding: 0.75rem 0.5rem
-      color: var(--text-p3)
+      color: var(--text-p1)
-      justify-content: space-between
+      font-size: 1rem
-      align-items: center
+      background: var(--card)
-      font-weight: 500
+      border-radius: $border-block
-      font-size: $fs-12
+      box-shadow: $boxshadow-card
-      &:first-child
+      trans2: box-shadow transform
-        color: var(--text-p1)
+      &:last-child
-        font-size: $fs-h4
+        text-align: right
-        font-weight: 400
       .note
         flex-shrink: 0
-        margin-left: 4px
+        margin-bottom: 4px
         font-size: $fs-12
         color: var(--text-p4)
         font-weight: 500
       &:hover
         color: $color-hover !important
-        background: var(--card)
+        box-shadow: $boxshadow-card-float
-
+        transform: translateY(-1px)
+.wiki+.related-wrap#read-next .body>a
+  font-size: $fs-h3
+  &:last-child
+    color: var(--text-p4)
 
 
 .related-wrap#comments