card theme

_config.yml

@@ -15,6 +15,9 @@ menu:
     url: /archives
   tags:
     url: /tags
+  th-list:
+    text: Categories
+    url: /categories
   github:
     url: https://github.com/yscoder
     target: _blank
@@ -67,6 +70,9 @@ hideMenu: true
 toc:
   list_number: true  # 是否显示数字排序
 
+#文章页版权声明内容，hexo中所有变量及辅助函数等均可调用，具体请查阅 hexo.io
+copyright: 这里写留言或版权声明：<a href="<%- url_for(page.path) %>" target="_blank" rel="external"><%- url %></a>
+
 #站长统计，如要开启，输入CNZZ站点id，如 cnzz: 1255152447
 cnzz: false
 

layout/_partial/archive.ejs

@@ -1,11 +1,14 @@
-<article class="archive-article">
-  <div class="archive-article-date">
-    <%- partial('post/date', { post: post, date_format: 'MMM D'}) %>
-  </div>
-  <div class="archive-article-inner">
+<div class="waterfall-item">
+  <article class="article-card archive-article">
+    <div class="post-meta">
+      <%- partial('post/date', { post: post, date_format: date_format}) %>
+      <%- partial('post/category', { post: post }) %>
+    </div>
     <%- partial('post/title', {
-      hasLink: true
-    }) %>
-    <%- partial('post/tag') %>
-  </div>
-</article>
+        hasLink: true
+      }) %>
+    <div class="post-footer">
+      <%- partial('post/tag') %>
+    </div>
+  </article>
+</div>

layout/_partial/header.ejs

@@ -3,13 +3,13 @@
         <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
           <i class="icon icon-lg icon-navicon"></i>
         </a>
-        <div class="flex-col header-title ellipsis"><%=page.title || config.title %></div>
+        <div class="flex-col header-title ellipsis"><%=title %></div>
         <% if(theme.search){ %>
         <div class="search-wrap" id="search-wrap">
             <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                 <i class="icon icon-lg icon-chevron-left"></i>
             </a>
-            <input type="text" id="key" class="search-input " autocomplete="off" placeholder="输入感兴趣的关键字">
+            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
             <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                 <i class="icon icon-lg icon-search"></i>
             </a>
@@ -22,15 +22,26 @@
         <% } %>
     </div>
 </header>
-<header class="content-header">
-  <div class="container">
-    <h1 class="author"><%=page.title || config.title %></h1>
-    <h5 class="subtitle">
-        <% if(page.date && !page.noDate){ %>
-            <%- partial('post/head-meta') %>
-        <% } else { %>
-        <%=config.subtitle %>
-        <% }%>
-    </h5>
-  </div>
+<header class="content-header <%-hdClass %>">
+
+    <div class="container">
+        <h1 class="title"><%=title %></h1>
+
+        <%  if(is_home()) { %> 
+        <h5 class="subtitle">
+            
+            <% if(subTitle){ %>
+                <%=config.subtitle %>
+            <% } else { %>
+                <%- partial('post/head-meta') %>
+            <% }%>
+        </h5>
+        <% } %>
+
+    </div>
+
+    <%- partial('tags-bar', {
+        type: hdClass.split('-')[0]
+    }) %>
+
 </header>

layout/_partial/index-item.ejs

@@ -1,24 +1,28 @@
 <article id="<%= post.layout %>-<%= post.slug %>"
-  class="article article-type-<%= post.layout %>" itemprop="blogPost">
-     <%- partial('post/title', { hasLink: true }) %>
+  class="article-card article-type-<%= post.layout %>" itemprop="blogPost">
+
     <div class="post-meta">
         <%- partial('post/date', {date_format: config.date_format}) %>
         <%- partial('post/category') %>
     </div>
 
+    <%- partial('post/title', { hasLink: true }) %>
+
     <div class="post-content" id="post-content" itemprop="postContent" >
 
     <% if(theme.excerpt_render) { %> 
         <%- post.excerpt || post.content %>
-    <% } else {
-        var tagReg = /<(S*?)[^>]*>.*?|<.*? \/>/gm;
-    %>
-        <%- post.excerpt ? post.excerpt.replace(tagReg, ' ') : post.content.replace(tagReg, ' ').substring(0, theme.excerpt_length) %>
+    <% } else { %>
+        <%- post.excerpt ? strip_html(post.excerpt) : truncate(strip_html(post.content), {
+            length: theme.excerpt_length
+        }) %>
     <% } %>
 
         <a href="<%- url_for(post.path) %>" class="post-more waves-effect waves-button">
             <%-theme.excerpt_link%>
         </a>
     </div>
