Add: 归档页面按年份分类，完成基础样式

layout/common/archive-post.ejs

@@ -1,11 +1,42 @@
 <!-- 归档页面 内容 -->
-<ul class="archive-post-container">
-    <% site.posts.forEach(post => { %>
-        <li class="post-item">
-            <div> 文章标题：<%= post.title %> </div>
-            <div> 建立日期：<%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %> </div>
-            <div> 更新日期：<%= date(post.updated, 'YYYY-MM-DD HH:MM:SS') %> </div>
-            <div> 页面摘要：<%= post.excerpt ? post.excerpt : '页面无摘要' %> </div>
-        </li>
-    <% }) %>
-</ul>
+<% if (is_archive()) { %>
+
+    <div class="archive-container">
+
+        <!-- 把所有文章按年份分类显示 -->
+        <% let last; %>
+        <% site.posts.each(function(post, i){ %>
+            <% let year = post.date.year(); %>
+            <% if (last != year) { %>
+                <% if (last != null){ %>
+    </div></section>
+    <% } %>
+    <% last = year; %>
+    <section class="archives-wrap">
+        <div class="archive-year">
+            <%= year %>
+        </div>
+        <div class="archive-article-list">
+            <% } %>
+            <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 (site.posts.length){ %>
+        </div>
+    </section>
+    <% } %>
+
+    </div>
+
+
+<% } %>
+
+
+
+
+
+
+
+

layout/page.ejs

@@ -1,4 +1,4 @@
-<!-- 页面模板 -->
+<!-- 通用页面模板 -->
 <div class="page-container">
     <div class="page-left">
         <%- partial('left-side') %>
@@ -6,4 +6,4 @@
     <div class="page-right">
         <%- partial('right-side') %>
     </div>
-</div>
+</div>

scripts/helper.js

@@ -0,0 +1,9 @@
+/**
+ * Hexo 扩展：辅助函数（Helper）
+ * 补充复杂的业务逻辑
+ * https://hexo.io/zh-cn/api/helper.html
+ * 用法：<%= helper_test('xxx') %>
+ */
+hexo.extend.helper.register('helper_test', function (character) {
+    return character + '😁';
+});

source/css/common/archive-post.styl

@@ -0,0 +1,36 @@
+.archive-container {
+  background: #fff
+  padding 30px
+
+  .archives-wrap {
+    margin-bottom 20px
+
+    .archive-year {
+      font-size: 24px;
+      color: #666;
+      font-weight: 600;
+    }
+
+    .archive-article-list {
+
+      .archive-article-item {
+        margin 10px 0
+        font-size 16px
+
+        a.archive-article-title {
+          color #8f8f8f
+
+          &:hover {
+            color: #4786D6;
+          }
+        }
+
+        .archive-article-date {
+          float right
+        }
+      }
+    }
+  }
+}
+
+

source/css/common/site-info.styl

@@ -3,7 +3,7 @@
 
   .avatar {
     padding 2px
-    border-radius 50%
+    border-radius 10%
     border 1px solid #ddd
     width: 50%;
   }

source/css/style.styl

@@ -7,6 +7,7 @@
 @import "footer.styl"
 @import "common/nav.styl"
 @import "common/article-post.styl"
+@import "common/archive-post.styl"
 @import "common/site-info.styl"
 
 .header {

source/js/main.js

@@ -5,4 +5,10 @@ console.log('this is main.js');
         e.classList.add('btn');
         e.setAttribute('role', 'navigation');
     });
-})();
+})();
+
+// app.locals.structureArchiveList = function (posts) {
+//     posts.forEach(post => {
+//         console.log('post: ', post);
+//     });
+// };

source/js/utils.js

@@ -1,3 +1,4 @@
 export const addClass = (element, className) => {
     element.classList.add(className)
-};
+};
+