Hugo on 随记

使用PaperMode

Wed, 11 Dec 2024 08:23:34 +0000

地址#

官方： 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

hugo进阶学习20-23

Tue, 10 Dec 2024 15:54:58 +0000

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 %}

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 %}

预览：

hugo进阶学习17-19

Mon, 09 Dec 2024 23:50:43 +0000

Variable#

文件结构#

实战#

{% 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 %}

hugo进阶学习11-15

Sun, 08 Dec 2024 11:23:42 +0000

这里使用的版本是v0.26（很久之前的版本）

template basic#

模板分为list template和single template

文件夹结构#

content目录结构

list template （列表模板）#

single template （单页模板）#

特点#

所有的列表之间都是长一样的（页眉，页脚，及内容（都是列表））
所有的单页之间都是长一样的（一样的页眉页脚，一样的内容布局）

部分代码解释#

单页探索#

list page templates#

文件夹结构#

文件内容#

#content/_index
---
title: "_Index" 
---

This is the home page
#content/dir1/_index
---
title: "_Index"
---

This is the landing page for dir1

当前效果#

原因#

{% raw %} 
<!--themes\ga-hugo-theme\layouts\_default\list.html-->
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>
 {{ partial "header" (dict "Kind" .Kind "Template" "List") }}
 {{.Content}}
 {{ range .Pages }}
 <div style="border: 1px solid black; margin:10px; padding:10px; ">
 <div style="font-size:20px;">
 <a href="{{.URL}}">{{.Title}}</a>
 </div>
 <div style="color:grey; font-size:16px;">{{ dateFormat "Monday, Jan 2, 2006" .Date }}</div>
 <div style="color:grey; font-size:16px;">{{ if .Params.tags }}<strong>Tags:</strong> {{range .Params.tags}}<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> {{end}}{{end}}</div>
 <div style="color:grey; font-size:16px;">{{ if .Params.categories }}<strong>Categories:</strong> {{range .Params.categories}}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> {{end}}{{end}}</div>
 <div style="color:grey; font-size:16px;">{{ if .Params.moods }}<strong>Moods:</strong> {{range .Params.moods}}<a href="{{ "/moods/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> {{end}}{{end}}</div>

 <p style="font-size:18px;">{{.Summary}}</p>
 </div>
 {{ end }}
 {{ partial "footer" . }}
</body>
</html> 
{% endraw %}

覆盖默认的list template#

编辑文件并保存

hugo进阶学习01-10

Sat, 07 Dec 2024 21:17:37 +0000

系列视频地址介绍
https://www.youtube.com/watch?v=qtIqKaDlqXo&list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3

介绍#

hugo是用来构建静态网站的
但是也可以稍微做点动态生成的事
这里使用的版本是v0.26（很久之前的版本）

备注：标题短代码之前（不包括短代码这篇）的笔记是回溯的，所以没有复制源代码下来，直接在视频再次截图的

在Windows上安装hugo#

到github release下载，然后放到某个文件夹中
设置环境变量
验证环境变量
最后验证hugo版本

hugo version

创建一个新的网站#

使用代码生成

hugo new site

文件夹结构

使用主题#

这里是https://themes.gohugo.io
这里使用的是ga-hugo-theme（github中查找），并放到themes文件夹中

之后在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下，这讲创建后的结构目录为
- 总共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文件及效果

Hugo on 随记

使用PaperMode

地址#

安装#

hugo进阶学习20-23

DateFiles#

PartialTemplates#

传递全局范围#

hugo进阶学习17-19

Variable#

文件结构#

实战#

hugo进阶学习11-15

template basic#

文件夹结构#

list template （列表模板）#

single template （单页模板）#

特点#

部分代码解释#

单页探索#

list page templates#

文件夹结构#

文件内容#

当前效果#

原因#

覆盖默认的list template#

hugo进阶学习01-10

介绍#

在Windows上安装hugo#

创建一个新的网站#

使用主题#

创建md文件#

frontmatter (前言)#

archetypes（原型）#

默认的原型文件#