Merge pull request #127 from leoli0605/main

Features: related image path, support mermaid and add TOC to each blog single page

exampleSite/config/_default/module.toml

@@ -94,3 +94,6 @@ path = "github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager"
 
 # [[imports]]
 # path = "github.com/gethugothemes/hugo-modules/seo-tools/counter-analytics"
+
+[[imports]]
+path = "github.com/hugomods/mermaid"

exampleSite/config/_default/params.toml

@@ -85,6 +85,10 @@ expire_days = 60
 content = "This site uses cookies. By continuing to use this website, you agree to their use."
 button = "I Accept"
 
+# diagrams
+[mermaid]
+js_url = 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'
+
 ######################## sidebar widgets #########################
 [widgets]
 sidebar = ["categories", "tags"]

exampleSite/content/english/pages/elements.md

@@ -192,6 +192,15 @@ s = "Python syntax highlighting"
 print s
 ```
 
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -- Yes --> C[OK]
+    C --> D[Rethink]
+    D --> B
+    B -- No ----> E[End]
+```
+
 <hr>
 
 ### Blockquote

exampleSite/go.mod

@@ -26,5 +26,6 @@ require (
 	github.com/gethugothemes/hugo-modules/tab v0.0.0-20240504032439-79fc09d96848 // indirect
 	github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20240504032439-79fc09d96848 // indirect
 	github.com/gethugothemes/hugo-modules/videos v0.0.0-20240504032439-79fc09d96848 // indirect
+  github.com/hugomods/mermaid v0.1.1 // indirect
 	github.com/zeon-studio/hugoplate v0.0.0-20240513062835-d4274ad7e3df // indirect
 )

layouts/about/list.html

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="row justify-center">
         <div class="md:col-10 lg:col-7 text-center">
-          {{ partial "image" (dict "Src" .Params.image "Alt" .Title "Class" "mx-auto mb-6" "Size" "200x200") }}
+          {{ partial "image" (dict "Src" .Params.image "Context" .Page "Alt" .Title "Class" "mx-auto mb-6" "Size" "200x200") }}
           <h2 class="h3 mb-6">{{ .Title }}</h2>
           <div class="content">{{ .Content }}</div>
         </div>

layouts/authors/single.html

@@ -6,7 +6,7 @@
         <div class="lg:col-4 text-center">
           {{ $image:= .Params.image }}
           {{ if $image }}
-            {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mx-auto" "Size" "200x200") }}
+            {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mx-auto" "Size" "200x200") }}
           {{ else if .Params.Email }}
             <img
               class="mx-auto"

layouts/blog/single.html

@@ -6,7 +6,7 @@
           {{ $image:= .Params.image }}
           {{ if $image }}
             <div class="mb-10">
-              {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
+              {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full rounded") }}
             </div>
           {{ end }}
           <h1 class="h2 mb-4">
@@ -41,6 +41,7 @@
             </li>
           </ul>
           <div class="content mb-10">
+            {{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }}
             {{ .Content }}
           </div>
           <div class="row items-start justify-between">

layouts/partials/components/author-card.html

@@ -2,7 +2,7 @@
   class="bg-theme-light dark:bg-darkmode-theme-light rounded p-8 text-center">
   {{ $image:= .Params.image }}
   {{ if $image }}
-    {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mx-auto mb-6 rounded" "size" "120x120") }}
+    {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mx-auto mb-6 rounded" "size" "120x120") }}
   {{ else if .Params.Email }}
     <img
       class="mx-auto mb-6 rounded"

layouts/partials/components/blog-card.html

@@ -1,7 +1,7 @@
 <div class="bg-body dark:bg-darkmode-body">
   {{ $image:= .Params.image }}
   {{ if $image }}
-    {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mb-6 w-full rounded") }}
+    {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mb-6 w-full rounded") }}
   {{ end }}
   <h4 class="mb-3">
     <a href="{{ .RelPermalink }}">

layouts/partials/essentials/head.html

@@ -56,3 +56,6 @@
 
 <!-- Crisp Chat -->
 {{/* {{ partialCached "crisp-chat.html" . }} */}}
+
+<!-- Mermaid -->
+{{ partial "mermaid/assets/js" . }}