-    <%- partial('post/tag') %>
+    <div class="post-footer">
+        <%- partial('post/tag') %>
+    </div>
 </article>

layout/_partial/menu.ejs

@@ -1,35 +1,37 @@
-<div class="inner flex-row-vertical">
-  <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
-      <i class="icon icon-lg icon-close"></i>
-  </a>
-  <div class="brand-wrap">
-    <div class="brand">
-      <a href="/" class="avatar"><img src="<%=theme.avatar %>"></a>
-      <hgroup class="introduce">
-        <h5 class="nickname"><%- config.author %></h5>
-        <%- mail_to(theme.email, theme.email, {class: 'mail'}) %>
-      </hgroup>
+<aside id="menu" <% if(is_post() && theme.hideMenu){ %>class="hide"<% } %> >
+  <div class="inner flex-row-vertical">
+    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
+        <i class="icon icon-lg icon-close"></i>
+    </a>
+    <div class="brand-wrap">
+      <div class="brand">
+        <a href="/" class="avatar"><img src="<%=theme.avatar %>"></a>
+        <hgroup class="introduce">
+          <h5 class="nickname"><%- config.author %></h5>
+          <%- mail_to(theme.email, theme.email, {class: 'mail'}) %>
+        </hgroup>
+      </div>
     </div>
-  </div>
-  <div class="scroll-wrap flex-col">
-    <ul class="nav">
-      <%
-        var menuItem, isActive = function(item) {
-            var url = url_for(item.url);
-            return (url === '/' ? '' : url) + '/index.html' === '/' + page.path;
-        };
-        for (var i in theme.menu) {
-          menuItem = theme.menu[i];
-        %>
-          <li class="waves-block waves-effect<% if(isActive(menuItem)){ %> active<% } %>">
-            <a href="<%- url_for(menuItem.url) %>" <% if(menuItem.target){ %>target="_blank"<% } %> >
-              <i class="icon icon-lg icon-<%= i %>"></i>
-              <%=(menuItem.text || _.startCase(i)) %>
-            </a>
-          </li>
-      <% } %>
-    </ul>
+    <div class="scroll-wrap flex-col">
+      <ul class="nav">
+        <%
+          var menuItem, isActive = function(item) {
+              var pageUrl = url_for(page.path)
+              return item.url === '/' ? pageUrl === url_for(item.url + 'index.html') : _.startsWith(pageUrl, url_for(item.url))
+          };
+          for (var i in theme.menu) {
+            menuItem = theme.menu[i];
+          %>
+            <li class="waves-block waves-effect<% if(isActive(menuItem)){ %> active<% } %>">
+              <a href="<%- url_for(menuItem.url) %>" <% if(menuItem.target){ %>target="_blank"<% } %> >
+                <i class="icon icon-lg icon-<%= i %>"></i>
+                <%=(menuItem.text || _.startCase(i)) %>
+              </a>
+            </li>
+        <% } %>
+      </ul>
 
-    <%- partial('footer') %>
+      <%- partial('footer') %>
+    </div>
   </div>
-</div>
+</aside>

layout/_partial/paginator.ejs

@@ -0,0 +1,10 @@
+<% if (page.total > 1){ %>
+<nav id="page-nav">
+    <div class="inner">
+    <%- paginator({
+        prev_text: '上一页',
+        next_text: '下一页'
+    }) %>
+    </div>
+</nav>
+<% } %>

layout/_partial/post.ejs

@@ -1,49 +1,65 @@
 <article id="<%= post.layout %>-<%= post.slug %>" 
-  class="article article-type-<%= post.layout %>" itemprop="blogPost">
-    <div class="post-meta flex-row">
-        <%- partial('post/tag') %>
-    </div>
-    <div class="post-body">
-        <aside class="post-widget" id="post-widget">
+  class="post-article article-type-<%= post.layout %>" itemprop="blogPost">
 
-            <% if(theme.share){ %>
-            <%- partial('post/share', {
-                className: 'post-share'
-            }) %>
-            <% } %>
-
-            <% if(theme.toc){ %>
-            <nav class="post-toc-wrap" id="post-toc">
-            <%- toc(post.content, {
-                class: 'post-toc',
-                list_number: theme.toc.list_number
-                }) %>
-            </nav>
-            <% } %>
-        </aside>
+    <div class="post-card">
+        <h1 class="post-card-title"><%- post.title %></h1>
+        <div class="post-meta">
+            <%- partial('post/date', {date_format: config.date_format}) %>
+            <%- partial('post/category') %>
+        </div>
+        <div class="post-content" id="post-content" itemprop="postContent">
+            <%- post.content %>
+        </div>
+
+        <blockquote class="post-copyright">
+            <div class="content">
+               <%- _.template(theme.copyright)(locals) %>
+            </div>
+            <footer>
+                <a href="<%- config.url %>">
+                    <img src="<%- theme.avatar %>" alt="<%- config.author %>">
+                    <%- config.author %>
+                </a>
+            </footer>
+        </blockquote>
 
