feat(header): support header title typeit (#306)

dillonzq · May 3, 2020 · 8c70654 · 8c70654
1 parent 09a7c95
commit 8c70654
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 0 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -655,6 +655,9 @@ enableEmoji = true
       # you can add extra information after the name (HTML format is supported), such as icons
       # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
       post = ""
+      # whether to use typeit animation for title name
+      # 是否为副标题显示打字机动画
+      typeit = false
 
   # Footer config
   # 页面底部信息配置

diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -254,6 +254,8 @@ Please open the code block below to view the complete sample configuration :(far
       pre = ""
       # you can add extra information after the name (HTML format is supported), such as icons
       post = ""
+      # whether to use typeit animation for title name
+      typeit = false
 
   # Footer config
   [params.footer]

diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -259,6 +259,8 @@ Please open the code block below to view the complete sample configuration :(far
       pre = ""
       # you can add extra information after the name (HTML format is supported), such as icons
       post = ""
+      # whether to use typeit animation for title name
+      typeit = false
 
   # Footer config
   [params.footer]

diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -257,6 +257,8 @@ hugo
       pre = ""
       # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
       post = ""
+      # 是否为副标题显示打字机动画
+      typeit = false
 
   # 页面底部信息配置
   [params.footer]

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -10,7 +10,13 @@
                     {{- with .pre -}}
                         <span class="header-title-pre">{{ . | safeHTML }}</span>
                     {{- end -}}
+                    {{- if .typeit -}}
+                        {{- $id := dict "content" .name "scratch" $.Scratch | partial "function/id.html" -}}
+                        <span id="{{ $id }}" class="typeit"></span>
+                        {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+                    {{- else -}}
                     {{- .name -}}
+                    {{- end -}}
                     {{- with .post -}}
                         <span class="header-title-post">{{ . | safeHTML }}</span>
                     {{- end -}}
@@ -88,7 +94,13 @@
                         {{- with .pre -}}
                             <span class="header-title-pre">{{ . | safeHTML }}</span>
                         {{- end -}}
+                        {{- if .typeit -}}
+                            {{- $id := dict "content" .name "scratch" $.Scratch | partial "function/id.html" -}}
+                            <span id="{{ $id }}" class="typeit"></span>
+                            {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+                        {{- else -}}
                         {{- .name -}}
+                        {{- end -}}
                         {{- with .post -}}
                             <span class="header-title-post">{{ . | safeHTML }}</span>
                         {{- end -}}