Hugo

使用PaperMode

地址 #

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

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

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

这里使用的版本是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

当前效果 #

...

hugo进阶学习01-10

系列视频地址介绍
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文件及效果

frontmatter (前言) #

  • 可以使用YAML,TOML,或者JSON
  • md编码及效果

archetypes(原型) #

默认的原型文件 #

archetypes/default.md

...