♻️ Refactor: header title DOM and add subtitle option (#26)

CHANGELOG.md

@@ -1,6 +1,6 @@
 <!-- See https://github.com/Lruihao/FixIt/releases -->
 
-## v0.2.12 [2022-1-10]
+## v0.2.12 [2022-1-11]
 
 - :tada: Feat: add PWA support
 - :tada: Feat: add Watermark support ([#16](https://github.com/Lruihao/FixIt/issues/16))
@@ -8,6 +8,7 @@
 - :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
 - :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
 - :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
+- :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
 - :bug: Fix: add scroll-margin to headerlink
 - :bug: Fix: toc-auto display error ([#21](https://github.com/Lruihao/FixIt/issues/21))
 - :fire: Feat: remove lib smooth-scroll ([#1](https://github.com/Lruihao/FixIt/issues/1))

assets/css/_core/_base.scss

@@ -61,6 +61,10 @@ img {
   @include object-fit(contain);
 }
 
-i.logo-icon .fa-ban {
-  color: $global-logo-icon-color;
+i.logo-icon{
+  width: 2em;
+  
+  .fa-ban {
+    color: $global-logo-icon-color;
+  }
 }

assets/css/_partial/_header.scss

@@ -8,20 +8,6 @@ header {
     background-color: $header-background-color-dark;
   }
 
-  .logo {
-    min-height: 1.5em;
-    height: 1.5em;
-    vertical-align: text-bottom;
-  }
-
-  .logo, .header-title-pre {
-    padding-right: .25rem;
-  }
-
-  .header-title-post {
-    padding-left: .25rem;
-  }
-
   &:hover {
     @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
   }
@@ -44,6 +30,22 @@ header {
   white-space: nowrap;
   text-overflow: ellipsis;
   @include flex(10);
+
+  .logo {
+    min-height: 1.5em;
+    height: 1.5em;
+    vertical-align: text-bottom;
+  }
+  
+  .header-title-text {
+    margin-left: .25rem;
+    margin-right: .25rem;
+  }
+
+  .header-subtitle {
+    margin-left: .25rem;
+    font-size: .6em;
+  }
 }
 
 .menu .menu-item {

exampleSite/config.toml

@@ -676,9 +676,15 @@ enableEmoji = true
       # whether to use typeit animation for title name
       # 是否为标题显示打字机动画
       typeit = false
+    # Header subtitle config since v0.2.12
+    # 页面头部导航栏副标题配置 since v0.2.12
     [params.header.subtitle]
-      name = "李瑞豪的博客"
-      typeit = true
+      # subtitle name
+      # 副标题名称
+      name = ""
+      # whether to use typeit animation for title name
+      # 是否为标题显示打字机动画
+      typeit = false
 
   # Footer config
   # 页面底部信息配置
@@ -1014,7 +1020,7 @@ enableEmoji = true
     fontSize = 0.85
 
   # Busuanzi count since v0.2.12
-  # 不蒜子统计
+  # 不蒜子统计 since v0.2.12
   [params.ibruce]
     enable = true
     # Enable in post meta
@@ -1100,7 +1106,7 @@ enableEmoji = true
   # "_custom.js" located in "themes/FixIt/assets/js/"
   # you can store your custom JS file in the same path under your project:
   # "assets/js/_custom.js"
-  # 页面最后添加自定义 JS
+  # 页面最后添加自定义 JS since v0.2.12
   # "_custom.js" 位于 "themes/FixIt/assets/js" 目录
   # 可以在你的项目下相同路径存放你自己的自定义 JS 文件:
   # "assets/js/_custom.js"

layouts/partials/header.html

@@ -15,24 +15,24 @@
             <span id="{{ $id }}" class="typeit"></span>
             {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
           {{- else -}}
-            <span class="header-title">{{- .name -}}</span>
+            <span class="header-title-text">{{- .name -}}</span>
           {{- end -}}
           {{- with .post -}}
             <span class="header-title-post">{{ . | safeHTML }}</span>
           {{- end -}}
         {{- else -}}
-          <span class="header-title">{{- .Site.Title -}}</span>
-        {{- end -}}
-        {{- with .Site.Params.header.subtitle -}}
-          {{- if .typeit -}}
-            {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
-            &nbsp;<span id="{{ $id }}" class="typeit "></span>
-            {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
-          {{- else -}}
-            &nbsp;<span class="header-subtitle">{{- .name -}}</span>
-          {{- end -}}
+          <span class="header-title-text">{{- .Site.Title -}}</span>
         {{- end -}}
       </a>
+      {{- with .Site.Params.header.subtitle -}}
+        {{- if .typeit -}}
+          {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+          <span id="{{ $id }}" class="typeit header-subtitle"></span>
+          {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+        {{- else -}}
+          <span class="header-subtitle">{{- .name -}}</span>
+        {{- end -}}
+      {{- end -}}
     </div>
     <div class="menu">
       <div class="menu-inner">
@@ -111,15 +111,24 @@
               <span id="{{ $id }}" class="typeit"></span>
               {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
             {{- else -}}
-              {{- .name -}}
+              <span class="header-title-text">{{- .name -}}</span>
             {{- end -}}
             {{- with .post -}}
               <span class="header-title-post">{{ . | safeHTML }}</span>
             {{- end -}}
           {{- else -}}
-            {{- .Site.Title -}}
+            <span class="header-title-text">{{- .Site.Title -}}</span>
           {{- end -}}
         </a>
+        {{- with .Site.Params.header.subtitle -}}
+          {{- if .typeit -}}
+            {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+            <span id="{{ $id }}" class="typeit header-subtitle"></span>
+            {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+          {{- else -}}
+            <span class="header-subtitle">{{- .name -}}</span>
+          {{- end -}}
+        {{- end -}}
       </div>
       <div class="menu-toggle" id="menu-toggle-mobile">
         <span></span><span></span><span></span>