feat: add inject support

Co-authored-by: st1020 <[email protected]>
st1020 · Oct 5, 2024 · a6cf030 · a6cf030
1 parent fe3b3a6
commit a6cf030
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ This theme is based on Hugo theme [hugo-paper](https://github.com/nanxiaobei/hug
 
 - Easy to use and modify
 - No preset limits (This theme does not limit your content directory structure, taxonomy names, etc. It's applicable to all zola sites.)
+- Inject support
 - Dark mode
 - Responsive design
 - Social icons
@@ -49,6 +50,20 @@ theme = "kita"
 
 See the `extra` section in [config.toml](https://github.com/st1020/kita/blob/main/config.toml) as a example.
 
+## Inject support
+
+You can easily use inject to add new features to your side without modifying the theme itself.
+
+To use inject, you need to add some HTML files to the `templates/injects` directory.
+
+The available inject points are: `head`, `header_nav`, `body_start`, `body_end`, `page_start`, `page_end`, `footer`, `page_info`.
+
+For example, to load a custom script, you can add a `templates/injects/head.html` file:
+
+```html
+<script src="js-file-path-or-cdn-url.js"></script>
+```
+
 ## License
 
 [MIT License](https://github.com/st1020/kita/blob/main/LICENSE)

diff --git a/templates/index.html b/templates/index.html
@@ -5,6 +5,9 @@
   <body class="text-black duration-200 ease-out dark:text-white">
     {% include "partials/header.html" %}
 
+    <!-- Body Start inject -->
+    {% include "injects/body_start.html" ignore missing %}
+
     <main
       class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl break-words px-4 pb-16 pt-32 dark:prose-invert prose-pre:rounded-lg prose-img:rounded-lg"
     >
@@ -20,5 +23,8 @@
     </main>
 
     {% include "partials/footer.html" %}
+
+    <!-- Body End inject -->
+    {% include "injects/body_end.html" ignore missing %}
   </body>
 </html>
diff --git a/templates/page.html b/templates/page.html
@@ -1,6 +1,9 @@
 {% extends "index.html" %}<!---->
 {% block main %}
 <article>
+  <!-- Page Start inject -->
+  {% include "injects/page_start.html" ignore missing %}
+
   <header class="mb-16">
     <h1 class="!my-0 pb-2.5">{{ page.title }}</h1>
     {% include "partials/page_info.html" %}
@@ -34,5 +37,8 @@ <h1 class="!my-0 pb-2.5">{{ page.title }}</h1>
   {% if page.extra.comment | default(value=config.extra.comment) %}<!---->
   {% include "partials/comment.html" %}<!---->
   {% endif %}
+
+  <!-- Page End inject -->
+  {% include "injects/page_end.html" ignore missing %}
 </article>
 {% endblock main %}
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
@@ -1,12 +1,14 @@
 <footer class="mx-auto flex max-w-3xl flex-wrap items-center px-8 py-4 text-sm opacity-60">
   <div class="mr-auto basis-full lg:basis-1/2">
-    {% set current_year = now() | date(format="%Y") | int %}
-    &copy; {% if config.extra.footer.since and config.extra.footer.since != current_year %}
-    {{ config.extra.footer.since }} - {{ current_year }}
-    {% else %}{{ current_year }}{% endif %}
-    <a class="link" href="{{ get_url(path=``) }}"
-      >{{ config.author | default(value=config.title) }}</a
-    >
+    {% set current_year = now() | date(format="%Y") | int %}<!---->
+    {% if config.extra.footer.since and config.extra.footer.since != current_year %}<!---->
+    &copy; {{ config.extra.footer.since }} - {{ current_year }}<!---->
+    {% else %}<!---->
+    &copy; {{ current_year }}<!---->
+    {% endif %}
+    <a class="link" href="{{ get_url(path=``) }}">
+      {{ config.author | default(value=config.title) }}
+    </a>
     {% if config.extra.footer.license %} |<!---->
     {% if config.extra.footer.license_url %}<!---->
     <a class="link" href="{{ config.extra.footer.license_url }}" rel="noopener" target="_blank">
@@ -18,9 +20,11 @@
     {% endif %}
   </div>
   <div class="flex basis-full lg:basis-1/2 lg:justify-end">
-    <a class="link mr-6 lg:ml-6" href="https://www.getzola.org/" rel="noopener" target="_blank"
-      >Powered by Zola</a
-    >
+    <a class="link mr-6 lg:ml-6" href="https://www.getzola.org/" rel="noopener" target="_blank">
+      Powered by Zola
+    </a>
     <a class="link" href="https://github.com/st1020/kita" rel="noopener" target="_blank">✎ Kita</a>
   </div>
+  <!-- Footer inject -->
+  {% include "injects/footer.html" ignore missing %}
 </footer>
diff --git a/templates/partials/head.html b/templates/partials/head.html
@@ -141,4 +141,7 @@
 
   <!-- Canonical -->
   <link rel="canonical" href="{{ page.permalink | default(value=get_url(path=``)) }}" />
+
+  <!-- Head inject -->
+  {% include "injects/head.html" ignore missing %}
 </head>
diff --git a/templates/partials/header.html b/templates/partials/header.html
@@ -79,6 +79,8 @@
         </li>
         {% endfor %}
       </ul>
+      <!-- Header Nav inject -->
+      {% include "injects/header_nav.html" ignore missing %}
     </nav>
     {% endif %}
   </div>

diff --git a/templates/partials/page_info.html b/templates/partials/page_info.html
@@ -13,4 +13,6 @@
   <span class="mx-1">&middot;</span>
   <span>{{ author }}</span>
   {% endif %}
+  <!-- Page Info inject -->
+  {% include "injects/page_info.html" ignore missing %}
 </div>