🏗️ Finish the post meta attributes redesign.

assets/css/_common/components/post/post-header.scss

@@ -1,6 +1,6 @@
 .posts-expand .post-header {
   font-size: $font-size-large;
-  margin-bottom: 60px;
+  margin-bottom: 40px;
   text-align: center;
 }
 

assets/css/main.scss

@@ -80,8 +80,8 @@ $post_meta_item_text: {{ $P.postMeta.itemText }};
 $reward_settings_animation: {{ $P.rewardSets.animation }};
 
 // TODO find the paramters
-$text_align_desktop: center;
+$text_align_desktop: justify;
-$text_align_mobile: center;
+$text_align_mobile: justify;
 
 // Note
 $note_icons: {{ $P.note.icons }};

exampleSite/config.yaml

@@ -8,8 +8,6 @@ baseURL: /
 
 theme: hugo-theme-next
 
-mainSections: ["post"]
-
 defaultContentLanguage: zh-cn
 languages:
   zh-cn:
@@ -55,6 +53,9 @@ menus:
       weight: 4
 
 params:
+  mainSections: ["post"]
+  dateFormat: "2006-01-02"
+  timeFormat: "2006-01-02T15:04:05-07:00"
   # ---------------------------------------------------------------
   # Theme Core Configuration Settings
   # See: https://theme-next.js.org/docs/theme-settings/
@@ -317,12 +318,14 @@ params:
       enable: true
       anotherDay: true
     categories: true
+    wordCount: true
+    readTime: true
 
   # Post wordcount display settings
   # Dependencies: https://github.com/next-theme/hexo-word-counter
-  symbols_count_time:
+  # symbols_count_time:
-    separated_meta: true
+  #   separated_meta: true
-    item_text_total: false
+  #   item_text_total: false
 
   # Use icon instead of the symbol # to indicate the tag at the bottom of the post
   tag_icon: false
@@ -759,12 +762,12 @@ params:
 
   # Show number of visitors of each article.
   # You can visit https://www.leancloud.cn to get AppID and AppKey.
-  leancloud_visitors:
+  leancloudVisitors:
     enable: false
-    app_id: # <your app id>
+    appId: # <your app id>
-    app_key: # <your app key>
+    appKey: # <your app key>
     # Required for apps from CN region
-    server_url: # <your server url>
+    serverUrl: # <your server url>
     # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
     # If you don't care about security in leancloud counter and just want to use it directly
     # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
@@ -787,7 +790,7 @@ params:
     visitorsIcon: fa fa-user
     views: true
     viewsIcon: fa fa-eye
-    postViews: false
+    postViews: true
     postViewsIcon: far fa-eye
 
 

exampleSite/content/post/hello-world.md

@@ -1,12 +1,12 @@
 ---
-title: 'Hugo blog Hello World'
+title: Hello World
 description: 'Short description of the article.'
 keywords: 'Key words'
-isCJKLanguage: true
+isCJKLanguage: false
 
 author: 'Author of the article'
 lastmod: '2022-05-21T17:06:24+08:00'
-publishDate: '2022-05-21T17:06:24+08:00'
+publishDate: '2022-05-21T16:06:24+08:00'
 weight: 1
 
 categories:
@@ -16,12 +16,15 @@ tags:
  - Startup
 
 toc: false
-draft: true
+draft: false
-url: 'hello_world.html'
 ---
 
