update

_config.yml

@@ -26,7 +26,7 @@ sidebar:
   # Sidebar widgets
   widgets:
     # default layout in home/wiki/categories/tags/archives pages
-    layout: [welcome, recent]
+    default: [welcome, recent]
     # Recent update
     recent:
       layout: recent

layout/_partial/main/article/read_next.ejs

@@ -33,32 +33,32 @@ function layoutDiv() {
       }
     });
   }
-  let wrapper = '';
+  let el = '';
   if (prev || next) {
-    wrapper += '<div class="read-next-wrap">';
-    wrapper += '<section class="header cap cyan">';
-    wrapper += '<span>' + title + '</span>';
-    wrapper += '</section>';
-    wrapper += '<section class="body">';
+    el += '<div class="related-wrap" id="read-next">';
+    el += '<section class="header cap cyan">';
+    el += '<span>' + title + '</span>';
+    el += '</section>';
+    el += '<section class="body">';
     if (next) {
-      wrapper += '<div class="post-title unread">';
-      wrapper += '<a href="' + url_for(next.path) + '">';
-      wrapper += next.title || next.seo_title || next.wiki;
-      wrapper += '</a>';
-      wrapper += '</div>';
+      el += '<div class="post-title unread">';
+      el += '<a href="' + url_for(next.path) + '">';
+      el += next.title || next.seo_title || next.wiki;
+      el += '</a>';
+      el += '</div>';
     }
     if (prev) {
-      wrapper += '<div class="post-title read">';
-      wrapper += '<a href="' + url_for(prev.path) + '">';
-      wrapper += title_prev + __('symbol.colon');
-      wrapper += prev.title || prev.seo_title || prev.wiki;
-      wrapper += '</a>';
-      wrapper += '</div>';
+      el += '<div class="post-title read">';
+      el += '<a href="' + url_for(prev.path) + '">';
+      el += title_prev + __('symbol.colon');
+      el += prev.title || prev.seo_title || prev.wiki;
+      el += '</a>';
+      el += '</div>';
     }
-    wrapper += '</section>';
-    wrapper += '</div>';
+    el += '</section>';
+    el += '</div>';
   }
-  return wrapper;
+  return el;
 }
 %>
 <%- layoutDiv(); %>

layout/_partial/main/article/references.ejs

@@ -4,7 +4,7 @@ function layoutDiv() {
     return '';
   }
   let el = '';