-        <div class="post-main">
+        <% if(theme.reward){ %>
+        <div class="post-reward">
+            <a id="rewardBtn" href="javascript:;" class="post-reward-btn waves-effect waves-circle waves-light">赏</a>
+        </div>
+        <% } %>
 
-            <div class="post-content" id="post-content" itemprop="postContent">
-            <%- post.content %>
+        <div class="post-footer">
+            <%- partial('post/tag') %>
 
-            <% if(theme.reward){ %>
-            <div class="post-reward">
-                <a id="rewardBtn" href="javascript:;" class="post-reward-btn waves-effect waves-circle waves-light">赏</a>
+            <% if(theme.share){ %>
+            <div class="post-share-wrap">
+                <%- partial('post/share', {
+                        className: 'post-share'
+                }) %>
+                <a href="javascript:;" id="share-fab" class="post-share-fab waves-effect waves-circle">
+                    <i class="icon icon-share-alt icon-lg"></i>
+                </a>
             </div>
             <% } %>
-
-            <blockquote>
-                <p>
-                本文地址：
-                <a href="<%- page.permalink%>" target="_blank" rel="external"><%- page.permalink %></a>
-                </p>
-                <footer><cite><a href="<%- config.url %>">@<%- config.title %></a></cite></footer>
-            </blockquote>
-            </div>
-            <%- partial('post/nav') %>
-
-            <%- partial('post/comment') %>
+
         </div>
-    </div>
-</article>
+    </div>   
+
+    <%- partial('post/nav') %>
+
+    <%- partial('post/comment') %>
+</article>
+
+<aside class="post-widget" id="post-widget">
+
+    <% if(theme.toc){ %>
+    <nav class="post-toc-wrap" id="post-toc">
+        <h4>TOC</h4>
+        <%- toc(post.content, {
+            class: 'post-toc',
+            list_number: theme.toc.list_number
+        }) %>
+    </nav>
+    <% } %>
+</aside>

layout/_partial/post/nav.ejs

@@ -1,9 +1,9 @@
 <% if (post.prev || post.next){ %>
-<nav class="post-nav">
+<nav class="post-nav flex-row flex-justify-between<% if(!post.prev){ %> flex-row-reverse<% } %>">
   <% if (post.prev){
     var prevTitle = post.prev.title || '[no title]';
     %>
-    <div class="waves-block waves-effect prev fl">
+    <div class="waves-block waves-effect prev">
       <a href="<%- url_for(post.prev.path) %>" id="post-prev" class="post-nav-link">
         <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
         <h4 class="title"><%=prevTitle %></h4>
@@ -14,7 +14,7 @@
   <% if (post.next){
       var nextTitle = post.next.title || '[no title]';
     %>
-    <div class="waves-block waves-effect next fr">
+    <div class="waves-block waves-effect next">
       <a href="<%- url_for(post.next.path) %>" id="post-next" class="post-nav-link">
         <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
         <h4 class="title"><%=nextTitle %></h4>

layout/_partial/post/tag.ejs

@@ -1,6 +1,6 @@
 <% if (post.tags && post.tags.length){ %>
 	<%- list_tags(post.tags, {
-            show_count: false,
-            class: 'article-tag'
-          }) %>
+        show_count: false,
+        class: 'article-tag'
+      }) %>
 <% } %>

layout/_partial/tags-bar.ejs

@@ -0,0 +1,16 @@
+<% 
+if(type === 'categories' || type === 'tags'){ %> 
+<div class="tabs-bar container">
+    <nav class="tags-list">
+        <a href="/<%=type %>" class="tags-list-item waves-effect waves-button waves-light
+            <% if(path === type + '/index.html'){%> active<%}%>">全部</a>
+        <% 
+            var options = type === 'tags' ? site.tags : site.categories
+            options.each(function(tag){ %> 
+            <a href="<%- url_for(tag.path) %>" class="tags-list-item waves-effect waves-button waves-light<% if(is_current(tag.path)){%> active<%}%>"><%-tag.name%></a>
+        <% }) %>
+    </nav>
+    <!-- PC show more-->
+    <a href="javascript:;" onclick="Blog.tabBar(this)" class="tags-list-more tags-list-item waves-effect waves-circle waves-light"><i class="icon icon-ellipsis-v"></i></a>
+</div>
+<% } %>