+The world’s fastest framework for building websites.
+
 [Hugo](https://gohugo.io/) is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
 
+<!--more-->
+
 ## Quick Start
 
 ### Create a new post

i18n/en-us.yaml

@@ -8,7 +8,7 @@ NavToggleLabel:
 MSearchLabel:
   other: Search
 
-ColoneFlag:
+SymbolColon:
   other: ":"
 
 SitePostsTitle:
@@ -19,8 +19,8 @@ SiteTagsTitle:
   other: "Tags"
 TableOfContents:
   other: "TOC"
-SiteInfo:
+SiteOverview:
-  other: "Site Info"
+  other: "Overview"
 RSSTitle:
   other: "RSS Subscribe"
 CCLinkTitle:
@@ -44,7 +44,7 @@ PostReading:
   other: "Read"
 PostReadTime:
   other: "{{- .ReadingTime -}}min"
-PostVisitor:
+PostViews:
   other: "Views"
 PostCatg:
   other: "Categories"

i18n/zh-cn.yaml

@@ -8,7 +8,7 @@ NavToggleLabel:
 MSearchLabel:
   other: 搜索
 
-ColoneFlag:
+SymbolColon:
   other: ":"
 
 SbPostsLable:
@@ -46,11 +46,11 @@ PostReading:
   other: 阅读
 PostReadTime:
   other: "{{- .ReadingTime -}}分钟"
-PostVisitor:
+PostViews:
   other: 浏览数
-PostCatg:
+PostCatgs:
   other: 分类
-PostTag:
+PostTags:
   other: 标签
 PostReadMore:
   other: 阅读全文

layouts/_default/baseof.html

@@ -40,9 +40,9 @@
     </header>
     <!-- Widgets -->
     {{ partial "widgets.html" . }}
-    <div class="main-inner index posts-expand">
+    <div class="main-inner {{ if .IsHome }}index{{ else }}page{{ end }} posts-expand">
       <!-- Submenu,Content,Comment -->
-      {{- block "main" (dict "P" $P "Page" .Page "Paginate" (.Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections)) "Scratch" .Scratch) }}{{- end }}
+      {{- block "main" . }}{{- end }}
     </div>
   </main>
   <footer class="footer">

layouts/index.html

@@ -1,14 +1,13 @@
 {{- define "main" }}
-{{ $P := .P }}
 {{- $lang := .Scratch.Get "lang" }}
