李寒的小窝

Recent content on

马上订阅 李寒的小窝 RSS 更新: https://lihan3238.github.io/index.xml

hugo模板自定义修改

2024年2月9日 00:35
Featured image of post hugo模板自定义修改

前言

本文所在的博客是基于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...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章