Table of contents

1.新建页面

首先在 layouts/partials 目录下新建一个 related.html，专门用于生成相关文章列表

该模板会：

• 找到与当前文章 标签相同 的其他文章
• 排除当前文章自身
• 最多取前 5 篇作为相关文章展示

<!-- 找到当前文章所有标签相同的其他文章，但不包括当前文章自身，然后取前 5 篇这样的相关文章，赋值给变量 $related -->
{{ $related := first 5 (where (where .Site.Pages ".Params.tags" "intersect"
.Params.tags) "Permalink" "!=" .Permalink)}}
<!-- 检查是否有相关文章存在。如果有，再执行下面的代码 -->
{{ with $related }}
<h3 class="see-also">{{- i18n "related" -}}</h3>
<div class="related">
  <ul>
    {{ range . }}
    <li>
      <a href="{{ .RelPermalink }}" target="_blank">{{ .Title }}</a>
      <span class="related-date"
        >（{{ .Date | time.Format "2006-01-02" }}）</span
      >
    </li>
    {{ end }}
  </ul>
</div>
{{ end }}related.html

2.添加样式

接下来为相关文章区域补充样式

在 assets/css/extended/ 目录下新增 related.css

.post-footer h3 {
  margin: 1.2em 0 1.2em;
}

.post-footer .related {
  padding-bottom: 1.5rem;
}

.post-footer .related ul {
  padding-inline-start: 20px;
}

.post-footer .related ul li {
  list-style-type: square;
  margin-bottom: 0.5rem;
}

.post-footer .related ul li a {
  text-decoration: underline;
  transition:
    color 0.3s ease-in-out,
    text-decoration-color 0.3s ease-in-out;
  text-decoration-thickness: 1px;
}

.post-footer .related-date {
  font-size: 0.8em;
  font-style: italic;
}

.post-footer .related a:hover {
  box-shadow: 0 1px;
  text-decoration: none;
  color: #ff5722;
  text-decoration-color: #ff5722;
  text-decoration-thickness: 2px;
}assets/css/extended/related.css

3.调整 single.html

最后在文章页模板中引入该 partial

修改文件：layouts/_default/single.html，在 <footer class="post-footer"> 内插入相关文章模块：

<footer class="post-footer">
  {{- if (.Param "ShowRelatedContent") }}
  {{- partial "related.html" . }}
  {{- end }}
  <!-- ... -->
</footer>layouts/_default/single.html

通过 ShowRelatedContent 参数进行控制，可以按文章粒度决定是否展示相关文章

至此，文章底部的相关文章模块就完成了

（完）

如果这篇文章刚好帮到了你，欢迎请我喝杯咖啡！