read next

languages/en.yml

@@ -14,9 +14,12 @@ btn:
 meta:
   recent_update: Recent Update
   toc: TOC
-  read_prev: or prev
   read_next: READ NEXT
+  prev: Prev
+  next: Next
   older: Older
+  newer: Newer
+  all_articles: All Articles
   references: References
   related_posts: Related Posts
   comment_title: Join the discussion

languages/zh-CN.yml

@@ -14,9 +14,12 @@ btn:
 meta:
   recent_update: 最近更新
   toc: 本文目录
-  read_prev: 上一篇
   read_next: 接下来阅读
-  older: 更早一篇
+  prev: 上一篇
+  next: 下一篇
+  older: 较早
+  newer: 较新
+  all_articles: 检索全部文章
   references: 参考资料
   related_posts: 您可能感兴趣的文章
   comment_title: 快来参与讨论吧

languages/zh-TW.yml

@@ -14,9 +14,12 @@ btn:
 meta:
   recent_update: 最近更新
   toc: 本文目錄
-  read_prev: 上一篇
   read_next: 接下來閱讀
-  older: 更早一篇
+  prev: 上一篇
+  next: 下一篇
+  older: 較早
+  newer: 較新
+  all_articles: 檢索全部文章
   references: 參考資料
   related_posts: 您可能感興趣的文章
   comment_title: 參與討論

layout/_partial/main/article/read_next.ejs

@@ -2,10 +2,13 @@
 function layoutDiv() {
   var prev,next;
   var title = __('meta.read_next');
-  var title_prev = __('meta.read_prev');
+  var title_prev = __('meta.prev');
+  var title_next = __('meta.next');
   if (page.layout == 'post') {
     prev = page.prev;
     next = page.next;
+    title_prev = __('meta.newer');
+    title_next = __('meta.older');
   } else if (page.layout == 'wiki' && page.wiki && page.wiki.length > 0) {
     var wikis = [];
     wikis = site.pages.filter(function (p) {
@@ -37,21 +40,26 @@ function layoutDiv() {
     el += '<section class="header cap theme">';
     el += '<span>' + title + '</span>';
     el += '</section>';
-    el += '<section class="body">';
+    el += '<section class="body fs14">';
     if (next) {
-      el += '<div class="post-title h2">';
+      el += '<a id="next" href="' + url_for(next.path) + '">';
-      el += '<a href="' + url_for(next.path) + '">';
       el += next.title || next.seo_title || next.wiki;
+      el += '<span class="note">' + title_next + '</span>';
       el += '</a>';
-      el += '</div>';
     }
+    el += '<div class="line"></div>';
     if (prev) {
-      el += '<div class="post-title fs14">';
+      el += '<a id="prev" href="' + url_for(prev.path) + '">';
-      el += '<a href="' + url_for(prev.path) + '">';
-      el += title_prev + __('symbol.colon');
       el += prev.title || prev.seo_title || prev.wiki;
+      el += '<span class="note">' + title_prev + '</span>';
+      el += '</a>';
+    }
+    if (page.layout == 'post') {
+      el += '<div class="line"></div>';
+      el += '<a id="more" href="' + url_for(config.archive_dir) + '">';
+      el += __('meta.all_articles');
+      el += '<span class="note">' + __('btn.archives') + '</span>';
       el += '</a>';
-      el += '</div>';
     }
     el += '</section>';
     el += '</div>';

source/css/_layout/partial/related.styl

@@ -2,6 +2,21 @@
   padding: 2rem 1rem
   &:empty
     display: none
+  section.header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    >span.title
+      padding: 0.25rem 0
+  section.footer
+    margin-top: 1rem
+
+  a.more
+    padding: 0.25rem 0.5rem
+    
+    border-radius: $border-block
+    color: var(--text-p1)
+
 
 .related-wrap#related-posts
   .related-posts
@@ -47,7 +62,7 @@
         color: var(--text-p1)
         font-weight: 500
         font-size: $fs-15
-        margin: 1rem 1rem 0 1rem
+        margin: .75rem .75rem 0 .75rem
         display: -webkit-box
         -webkit-box-orient: vertical
         overflow: hidden
@@ -55,7 +70,7 @@
       .excerpt
         color: var(--text-p2)
         font-size: $fs-13
-        margin: 0.4rem 1rem 0 1rem
+        margin: 0.4rem .75rem 0 .75rem
         display: -webkit-box
         -webkit-box-orient: vertical
         overflow: hidden
@@ -69,18 +84,40 @@
 
 .related-wrap#read-next
   .body
-    .post-title
+    background: var(--block)
-      margin: 0.5rem 0
+    border-radius: $border-block
+    border: 1px solid var(--block-border)
+    margin-top: 1rem
+    overflow: hidden
+    .line
+      margin: 0
+      height: 1px
+      background: var(--block-border)
+      &+.line,&:first-child,&:last-child
+        display: none
+    >a
+      display: flex
+      margin: 0
       line-height: 1.2
-      a
+      padding: 0.75rem 0.5rem
-        color: inherit
+      color: var(--text-p2)
-        &:hover
+      justify-content: space-between
-          color: $color-hover
+      align-items: center
-      &.fs14
+      font-weight: 500
-        color: var(--text-p3)
+      .note
+        flex-shrink: 0
+        margin-left: 4px
+        font-size: $fs-12
+        color: var(--text-meta)
         font-weight: 500
-      &.h2
+      &#more
-        color: var(--text-p1)
+        font-size: $fs-12
+        text-align: center
+        color: var(--text-p3)
+      &:hover
+        color: $color-hover !important
+        background: var(--card)
+      
 
 
 .related-wrap#comments