主题改造 归档页面

themes/hexo-theme-xups/_config.yml

@@ -64,14 +64,13 @@ avatar: https://i.loli.net/2018/05/04/5aeb37415a0dc.jpg
 #----------------------------
 # 是否开启分享
 #----------------------------
-share: true
+share: 
-
+  enable: true
-#----------------------------
+  list: 
-# 侧栏是否显示微博秀
+    1: weibo
-#----------------------------
+    2: qqzone
-weibo_show:
+    3: qq
-  enable: false
+    4: douban
-  code: <iframe id="myWeibo" width="100%" height="550" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=0&noborder=0&isWeibo=1&isFans=0&uid=2376003112&verifier=796ea597&dpc=1"></iframe>
 
 #----------------------------
 # 是否开启评论
@@ -86,7 +85,17 @@ comment:
 #----------------------------
 # 是否开启云标签
 #----------------------------
-tagcloud: true
+tagcloud: 
+  enable: true
+  start_color: e87474
+  end_color: 524ac5
+
+#----------------------------
+# 是否开启文章归档
+#----------------------------
+archives: 
+  enable: true
+  date_format: YYYY年MM月
 
 #----------------------------
 # 友情链接

themes/hexo-theme-xups/layout/_partial/after-footer.ejs

@@ -1,4 +1,3 @@
-<!-- 这里放网站js脚本 -->
 <%- js('js/main') %>
 <%- js('js/lib/polyfill.min') %>
 <%- js('js/lib/vue.min') %>

themes/hexo-theme-xups/layout/_partial/archive-post.ejs

@@ -1,7 +1,7 @@
 <!-- 文章 -->
 <article class="post">
     <header>
