feat: config to show more post meta

word count and read time

data/even/default.toml

@@ -16,6 +16,10 @@ categories = "分类"
   reward = "赞赏支持"
   seeMarkDown = "查看本文 Markdown 版本 »"
 
+  [posts.header]
+    wordCount = "约 %d 字"
+    readingTime = "预计阅读 %d 分钟"
+
 [copyright]
   author = "文章作者"
   lastMod = "上次更新"

data/even/en.toml

@@ -16,6 +16,10 @@ categories = "Categories"
   reward = "Reward"
   seeMarkDown = "The Markdown version »"
 
+  [posts.header]
+    wordCount = "%d word"
+    readingTime = "%d min read"
+
 [copyright]
   author = "Author"
   lastMod = "LastMod"

data/even/zh-CN.toml

@@ -16,6 +16,10 @@ categories = "分类"
   reward = "赞赏支持"
   seeMarkDown = "查看本文 Markdown 版本 »"
 
+  [posts.header]
+    wordCount = "约 %d 字"
+    readingTime = "预计阅读 %d 分钟"
+
 [copyright]
   author = "文章作者"
   lastMod = "上次更新"

exampleSite/config.toml

@@ -50,7 +50,10 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
 
   # paginate of archives, tags and categories             # 归档、标签、分类每页显示的文章数目
   archive-paginate = 3
-  
+
+  # show word count and read time ?                       # 是否显示字数统计与阅读时间
+  moreMeta = true
+
   # 一些全局开关，你可以在每一篇内容的 front matter 中单独关闭某些选项
   # Some global options, you can close something in front matter.
   toc = true                                                                            # 是否开启目录

exampleSite/data/even/default.toml

@@ -16,6 +16,10 @@ categories = "Categories"
   reward = "Reward"
   seeMarkDown = "The Markdown version »"
 
+  [posts.header]
+    wordCount = "%d word"
+    readingTime = "%d min read"
+
 [copyright]
   author = "Author"
   lastMod = "LastMod"

layouts/post/single.html

@@ -6,9 +6,7 @@
       <h1 class="post-title">{{ .Title }}</h1>
 
       <div class="post-meta">
-        <span class="post-time">
-          {{ .Date.Format "2006-01-02" }}
-        </span>
+        <span class="post-time"> {{ .Date.Format "2006-01-02" }} </span>
         {{ with .Params.categories -}}
           <div class="post-category">
             {{ range . -}}
@@ -16,6 +14,10 @@
             {{- end }}
           </div>
         {{- end }}
+        {{ if .Site.Params.moreMeta -}}
+        <span class="more-meta"> {{ printf $lang.posts.header.wordCount .WordCount }} </span>
+        <span class="more-meta"> {{ printf $lang.posts.header.readingTime .ReadingTime }} </span>
+        {{- end }}
       </div>
     </header>
 

layouts/post/summary.html

@@ -3,9 +3,7 @@
   <header class="post-header">
     <h1 class="post-title"><a class="post-link" href="{{ .URL }}">{{ .Title }}</a></h1>
     <div class="post-meta">
-      <span class="post-time">
-        {{ .Date.Format "2006-01-02" }}
-      </span>
+      <span class="post-time"> {{ .Date.Format "2006-01-02" }} </span>
       {{ with .Params.categories -}}
         <div class="post-category">
           {{ range . -}}
@@ -13,6 +11,10 @@
           {{- end }}
         </div>
       {{- end }}
+      {{ if .Site.Params.moreMeta -}}
+      <span class="more-meta"> {{ printf $lang.posts.header.wordCount .WordCount }} </span>
+      <span class="more-meta"> {{ printf $lang.posts.header.readingTime .ReadingTime }} </span>
+      {{- end }}
     </div>
   </header>
   <!-- Content -->

src/css/_partial/_post/_header.scss

@@ -13,15 +13,15 @@
   }
 
   .post-meta {
+    font-size: 14px;
+    color: $post-meta-font-color;
+
     .post-time {
       font-size: 15px;
-      color: $post-time-font-color;
     }
 
     .post-category {
       display: inline;
-      font-size: 14px;
-      color: $post-category-font-color;
 
       &::before {
         content: '·';
@@ -35,5 +35,12 @@
         }
       }
     }
+
+    .more-meta {
+      &::before {
+        content: '·';
+      }
+    }
+
   }
 }

src/css/_variables.scss

@@ -128,11 +128,8 @@ $post-title-font-weight: 400 !default;
 // Margin top of the post meta (post time).
 $post-meta-margin-top: 5px !default;
 
-// Font color of the post time.
-$post-time-font-color: $dark-gray !default;
-
-// Font color of the post category
-$post-category-font-color: $dark-gray !default;
+// Font color of the post meta.
+$post-meta-font-color: $dark-gray !default;
 
 // Border bottom of the read more link when hover it.
 $post-readMore-border-bottom: 1px solid $theme-color !default;