-{{/* $paginator := .Paginate (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) */}}
+{{ $paginator := .Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
-{{- range .Paginate.Pages }}
+{{- range $paginator.Pages }}
 <div class="post-block">
   <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="{{ $lang }}">
     <link itemprop="mainEntityOfPage" href="{{ .Permalink }}">
     <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
-      <meta itemprop="image" content="{{ $P.avatar.url }}">
+      <meta itemprop="image" content="{{ .Site.Params.avatar.url }}">
-      <meta itemprop="name" content="{{ $P.author }}">
+      <meta itemprop="name" content="{{ .Site.Params.author }}">
     </span>
     <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
       <meta itemprop="name" content="{{ .Title }}">
@@ -34,7 +33,10 @@
         {{/*- end */}}
       </h2>
       <div class="post-meta-container">
-        {{/* partial "post/meta" . */}}
+        {{ partial "post_meta/created_date.html" . }}
+        {{ partial "post_meta/update_date.html" . }}
+        {{ partial "post_meta/categories.html" . }}
+        {{ partial "post_meta/words.html" . }}
       </div>
     </header>
     <!-- POST BODY -->
@@ -46,7 +48,7 @@
       {{/*- end */}}
     </div>
     <footer class="post-footer">
-      {{- if and $P.readMoreBtn }}
+      {{- if and .Site.Params.readMoreBtn }}
       <div class="post-button">
         <a class="btn" href="{{ .Permalink }}#more" rel="contents">
           {{ T "PostReadMore" }} &raquo;

layouts/partials/post_meta/categories.html

@@ -0,0 +1,17 @@
+{{- if .Site.Params.postMeta.categories }}
+{{- if gt (len .Params.categories) 0 }}
+<span class="post-meta-item">
+  <span class="post-meta-item-icon">
+    <i class="far fa-folder-open"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostCatgs") (T "SymbolColon") }}</span>
+  {{- range (first 3 .Params.categories) }}
+  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+    <a href="{{ . | urlize }}" itemprop="url" rel="index">
+      <span itemprop="name">{{ . }}</span>
+    </a>
+  </span>
+  {{- end }}
+</span>
+{{- end }}
+{{- end }}

layouts/partials/post_meta/created_date.html

@@ -0,0 +1,12 @@
+{{- if .Site.Params.postMeta.created }}
+{{ $createdTime := .PublishDate.Format .Site.Params.timeFormat }}
+<span class="post-meta-item">
+  <span class="post-meta-item-icon">
+    <i class="far fa-calendar"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostPublishDate") (T "SymbolColon") }}</span>
+  <time title="{{ print (T "PostPublishDate") (T "SymbolColon") }}{{ .PublishDate }}" itemprop="dateCreated datePublished" datetime="{{ .PublishDate }}">
+    {{- .PublishDate.Format .Site.Params.dateFormat -}}
+  </time>
+</span>
+{{- end }}

layouts/partials/post_meta/readtime.html

@@ -0,0 +1,9 @@
+{{- if .Site.Params.postMeta.readTime }}
+<span class="post-meta-item" title="{{ T "PostReading" }}">
+  <span class="post-meta-item-icon">
+    <i class="far fa-clock"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostReading") (T "SymbolColon") }} &asymp;</span>
+  <span>{{- T "PostReadTime" . -}}</span>
+</span>
+{{- end }}

layouts/partials/post_meta/update_date.html

@@ -0,0 +1,12 @@
+{{- if and .Site.Params.postMeta.updated.enable .Site.Params.postMeta.updated.anotherDay }}
+{{- if gt .Lastmod .PublishDate }}
+{{ $modTime := .Lastmod.Format .Site.Params.timeFormat }}
+<span class="post-meta-item">
+  <span class="post-meta-item-icon">
+    <i class="far fa-calendar-check"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostLastModDate") (T "SymbolColon") }}</span>
+  <time title="{{ print (T "PostLastModTime") (T "SymbolColon") }}{{ $modTime }}" itemprop="dateModified" datetime="{{ $modTime }}">{{ .Lastmod.Format .Site.Params.dateFormat }}</time>
+</span>
+{{- end }}
+{{- end }}

layouts/partials/post_meta/views.html

@@ -0,0 +1,27 @@
+{{- if .Site.Params.leancloudVisitors.enable }}
+<span id="{{ .Permalink }}" class="post-meta-item leancloud_visitors" data-flag-title="{{ .Title }}" title="{{ T "PostViews" }}">
+  <span class="post-meta-item-icon">
+    <i class="far fa-eye"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostViews") (T "SymbolColon") }}</span>
+  <span class="leancloud-visitors-count"></span>
+</span>
+{{- end }}
+{{- if .Site.Params.firestore.enable }}
+<span class="post-meta-item" title="{{ T "PostViews" }}">
+  <span class="post-meta-item-icon">
+    <i class="far fa-eye"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostViews") (T "SymbolColon") }}</span>
+  <span class="firestore-visitors-count"></span>
+</span>
+{{- end }}
+{{- if and .Site.Params.busuanzi.enable .Site.Params.busuanzi.postViews }}
+<span class="post-meta-item" title="{{ T "PostViews" }}" id="busuanzi_container_page_pv">
+  <span class="post-meta-item-icon">
+    <i class="{{ .Site.Params.busuanzi.postViewsIcon }}"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostViews") (T "SymbolColon") }}</span>
+  <span id="busuanzi_value_page_pv"></span>
+</span>
+{{- end }}

layouts/partials/post_meta/words.html

@@ -0,0 +1,9 @@
+{{- if .Site.Params.postMeta.wordCount }}
+<span class="post-meta-item" title="{{ T "PostWords" }}">
+  <span class="post-meta-item-icon">
+    <i class="far fa-file-word"></i>
+  </span>
+  <span class="post-meta-item-text">{{ print (T "PostWords") (T "SymbolColon") }}</span>
+  <span>{{ T "PostWordCount" . }}</span>
+</span>
+{{- end }}