From 7a16a6a04d9cfd0a2d6dfdc7e6aa06e15a4bb33d Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Thu, 8 Nov 2018 10:30:49 +0800
Subject: [PATCH] update

---
 layout/_partial/article.ejs    | 76 +++++++++++++++++++++-------------
 layout/_partial/categories.ejs |  5 ++-
 layout/_partial/post.ejs       |  2 +-
 source/less/_article.less      | 17 ++++----
 source/less/_defines.less      |  2 +-
 source/less/_main.less         | 72 +++++++++++++++++++++-----------
 6 files changed, 109 insertions(+), 65 deletions(-)

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index f4d817e..d3ab239 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -7,10 +7,13 @@
                 <%= date(post.date, config.date_format) %>
             <% } %>
         </h1>
-        <time>
-            <i class="fa fa-calendar-alt fa-fw" aria-hidden="true"></i>&nbsp;<%= date(post.date, config.date_format) %>&nbsp;&nbsp;
-            <i class="fa fa-eye fa-fw" aria-hidden="true"></i>&nbsp;<span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
+        <time class="time">
+            <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
+            <%= date(post.date, config.date_format) %>
         </time>
+        <div class="browse"><i class="fas fa-eye fa-fw" aria-hidden="true"></i>
+          <span id="busuanzi_value_page_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
+        </div>
         <%- partial('categories',{post:post}) %>
     </section>
 
@@ -20,26 +23,31 @@
             <%- post.content %>
         </div>
 
-        <% if (post.tags && post.tags && post.tags.each) { %>
-            <div class="article-tags tags">
-                <% post.tags.each(function(item){ %>
-                    <a href="<%- url_for(item.path) %>"><i class="fa fa-tag fa-fw" aria-hidden="true"></i>&nbsp;<%=item.name %></a>
-                <%})%>
-            </div>
-        <% } %>
         <section class='meta'>
