feat: new style update

archetypes/default.md

@@ -6,12 +6,13 @@ draft: true
 description: ""
 show_in_homepage: true
 show_description: false
+license: ''
 
 tags: []
 categories: []
 
-featured_image: ""
-featured_image_preview: ""
+featured_image: ''
+featured_image_preview: ''
 
 comment: true
 toc: false

assets/css/_core/_base.scss

@@ -73,3 +73,11 @@ a {
     }
   }
 }
+
+.navbar {
+  background-color: $navbar-background-color;
+
+  .dark-theme & {
+    background-color: $navbar-background-color-dark;
+  }
+}

assets/css/_core/_media.scss

@@ -19,7 +19,6 @@
       margin: 0;
       height: 4.5em;
       line-height: 4.5em;
-      background: $global-background-color;
 
       .navbar-header {
         display: flex;
@@ -90,7 +89,6 @@
 
       .menu {
         text-align: center;
-        background: $global-background-color;
         border-top: 2px solid $global-font-color;
         display: none;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
@@ -105,14 +103,9 @@
         }
 
         .dark-theme & {
-          background: $global-background-color-dark;
           border-top: 2px solid $global-font-color-dark;
         }
       }
-
-      .dark-theme & {
-        background: $global-background-color-dark !important;
-      }
     }
   }
 

assets/css/_page/_post.scss

@@ -144,6 +144,22 @@
     padding-left: 2em;
   }
 
+  ruby {
+    background: $code-background;
+
+    rt {
+      color: $global-font-secondary-color;
+    }
+
+    .dark-theme & {
+      background: $code-background-dark;
+
+      rt {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+
   .table-wrapper {
     overflow-x: auto;
 
@@ -362,19 +378,59 @@
 p {
   font-size: 1em;
   margin: .5em 0 .5em 0;
+  text-align: justify;
 }
 
 .post-footer {
-  .post-info {
   margin-top: 3rem;
+
+  .post-info {
     border-bottom: 1px solid $global-border-color;
     padding: 1rem 0 0.3rem;
+
+    .dark-theme & {
+      border-bottom: 1px solid $global-border-color-dark;
+    }
+
+    .post-info-line {
       display: flex;
       justify-content: space-between;
 
+      .post-info-mod {
+        font-size: 0.8em;
+        color: $global-font-secondary-color;
+
         .dark-theme & {
-      border-top: 1px solid $global-border-color-dark;
-      border-bottom: 1px solid $global-border-color-dark;
+          color: $global-font-secondary-color-dark;
+        }
+      }
+
+      .post-info-license {
+        font-size: 0.8em;
+        color: $global-font-secondary-color;
+
+        .dark-theme & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+
+      .post-info-md
+      a {
+        font-size: 0.8em;
+        color: $post-link-color;
+
+        .dark-theme & {
+          color: $post-link-color-dark;
+        }
+
+        &:hover {
+          color: $post-link-hover-color;
+
+          .dark-theme & {
+            color: $post-link-hover-color-dark;
+          }
+        }
+      }
     }
   }
 

assets/css/_page/_posts.scss

@@ -84,6 +84,7 @@
   }
 
   .post-footer {
+    margin-top: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;

assets/css/_variables.scss

@@ -7,6 +7,9 @@
 $global-background-color: #fff !default;
 $global-background-color-dark: #292a2d !default;
 
+$navbar-background-color: #FAFAFA !default;
+$navbar-background-color-dark: #252627 !default;
+
 // Text color of the body.
 $global-font-color: #161209 !default;
 $global-font-color-dark: #a9a9b3 !default;

i18n/en.toml

@@ -59,7 +59,7 @@ other = "Author"
 other = "This article is updated with %s"
 
 [license]
-other = "License"
+other = "Published under the %s license"
 
 [back]
 other = "Back"
@@ -68,7 +68,7 @@ other = "Back"
 other = "Home"
 
 [readmore]
-other = "Read More......"
+other = "Read More"
 # === posts/single.html ===
 
 # === 404.html ===

i18n/zh.toml

@@ -59,7 +59,10 @@ other = "作者"
 other = "本文于 %s 更新"
 
 [license]
-other = "许可协议"
+other = "采用 %s 协议发布"
+
+[seeMarkDown]
+other = "阅读原始文档"
 
 [back]
 other = "返回"
@@ -68,7 +71,7 @@ other = "返回"
 other = "主页"
 
 [readmore]
-other = "阅读全文......"
+other = "阅读全文"
 # === posts/single.html ===
 
 # === 404.html ===

layouts/_default/single.md

@@ -0,0 +1 @@
+{{ .RawContent }}

layouts/partials/post/footer.html

@@ -1,13 +1,31 @@
 {{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
 <div class="post-footer">
     <div class="post-info">
-        <div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
+        <div class="post-info-line">
+            <div class="post-info-mod">
+                <span>{{ printf (T "lastMod") $modify_date }}</span>
+            </div>
+            <div class="post-info-license">
+                {{ if .Params.license }}
+                    <span>{{ printf (T "license") .Params.license | safeHTML }}</span>
+                {{ end }}
+            </div>
+        </div>
+        <div class="post-info-line">
+            <div class="post-info-md">
+                {{ if .Site.Params.linkToMarkDown }}
+                    {{ with .OutputFormats.Get "markdown" }}
+                        <span><a class="link-to-markdown" href="{{ .Permalink }}" target="_blank">{{ T "seeMarkDown" }}</a></span>
+                    {{ end }}
+                {{ end }}
+            </div>
             <div class="post-info-share">
                 {{ if and ( .Param "socialShare" ) (gt (len (.Param "share")) 0) }}
                     <span>{{ partial "post/share.html" . }}</span>
                 {{ end }}
             </div>
         </div>
+    </div>
 
     <div class="post-tags">
         <section>

layouts/posts/single.html

@@ -64,6 +64,9 @@
             {{ $REin = `:\(([\w- ]+?)\):` }}
             {{ $REout = `<i class="inline-icon $1"></i>` }}
             {{ $content = replaceRE $REin $REout $content }}
+            {{ $REin = `\[(.+?)\]\^\((.+?)\)` }}
+            {{ $REout = `<strong><ruby>$1<rt>$2</rt></ruby></strong>` }}
+            {{ $content = replaceRE $REin $REout $content }}
             {{ $content | safeHTML }}
         </div>