✨ Feat: add related content list in aside (#591)

assets/css/_core/_root.scss

@@ -16,9 +16,10 @@
   // Set breadcrumb height to 0px if breadcrumb is disabled
   --#{$prefix}breadcrumb-height: 0px;
 
-  // hr style
+  // hr / divider style
   --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
   --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+  --#{$prefix}divider-edge-weak: linear-gradient(to right, transparent, var(--#{$prefix}divider-bg, #d0d0d5), transparent);
 
   // Scrollbar related variables
   --#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};

assets/css/_page/_single.scss

@@ -1,6 +1,7 @@
 @import '../_partials/_single/toc';
 @import '../_partials/_single/fixit-decryptor';
 @import '../_partials/_single/collections';
+@import '../_partials/_single/related';
 
 .single {
   .single-title {

assets/css/_partials/_single/_related.scss

@@ -0,0 +1,73 @@
+// Related Content List (aside)
+.related-details {
+  &:not(:first-of-type)::before {
+    content: '';
+    display: block;
+    border: 0;
+    padding-top: 1px;
+    background: var(--#{$prefix}divider-edge-weak);
+    margin-block: 1rem 0.5rem;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  .related-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+    padding: 0.2em 0.5em;
+    
+    > i.fa-layer-group {
+      flex-shrink: 0;
+    }
+
+    .related-title {
+      font-weight: bold;
+      font-size: $related-title-font-size;
+    }
+
+    .related-count {
+      flex-shrink: 0;
+      color: var(--#{$prefix}secondary);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    @include user-select(none);
+  }
+
+  .related-content {
+    font-size: $related-list-font-size;
+
+    .related-list {
+      margin: 0;
+      padding-inline: 1.6em 0.8em;
+      padding-block: 0.4em;
+      text-indent: -0.8em;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+      @include scrollbar-width(none, 0);
+
+      .related-item > a::before,
+      .related-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+  }
+}
+
+

assets/css/_variables.scss

@@ -103,6 +103,10 @@ $toc-content-font-size: 0.875rem !default;
 $collection-title-font-size: 1rem !default;
 $collection-list-font-size: 0.875rem !default;
 
+// Font size of the Related Content List
+$related-title-font-size: 1rem !default;
+$related-list-font-size: 0.875rem !default;
+
 // Color of the single link
 $single-link-color: #2376b7 !default; // 花青
 $single-link-color-dark: #1781b5 !default; // 釉蓝

hugo.toml

@@ -1122,6 +1122,8 @@ mainSections = []
     [params.page.related]
       enable = false
       count = 5
+      # FixIt 0.3.20 | NEW position of related content, optional values: ["aside", "footer"]
+      position = ["aside", "footer"]
     # FixIt 0.2.17 | NEW Donate (Sponsor) settings
     [params.page.reward]
       enable = false

layouts/partials/init/index.html

@@ -1,4 +1,4 @@
-{{- .Scratch.Set "version" "v0.3.20-b45ab833" -}}
+{{- .Scratch.Set "version" "v0.3.20-662a7d57" -}}
 {{- .Scratch.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}

layouts/partials/single/related-aside.html

@@ -0,0 +1,42 @@
+{{- /* Related Content */ -}}
+{{- /* https://gohugo.io/content-management/related/ */ -}}
+{{- $params := partial "function/params.html" -}}
+
+{{- if $params.related.enable | and ("aside" | in $params.related.position) | and (not $params.password) -}}
+  {{- $posts := .Scratch.Get "mainSectionPages" -}}
+  {{- if .Site.Params.page.hiddenFromRelated -}}
+    {{- $posts = where $posts "Params.hiddenfromrelated" false -}}
+  {{- else -}}
+    {{- $posts = where $posts "Params.hiddenfromrelated" "!=" true -}}
+  {{- end -}}
+  {{- $related := $posts.Related . | first ($params.related.count | default 5) -}}
+  {{- with $related -}}
+    <div class="details related-details open">
+      <div class="details-summary related-summary">
+        {{ dict "Class" "fa-solid fa-fire fa-fade text-danger fa-fw" | partial "plugin/icon.html" }}
+        <span class="related-title">{{ T "single.relatedContent" }}</span>
+        {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+      </div>
+      <div class="details-content related-content">
+        <ul class="related-list">
+          {{- range $i, $p := . -}}
+            {{- $title := cond (.Param "capitalizeTitles") (title .LinkTitle) .LinkTitle -}}
+            <li class="related-item">
+              <a href="{{ .RelPermalink }}" title="{{ $title }}">{{ $title }}</a>
+              {{- with .HeadingsFiltered -}}
+                <ul>
+                  {{- range . -}}
+                    {{- $link := printf "%s#%s" $p.RelPermalink .ID | safeURL -}}
+                    <li>
+                      <a href="{{ $link }}" title="{{ .Title }}">{{ .Title }}</a>
+                    </li>
+                  {{- end -}}
+                </ul>
+              {{- end -}}
+            </li>
+          {{- end -}}
+        </ul>
+      </div>
+    </div>
+  {{- end -}}
+{{- end -}}

layouts/partials/single/related.html

@@ -2,7 +2,7 @@
 {{- /* https://gohugo.io/content-management/related/ */ -}}
 {{- $params := partial "function/params.html" -}}
 
-{{- if $params.related.enable | and (not $params.password) -}}
+{{- if $params.related.enable | and ("footer" | in $params.related.position) | and (not $params.password) -}}
   {{- $posts := .Scratch.Get "mainSectionPages" -}}
   {{- if .Site.Params.page.hiddenFromRelated -}}
     {{- $posts = where $posts "Params.hiddenfromrelated" false -}}

layouts/posts/single.html

@@ -14,8 +14,8 @@
     {{- /* Collection List */ -}}
     {{- partial "single/collection-list.html" . -}}
 
-    {{- /* TODO Related Content */ -}}
-    {{/*  {{- partial "single/related.html" . -}}  */}}
+    {{- /* Related Content */ -}}
+    {{- partial "single/related-aside.html" . -}}
 
     {{- /* Custom Aside */ -}}
     {{- block "custom-aside" . }}{{ end -}}