Merge pull request #686 from nunocoracao/619-tabs-with-recent-and-featured-posts

✨ Related articles
2025-01-22 14:35:43 -06:00 · 2023-04-29 16:05:17 +01:00 · 2023-04-29 16:05:17 +01:00 · 5ba7d0d9f7
commit 5ba7d0d9f7
parent 974fbf2687 66198da716
40 changed files with 274 additions and 81 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -2874,7 +2874,6 @@ select {

 .to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
-  --tw-gradient-to-position:  ;
 }

 .bg-clip-padding {
@ -4485,7 +4484,14 @@ body:has(#menu-controller:checked) {
 }

 .thumbnail_card {
-  height: 250px;
+  height: 200px;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
+.thumbnail_card_related {
+  height: 150px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -348,7 +348,14 @@ body:has(#menu-controller:checked) {
 }

 .thumbnail_card {
-  height: 250px;
+  height: 200px;
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
+.thumbnail_card_related {
+  height: 150px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -33,3 +33,33 @@ buildFuture = false

 [outputs]
  home = ["HTML", "RSS", "JSON"]
+
+[related]
+  threshold = 0
+  toLower = false
+
+    [[related.indices]]
+        name = "tags"
+        weight = 100
+
+    [[related.indices]]
+        name = "categories"
+        weight = 100
+
+    [[related.indices]]
+        name = "series"
+        weight = 50
+
+    [[related.indices]]
+        name = "authors"
+        weight = 20
+
+    [[related.indices]]
+        name = "date"
+        weight = 10
+
+    [[related.indices]]
+      applyFilter = false
+      name = 'fragmentrefs'
+      type = 'fragments'
+      weight = 10
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -66,6 +66,8 @@ disableImageOptimization = false
  invertPagination = false
  showReadingTime = true
  showTableOfContents = false
+  # showRelatedContent = false
+  # relatedContentLimit = 3
  showTaxonomies = false
  showAuthorsBadges = false
  showWordCount = true
--- a/exampleSite/assets/js/home.js
+++ b/exampleSite/assets/js/home.js
@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });

 var list_config = [
-  "CardViewScreenWidth",
  "CardViewProse",
+  "CardViewScreenWidth",
  "NormalView"
 ]

--- a/exampleSite/config/_default/config.toml
+++ b/exampleSite/config/_default/config.toml
@ -33,3 +33,33 @@ googleAnalytics = "G-PEDMYR1V0K"

 [outputs]
  home = ["HTML", "RSS", "JSON"]
+
+[related]
+  threshold = 0
+  toLower = false
+
+    [[related.indices]]
+        name = "tags"
+        weight = 100
+
+    [[related.indices]]
+        name = "categories"
+        weight = 100
+
+    [[related.indices]]
+        name = "series"
+        weight = 50
+
+    [[related.indices]]
+        name = "authors"
+        weight = 20
+
+    [[related.indices]]
+        name = "date"
+        weight = 10
+
+    [[related.indices]]
+      applyFilter = false
+      name = 'fragmentrefs'
+      type = 'fragments'
+      weight = 10
--- a/exampleSite/config/_default/menus.en.toml
+++ b/exampleSite/config/_default/menus.en.toml
@ -15,37 +15,36 @@
  pageRef = "docs"
  weight = 10

-[[main]]
-  name = "Examples"
-  weight = 20
+#[[main]]
+#  name = "Examples"
+#  weight = 20
+

-[[main]]
-  name = "Recipes"
-  parent = "Examples"
-  pageRef = "guides"
-  weight = 10

 [[main]]
  name = "Samples"
-  parent = "Examples"
  pageRef = "samples"
  weight = 20

 [[main]]
  name = "Showcase"
-  parent = "Examples"
  pageRef = "examples"
  weight = 30

 [[main]]
-  name = "Users"
-  pageRef = "users"
+  name = "Recipes"
+  pageRef = "guides"
  weight = 40

 [[main]]
-  name = "Merch"
-  url = "http://tee.pub/lic/qwSlWVBL5zc"
-  weight = 50
+  name = "Users"
+  pageRef = "users"
+  weight = 90
+
+#[[main]]
+#  name = "Merch"
+#  url = "http://tee.pub/lic/qwSlWVBL5zc"
+#  weight = 100

 #[[main]]
 #  name = "Test"
@ -56,19 +55,19 @@
  identifier = "twitter"
  pre = "twitter"
  url = "https://twitter.com/burufugu"
-  weight = 60
+  weight = 200

 [[main]]
  identifier = "mastodon"
  pre = "mastodon"
  url = "https://masto.ai/@blowfish"
-  weight = 70
+  weight = 300

 [[main]]
  identifier = "github"
  pre = "github"
  url = "https://github.com/nunocoracao/blowfish"
-  weight = 80
+  weight = 400


 # -- Footer Menu --
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -18,7 +18,7 @@ mainSections = ["docs"]
 disableImageOptimization = false

 defaultBackgroundImage = "/img/bg.jpg"
-#defaultFeaturedImage = "/img/blowfish_logo.png"
+defaultFeaturedImage = "/img/paint.png"

 highlightCurrentMenuArea = true
 smartTOC = true
@ -38,7 +38,7 @@ smartTOCHideUnfocusedChildren = true
  layout = "custom" # valid options: page, profile, hero, card, background, custom
  # homepageImage = "/img/iceland.jpg" # used in: hero, and card
  showRecent = false
-  showRecentItems = 10
+  showRecentItems = 6
  showMoreLink = true
  showMoreLinkDest = "docs"
  cardView = false
@ -65,6 +65,8 @@ smartTOCHideUnfocusedChildren = true
  invertPagination = false
  showReadingTime = true
  showTableOfContents = true
+  showRelatedContent = true
+  relatedContentLimit = 6
  showTaxonomies = true 
  showAuthorsBadges = true 
  showWordCount = false
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@ -182,7 +182,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 ### Article

 | Name                                  | Default   | Description                                                                                                                                                                                                                                                                                                            |
-| ------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `article.showDate`                    | `true`    | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                            |
 | `article.showViews`                   | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
 | `article.showLikes`                   | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
@ -203,6 +203,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.invertPagination`            | `false`   | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                               |
 | `article.showReadingTime`             | `true`    | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                    |
 | `article.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                         |
+| `article.showRelatedContent`          | `false`   | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant *related* entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
+| `article.relatedContentLimit`         | `3`       | Limit of related articles to display if `      showRelatedContent` is turned on.                                                                                                                                                                                                                                       |
 | `article.showTaxonomies`              | `false`   | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                                   |
 | `article.showAuthorsBadges`           | `false`   | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                           |
 | `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |
--- a/exampleSite/content/docs/hosting-deployment/index.md
+++ b/exampleSite/content/docs/hosting-deployment/index.md
@ -4,7 +4,7 @@ date: 2020-08-07
 draft: false
 description: "Learn how to deploy a Blowfish site."
 slug: "hosting-deployment"
-tags: ["hosting", "deployment", "docs", "github", "netlify", "render"]
+tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
 series: ["Documentation"]
 series_order: 14
 ---
--- a/exampleSite/layouts/partials/recent-articles-demo.html
+++ b/exampleSite/layouts/partials/recent-articles-demo.html
@ -9,7 +9,7 @@
 <div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
    <span class="flex items-center justify-between grow dark:text-neutral-300">
        <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code
-                id="config">card view with full width</code></span>
+                id="config">card view</code></span>
        <button id="switch-config-button"
            class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
            Switch config &orarr;
@ -17,12 +17,12 @@
    </span>
 </div>

-<div id="CardViewScreenWidth" class="">
-    {{ partial "recent-articles/cardview-fullwidth.html" . }}
+<div id="CardViewProse" class="h-full">
+    {{ partial "recent-articles/cardview.html" . }}
 </div>

-<div id="CardViewProse" class="hidden h-full">
-    {{ partial "recent-articles/cardview.html" . }}
+<div id="CardViewScreenWidth" class="hidden h-full">
+    {{ partial "recent-articles/cardview-fullwidth.html" . }}
 </div>

 <div id="NormalView" class="hidden h-full">
--- a/exampleSite/resources/_gen/images/iceland_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/iceland_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/paint_hu507bbb0ec7aba0818718abfc95943591_1864112_600x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/paint_hu507bbb0ec7aba0818718abfc95943591_1864112_600x0_resize_box_3.png
--- a/i18n/bg.yaml
+++ b/i18n/bg.yaml
@ -24,6 +24,8 @@ article:
  part_of_series: "Тази статия е част от поредица."
  part: "Част"
  this_article: "Тази Статия"
+  related_articles: "Related"
+

 author:
  byline_title: "Автор"
--- a/i18n/bn.yaml
+++ b/i18n/bn.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "লেখক"
--- a/i18n/cs.yaml
+++ b/i18n/cs.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "Tento článek patří do série."
  part: "Část"
  this_article: "Tento článek"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "Dieser Artikel ist Teil einer Serie."
  part: "Teil"
  this_article: "Dieser Artikel"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Author"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "Este artículo es parte de una serie."
  part: "Parte"
  this_article: "Este artículo"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/fi.yaml
+++ b/i18n/fi.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Kirjoittaja"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "Cet article fait partie d'une série."
  part: "Partie"
  this_article: "Cet article"
+  related_articles: "Related"

 author:
  byline_title: "Auteur"
--- a/i18n/he.yaml
+++ b/i18n/he.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "מחבר"
--- a/i18n/hr.yaml
+++ b/i18n/hr.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/hu.yaml
+++ b/i18n/hu.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Szerző"
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Penulis"
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Autore"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "著者"
--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@ -21,6 +21,7 @@ article:
  part_of_series: "Este artigo faz parte de uma série de artigos."
  part: "Parte"
  this_article: "Esse Artigo"
+  related_articles: "Relacionados"

 author:
  byline_title: "Autor"
--- a/i18n/pt-PT.yaml
+++ b/i18n/pt-PT.yaml
@ -21,6 +21,7 @@ article:
  part_of_series: "Este artigo faz parte de uma série."
  part: "Parte"
  this_article: "Este artigo"
+  related_articles: "Relacionados"

 author:
  byline_title: "Autor"
--- a/i18n/ro.yaml
+++ b/i18n/ro.yaml
@ -18,6 +18,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Autor"
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Автор"
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@ -17,6 +17,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "Yazar"
--- a/i18n/vi.yaml
+++ b/i18n/vi.yaml
@ -24,6 +24,7 @@ article:
  part_of_series: "Bài viết này là một phần của loạt bài."
  part: "Phần"
  this_article: "Bài viết này"
+  related_articles: "Related"

 author:
  byline_title: "Tác giả"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@ -17,6 +17,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "作者"
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@ -17,6 +17,7 @@ article:
  part_of_series: "This article is part of a series."
  part: "Part"
  this_article: "This Article"
+  related_articles: "Related"

 author:
  byline_title: "作者"
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -10,6 +10,14 @@
 {{ end }}
 {{- end -}}

+ <script>
+      var oid = "views_{{ .File.Path }}"
+      var oid_likes = "likes_{{ .File.Path }}"
+    </script>
+    {{ $jsPage := resources.Get "js/page.js" }}
+    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+
 {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
 .TableOfContents "<ul") }} <header>
  {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
@ -35,13 +43,7 @@
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content | emojify }}
    </div>
-    <script>
-      var oid = "views_{{ .File.Path }}"
-      var oid_likes = "likes_{{ .File.Path }}"
-    </script>
-    {{ $jsPage := resources.Get "js/page.js" }}
-    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
-    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+   
  </section>
  {{ if gt .Pages 0 }}

--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -25,12 +25,15 @@
    </div>
  </header>
  <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
+    {{ if or (and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
+    .TableOfContents "<ul")) (.Site.Params.article.showRelatedPosts | default false) }} <div
+      class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout " fixed" }}
+        lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
+
        {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
-    .TableOfContents "<ul") }} 
-    <div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
-      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout "fixed" }} lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
-        {{ partial "toc.html" . }}
-      </div>
+        .TableOfContents "<ul") }} {{ partial "toc.html" . }} {{ end }} {{ if .Site.Params.article.showRelatedPosts |
+          default false }} sd {{ end }} </div>
      </div>
      {{ end }}
      <div class="min-w-0 min-h-0 max-w-prose">
@ -75,6 +78,9 @@
    {{ end }}

    {{ partial "sharing-links.html" . }}
+
+    {{ partial "related.html" . }}
+
    {{ partial "article-pagination.html" . }}
    {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}
    {{ if templates.Exists "partials/comments.html" }}
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@ -0,0 +1,72 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+
+      {{- with $.Params.images -}}
+      {{- range first 6 . }}
+      <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+      {{- else -}}
+      {{- $images := $.Resources.ByType "image" -}}
+      {{- $featured := $images.GetMatch "*feature*" -}}
+      {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+      {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+      {{- with $featured -}}
+      {{ if $disableImageOptimization }}
+        {{ with . }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Resize "600x" }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ end }}
+      {{- else -}}
+      {{- with $.Site.Params.images }}
+      <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+      {{- end -}}
+      {{- end -}}
+
+
+      {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <span class="absolute top-0 right-0 m-2">
+        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+      </span>
+      {{ end }}
+
+      <div class="px-6 py-4">
+
+        {{ with .Params.externalUrl }}
+        <div>
+          <div
+            class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            {{ $.Title | emojify }}
+            <span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          </div>
+        </div>
+        {{ else }}
+        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
+        {{ end }}
+
+        <div class="text-sm text-neutral-500 dark:text-neutral-400">
+          {{ partial "article-meta/basic.html" . }}
+        </div>
+
+        {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+        <div class="py-1 prose dark:prose-invert">
+          {{ .Summary | emojify }}
+        </div>
+        {{ end }}
+      </div>
+      <div class="px-6 pt-4 pb-2">
+
+      </div>
+    </div>
+  </a>
--- a/layouts/partials/related.html
+++ b/layouts/partials/related.html
@ -0,0 +1,11 @@
+{{ if .Params.showRelatedContent | default (.Site.Params.article.showRelatedContent | default false)}}
+{{ $related := .Site.RegularPages.Related . | first .Site.Params.article.relatedContentLimit }}
+{{ with $related }}
+<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "article.related_articles" | emojify }}</h2>
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+  {{ range . }}
+  {{ partial "article-link/card-related.html" . }}
+  {{ end }}
+</section>
+{{ end }}
+{{ end }}