2024年12月11日 08:23 周三地址
#
官方:
https://github.com/adityatelange/hugo-PaperMod/wiki/Installation (有些东西没有同hugo官方同步)
非官方:
https://github.com/vanitysys28/hugo-papermod-wiki/blob/master/Home.md (与hugo官方更同步)
安装
#
hugo new site blog.source --format yaml
cd blog.source
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
git submodule update --remote --merge
2024年12月10日 15:54 周二![](img/ly-20241212142130925.png)
DateFiles
#
{% raw %}
{
"classA":"json位置: data\\classes.json",
"classA":{
"master":"xiaoLi",
"number":"05"
},
"classB":{
"master":"aXiang",
"number":"15"
},
"classC":{
"master":"BaoCeng",
"number":"20"
}
}
{% endraw %}
模板代码
{% raw %}
{{/* layouts\_default\single.html */}}
{{ define "main" }}
{{ range .Site.Data.classes }}
master:{{.master}}==number:{{.number}}<br>
{{end}}
{{end}}
{% endraw %}
![](img/ly-20241212142131035.png)
PartialTemplates
#
传递全局范围
#
{% raw %}
{{/*layouts\partials\header.html*/}}
<h1>{{.Title}}</h1>
<p>{{.Date}}</p>
{% endraw %}
{% raw %}
{{/*layouts\_default\single.html*/}}
{{ define "main" }}
{{ partial "header" . }}
{{/*点.传递了当前文件的范围,代表了所有的范围,所有可以访问的变量*/}}
<hr>
{{end}}
{% endraw %}
预览:
![](img/ly-20241212142131117.png)
...
2024年12月9日 23:50 周一![](img/ly-20241212142130125.png)
Variable
#
文件结构
#
![](img/ly-20241212142130325.png)
实战
#
{% raw %}
{{/*layouts\_default\single.html*/}}
{{ define "main" }}
This is the single template<br>
{{/* 常见变量 */}}
title: {{ .Params.title }}<br>
title: {{ .Title }}<br>
date: {{ .Date }}<br>
url: {{ .URL }}<br>
myvar: {{ .Params.myVar }}<br>
{{/* 定义变量 */}}
{{ $myVarname := "aString" }}
myVarname:{{ $myVarname }}<br>
<h1 style="color: {{ .Params.color }} ;" >Single Template</h1>
{{ end }}
{% endraw %}
{% raw %}
---
title: "E-title"
date: 2024-12-07T12:43:21+08:00
draft: true
myVar: "myvalue"
color: "red"
---
This is dir3/e.md
{% endraw %}
![](img/ly-20241212142130338.png)
...
2024年12月8日 11:23 周日这里使用的版本是v0.26(很久之前的版本)
![](img/ly-20241212142128138.png)
template basic
#
模板分为list template和single template
文件夹结构
#
content目录结构
![](img/ly-20241212142128249.png)
list template (列表模板)
#
![](img/ly-20241212142128336.png)
![](img/ly-20241212142128415.png)
single template (单页模板)
#
![](img/ly-20241212142128493.png)
特点
#
所有的列表之间都是长一样的(页眉,页脚,及内容(都是列表))
所有的单页之间都是长一样的(一样的页眉页脚,一样的内容布局)
部分代码解释
#
![](img/ly-20241212142128574.png)
单页探索
#
![](img/ly-20241212142128655.png)
![](img/ly-20241212142128733.png)
list page templates
#
文件夹结构
#
![](img/ly-20241212142128811.png)
文件内容
#
#content/_index
---
title: "_Index"
---
This is the home page
#content/dir1/_index
---
title: "_Index"
---
This is the landing page for dir1
当前效果
#
![](img/ly-20241212142128890.png)
...
2024年12月7日 21:17 周六系列视频地址介绍
https://www.youtube.com/watch?v=qtIqKaDlqXo&list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3
![](img/ly-20241212142126407.png)
介绍
#
- hugo是用来构建静态网站的
- 但是也可以稍微做点动态生成的事
- 这里使用的版本是v0.26(很久之前的版本)
备注:标题短代码之前(不包括短代码这篇)的笔记是回溯的,所以没有复制源代码下来,直接在视频再次截图的
在Windows上安装hugo
#
- 到github release下载,然后放到某个文件夹中
![](img/ly-20241212142126606.png)
- 设置环境变量
![](img/ly-20241212142126695.png)
- 验证环境变量
![](img/ly-20241212142126780.png)
- 最后验证hugo版本
创建一个新的网站
#
- 文件夹结构
![](img/ly-20241212142126859.png)
使用主题
#
这里是https://themes.gohugo.io
这里使用的是ga-hugo-theme(github中查找),并放到themes文件夹中
![](img/ly-20241212142127018.png)
之后在config.toml中使用主题
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ga-hugo-theme" #添加这句话
- 启动博客
hugo serve
- 地址
localhost:1313
创建md文件
#
- 使用
hugo new a.md
把文件创建在content/a.md或者hugo new dir2/d.md
把文件创建在content/dir2.md
下,这讲创建后的结构目录为
![](img/ly-20241212142127095.png)
- 总共5个文件,可以使用localhost:1313访问博客(默认列举所有(包括子文件夹)文件
- 可以使用 localhost:1313/dir3访问dir3下所有文件列表(list),localhost:1313/dir1访问dir1下所有文件列表 (都是content的直接子文件夹)
- 如果没有dir1/dir2/_index.md这个文件 ,则不能直接使用localhost:1313/dir1/dir2访问dir1/dir2下所有文件
- 查看dir1/dir2/index.md文件及效果
![](img/ly-20241212142127255.png)
frontmatter (前言)
#
- 可以使用YAML,TOML,或者JSON
- md编码及效果
![](img/ly-20241212142127336.png)
![](img/ly-20241212142127415.png)
archetypes(原型)
#
默认的原型文件
#
archetypes/default.md
...