✨ Feat: add collection navigation support at the end of the article

assets/css/_core/_layout.scss

@@ -11,18 +11,15 @@
     aside {
       flex: 1;
       padding-inline: 0.5rem;
-
-      &:first-child {
-        order: 2;
-      }
     }
-    
 
     &.container {
       display: flex;
       align-items: flex-start;
       justify-content: center;
-      padding: 0 1rem;
+      padding-inline: 1rem;
+      // TODO remove watermark from container
+      // gap: 0.5rem;
 
       &.container-reverse {
         flex-direction: row-reverse;
@@ -35,7 +32,7 @@
   }
 }
 
-@import "_core/header";
-@import "_core/breadcrumb";
-@import "_core/footer";
-@import "_core/pagination";
+@import "_header";
+@import "_breadcrumb";
+@import "_footer";
+@import "_pagination";

assets/css/_page/_single.scss

@@ -441,6 +441,7 @@
   }
 
   @import '../_partials/_single/reward';
+  @import '../_partials/_single/collection-card';
   @import '../_partials/_single/footer';
   @import '../_partials/_single/comment';
 }

assets/css/_partials/_single/_collection-card.scss

@@ -0,0 +1,87 @@
+.collection-card {
+  font-size: 0.875rem;
+  background-color: darken($global-background-color, 3%);
+  margin-top: 0.5rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+  @include border-radius($global-border-radius * 1.5);
+  @include user-select(none);
+
+  [data-theme='dark'] & {
+    background-color: lighten($global-background-color-dark, 3%);
+  }
+
+  &:has(.collection-nav-item:nth-child(2))::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0.75rem;
+    width: 1px;
+    height: 2rem;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.03),
+      rgba(0, 0, 0, 0.05) 50%,
+      rgba(0, 0, 0, 0.03) 100%
+    );
+
+    [data-theme='dark'] & {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.03),
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0.03) 100%
+      );
+    }
+  }
+
+  .collection-title {
+    @include link(false, false);
+  }
+
+  .collection-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &:not(:empty) {
+      margin-top: 0.5rem;
+    }
+
+    .collection-nav-item {
+      flex-grow: 1;
+      max-width: 50%;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      @include transition(all 0.3s ease-out);
+
+      &:only-child {
+        max-width: 100%;
+      }
+
+      i {
+        flex-shrink: 0;
+      }
+
+      span {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &[rel='next'] {
+        text-align: right;
+      }
+
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
+
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
+    }
+  }
+}

layouts/partials/single/collection-nav.html

@@ -0,0 +1,33 @@
+{{- /* Collection Navigation */ -}}
+{{- $params := .Scratch.Get "params" -}}
+
+{{- if .Params.collections | and $params.collectionNavigation -}}
+  {{- range .Params.collections -}}
+    {{- $term := $.Site.GetPage "/collections" . -}}
+    {{- $termLink := printf `<a href="%v">%v <span>%v・%v</span></span></a>`
+      $term.RelPermalink
+      (dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html")
+      (T "collection")
+      $term.Title
+    -}}
+    <div class="collection-card">
+      <div class="collection-title text-secondary">
+        {{ dict "Collections" $termLink | T "single.includedIn.collections" | safeHTML }} {{ len $term.Pages }}
+      </div>
+      <div class="collection-nav">
+        {{- with $term.Pages.Prev $ -}}
+          <a href="{{ .RelPermalink }}" class="collection-nav-item" rel="prev" title="{{ .Title }}">
+            {{- dict "Class" "fa-solid fa-angle-left fa-fw" | partial "plugin/icon.html" -}}
+            <span>{{- .LinkTitle -}}</span>
+          </a>
+        {{- end -}}
+        {{- with $term.Pages.Next $ -}}
+          <a href="{{ .RelPermalink }}" class="collection-nav-item" rel="next" title="{{ .Title }}">
+            <span>{{- .LinkTitle -}}</span>
+            {{- dict "Class" "fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+          </a>
+        {{- end -}}
+      </div>
+    </div>
+  {{- end -}}
+{{- end -}}

layouts/posts/single.html

@@ -3,21 +3,12 @@
 {{- define "content" -}}
   {{- $params := .Scratch.Get "params" -}}
   {{- $toc := .Scratch.Get "toc" -}}
+  {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
 
-  <aside class="toc" id="toc-auto" aria-label="{{ T "single.contents" }}">
-    {{- /* Auto TOC */ -}}
-    {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
-    {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
-      <h2 class="toc-title{{ with $params.password }} d-none{{ end }}">
-        {{- T "single.contents" -}}&nbsp;
-        {{- dict "Class" "toc-icon fa-solid fa-angle-down fa-fw" | partial "plugin/icon.html" -}}
-      </h2>
-      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}{{ with $params.password }} d-none{{ end }}" id="toc-content-auto"></div>
-    {{- end -}}
-  </aside>
-
-  <aside class="aside-custom" aria-label="Custom Aside">
-    <!-- put aside for later use -->
+  <aside class="aside-collection" aria-label="{{ T "collections" }}">
+    {{- /* Collection List */ -}}
+    {{/*  {{- partial "single/collection-list.html" . -}}  */}}
+     {{- /* Custom part for aside */ -}}
     {{- partial (.Scratch.Get "customFilePath").aside . -}}
   </aside>
 
@@ -188,17 +179,35 @@
       {{- end -}}
     </div>
 
-    {{- /* Footer and Reward */ -}}
+    {{- /* Reward before Footer */ -}}
     {{- $reward := .Scratch.Get "reward" -}}
     {{- if eq $reward.position "before" -}}
       {{- partial "single/reward.html" . -}}
-      {{- partial "single/footer.html" . -}}
-    {{- else -}}
-      {{- partial "single/footer.html" . -}}
+    {{- end -}}
+
+    {{- /* Collection Navigation */ -}}
+    {{- partial "single/collection-nav.html" . -}}
+
+    {{- /* Footer */ -}}
+    {{- partial "single/footer.html" . -}}
+
+    {{- /* Reward after Footer */ -}}
+    {{- if eq $reward.position "after" -}}
       {{- partial "single/reward.html" . -}}
     {{- end -}}
 
     {{- /* Comment */ -}}
     {{- partial "single/comment.html" . -}}
   </article>
+
+  <aside class="toc" id="toc-auto" aria-label="{{ T "single.contents" }}">
+    {{- /* Auto TOC */ -}}
+    {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
+      <h2 class="toc-title{{ with $params.password }} d-none{{ end }}">
+        {{- T "single.contents" -}}&nbsp;
+        {{- dict "Class" "toc-icon fa-solid fa-angle-down fa-fw" | partial "plugin/icon.html" -}}
+      </h2>
+      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}{{ with $params.password }} d-none{{ end }}" id="toc-content-auto"></div>
+    {{- end -}}
+  </aside>
 {{- end -}}