refactor: modify file structure to improve customizability

config.toml

@@ -50,8 +50,6 @@ math = false
 mermaid = false
 # Enable comment support globally.
 comment = false
-# Disable the post navigation.
-disable_post_navigation = false
 
 [extra.style]
 # The custom background color.

content/theme-config.md

@@ -19,8 +19,6 @@ math = false
 mermaid = false
 # Enable comment support globally.
 comment = false
-# Disable the post navigation.
-disable_post_navigation = false
 
 [extra.style]
 # The custom background color.

templates/archive.html

@@ -22,5 +22,4 @@
 </div>
 
 {% endfor %}<!---->
-
 {% endblock main %}

templates/index.html

@@ -9,48 +9,9 @@
     >
       {% block main %}
 
-      <!-- avatar -->
+      <!-- Profile -->
       {% if paginator is undefined or paginator.current_index == 1 %}<!---->
-      {% if config.extra.profile.avatar_url or config.extra.profile.name %}
+      {% include "partials/profile.html" %}<!---->
-      <div class="mb-16 flex items-start">
-        {% if config.extra.profile.avatar_url %}
-        <div
-          class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
-        >
-          <img
-            class="{% if config.extra.profile.avatar_invert %}dark:invert{% endif %} my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin"
-            src="{{ get_url(path=config.extra.profile.avatar_url) }}"
-            alt="{{ config.extra.profile.name | default(value=config.title) }}"
-          />
-        </div>
-        {% endif %}<!---->
-
-        {% if config.extra.profile.name %}
-        <div>
-          <h1 class="mb-2 text-3xl font-bold">{{ config.extra.profile.name }}</h1>
-          <div class="mb-2 break-words">
-            {{ config.extra.profile.bio | default(value=`A blog by ` ~ config.extra.profile.name) }}
-          </div>
-
-          {% if config.extra.profile.social %}
-          <nav class="flex justify-start space-x-3 dark:invert">
-            {% for social in config.extra.profile.social %}
-            <a
-              class="primary-link h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
-              style="--url: url(./icons/{{ social.name }}.svg)"
-              href="{{ social.url | replace(from=`$BASE_URL`, to=config.base_url) | safe  }}"
-              target="_blank"
-              rel="{% if social.name == `rss` %}alternate{% else %}me{% endif %}"
-            >
-              {{ social.name }}
-            </a>
-            {% endfor %}
-          </nav>
-          {% endif %}
-        </div>
-        {% endif %}<!---->
-      </div>
-      {% endif %}<!---->
       {% endif %}<!---->
 
       {% include "partials/page_list.html" %}<!---->

templates/page.html

@@ -15,110 +15,24 @@
     />
   </figure>
   {% endif %}
-  <!---->
 
-  {% if page.toc %}
+  <!-- TOC -->
-  <div class="block-bg mb-12 flex rounded-lg p-2 text-lg">
+  {% include "partials/toc.html" %}<!---->
-    <details>
-      <summary class="cursor-pointer py-1 pl-4">
-        <span>Table of Contents</span>
-      </summary>
-      <div class="px-2">
-        <ul>
-          {% for h1 in page.toc %}
-          <li>
-            <a class="no-underline hover:underline" href="{{ h1.permalink | safe }}"
-              >{{ h1.title }}</a
-            >
-            {% if h1.children %}
-            <ul>
-              {% for h2 in h1.children %}
-              <li>
-                <a class="no-underline hover:underline" href="{{ h2.permalink | safe }}"
-                  >{{ h2.title }}</a
-                >
-              </li>
-              {% endfor %}
-            </ul>
-            {% endif %}
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
-    </details>
-  </div>
-  {% endif %}
 
+  <!-- Content -->
   <section>{{ page.content | safe }}</section>
 
   <hr />
 
   <!-- Post Taxonomies -->