-          <time itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
-            <i class="fa fa-edit fa-fw" aria-hidden="true"></i>
-            本文最后更新于：<%- date(post.updated, config.date_format) %>
-          </time>
+            <time class="time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
+                <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
+                本文最后更新于：<%- date(post.updated, config.date_format) %>
+            </time>
+            <% if (post.tags && post.tags && post.tags.each) { %>
+                <%
+                var items = [];
+                post.tags.each(function(item){
+                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                });
+                %>
+                <div class="article-tags tags">
+                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
+                    <%- items.join(', ') %>
+                </div>
+            <% } %>
         </section>
 
         <% if(post.prev || post.next){ %>
             <div class="prev-next">
                 <% if(post.prev){ %>
-                    <section class="prev" >
+                    <section class="prev">
                         <span class="art-item-left">
-                            <h6><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;上一篇</h6>
+                            <h6><i class="fas fa-chevron-left" aria-hidden="true"></i>&nbsp;上一篇</h6>
                             <h4>
                                 <a href="<%=url_for(post.prev.path)%>" rel="prev" title="<%=post.prev.title%>">
                                   <% if(post.prev.title){ %>
@@ -49,11 +57,16 @@
                                   <% } %>
                                 </a>
                             </h4>
-                            <% if (post.prev.tags && post.prev.tags.length) { %>
+                            <% if (post.prev.tags && post.prev.tags && post.prev.tags.each) { %>
+                                <%
+                                var items = [];
+                                post.prev.tags.each(function(item){
+                                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                                });
+                                %>
                                 <h6 class="tags">
-                                    <% post.prev.tags.each(function(item){ %>
-                                        <i class="fa fa-tag fa-fw"></i><%=item.name %>
-                                    <%})%>
+                                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
+                                    <%- items.join(', ') %>
                                 </h6>
                             <% } %>
                         </span>
@@ -62,7 +75,7 @@
                 <% if(post.next){ %>
                     <section class="next">
                         <span class="art-item-right" aria-hidden="true">
-                            <h6>下一篇&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></h6>
+                            <h6>下一篇&nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></h6>
                             <h4>
                                 <a href="<%=url_for(post.next.path)%>" rel="prev" title="<%=post.next.title%>">
                                     <% if(post.next.title){ %>
@@ -72,11 +85,16 @@
                                     <% } %>
                                 </a>
                             </h4>
-                            <% if (post.next.tags && post.next.tags.length) { %>
+                            <% if (post.next.tags && post.next.tags && post.next.tags.each) { %>
+                                <%
+                                var items = [];
+                                post.next.tags.each(function(item){
+                                    items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
+                                });
+                                %>
                                 <h6 class="tags">
-                                    <% post.next.tags.each(function(item){ %>
-                                        <i class="fa fa-tag fa-fw"></i><%=item.name %>
-                                    <%})%>
+                                    <i class="fas fa-tags fa-fw" aria-hidden="true"></i>
+                                    <%- items.join(', ') %>
                                 </h6>
                             <% } %>
                         </span>
@@ -103,7 +121,7 @@
             <% if (post.comments) { %>
 
                 <% if (config.disqus_shortname) { %>
-                    <h4><i class="fa fa-comments fa-fw" aria-hidden="true"></i>&nbsp;Disqus评论</h4>
+                    <h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;Disqus评论</h4>
                     <section id="comments">
                         <div id="disqus_thread">
                             ⚠️  无法加载评论系统，请确保您的网络能够正常访问 <a href="https://disqus.com">Disqus</a> 。
@@ -112,7 +130,7 @@
                 <% } %>
 
                 <% if (config.livere_uid){ %>
-                    <h4><i class="fa fa-comments fa-fw" aria-hidden="true"></i>&nbsp;LiveRe评论</h4>
+                    <h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;LiveRe评论</h4>
                     <section id="comments">
                         <div id="lv-container" data-id="city" data-uid="<%= config.livere_uid %>">
                             <noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
@@ -122,13 +140,13 @@
 
                 <% if (config.valine){ %>
                     <% if (config.valine.enable && config.valine.appId && config.valine.appKey){ %>
-                        <h4><i class="fa fa-comments fa-fw" aria-hidden="true"></i>&nbsp;Valine评论</h4>
+                        <h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;Valine评论</h4>
                         <div class="subtitle">
                           <h6><b>文明评论，请勿灌水。</b>为了便于区分和接收回复提醒，请您在留言时填写一下<b>昵称</b>和<b>邮箱</b>。</h6>
                         <div>
                         <section id="comments">
                             <div id="valine_container" class="valine_thread">
-                                </i><i class="fa fa-spinner fa-spin fa-fw"></i>
+                                </i><i class="fas fa-spinner fa-spin fa-fw"></i>
                             </div>
                         </section>
                         <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
diff --git a/layout/_partial/categories.ejs b/layout/_partial/categories.ejs
index e8c31fa..d841558 100755
--- a/layout/_partial/categories.ejs
+++ b/layout/_partial/categories.ejs
@@ -2,10 +2,11 @@
     <%
     var cats = [];
     post.categories.forEach(function(cat){
-        cats.push('<a href="'+url_for(cat.path)+'">' + cat.name + '</a>');
+        cats.push('<a class="categories" href="'+url_for(cat.path)+'">' + cat.name + '</a>');
     });
     %>
     <div class='cats'>
-        <%- cats.join(', ') %>
+        <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
+        <%- cats.join(' / ') %>
     </div>
 <% } %>
diff --git a/layout/_partial/post.ejs b/layout/_partial/post.ejs
index 1648c81..d6d2fe8 100755
--- a/layout/_partial/post.ejs
+++ b/layout/_partial/post.ejs
@@ -9,7 +9,7 @@
                 <% } %>
             </a>
         </h2>
-        <time>
+        <time class="time">
             <i class="fa fa-calendar-alt fa-fw" aria-hidden="true"></i>&nbsp;<%= date(post.date, config.date_format) %>
         </time>
         <%- partial('categories',{post:post}) %>
diff --git a/source/less/_article.less b/source/less/_article.less
index e99db2c..b486ead 100755
--- a/source/less/_article.less
+++ b/source/less/_article.less
@@ -156,8 +156,8 @@
         background: fade(@theme_bg_quote, 10%);
         margin: 1em 0;
         padding: @gap;
-        border-left: @border_radius solid @theme_bg_quote;
-        border-radius: @border_radius;
+        border-left: @border_radius_code_block solid @theme_bg_quote;
+        border-radius: @border_radius_code_block;
         .enable-trans();
         footer {
             strong {
@@ -226,11 +226,12 @@
         margin-top: @gap;
         background: darken(fade(@theme_bg_main, 50%), 5%);
         &.article-tags {
-            padding-top: 2*@gap;
-            background: transparent;
+            // padding-top: 2*@gap;
+            // background: transparent;
         }
         word-spacing: @gap;
         a {
+          color: @theme_text_main;
             position: relative;
             display: inline-block;
             word-spacing: 0;
@@ -239,7 +240,6 @@
             //   margin-left: @gap/2;
             // }
             .enable-trans();
-            color: @color_grey;
             &:hover {
                 color: @theme_text_highlight;
                 background: transparent;
@@ -300,6 +300,7 @@
             }
             h6{
                 margin: 0;
+                word-spacing: normal;
             }
             .enable-trans();
             // border: 1px solid transparent;
@@ -309,8 +310,8 @@
             .tags{
                 background: transparent;
                 padding: 0;
-                    margin-top: @gap/2;
-                    margin-bottom: 0;
+                margin-top: @gap/2;
+                margin-bottom: 0;
             }
             &:first-child{
                 margin-left: 0;
@@ -410,7 +411,7 @@
       content: "SWIFT";
   }
   &.objc .code:before{
-      content: "OBJC";
+      content: "OBJECTIVE-C";
   }
   &.c .code:before{
       content: "C";
diff --git a/source/less/_defines.less b/source/less/_defines.less
index b59f540..459fb74 100755
--- a/source/less/_defines.less
+++ b/source/less/_defines.less
@@ -128,7 +128,7 @@
 // 0px: 极端，2px：硬朗，4px：常规，8px：圆润，16px：温柔
 @border_radius: 8px; // 圆角半径，可以根据心情随时调整风格
 @border_radius_line: 4px; // 线的宽度和滚动条的宽度
-@border_radius_code_block: 8px; // 代码块的圆角
+@border_radius_code_block: 8px; // 引用、代码块的圆角
 // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
 
diff --git a/source/less/_main.less b/source/less/_main.less
index 5be9e2a..c066f9c 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -209,10 +209,15 @@
               box-shadow: @boxshadow_card_normal;
             }
         }
+        .tags a{
+          color: fade(@theme_text_main, 70%);
+        }
         .meta {
+            color: fade(@theme_text_main, 70%);
             margin-bottom: 0.5*@gap;
+            font-size: @fontsize_small * .95;
             &:first-child{
-                margin-bottom: 2*@gap;
+                margin-bottom: 1.5*@gap;
             }
             .title {
                 left: 0;
@@ -238,39 +243,58 @@
                     }
                 }
             }
-            time,
-            .cats {
+            .tags{
                 display: inline-block;
+                background: transparent;
+                word-spacing: normal;
+            }
+            .time,
+            .cats,
+            .browse,
+            .tags {
                 font-size: @fontsize_small * .95;
+                color: fade(@theme_text_main, 70%);
+                display: inline-block;
+                background: fade(@theme_bg_quote, 10%);
+                margin-right: 4px;
+                margin-bottom: 8px;
+                padding: 2px 8px 2px 6px;
+                border-radius: 0.5*@border_radius_code_block;
+                border-left: 0.5*@border_radius_code_block solid @theme_bg_quote;
+                a{
+                    .enable-trans();
+                    &:hover {
+                        color: @theme_text_highlight;
+                        text-decoration: underline;
+                    }
+                    &:active {
+                        color: darken(@theme_text_highlight, 25%);
+                    }
+                }
+                .categories {
+                    font-weight: bold;
+                    color: @theme_text_link;
+                }
+                .tag{
+                    color: fade(@theme_text_main, 70%);
+                }
 
             }
             .cats {
-                &:before {
-                    display: inline-block;
-                    margin: 0 5px;
-                    @border-width: 8px;
-                    content: '';
-                    border-top: @border-width/2 solid transparent;
-                    border-bottom: @border-width/2 solid transparent;
-                    border-left: @border-width solid @theme_text_link;
-                }
                 a {
                     font-weight: bold;
-                        color: @theme_text_link;
-                        .enable-trans();
-                        &:hover {
-                            color: @theme_text_highlight;
-                            text-decoration: underline;
-                        }
-                        &:active {
-                            color: darken(@theme_text_highlight, 25%);
-                        }
+                    color: @theme_text_link;
+                    .enable-trans();
+                    &:hover {
+                        color: @theme_text_highlight;
+                        text-decoration: underline;
+                    }
+                    &:active {
+                        color: darken(@theme_text_highlight, 25%);
+                    }
                 }
 
             }
-            time {
-                color: lighten(@color_grey, 20%);
-            }
         }
         .full-width,.highlight{
             margin-left: 0*@gap;