Fix: archive 归档页面排序错乱的 Bug

.gitignore

@@ -41,4 +41,6 @@ testem.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+_config-test.yml

_config.yml

@@ -52,7 +52,7 @@ valine:
   appkey: # your leancloud application appkey
   notify: false # mail notifier, https://github.com/xCss/Valine/wiki
   verify: false # Verification code
-  placeholder: 评论一下再走吧~
+  placeholder: Comment input placeholder
 
 
 # Show PV/UV of the website/page with busuanzi.

layout/archive-post.ejs

@@ -1,29 +1,20 @@
-<% const posts = is_archive() ? site.posts : page.posts %>
+<%
+const postList = createNewArchivePosts(is_archive() ? site.posts : page.posts)
+%>
 <div class="archive-container">
-    <% let last; %>
+    <% postList.forEach(postYear => { %>
-    <% posts.each(function(post, i){ %>
+        <section class="archive-item">
-        <% let year = post.date.year(); %>
+            <div class="archive-year"><%= postYear.year %></div>
-        <% if (last != year) { %>
+            <ul class="article-list">
-            <% if (last != null){ %>
+                <% postYear.postList.forEach(post => { %>
-</div></section>
+                    <li class="article-item">
-<% } %>
+                        <a class="article-title"
-<% last = year; %>
+                           href="<%- url_for(post.path) %>"
-<section class="archives-wrap">
+                        ><%= post.title %></a>
-    <div class="archive-year">
+                        <span class="article-date"><%= date(post.date, 'MM-DD') %></span>
-        <%= year %>
+                    </li>
-    </div>
+                <% }) %>
-    <div class="archive-article-list">
+            </ul>
-        <% } %>
+        </section>
-        <div class="archive-article-item">
+    <% }) %>
-            <a class="archive-article-title" href="<%- url_for(post.path) %>"><%= post.title %></a>
-            <span class="archive-article-date"> <%= date(post.date, 'MM-DD') %> </span>
-        </div>
-        <% }) %>
-        <% if (posts.length){ %>
-    </div>
-</section>
-<% } %>
 </div>
-
-
-

scripts/helper.js

@@ -1,7 +1,23 @@
 hexo.extend.helper.register('isInHomePaging', function (pagePath, route) {
-    if (pagePath.length > 5 && route === '/' ) {
+    if (pagePath.length > 5 && route === '/') {
         return pagePath.slice(0, 5) === 'page/';
     } else {
         return false;
     }
+});
+
+hexo.extend.helper.register('createNewArchivePosts', function (posts) {
+    const postList = [], postYearList = [];
+    posts.forEach(post => postYearList.push(post.date.year()));
+    Array.from(new Set(postYearList)).forEach(year => {
+        postList.push({
+            year: year,
+            postList: []
+        })
+    });
+    postList.forEach(item => {
+        posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
+    });
+    postList.forEach(item => item.postList.sort((a, b) => a.date.unix() - b.date.unix()));
+    return postList;
 });

source/css/layout/archive-post.styl

@@ -6,7 +6,7 @@ $archive-article-date-font-size = 14px;
 
 .archive-container {
 
-  .archives-wrap {
+  .archive-item {
     margin-bottom: 20px;
 
     .archive-year {
@@ -15,14 +15,14 @@ $archive-article-date-font-size = 14px;
       font-weight: 600;
     }
 
-    .archive-article-list {
+    .article-list {
       padding-left: 10px;
 
-      .archive-article-item {
+      .article-item {
         margin: 10px 0;
         font-size: $archive-article-item-title-font-size;
 
-        a.archive-article-title {
+        a.article-title {
           color: $archive-article-title-color;
 
           &:hover {
@@ -30,7 +30,7 @@ $archive-article-date-font-size = 14px;
           }
         }
 
-        .archive-article-date {
+        .article-date {
           font-size: $archive-article-date-font-size;
           float: right;
         }

source/css/layout/basic.styl

@@ -84,4 +84,17 @@ a:hover, a:active {
     visibility: visible;
     transform: scaleX(1);
   }
+}
+
+
+// Clearfix. http://nicolasgallagher.com/micro-clearfix-hack/
+clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
 }