-  {% if page.taxonomies %}
+  {% include "partials/post_taxonomies.html" %}<!---->
-  <footer class="mt-12 flex flex-col">
-    {% set_global term_names = [] %}<!---->
-    {% for term_name, terms in page.taxonomies %}<!---->
-    {% set_global term_names = term_names | concat(with=term_name) %}<!---->
-    {% endfor %}<!---->
-    {% for term_name in term_names | sort %}<!---->
-    <div class="mb-2 flex flex-wrap">
-      <span class="block-bg mb-1.5 mr-1.5 rounded-lg px-5 py-1.5">{{ term_name | title }} </span>
-      {% for term in page.taxonomies[term_name] %}<!---->
-      <a
-        class="block-bg block-hover mb-1.5 mr-1.5 rounded-lg px-5 py-1.5 no-underline"
-        href="{{ get_taxonomy_url(kind=term_name, name=term) | safe }}"
-        >{{ term }}</a
-      >
-      {% endfor %}
-    </div>
-    {% endfor %}
-  </footer>
-  {% endif %}
 
   <!-- Post Nav -->
-  {% if not config.extra.disable_post_navigation %}<!---->
+  {% include "partials/post_navigation.html" %}<!---->
-  {% if page.lower or page.higher %}
-  <nav class="block-bg mt-12 flex rounded-lg text-lg">
-    {% if page.higher %}
-    <a
-      class="block-hover-mask flex w-1/2 items-center rounded-l-md p-6 pr-3 font-semibold no-underline"
-      href="{{ page.higher.permalink }}"
-      ><span class="mr-1.5">←</span><span>{{ page.higher.title }}</span></a
-    >
-    {% endif %}<!---->
-    {% if page.lower %}
-    <a
-      class="block-hover-mask ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 font-semibold no-underline"
-      href="{{ page.lower.permalink }}"
-      ><span>{{ page.lower.title }}</span><span class="ml-1.5">→</span></a
-    >
-    {% endif %}
-  </nav>
-  {% endif %}<!---->
-  {% endif %}
 
-  <!-- giscus comment -->
+  <!-- Comment -->
   {% if page.extra.comment | default(value=config.extra.comment) %}<!---->
-  {% if config.extra.giscus.repo %}
+  {% include "partials/comment.html" %}<!---->
-  <div class="giscus mt-12"></div>
-  <script
-    src="https://giscus.app/client.js"
-    data-repo="{{ config.extra.giscus.repo }}"
-    data-repo-id="{{ config.extra.giscus.repo_id }}"
-    data-category="{{ config.extra.giscus.category }}"
-    data-category-id="{{ config.extra.giscus.category_id }}"
-    data-mapping="{{ config.extra.giscus.mapping | default(value=`pathname`) }}"
-    data-strict="{{ config.extra.giscus.strict | default(value=`1`) }}"
-    data-reactions-enabled="{{ config.extra.giscus.reactions_enabled | default(value=`0`) }}"
-    data-emit-metadata="{{ config.extra.giscus.emit_metadata | default(value=`0`) }}"
-    data-input-position="{{ config.extra.giscus.input_position | default(value=`top`) }}"
-    data-theme="{{ config.extra.giscus.theme | default(value=`light`) }}"
-    data-lang="{{ config.extra.giscus.lang | default(value=`en`) }}"
-    data-loading="{{ config.extra.giscus.loading | default(value=`lazy`) }}"
-    crossorigin="anonymous"
-    async
-  ></script>
-  {% endif %}<!---->
   {% endif %}
 </article>
 {% endblock main %}

templates/partials/comment.html

@@ -0,0 +1,20 @@
+{% if config.extra.giscus.repo %}
+<div class="giscus mt-12"></div>
+<script
+  src="https://giscus.app/client.js"
+  data-repo="{{ config.extra.giscus.repo }}"
+  data-repo-id="{{ config.extra.giscus.repo_id }}"
+  data-category="{{ config.extra.giscus.category }}"
+  data-category-id="{{ config.extra.giscus.category_id }}"
+  data-mapping="{{ config.extra.giscus.mapping | default(value=`pathname`) }}"
+  data-strict="{{ config.extra.giscus.strict | default(value=`1`) }}"
+  data-reactions-enabled="{{ config.extra.giscus.reactions_enabled | default(value=`0`) }}"
+  data-emit-metadata="{{ config.extra.giscus.emit_metadata | default(value=`0`) }}"
+  data-input-position="{{ config.extra.giscus.input_position | default(value=`top`) }}"
+  data-theme="{{ config.extra.giscus.theme | default(value=`light`) }}"
+  data-lang="{{ config.extra.giscus.lang | default(value=`en`) }}"
+  data-loading="{{ config.extra.giscus.loading | default(value=`lazy`) }}"
+  crossorigin="anonymous"
+  async
+></script>
+{% endif %}<!---->