-  el += '<div class="references-wrap">';
+  el += '<div class="article-footer">';
   if (page.references && page.references.length > 0) {
     el += '<section id="references">';
     el += '<div class="header">';
@@ -14,7 +14,7 @@ function layoutDiv() {
     page.references.forEach((item, i) => {
       el += '<li class="post-title">';
       el += '<a href="' + item.url + '">';
-      el += item.title;
+      el += item.title || item.url;
       el += '</a>';
       el += '</li>';
     });

layout/_partial/main/article/related_posts.ejs

@@ -1,4 +1,4 @@
-<div class='related-posts-wrap'><%-
+<div class='related-wrap' id='related-posts'><%-
 popular_posts_wrapper({
   title: __('meta.related_posts'),
   json: popular_posts_json({ maxCount: 5 , ulClass: 'related-posts' , PPMixingRate: 0.2 , isImage: true , isExcerpt: true} , page )

layout/_partial/plugins/comments/layout.ejs

@@ -16,12 +16,12 @@ if (loadComment && page.layout == 'wiki' && page.wiki) {
 }
 %>
 <% if (loadComment) { %>
-  <article class='comments-wrap' id="comments">
+  <div class='related-wrap md' id="comments">
     <div class='cmt-title cap cyan'>
       <%- page.comment_title != undefined ? page.comment_title : __('meta.comment_title') %>
     </div>
     <div class='cmt-body <%- theme.comments.service %>'>
       <%- partial(theme.comments.service + '/layout') %>
     </div>
-  </article>
+  </div>
 <% } %>

layout/_partial/sidebar/index.ejs

@@ -6,7 +6,7 @@ if (page.sidebar == undefined) {
   } else if (page.layout == 'wiki' && page.content) {
     page.sidebar = ['toc', 'wiki_more'];
   } else {
-    page.sidebar = theme.sidebar.widgets.layout;
+    page.sidebar = theme.sidebar.widgets.default;
   }
 }
 function layoutFooterDiv() {

layout/post.ejs

@@ -19,8 +19,8 @@ function layoutTitle() {
 <article class='content md <%- post.layout %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- post.content %>
-</article>
 <%- partial('_partial/main/article/references') %>
+</article>
 <%- partial('_partial/main/article/read_next') %>
 <%- partial('_partial/main/article/related_posts') %>
 <%- partial('_partial/plugins/comments/layout') %>

layout/wiki.ejs

@@ -29,8 +29,8 @@ function layoutTitle() {
   <article class='content md <%- page.layout %><%- scrollreveal() %>'>
   <%- layoutTitle() %>
   <%- page.content %>
-  </article>
   <%- partial('_partial/main/article/references') %>
+  </article>
   <%- partial('_partial/main/article/read_next') %>
   <%- partial('_partial/plugins/comments/layout') %>
 <% } %>

source/css/_layout/md.styl

@@ -6,6 +6,7 @@ article.md
   line-height: 1.7
 
 article.md.content
+  position: relative
   margin-bottom: $gap * 2
 
 // titles
@@ -48,7 +49,6 @@ article.md
 // a
 article.md
   p>a
-    trans1: color
     &:not([class])
       font-weight: 500
       &:hover

source/css/_layout/partial/article_footer.styl

@@ -1,5 +1,5 @@
-.references-wrap
-  margin: $gap * 2 $gap
+.md .article-footer
+  margin-top: 4rem
   padding: 1rem
   background: var(--block)
   border-radius: $border-block
@@ -11,7 +11,7 @@
     font-size: 1.25rem
   .body
     input.copy-area
-      margin-bottom: 0.5rem
+      margin: 0.75rem 0
       width: 100%
       font-family: $ff-code
       font-size: $fs12
@@ -19,32 +19,35 @@
       font-size: $fs14
       color: var(--text-p2)
       margin: 1em 0
-      &:first-child
-        margin-top: 0
-      &:last-child
-        margin-bottom: 0
+      a
+        font-weight: 400
     ul
       margin: 0
+      overflow: hidden
+      a:hover
+        text-decoration: underline
     .post-title
       margin: 0.5rem 0
       line-height: 1.2
       font-size: $fs14
+      word-break: break-all
   section+section
     margin-top: 1rem
     padding-top: 1rem
     border-top: 1px solid var(--block-border)
 
-.references-wrap .social-wrap
+.md .article-footer .social-wrap
   grid-gap: $gap * 0.25 $gap * 0.5
   grid-template-columns: repeat(auto-fill, 40px)
+  margin-bottom: 0.5rem
   a.social
     padding: 8px
 
-.references-wrap .qrcode
+.md .article-footer .qrcode
   margin: 2rem auto 1rem
   width: 128px
   img
     object-fit: contain
 
-.references-wrap .qrcode.display
+.md .article-footer .qrcode.display
   display: block !important

source/css/_layout/partial/comments.styl

@@ -1,5 +1,4 @@
-.comments-wrap
-  padding: $gap * 2 $gap
+.related-wrap#comments
   div.cmt-body
     min-height: 150px
     position: relative

source/css/_layout/partial/read_next.styl

@@ -1,5 +1,4 @@
-.read-next-wrap
-  padding: $gap * 2 $gap
+.related-wrap#read-next
   .body
     .post-title
       margin: 0.5rem 0
@@ -14,7 +13,7 @@
         font-weight: 500
       &.unread
         color: var(--text-p1)
-        font-size: 2rem
+        font-size: 1.75rem
         font-weight: 400
         @media screen and (max-width: $device-mobile)
           font-size: 1.5rem

source/css/_layout/partial/related_posts.styl

@@ -1,7 +1,4 @@
-div.related-posts-wrap
-  padding: $gap * 2 $gap
-  &:empty
-    display: none
+.related-wrap#related-posts
   .related-posts
     width: 100%
     display: flex
@@ -64,13 +61,3 @@ div.related-posts-wrap
           transform: scale(1.04)
     a+a
       margin-left: $gap
-
-
-// // iPad 竖屏
-// @media screen and (max-width: $device-tablet)
-//   section.related-posts-wrap
-//     .related-posts
-//       a
-//         min-width: 280px
-//         .img
-//           height: 120px

source/css/_layout/partial/related_wrap.styl

@@ -0,0 +1,4 @@
+.related-wrap
+  padding: $gap * 2 $gap
+  &:empty
+    display: none