Featured image of post 更深入的配置 Stack主题 (持续更新)

更深入的配置 Stack主题 (持续更新)

探索 Stack 主题的高级配置技巧,以及所有踩过的坑

前言

继第一篇文章的搭建过程,本文介绍关于本站在使用Stack博客过程中一些配置和遇到的坑

完整的主题配置说明请详见 Stack | Card-style Hugo theme designed for bloggers

前排提醒:截至发文,本站使用原版Stack v3.30.0主题,所有配置项仅针对该主题有效,其他版本请注意适当修改

优化相关文章推荐队列

配置文件位置在 开发目录\hugo.toml 即站点配置文件

默认配置下 Hugo 会按照文章的发布时间来索引相关文章,造成的问题是一些并不相关的文章也会被推荐在一起

在默认配置或你所修改的内容的基础上,为其新增或编辑如下内容

[related]
  threshold = 80       # 相关度的最小分数(推荐80-100)
  includeNewer = true  # 是否包含较新的文章
  toLower = false      # 是否忽略大小写

  [[related.indices]]
    name = "tags"      # 依据 tags 进行相关性匹配
    weight = 100       # 重要程度,数值越高权重越大

  [[related.indices]]
    name = "categories" # 依据 categories 进行相关性匹配
    weight = 100         # 重要程度

  [[related.indices]]
    name = "title"
    weight = 10         # 依据标题(可能词相似度不高,所以权重低)

可以自行更改各组分的重要程度以实现最佳的效果

关闭独立页面的相关文章功能

配置文件位置在 layouts\partials\article\components\related-content.html

在默认配置下,新建一篇文章,其源文件中会带有一个名为 hidden 的布尔变量,设置值为 true 则会将这篇文章在主页隐藏。但如果我们某些独立页面包含了与其他页面相同的tag或分类时,那么这些页面也会出现相关文章推荐

观察一下 related-content.html 文件中的第一行

{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}

Stack 会进行判断文章的 hidden 变量,但是这只是让隐藏的文章不被相关文章索引并不能关闭这些页面的相关文章推荐功能

这里给一种比较笨的方法,添加一个新的布尔变量 related 来判断是否显示相关文章推荐,对 related-content.html 进行以下修改

{{ if .Params.related }} 
	/*
	
	原文件内容
	
	*/
{{ end }}

即在原文件内容的基础上添加一个全局判断,只有当 related 变量为真时才会启用相关文章推荐,这样只需在文章中添加这个变量并赋予所需要的值来实现我们所需要的效果

修改新文章的默认模板

文件目录 archetypes\default.md

为了方便我们写文章,可以模板将顶部变量替换成以下内容,按照所需修改相应变量即可,其中 related 变量是在你应用了前文的修改后才需要的,如果未使用请移除这个变量

title: "{{ replace .Name "-" " " | title }}"
description: 
date: {{ .Date }}
lastmod: {{ .Date }}
image: 
math: 
license: true
readingTime: true
related: true
hidden: false
draft: false
categories: [""]
tags: [""]

创建友链页面

这部分很简单,创建一个普通的自定义页面即可,关于如何添加友链请前往 Stack Demo 查看示例,可以附带一些其他的设置来简化页面,比如按照如下示例修改页面变量,可以移除文章的阅读时长,结尾的版权信息并隐藏和关闭推荐文章等

readingTime: false
license: false
hidden: true
draft: false
related: false

为你的Stack主题站点添加隐私政策

效果如本站页脚处的隐私政策入口,隐私政策的内容就是一个普通的自定义页面,这里具体介绍一下如何添加

1.修改i8n翻译配置文件

i18n 目录下编辑你的站点所设置的语言配置文件,在其 footer 部分仿照上面的格式添加一个 privacypolicy ,这里以 zh-cn.yaml 举例

footer:
    privacyPolicy:
        other: "访问本站即代表您同意本站的 {{ .PrivacyPolicy }}"

2.修改页脚html文件

文件目录 layouts\partials\footer\footer.html

在其 16 ~ 24行之间修改成如下示例代码

        {{- $Generator := `<a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a>` -}}
        {{- $Theme := printf `<b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="%s">Stack</a></b>` $ThemeVersion -}}
        {{- $DesignedBy := `<a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>` -}}
        {{- $PrivacyPolicy := `<a href="/privacypolicy/" target="_blank" rel="noopener"><b>隐私政策</b></a>` -}}


        {{ T "footer.builtWith" (dict "Generator" $Generator) | safeHTML }} <br />
        {{ T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }} <br />
        {{ T "footer.privacyPolicy" (dict "PrivacyPolicy" $PrivacyPolicy) | safeHTML }}

上述代码块中第 4 行和最后一行就是所添加的隐私政策入口内容,具体的顺序可以按照自己的需求来,注意第 4 行中 herf 标签里的链接更改为自己的隐私政策页面,不建议删除作者&项目信息

结语

以上是目前本站所用到的一些DIY的设置,希望能对你有些许帮助,以后的变更内容都会更新在本文章当中

版权

本文章隶属于 DDverse ,遵循 © CC BY-NC-SA 4.0 协议,如需转载请保留来源并在必要的时候告知我

Licensed under CC BY-NC-SA 4.0
最后更新于 Mar 23, 2025 14:41 CST