templates/partials/head.html

@@ -61,18 +61,20 @@
 
   <!-- Mermaid -->
   {% if page.extra.mermaid | default(value=config.extra.mermaid) %}
-  <script type="module">
+  <!---->
-    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+  {% include "partials/mermaid.html" %}
-    mermaid.initialize({ startOnLoad: true });
+  <!---->
-  </script>
   {% endif %}
+  <!---->
 
   <!-- Favicon -->
   <link rel="icon" href="{{ get_url(path=`favicon.ico`) }}" />
   <link rel="apple-touch-icon" href="{{ get_url(path=`apple-touch-icon.png`) }}" />
 
   <!-- Feeds -->
-  {% if config.generate_feed %} {% if config.feed_filename == "atom.xml" %}
+  {% if config.generate_feed %}
+  <!---->
+  {% if config.feed_filename == "atom.xml" %}
   <link
     rel="alternate"
     type="application/atom+xml"

templates/partials/mermaid.html

@@ -0,0 +1,4 @@
+<script type="module">
+  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+  mermaid.initialize({ startOnLoad: true });
+</script>

templates/partials/post_navigation.html

@@ -0,0 +1,18 @@
+{% if page.lower or page.higher %}
+<nav class="block-bg mt-12 flex rounded-lg text-lg">
+  {% if page.higher %}
+  <a
+    class="block-hover-mask flex w-1/2 items-center rounded-l-md p-6 pr-3 font-semibold no-underline"
+    href="{{ page.higher.permalink }}"
+    ><span class="mr-1.5">←</span><span>{{ page.higher.title }}</span></a
+  >
+  {% endif %}<!---->
+  {% if page.lower %}
+  <a
+    class="block-hover-mask ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 font-semibold no-underline"
+    href="{{ page.lower.permalink }}"
+    ><span>{{ page.lower.title }}</span><span class="ml-1.5">→</span></a
+  >
+  {% endif %}
+</nav>
+{% endif %}

templates/partials/post_taxonomies.html

@@ -0,0 +1,20 @@
+{% if page.taxonomies %}
+<footer class="mt-12 flex flex-col">
+  {% set_global term_names = [] %}<!---->
+  {% for term_name, terms in page.taxonomies %}<!---->
+  {% set_global term_names = term_names | concat(with=term_name) %}<!---->
+  {% endfor %}<!---->
+  {% for term_name in term_names | sort %}
+  <div class="mb-2 flex flex-wrap">
+    <span class="block-bg mb-1.5 mr-1.5 rounded-lg px-5 py-1.5">{{ term_name | title }} </span>
+    {% for term in page.taxonomies[term_name] %}
+    <a
+      class="block-bg block-hover mb-1.5 mr-1.5 rounded-lg px-5 py-1.5 no-underline"
+      href="{{ get_taxonomy_url(kind=term_name, name=term) | safe }}"
+      >{{ term }}</a
+    >
+    {% endfor %}
+  </div>
+  {% endfor %}
+</footer>
+{% endif %}

templates/partials/profile.html

