前言
本文所在的博客是基于hugo的stack主题搭建的，但是在使用过程中，发现有一些地方不太符合个人的需求，因此需要对模板进行一些自定义修改。
例如一些页面的样式，或者新增一些页面、功能或组件。
这就需要在主题的基础上进行一些自定义修改，本文以在左侧选项菜单栏新增一个随笔(musings)页面和新增password与passwordPoint变量进行博文前端加密为例，说明如何在新建的页面中使用自定义的模板。
新建随笔页面
理论上是直接在content目录下新建.md文件就行了，根据不同主题的情况，我使用的stack主题中，每个页面是一个文件夹，里面包含一个index.md文件，因此需要新建一个文件夹，然后在里面新建index.md文件。
在content/page/目录下新建一个musings文件夹，然后在里面新建index.md文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
| ---
title: "随笔"
date: 2023-09-08
layout: "musings"
slug: "musings"
menu:
main:
weight: 4
params:
icon: note
---
|
其中layout: "musings"表示使用stack主题中尚未创建(待会我会创建)的musings.html模板。
新建模板
如果使用git moudule的方式引入主题，博客根目录下会有一个layouts目录,themes目录下也会有一个layouts目录，这两个目录的区别是前者是用来存放自定义模板的，后者是存放主题模板的。一般前一个目录下的模板会覆盖后一个目录下的模板，自定义模板时，将文件复制到前一个目录下进行修改即可。
模板文件一般放在layouts目录下，_default目录下存放优先默认模板，因此在layouts/_default目录下新建一个musings.html文件，查找并显示tag为musings的文章，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| {{ define "body-class" }}template-archives{{ end }}
{{ define "main" }}
<h1 class="big-title" style="color: white;">随笔</h1>
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
{{ $filtered := ($pages | intersect $notHidden) }}
{{ range $filtered.GroupByDate "2006" }}
{{ $id := lower (replace .Key " " "-") }}
<div class="archives-group" id="{{ $id }}">
<h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>
<div class="article-list--compact">
{{ range .Pages }}
{{ if in .Params.tags "musings" }}
<article>
<a href="{{ .RelPermalink }}">
<div class="article-details">
<h2 class="article-title">
{{- .Title -}}
</h2>
<footer class="article-time">
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</time>
</footer>
</div>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink
"articleList" -}}
{{ if $image.exists }}
<div class="article-image">
{{ if $image.resource }}
{{- $Permalink := $image.resource.RelPermalink -}}
{{- $Width := $image.resource.Width -}}
{{- $Height := $image.resource.Height -}}
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
{{- $Permalink = $thumbnail.RelPermalink -}}
{{- $Width = $thumbnail.Width -}}
{{- $Height = $thumbnail.Height -}}
{{- end -}}
<img src="{{ $Permalink }}" width="{{ $Width }}" height="{{ $Height }}" alt="{{ .Title }}"
loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}
</div>
{{ end }}
</a>
</article>
{{ end }}
{{ end }}
</div>
</div>
{{ end }}
{{ partialCached "footer/footer" . }}
{{ end }}
|
成功
这样就完成了一个新页面的创建。
修改 layouts\partials\article\article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
{{ if isset .Params "password" }}
<div id="password-protected-content"
style="border: 1px solid #ccc; padding: 10px; border-radius: 5px; background-color: #f9f9f9; text-align: center;">
<p style="font-size: 16px; margin-bottom: 10px;">{{ with .Params.passwordPoint }}{{ . }}{{ else
}}这是密码保护的内容，请输入密码访问：{{ end }}</p>
<input type="password" id="password-input" style="padding: 5px; margin-bottom: 10px; width: 200px;">
<button onclick="verifyPassword()"
style="padding: 5px 10px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer;">提交</button>
</div>
<div id="article-content" style="display: none;">
<article class="{{ if .Params.image }}has-image {{ end }}main-article">
{{ partial "article/components/header" . }}
<!-- 以下部分仅在密码验证通过后显示 -->
<div id="content">
{{ partial "article/components/content" . }}
</div>
<!-- End of password-protected content -->
{{ partial "article/components/footer" . }}
{{ if or .Params.math .Site.Params.article.math }}
{{ partialCached "article/components/math.html" . }}
{{ end }}
</article>
</div>
{{ else }}
<div id="article-content">
<article class="{{ if .Params.image }}has-image {{ end }}main-article">
{{ partial "article/components/header" . }}
{{ partial "article/components/content" . }}
{{ partial "article/components/footer" . }}
{{ if or .Params.math .Site.Params.article.math }}
{{ partialCached "article/components/math.html" . }}
{{ end }}
</article>
</div>
{{ end }}
<script>
function verifyPassword() {
var inputPassword = document.getElementById('password-input').value;
var correctPassword = '{{ with .Params.password }}{{ . }}{{ else }}{{ "" }}{{ end }}'; // 获取文章 Front Matter 中定义的密码
if (inputPassword === correctPassword) {
document.getElementById('password-protected-content').style.display = 'none'; // 隐藏密码输入框
document.getElementById('article-content').style.display = 'block'; // 显示文章内容
} else {
alert('密码错误，请重新输入！');
}
}
</script>
|
成功
这样就完成了一个加密功能的实现。