-        <!-- 标签这有且只能显示一个 -->
+        <!-- 分类 -->
         <% if (post.categories && post.categories.length) { %>
         <%-
             list_categories(post.categories, {
@@ -9,7 +9,7 @@
                 class: 'cat',
                 style: 'none',
                 separator: '|'
-            }).split('|')[0]
+            })
         %>
         <% } else { %>
             <a href="javascript: void(0);" class="cat">未分类</a>
@@ -18,7 +18,7 @@
         <%- partial('post/title', { class_name: 'post-title' }) %>
     </header>
     <p class="post-meta">
-        <%- post.author || '柠烟夏季' %> 发表于
+        <%- post.author || config.author %> 发表于
         <%- partial('post/date', { date_format: 'YYYY-MM-DD' }) %>
         &nbsp;&nbsp;
         <span class="post-tags">

themes/hexo-theme-xups/layout/_partial/archive.ejs

@@ -1,27 +1,64 @@
-<% if (index == true) { %>
+<h3 class="widget-hd">
-    <h3 class="widget-hd">
+  <strong>
-        <strong>
+    <% if (pagination == 1) { %>
-            <% if (pagination == 2) { %>
+      最近动态
-                最近动态
+    <% } else if (pagination == 2) { %>
-            <% } else if (pagination == 3) { %>
+      <%- page.category %> 分类下的文章
-                文章归档
+    <% } else if (pagination == 3) { %>
-            <% } else if (pagination == 4) { %>
+      <%- page.tag %> 标签下的文章
-                `<%- page.category %>`分类下的文章
+    <% } else { %>
-            <% } else if (pagination == 5) { %>
+      文章归档
-                `<%- page.tag %>`标签下的文章
-            <% } %>
-        </strong>
-    </h3>
-    <% page.posts.each(function(post) { %>
-        <%- partial('archive-post', { post: post }) %>
-    <% }) %>
-
-    <% if (page.total >= 1){ %>
-    <nav class="page-navigator">
-        <%- paginator({
-            prev_text: '前一页',
-            next_text: '后一页'
-        }) %>
-    </nav>
     <% } %>
+  </strong>
+</h3>
+<% 
+if(pagination) {
+  page.posts.each(function(post) { 
+    %>
+    <%-partial('archive-post', { post: post }) %>
+    <%
+  })
+} else {
+  let lastYear, lastMonth;
+
+  let currentPosts = [];
+  site.posts.each(function(post) { 
+    if(post.date.year() == page.year && (post.date.month()+1 == page.month || !page.month)) {
+      currentPosts.push(post)
+    }
+  })
+  currentPosts.sort(function(a, b){ return b.date - a.date;});
+  currentPosts.forEach(function(post) { 
+    if(post.date.year() !== lastYear || post.date.month()+1 !== lastMonth) {
+      if(lastYear && lastMonth) { %> </ul> <% }
+      %>
+      <h3 class="widget-date">
+        <strong><%= post.date.year() %>年<%= post.date.month()+1 %>月</strong>
+      </h3>
+      <ul class="archive-wapper">
+      <%
+    }
+    %>
+    <li class="archive-item">
+      <a href="<%=url_for(post.permalink) %>">
+        <div class="archive-div">
+        <%=post.title %>
+        </div>
+      </a>
+    </li>
+    <%
+    lastYear = post.date.year();
+    lastMonth = post.date.month()+1;
+  })
+  %> </ul> <%
+}
+%>
+
+<% if (pagination && page.total >= 1){ %>
+<nav class="page-navigator">
+  <%- paginator({
+    prev_text: '前一页',
+    next_text: '后一页'
+  }) %>
+</nav>
 <% } %>

themes/hexo-theme-xups/layout/_partial/post/share.ejs

@@ -1,11 +1,10 @@
-<% if (theme.share) { %>
+<% if (theme.share.enable) { %>
   <div class="article-share clearfix text-center">
     <div class="share-area">
       <span class="share-txt">分享到：</span>
-      <a href="javascript:void(0);" class="share-icon weibo" onclick="JELON.Utils.share('weibo')"></a>
+      <% for (let i in theme.share.list) { %>
-      <a href="javascript:void(0);" class="share-icon qqzone" onclick="JELON.Utils.share('qqzone')"></a>
+      <a href="javascript:void(0);" class="share-icon <%= theme.share.list[i] %>" onclick="JELON.Utils.share('<%= theme.share.list[i] %>')"></a>
-      <a href="javascript:void(0);" class="share-icon qq" onclick="JELON.Utils.share('qq')"></a>
+      <% } %>
-      <a href="javascript:void(0);" class="share-icon douban" onclick="JELON.Utils.share('douban')"></a>
     </div>
   </div>
 <% } %>

themes/hexo-theme-xups/layout/_partial/sidebar.ejs

@@ -5,18 +5,17 @@
         <%- partial('_widget/categorys') %>
     </section>
 
-    <% if (theme.tagcloud) { %>
+    <% if (theme.tagcloud.enable) { %>
     <section class="widget">
         <h3 class="widget-hd"><strong>热门标签</strong></h3>
         <%- partial('_widget/tags_cloud') %>
     </section>
     <% } %>
 
-    <% if (theme.weibo_show.enable) { %>
+    <% if (theme.archives.enable) { %>
-    <!-- 我的微博 -->
     <section class="widget">
-        <h3 class="widget-hd"><strong>我的微博</strong></h3>
+        <h3 class="widget-hd"><strong>文章归档</strong></h3>
-        <%- partial('_widget/weibo') %>
+        <%- list_archives({format: theme.archives.date_format}) %>
     </section>
     <% } %>
 

themes/hexo-theme-xups/layout/_widget/categorys.ejs

@@ -3,7 +3,7 @@
     <% site.categories.forEach(function(cat){ %>
     <li>
         <a href="<%= url_for(cat.path) %>"><%= cat.name %></a>
-        <span class="badge">(<%= cat.length %>)</span>
+        <span class="badge"><%= cat.length %></span>
     </li>
     <% }); %>
 </ul>

themes/hexo-theme-xups/layout/_widget/friend_links.ejs

@@ -1,11 +1,8 @@
-<!-- 文章分类 -->
+<!-- 友情链接 -->
 <ul class="widget-bd">
-    <%
+  <% for (var i in theme.friends['list']) { %>
-    var list = theme.friends['list'];
+    <li>
-    for (var i in list) {
+      <a href="<%= list[i].link %>" target="_blank" title="<%= theme.friends['list'][i].title %>"><%= theme.friends['list'][i].name %></a>
-    %>
+    </li>
-        <li>
+  <% } %>
-            <a href="<%= list[i].link %>" target="_blank" title="<%= list[i].title %>"><%= list[i].name %></a>
-        </li>
-    <% } %>
 </ul>

themes/hexo-theme-xups/layout/_widget/tags_cloud.ejs

@@ -5,7 +5,7 @@
 	max_font: 30, 
 	amount: 999, 
 	color: true, 
-	start_color: '#e87474',
+	start_color: '#'+theme.tagcloud.start_color,
-	end_color: '#524ac5',
+	end_color: '#'+theme.tagcloud.end_color
 }) %>
 </div>

themes/hexo-theme-xups/layout/_widget/weibo.ejs

@@ -1,29 +0,0 @@
-<div class="widget-bd" style="position: relative;">
-  <div id="myWeiboLoading" class="text-center" style="position:absolute;top:0;left:0;right:0;bottom:0;line-height:50px;font-size:12px;background-color:#fff;z-index:9;">微博加载中...</div>
-  <%- theme.weibo_show.code %>
-  <script>
-  (function () {
-    var oMyWeibo = document.getElementById('myWeibo');
-    var oMyWeiboLoading = document.getElementById('myWeiboLoading');
-    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
-    var timer = null;
-    if (isIE) {
-      oMyWeibo.onreadystatechange = function(){
-        if(oMyWeibo.readyState === 'loaded' || oMyWeibo.readyState === 'complete'){
-          timer = setTimeout(function () {
-            oMyWeiboLoading.parentNode.removeChild(oMyWeiboLoading);
-            timer = null;
-          }, 300);
-        }
-      };
-    } else {
-      oMyWeibo.onload = function () {
-        timer = setTimeout(function () {
-          oMyWeiboLoading.parentNode.removeChild(oMyWeiboLoading);
-          timer = null;
-        }, 300);
-      };
-    }
-  })();
-  </script>
-</div>

themes/hexo-theme-xups/layout/archive.ejs

@@ -1,2 +1,2 @@
 <!-- 文章归档 -->
-<%- partial('_partial/archive', { pagination: 3, index: true }) %>
+<%- partial('_partial/archive', { pagination: false, index: true }) %>

themes/hexo-theme-xups/layout/category.ejs

@@ -1,2 +1,2 @@
 <!-- 文章分类 -->
-<%- partial('_partial/archive', { pagination: 4, index: true }) %>
+<%- partial('_partial/archive', { pagination: 2, index: true }) %>

themes/hexo-theme-xups/layout/index.ejs

@@ -2,5 +2,5 @@
 <% if (page.content) { %>
     <%- page.content %>
 <% } else { %>
-    <%- partial('_partial/archive', { pagination: 2, index: true }) %>
+    <%- partial('_partial/archive', { pagination: 1, index: true }) %>
 <% } %>

themes/hexo-theme-xups/layout/tag.ejs

@@ -1,2 +1,2 @@
 <!-- 按标签分类 -->
-<%- partial('_partial/archive', { pagination: 5, index: true }) %>
+<%- partial('_partial/archive', { pagination: 3, index: true }) %>

themes/hexo-theme-xups/source/css/_partial/post.styl

@@ -117,3 +117,20 @@
       border-left 4px solid c-eee
       p
         margin 0
+
+.archive-wapper
+  list-style none
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  .archive-item
+    display inline-block
+    height 50px
+    padding 5px
+    width 30%
+    > a > .archive-div 
+      border 1px solid #a7a7a7
+      border-radius 5px
+      height 100%
+      padding 5px
+      box-sizing border-box

themes/hexo-theme-xups/source/css/_partial/sidebar.styl

@@ -15,7 +15,7 @@
   ul
     margin 0
     padding 0
-  .widget-hd
+  .widget-hd, .widget-date
     margin 0
     padding 0
     border-bottom 2px solid c-eee
@@ -34,7 +34,12 @@
       text-decoration underline
       &:hover
         text-decoration none
-  .widget-bd
+  .widget-date
+    text-align center
+    border-bottom none
+    strong
+      border-bottom none
+  .widget-bd, .archive-list
     margin 0
     padding 0
     list-style none
@@ -43,10 +48,17 @@
       padding 10px 0
       line-height 1.5
       border-bottom 1px solid c-eee
-      font-size 12px
+      font-size 14px
       overflow hidden
       text-overflow ellipsis
       white-space nowrap
+      .badge, .archive-list-count
+        &::before
+          content "("
+        &::after
+          content ")"
+        color #a4a4a4
+        padding .2em .5em
       a .avatar
         float left
         width 36px