@@ -0,0 +1,40 @@
+{% if config.extra.profile.avatar_url or config.extra.profile.name %}
+<div class="mb-16 flex items-start">
+  {% if config.extra.profile.avatar_url %}
+  <div
+    class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
+  >
+    <img
+      class="{% if config.extra.profile.avatar_invert %}dark:invert{% endif %} my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin"
+      src="{{ get_url(path=config.extra.profile.avatar_url) }}"
+      alt="{{ config.extra.profile.name | default(value=config.title) }}"
+    />
+  </div>
+  {% endif %}<!---->
+
+  {% if config.extra.profile.name %}
+  <div>
+    <h1 class="mb-2 text-3xl font-bold">{{ config.extra.profile.name }}</h1>
+    <div class="mb-2 break-words">
+      {{ config.extra.profile.bio | default(value=`A blog by ` ~ config.extra.profile.name) }}
+    </div>
+
+    {% if config.extra.profile.social %}
+    <nav class="flex justify-start space-x-3 dark:invert">
+      {% for social in config.extra.profile.social %}
+      <a
+        class="primary-link h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
+        style="--url: url(./icons/{{ social.name }}.svg)"
+        href="{{ social.url | replace(from=`$BASE_URL`, to=config.base_url) | safe  }}"
+        target="_blank"
+        rel="{% if social.name == `rss` %}alternate{% else %}me{% endif %}"
+      >
+        {{ social.name }}
+      </a>
+      {% endfor %}
+    </nav>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% endif %}

templates/partials/toc.html

@@ -0,0 +1,31 @@
+{% if page.toc %}<!---->
+<div class="block-bg mb-12 flex rounded-lg p-2 text-lg">
+  <details>
+    <summary class="cursor-pointer py-1 pl-4">
+      <span>Table of Contents</span>
+    </summary>
+    <div class="px-2">
+      <ul>
+        {% for h1 in page.toc %}
+        <li>
+          <a class="no-underline hover:underline" href="{{ h1.permalink | safe }}"
+            >{{ h1.title }}</a
+          >
+          {% if h1.children %}
+          <ul>
+            {% for h2 in h1.children %}
+            <li>
+              <a class="no-underline hover:underline" href="{{ h2.permalink | safe }}"
+                >{{ h2.title }}</a
+              >
+            </li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </details>
+</div>
+{% endif %}

templates/projects.html

@@ -1,10 +1,13 @@
 {% extends "index.html" %}<!---->
 {% block main %}<!---->
+
 {% for asset in page.assets %}<!---->
 {% if asset is ending_with("data.toml") %}<!---->
-{% set data = load_data(path=asset, format="toml") %}<!---->
+{% set_global data = load_data(path=asset, format="toml") %}<!---->
-<h1 class="mb-16">{{ page.title }}</h1>
+{% endif %}<!---->
+{% endfor %}<!---->
 
+<h1 class="mb-16">{{ page.title }}</h1>
 {% for project in data.project %}
 <div class="not-prose block-bg my-4 flex w-full flex-col rounded-lg px-5 py-1.5">
   <h3 class="my-2 text-xl font-bold text-black dark:text-white">{{ project.name }}</h3>
@@ -29,8 +32,4 @@
   </div>
 </div>
 {% endfor %}<!---->
-
-{% break %}<!---->
-{% endif %}<!---->
-{% endfor %}<!---->
 {% endblock main %}

templates/section.html

@@ -1,9 +1,7 @@
 {% extends "index.html" %}<!---->
-{% block main %}<!---->
+{% block main %}
 <!-- Section Title -->
 <h1 class="mb-16">{{ section.title }}</h1>
-
 <!-- Pages -->
 {% include "partials/page_list.html" %}<!---->
-
 {% endblock main %}

templates/taxonomy_list.html

@@ -2,7 +2,7 @@
 {% block main %}
 <!-- Taxonomy Title -->
 <h1 class="mb-16">{{ taxonomy.name | title }}</h1>
-
+<!-- Taxonomies -->
 <div class="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
   {% for term in terms %}
   <div class="block-bg flex h-full flex-col rounded-lg px-5 pb-2 md:min-h-[18rem]">
@@ -23,5 +23,4 @@
   </div>
   {% endfor %}<!---->
 </div>
-
 {% endblock main %}

templates/taxonomy_single.html

@@ -2,8 +2,6 @@
 {% block main %}
 <!-- Term Title -->
 <h1 class="mb-16">#{{ term.name }}</h1>
-
 <!-- Pages -->
 {% include "partials/page_list.html" %}<!---->
-
 {% endblock main %}