🚧 Finish index coding first version.

2022-05-14 13:50:42 +08:00 · 2022-05-14 13:50:42 +08:00 · b5ab0784a3
commit b5ab0784a3
parent ca1d49e592
10 changed files with 253 additions and 37 deletions
--- a/assets/css/gemini/style.css
+++ b/assets/css/gemini/style.css
@ -123,3 +123,28 @@
 .back-to-top {
  bottom: 30px;
 }
+
+.posts-expand .post-meta-container {
+  margin: 10px auto;
+}
+
+.post-meta-item-icon {
+  margin: 0 0 0 -5px;
+}
+
+:not(.post-meta-break) + .post-meta-item::before {
+    content: '|';
+    margin: 0 0.3em;
+}
+
+.post-meta-catg:not(:last-child)::after {
+  content: ';';
+  margin: 0px;
+}
+
+
+/* Font A */
+.fa-spin {
+  -webkit-animation: fa-spin .8s infinite linear;
+  animation: fa-spin .8s infinite linear;
+} 
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@ -57,6 +57,8 @@ menus:
 # User-define Settings
 # -------------------------------------
 params:
+  mainSections: [ "posts" ]
+  dateFormat: 2006-01-02
  # -------------------------------------
  # Scheme Settings
  # -------------------------------------
--- a/i18n/en-us.toml
+++ b/i18n/en-us.toml
@ -2,6 +2,9 @@
 # English Version
 #--------------------------------------

+[ColoneFlag]
+  other = ":"
+
 [SitePostsTitle]
  other = "Posts"
 [SiteCatesTitle]
@ -15,4 +18,27 @@
 [RSSTitle]
  other = "RSS Subscribe"
 [CCLinkTitle]
-  other = "Creative Commons"
+  other = "Creative Commons"
+
+[PostPublishDate]
+  other = "Publish"
+[PostPublishTime]
+  other = "Create Time"
+[PostLastModDate]
+  other = "Update"
+[PostLastModTime]
+  other = "Modify Time"
+[PostWords]
+  other = "Words"
+[PostWordCount]
+  other = "{{- .WordCount -}}"
+[PostReading]
+  other = "Read"
+[PostReadTime]
+  other = "{{- .ReadingTime -}}min"
+[PostVisitor]
+  other = "Views"
+[PostCatg]
+  other = "Categories"
+[PostReadMore]
+  other = "Read More"
--- a/i18n/zh-cn.toml
+++ b/i18n/zh-cn.toml
@ -2,6 +2,9 @@
 # 中文版本
 #--------------------------------------

+[ColoneFlag]
+  other = "："
+
 [SitePostsTitle]
  other = "日志"
 [SiteCatesTitle]
@ -15,4 +18,27 @@
 [RSSTitle]
  other = "RSS 订阅"
 [CCLinkTitle]
-  other = "共享知识"
+  other = "共享知识"
+
+[PostPublishDate]
+  other = "发表于"
+[PostPublishTime]
+  other = "创建时间"
+[PostLastModDate]
+  other = "更新于"
+[PostLastModTime]
+  other = "修改时间"
+[PostWords]
+  other = "字数"
+[PostWordCount]
+  other = "{{- .WordCount -}}字"
+[PostReading]
+  other = "阅读"
+[PostReadTime]
+  other = "{{- .ReadingTime -}}分钟"
+[PostVisitor]
+  other = "浏览次数"
+[PostCatg]
+  other = "分类"
+[PostReadMore]
+  other = "阅读全文"
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -19,10 +19,7 @@
      {{ partial "partials/header.html" . }}
    </header>
    <div class="main-inner index posts-expand">
-      <div class="post-block">
-        {{- block "main" . -}}
-        {{- end -}}
-      </div>
+      {{- block "main" . -}}{{- end -}}
      <nav class="pagination">
        {{ partial "partials/pages.html" . }}
      </nav>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -0,0 +1,2 @@
