使用PaperMode

Calendar 2024年12月11日 08:23 周三
学习
Hugo, PaperMod

地址#

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

Calendar 2024年12月10日 15:54 周二
学习
Hugo

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

Calendar 2024年12月9日 23:50 周一
学习
Hugo

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

Calendar 2024年12月8日 11:23 周日
学习
Hugo

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

Calendar 2024年12月7日 21:17 周六
学习
Hugo

系列视频地址介绍
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