+{{- define "main" }}
+{{- end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,2 @@
+{{- define "main" }}
+{{- end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,21 +1,12 @@
-{{ define "main" }}
-<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
-  <link itemprop="mainEntityOfPage" href="http://example.com/2022/05/02/hello-world2/">
-  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
-    <meta itemprop="image" content="/imgs/icons/apple-touch-icon-next.png">
-    <meta itemprop="name" content="John Doe">
-  </span>
-  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
-    <meta itemprop="name" content="Hexo">
-    <meta itemprop="description" content="">
-  </span>
-  <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
-    <meta itemprop="name" content="undefined | Hexo">
-    <meta itemprop="description" content="">
-  </span>
+{{- define "main" }}
+{{- $paginator := .Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
+{{- range $paginator.Pages }}
+<div class="post-block animated fadeIn">
+<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="{{ .Scratch.Get "langCode" }}">
+  <link itemprop="mainEntityOfPage" href="{{ .Permalink }}">  
  <header class="post-header">
    <h2 class="post-title" itemprop="name headline">
-      <a href="/2022/05/02/hello-world2/" class="post-title-link" itemprop="url">Hello World2</a>
+      <a href="{{ .Permalink }}" class="post-title-link" itemprop="url">{{ .Title }}</a>
    </h2>
    <div class="post-meta-container">
      <div class="post-meta">
@ -23,29 +14,70 @@
          <span class="post-meta-item-icon">
            <i class="far fa-calendar"></i>
          </span>
-          <span class="post-meta-item-text">发表于</span>
-          <time title="创建时间：2022-05-02 21:50:19" itemprop="dateCreated datePublished" datetime="2022-05-02T21:50:19+08:00">2022-05-02</time>
+          <span class="post-meta-item-text">{{- T "PostPublishDate" }}{{- T "ColoneFlag" }}</span>
+          <time title="{{ T "PostPublishTime" }}{{ T "ColoneFlag" }}{{ .PublishDate }}" itemprop="dateCreated datePublished" datetime="{{ .PublishDate }}">{{- .PublishDate.Format .Site.Params.DateFormat -}}</time>
        </span>
+        {{- if gt .Lastmod .PublishDate }}
        <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">更新于</span>
-          <time title="修改时间：2022-05-04 11:59:28" itemprop="dateModified" datetime="2022-05-04T11:59:28+08:00">2022-05-04</time>
+          <span class="post-meta-item-text">{{- T "PostLastModDate" }}{{- T "ColoneFlag" }}</span>
+          <time title="{{ T "PostLastModTime" }}{{ T "ColoneFlag" }}{{ .Lastmod }}" itemprop="dateModified" datetime="{{ .Lastmod }}">{{- .Lastmod.Format .Site.Params.DateFormat -}}</time>
+        </span>
+        {{- end }}
+        {{- if isset .Params "categories" }}
+        {{- if not (eq (len .Params.categories) 0) }}
+        <span class="post-meta-item">
+          <span class="post-meta-item-icon">
+            <i class="fa fa-folder-open"></i>
+          </span>
+          <span class="post-meta-item-text">{{- T "PostCatg" }}{{- T "ColoneFlag"}}</span>
+          <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
+          {{- range .Params.categories }}
+          <span class="post-meta-catg" itemprop="name">
+            <a href="{{ . | urlize }}" itemprop="url" rel="index">{{ . }}</a>
+          </span>
+          {{- end }}
+          </span>
+        </span>
+        {{- end }}
+        {{- end }}
+        <span class="post-meta-item">
+          <span class="post-meta-item-icon">
+            <i class="fa fa-file-word"></i>
+          </span>
+          <span class="post-meta-item-text">{{- T "PostWords" }}{{- T "ColoneFlag" -}}</span>
+          <span>{{- T "PostWordCount" . -}}</span>
+        </span>
+        <span class="post-meta-item">
+          <span class="post-meta-item-icon">
+            <i class="fa fa-hourglass"></i>
+          </span>
+          <span class="post-meta-item-text">{{- T "PostReading" }}{{- T "ColoneFlag" -}}</span>
+          <span>{{- T "PostReadTime" . -}}</span>
+        </span>
+        <span class="post-meta-item">
+          <span class="post-meta-item-icon">
+            <i class="fa fa-eye"></i>
+          </span>
+          <span class="post-meta-item-text">{{- T "PostVisitor" -}}{{ T "ColoneFlag" -}}</span>
+          <span id="busuanzi_value_site_pv">
+            <i class="fa fa-sync fa-spin"></i>
+          </span>
        </span>
      </div>
    </div>
-    <div class="post-body" itemprop="articleBody">
-      <ol start="2">
-        <li>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.
-          <div class="post-button">
-            <a class="btn" href="/2022/05/02/hello-world2/#more" rel="contents">
-              阅读全文 &raquo;
-            </a>
-          </div>
+    <div class="post-body" itemprop="articleBody">{{ .Summary }}</div>
+    <div class="post-button">
+      <a class="hvr-shutter-out-horizontal" href="{{ .Permalink }}" rel="contents">
+        {{- T "PostReadMore" }} &raquo;
+      </a>
    </div>
    <footer class="post-footer">
      <div class="post-eof"></div>
    </footer>
 </article>
-{{ end }}
+</div>    
+{{- end }}
+{{- end }}
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@ -1,5 +1,5 @@
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.css" crossorigin="anonymous">
  <!-- NexT theme css style -->
 {{- $scheme := lower .Site.Params.scheme }}
 {{- $styleScheme := (printf "css/%s/style.css" $scheme) }}
--- a/static/css/hover.css
+++ b/static/css/hover.css
@ -68,4 +68,108 @@
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
+}
+
+/* Bounce To Right */
+.hvr-bounce-to-right {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: 2px;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: 0.875em;
+  line-height: 2;
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  position: relative;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+}
+.hvr-bounce-to-right:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: -1px;
+  left: -1px;
+  right: 0;
+  bottom: 0;
+  background: var(--btn-default-hover-bg);
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
+  background: var(--btn-default-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+}
+
+/* Shutter Out Horizontal */
+.hvr-shutter-out-horizontal {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: 2px;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: 0.875em;
+  line-height: 2;
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  position: relative;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.hvr-shutter-out-horizontal:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: -1px;
+  bottom: 0;
+  left: -1px;
+  right: 0;
+  background: var(--btn-default-hover-bg);
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: 50%;
+  transform-origin: 50%;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
+  background: var(--btn-default-bg);
+  border-color: var(--btn-default-hover-border-color);
+  color: var(--btn-default-hover-color);
+}
+.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
 }