1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

security:
  enableInlineShortcodes: false
  exec:
    allow:
    - ^dart-sass-embedded$
    - ^go$
    - ^npx$
    - ^postcss$
    osEnv:
    - (?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+)$
  funcs:
    getenv:
    - ^HUGO_
    - ^CI$
  http:
    methods:
    - (?i)GET|POST
    urls:
    - .*

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

privacy:
  disqus:
    disable: false
  googleAnalytics:
    disable: false
    anonymizeIP: true # 使用户的IP地址在Google Analytics中匿名
    respectDoNotTrack: true # 使GA模板尊重“不跟踪”HTTP标头
    useSessionStorage: true # 禁用Cookie的使用，并使用会话存储存储GA客户端ID，GA@4 不支持
  instagram:
    disable: false
    simple: true # 构建静态和非JS版本的Instagram图像卡，需要禁用内联样式：services.instagram.disableInlineCSS=true
  twitter:
    disable: false
    enableDNT: true # 推特及其在您网站上的嵌入页面，不会用于包括个性化建议和个性化广告的目的
    simple: true # 将生成一个静态的、无JS版本的推文，需要禁用内联样式：services.twitter.disableInlineCSS=true
  vimeo:
    disable: false
    enableDNT: true # vimeo播放器将被阻止跟踪任何会话数据，包括所有cookie和统计数据
    simple: true # 视频缩略图将从Vimeo的服务器中获取，并覆盖有播放按钮。如果用户单击播放视频，它将直接在Vimeo网站上的新选项卡中打开
  youtube:
    disable: true
    privacyEnhanced: true # 当打开隐私增强模式时，除非用户播放嵌入视频，否则YouTube不会在您的网站上存储访问者的信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

privacy:
  disqus:
    disable: true
  googleAnalytics:
    disable: true
  instagram:
    disable: true
  twitter:
    disable: true
  vimeo:
    disable: true
  youtube:
    disable: true

1
2

$ export GOPATH=$HOME/go
$ go get -v github.com/spf13/hugo

1

$ go get -u -v github.com/spf13/hugo

1

brew install hugo

1
2
3
4
5
6
7

$ hugo new site quickstart # 新建 quickstart 目录
$ cd quickstart
$ git init # 初始化仓库，准备添加主题
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
$ echo "theme = 'ananke'" >> config.toml # 配置文件配置主题（为主题目录名）
$ hugo # 生成静态页面到 public 文件夹下（不会删除上一次生成的，有需要可以先手动删除）
$ hugo server # 启动本地服务，预览站点

1

$ hugo new posts/first.md # 在 quickstart/content/posts/ 下创建页面 first.md

1
2
3
4
5

---
title: 第一篇文章
date: 2022-11-20T09:03:20-08:00
draft: true # 草稿
---

1
2

## 介绍
这是我的第一篇 **博客**

1
2
3
4
5

# 由于新建的文章注释中：draft=true，hugo server 命令默认不会生成草稿页面
# 如果需要生成，执行下面的命令
$ hugo server --buildDrafts
# 或者
$ hugo server -D

1
2
3
4
5

baseURL: "http://example.org/"
languageCode: "en-us"
title: "My New Hugo Site"
theme: "ananke"
# 可以自行更改配置

1
2
3
4
5
6
7

$ hugo version
$ hugo help
$ hugo server --help
$ hugo --buildDrafts    # or -D。同时生成 draft=true 的页面
$ hugo --buildExpired   # or -E。同时生成 expiryDate 时间小于当前时间的页面
$ hugo --buildFuture    # or -F。同时生成 date 或 publishDate 时间大于当前时间的页面
$ hugo server --navigateToChanged # 启动服务，且路由跳转到正在更新的页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

quickstart/
├── archetypes/
│   └── default.md # 指明新生成的页面默认的头部注释
├── assets/ # 存储所有需要由 Hugo Pipes 处理的文件。只有使用了 .Permalink 或 .RelPermalink 的文件才会发布到public 目录
├── config/ # 默认情况下不会创建。存储 yaml、toml、json 文件，几乎不用配置，但是 Hugo 提供了配置指令
├── content/ # 网站的所有内容都将位于此目录中。content 下的顶级文件夹表示分类
├── data/ # 存储Hugo在生成网站时可以使用的配置文件。也可以创建从动态内容中提取的数据模板
├── layouts/ # 以 .html 文件的形式存储模板，指定如何将内容视图呈现到静态网站中
├── public/ # hugo 命令生成的静态页面存储位置
├── static/ # 存储所有静态内容：图像、CSS、JavaScript等
├── themes/ # 主题目录
└── config.toml # 生成页面配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

├── config
│   ├── _default # 默认，会合并目录下的每一个配置
│   │   ├── config.toml
│   │   ├── languages.toml
│   │   ├── menus.en.toml
│   │   ├── menus.zh.toml
│   │   └── params.toml
│   ├── production
│   │   ├── config.toml
│   │   └── params.toml
│   └── staging
│       ├── config.toml
│       └── params.toml

1
2

$ hugo --config debugconfig.toml
$ hugo --config a.toml,b.toml,c.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

markup:
  goldmark:
    extensions: # markdown 扩展标记
      definitionList: true # 页面定义列表，换行以 [:+空格] 开头，编辑定义文本
      footnote: true # 脚注，文本中的标记将变成上标数字；将放在文档末尾脚注列表中的脚注定义。Text[^1]
      linkify: true # 链接
      linkifyProtocol: https
      strikethrough: true # 删除线。~~~text~~~
      table: true # 表格
      taskList: true # 有序和无序列表
      typographer: true # `text` 或 ``text`` 标记一段文本
    parser:
      attribute: # 启用自定义属性
        block: false # 块级元素解析。引用、列表、代码块添加 HTML 属性
        title: true # 标题解析。### 标题3
      autoHeadingID: true # 自动添加 h1-h6 id 属性
      autoHeadingIDType: github # github 的标题 id 策略
      wrapStandAloneImageWithinParagraph: true # 图片独占一行
    renderer:
      hardWraps: false # Goldmark忽略段落中的换行符。设置为 true 将换行呈现为 <br> 元素
      unsafe: false # Goldmark不会呈现原始HTML和潜在的危险链接。如果有很多内联 HTML 或 JavaScript，开启
      xhtml: false # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

markup:
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: false
    hl_Lines: ""
    hl_inline: false
    lineAnchors: ""
    lineNoStart: 1
    lineNos: false
    lineNumbersInTable: true
    noClasses: true
    noHl: false
    style: monokai
    tabWidth: 4

1
2
3
4
5

markup:
  tableOfContents:
    endLevel: 3
    ordered: false # 是否生成有序列表而不是无序列表
    startLevel: 2

 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

build:
  _merge: none
caches:
  _merge: none
cascade:
  _merge: none
frontmatter:
  _merge: none
imaging:
  _merge: none
languages:
  _merge: none
  en:
    _merge: none
    menus:
      _merge: shallow
    params:
      _merge: deep
markup:
  _merge: none
mediatypes:
  _merge: shallow
menus:
  _merge: shallow
minify:
  _merge: none
module:
  _merge: none
outputformats:
  _merge: shallow
params:
  _merge: deep
permalinks:
  _merge: none
privacy:
  _merge: none
related:
  _merge: none
security:
  _merge: none
sitemap:
  _merge: none
taxonomies:
  _merge: none

  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
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

# 有值的都是默认值
baseURL: "http://localhost:1313/" # 服务器地址，必须协议开头，/ 结尾
title: "" # 站点标题
dataDir: "data"
assetDir: "assets"
themesDir: "themes"
publishDir: "public"
contentDir: "content"
archetypeDir: "archetypes"
defaultContentLanguage: "en"
paginatePath: "page" # 分页路由
refLinksErrorLevel: "ERROR" # 程序错误等级，任何错误都会退出。另一个值为 WARNING
refLinksNotFoundURL: "" # 未找到页面的路由重定向
titleCaseStyle: "AP" # 每个标题单词大写开头
timeout: "30s" # 超时停止页面生成，避免递归死循环
paginate: 10 # 分页数量
summaryLength: 70 # 页面宽度
rssLimit: -1

pluralizeListTitles: true # 如果没有_index.md，页面列表标题为所在目录的目录名：首字母大写 + 复数
watch: false # 不监听文件变化，开发模式默认 true，生成模式默认 false
noChmod: false # 不同步页面权限
noTimes: false # 不同步页面修改时间
relativeURLs: false # 使所有 URL 相对于内容根目录
uglyURLs: false # 丑化生成的文件路径，/filename.html => /filename/.index.html
hasCJKLanguage: false # 是否是中日韩语言
buildDrafts: false
buildExpired: false
buildFuture: false
cleanDestinationDir: false # 生成时，删除静态目录中没有源文件的文件
removePathAccents: false # 删除生成路由中的空格
canonifyURLs: false # 将相对 URL 转换为绝对 URL
enableEmoji: false # 允许监视文件系统的更改并根据需要重新创建
enableGitInfo: false # 允许为每个页面启用 .GitInfo 对象（如果Hugo站点由Git版本控制）
enableRobotsTXT: false # 允许生成 robots.txt 文件
enableInlineShortcodes: false # 允许行内短代码
enableMissingTranslationPlaceholders: false # 如果缺少翻译，允许显示占位符而不是默认值或空字符串
disableAliases: false # 将禁用别名重定向的生成
disableLiveReload: false # 禁止开发热更新
disablePathToLower: false # url 转小写
disableHugoGeneratorInject: false # 禁止在主页的 HTML 头中注入生成器元标记
defaultContentLanguageInSubdir: false # 在 subdir 中渲染默认内容语言，如 content/en/，/ => /en/
disableKinds: [] # 禁用指定种类的文件生成。此列表中允许的值: "page", "home", "section", "taxonomy", "term", "RSS", "sitemap", "robotsTXT", "404"
disableLanguages: [] # 禁用的语言
copyright: "" # 网站的版权声明，通常显示在页脚中
googleAnalytics: "" # Google Analytics tracking ID
languageCode: "" # 语言代码
newContentEditor: "" # 创建新内容时要使用的编辑器
timeZone: # 设置时区，一般不用设置，取决于系统时间
theme: # 使用的主题列表
languages: # 国际化配置
cascade: # 默认传递的 map
imaging: # 配置图片处理规则
markup: # 标记语言配置
menus: # 菜单配置
minify: # 打包配置
module: # 模块配置
mediaTypes: # 设置页面需要使用的媒体类型
outputFormats: # 媒体数据输出格式配置
params: # 全局配置参数
permalinks: # 动态路由配置
frontmatter: # 默认的头部注释配置
sectionPagesMenu: # 设置为 "main" 时，配置所有页面在都在侧栏展示
outputs: # 页面输出格式
  page:
  home:
  section:
  taxonomy:
  term:
  
taxonomies: # 在整个站点中使用自定义分类之前，必须在站点配置中定义默认分类以外的分类
  category: categories
  series: series
  tag: tags
  
sitemap: # 在站点配置中设置更改频率和优先级的默认值，以及生成的文件的名称
  changefreq: monthly # 页面可能更改的频率。有效值：always/hourly/daily/weekly/monthly/yearly/never
  filename: sitemap.xml
  priority: -1 # 页面相对于站点上任何其他页面的优先级。有效值的范围从 0.0 到 1.0，默认为 -1，忽略
  
related: # 查询关联性配置，如果未配置，默认为下面的属性
  includeNewer: false # 在相关内容列表中包含比当前页面更新的页面
  indices: # 查询权重优先级
  - name: keywords
    weight: 100
  - name: date
    weight: 10
  threshold: 80 # 0-100之间的值。较低的值将提供更多的匹配，但可能不那么相关
  toLower: false # 查询都转换为小写匹配，轻微的性能损失以获得更准确的结果
  
security: # 内置安全策略，一般不需要更改
  enableInlineShortcodes: false
  exec:
    allow:
    - ^dart-sass-embedded$
    - ^go$
    - ^npx$
    - ^postcss$
    osEnv:
    - (?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+)$
  funcs:
    getenv:
    - ^HUGO_
    - ^CI$
  http:
    methods:
    - (?i)GET|POST
    urls:
    - .*
    
caches: # 配置各种资源缓存的目录及存在时间
  assets:
    dir: :resourceDir/_gen # 存储此缓存文件的绝对路径。允许的起始占位符是 :cacheDir 和 :resourceDir
    maxAge: -1 # 持续时间，-1表示永远，0有效地关闭该缓存，其他时间如："10s"、"10m"、"10h" 等
  getcsv:
    dir: :cacheDir/:project
    maxAge: -1
  getjson:
    dir: :cacheDir/:project
    maxAge: -1
  getresource:
    dir: :cacheDir/:project
    maxAge: -1
  images:
    dir: :resourceDir/_gen
    maxAge: -1
  modules:
    dir: :cacheDir/modules
    maxAge: -1
    
build:
  # 关闭将j sconfig.json 写入 /assets文 件夹并映射运行 js.Build 的导入，用于 VS Code 的 JS 智能导航
  noJSConfigInAssets: false
  # 何时将 /resources/_gen 中的缓存资源用于 PostCSS 和 ToCSS，支持 fallback、always、never
  useResourceCacheWhen: "fallback" 
  # 启用后，名为hugo_stats.json的文件将被写入项目根目录
  # 其中包含一些关于构建的聚合数据，例如发布的 HTML 实体列表，用于进行 CSS 修剪
  writeStats: false

1
2
3
4
5
6
7
8

module:
  noProxy: none
  proxy: direct # 定义用于下载远程模块的代理服务器
  noVendor: "" # 一个可选的 Glob 模式匹配模块路径
  vendorClosest: false # 选择就近的 vendored 模块
  private: '*.*' # 专用的路径: 逗号分隔的glob列表匹配
  replacements: "" # 需替换的，模块路径到目录映射/切片列表（逗号分隔），例如: github.com/bep/my-theme->./
  workspace: "off" # 要使用的工作区文件。这将启用 Go 工作区模式

1
2
3
4
5

module:
  hugoVersion:
    extended: false # 是否需要 Hugo 的扩展版本
    max: "" # 最高版本
    min: "" # 最低版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module:
  imports:
  - disable: false # 如果启用，在 go.* 文件中保留任何版本信息时禁用模块
    ignoreConfig: false # 如果启用，则不会加载任何模块配置文件，例如config.toml
    ignoreImports: false # 如果启用，将不遵循模块导入
    noMounts: true # 不要在此导入中装入任何文件夹
    noVendor: true # 从不提供此导入（仅在主项目中允许)
    # 可以是有效的Go Module模块路径，也可以是存储在主题文件夹中的模块目录名
    path: github.com/gohugoio/hugoTestModules1_linux/modh1_2_1v
  - path: my-shortcodes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module:
  mounts:
  - source: content
    target: content
  - source: static
    target: static
  - source: layouts
    target: layouts
  - source: data
    target: data
  - source: assets
    target: assets
  - source: i18n
    target: i18n
  - source: archetypes
    target: archetypes

1

$ hugo mod init your_project_path

1
2
3

module:
  imports:
  - path: github.com/spf13/hyde

1
2
3

$ hugo mod get -u # 更新所有
$ hugo mod get -u github.com/gohugoio/myShortcodes ... # 递归更新
$ hugo mod get github.com/gohugoio/[email protected] # 更新指定版本

1

$ hugo mod graph

1
2
3
4
5
6

# 可以嵌套使用主题组件
# 项目 -> 短代码 -> 基本主题 -> hyde 主题
theme:
- my-shortcodes
- base-theme
- hyde

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

└── content
    └── about
    |   └── index.md  # https://example.com/about/
    ├── posts
    |   ├── firstpost.md   # https://example.com/posts/firstpost/
    |   ├── happy
    |   |   └── ness.md  # https://example.com/posts/happy/ness/
    |   └── secondpost.md  # https://example.com/posts/secondpost/
    └── quote
        ├── first.md       # https://example.com/quote/first/
        └── second.md      # https://example.com/quote/second/

1
2
3
4
5
6
7

                               url ("/posts/my-first-hugo-post/")
                   ⊢------------^----------⊣
       baseurl     section     slug
⊢--------^--------⊣⊢-^--⊣⊢-------^---------⊣
                 permalink
⊢--------------------^---------------------⊣
https://example.com/posts/my-first-hugo-post/index.html

1
2
3
4
5

---
title: A new post with the filename old-post.md
slug: "new-post"
---
# 将会生成 https://example.com/posts/new-post/

1
2
3
4
5
6

---
title: My Post
type: new
layout: mylayout
---
# 将会使用 layouts/new/mylayout.html 渲染该页面

1
2
3
4
5

---
title: Old URL
url: /blog/new-url/
---
# 将会生成 https://example.com/blog/new-url/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

# 目录示例
content/
├── about # 叶子页面
│   ├── index.md
├── posts # 分类叶子页面
│   ├── post1
│   │   ├── content1.md
│   │   ├── content2.md
│   │   ├── image1.jpg
│   │   ├── image2.png
│   │   └── index.md
│   └── post2
│       └── index.md
│
└── another-category # 集合页面
    ├── ..
    └── collection # 集合中的集合
        ├── ..
        └── another-post
            └── index.md

1
2
3
4
5
6
7

{{ $headless := .Site.GetPage "/some-headless-file" }}
{{ $reusablePages := $headless.Resources.Match "author*" }}
<h2>Authors</h2>
{{ range $reusablePages }}
    <h3>{{ .Title }}</h3>
    {{ .Content }}
{{ end }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

content/
├── collection-1
│   ├── content1.md
│   ├── content2.md
│   ├── image1.jpg
│   ├── image2.png
│   └── _index.md
└── collection-2
    ├── _index.md
    └── a-post
        └── index.md

1
2
3
4
5
6

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
    console.log("mermaid is initialized");
  </script>
{{ end }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

title: 页面标题
categories:
- 分类1
- 分类2
date: "2012-04-06"
description: 一些页面描述
slug: 重写页面末尾路由
tags:
- 标签1
- 标签2
- 标签3
- 标签4

 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

name: "string：文件名覆盖"
title: "string: 标题"
description: "string: 紧跟标题的描述，预览页面会显示"
summary: "slice: 页面摘要使用的文本"
linkTitle: "string: 创建指向内容的链接"
aliases: "slice: 在输出目录结构中创建的一个或多个别名（重命名旧路径）"
audio: "slice: 音频文件路径"
cascade: "map: 传递指定头部注释"
date: "string: 分配给此页面的日期时间"
lastmod: "string: 上次修改内容的日期时间"
publishDate: "string: 如果在将来，除非配置 --buildFuturehugo，否则不显示"
expiryDate: "string: 如果在过去，除非配置 --buildExpired，否则不显示"
draft: "bool: 是否是草稿，如果是，除非配置 --buildDrafts，否则不显示"
headless: "bool: 不展示的页面，可用与公共资源和页面公共内容"
images: "slice: 与页面相关的图像的路径数组"
isCJKLanguage: "bool: 明确将内容视为中日韩语言"
keywords: "slice: 元数据关键字，可用于 SEO"
layout: "选择布局模板。如果指定，将在布局目录中查找与内容部分对应的同名布局"
markup: "rst/md: 实验功能，指定文档类型，默认是 md"
outputs: "slice: 指定特定于内容的输出格式"
resources: "string: 用于配置页面捆绑包资源"
series: "slice: 此页面所属的系列数组，作为分类的子集"
slug: "string: 输出 URL 的尾部，未指定时为文件名，如果是 index 则为所在目录名"
type: "string: 内容类型；如果未在前言中指定，值为所在目录名"
url: "string: 从 Web 根目录到内容的完整路径"
videos: "slice: 与页面相关的视频的一系列路径"
weight: "int: 排序，值越大优先级越高"
tags: "slice: 页面标签"
categories: "slice: 页面分类"

1
2

include_toc: true
show_comments: false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

cascade:
- _target:
    kind: "page" # 匹配类型为 page
    lang: "en" # 匹配语言为 en
    path: "/blog/**" # /blog/ 目录下的所有
    environment: "development" # 匹配开发模式
  background: "yosemite.jpg"
- _target:
    kind: "section"
  background: "goldenbridge.jpg"
title: "Blog"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

_build:
  # always: 包含着所有集合页面中，site.RegularPages，$page.Pages 可获取
  # never: 不在任何一个集合页面中
  # local: 包含在本地集合中，$page.RegularPage/$page.Page/.Page/.RegularPages，无标题可导航页面
  list: always
  # 发布页面捆绑的相关资源
  publishResources: true
  # always: 视为已发布的页面，包含其输出文件（index.html等）和 permalink
  # never: 不在任何一个集合页面中
  # link: 不会生成在磁盘中，但是会生成一个真实的永久链接
  render: always 

1
2
3
4
5

# content/who-we-are.md`
title: Who we are
_build:
 list: false
 render: false

1
2
3
4
5
6

{{/* layouts/index.html */}}
<section id="who-we-are">
{{ with site.GetPage "who-we-are" }}
  {{ .Content }}
{{ end }}
</section>

1
2
3
4
5
6
7

_build:
  render: true
cascade:
  _build:
    list: true
    render: false
title: Testimonials

1
2
3
4
5
6
7
8

{{/* layouts/_defaults/testimonials.html */}}
<section id="testimonials">
{{ range first 5 .Pages }}
  <blockquote cite="{{ .Params.cite }}">
    {{ .Content }}
  </blockquote>
{{ end }}
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

content
└── post
    ├── first-post
    │   ├── images
    │   │   ├── a.jpg
    │   │   ├── b.jpg
    │   │   └── c.jpg
    │   ├── index.md (root of page bundle)
    │   ├── latest.html
    │   ├── manual.json
    │   ├── notice.md
    │   ├── office.mp3
    │   ├── pocket.mp4
    │   ├── rating.pdf
    │   └── safety.txt
    └── second-post
        └── index.md (root of page bundle)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{ with .Resources.GetMatch "script.js" }}
  <script>{{ .Content | safeJS }}</script>
{{ end }}

{{ with .Resources.GetMatch "style.css" }}
  <style>{{ .Content | safeCSS }}</style>
{{ end }}

{{ with .Resources.GetMatch "img.png" }}
  <img src="data:{{ .MediaType }};base64,{{ .Content | base64Encode }}">
{{ end }}

1

{{ .Resources.ByType "image" }}

1

{{ .Resources.Match "images/*" }}

1

{{ .Resources.GetMatch "images/*" }}

1
2
3
4
5
6
7
8

// Using Match/GetMatch to find this images/sunset.jpg ?
.Resources.Match "images/sun*" ✅
.Resources.Match "**/sunset.jpg" ✅
.Resources.Match "images/*.jpg" ✅
.Resources.Match "**.jpg" ✅
.Resources.Match "*" 🚫
.Resources.Match "sunset.jpg" 🚫
.Resources.Match "*sunset.jpg" 🚫

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

resources:
- name: header # .Resources.Name/.Resources.GetMatch "header" 可以获取到
  src: images/sunset.jpg
- params:
    icon: photo
  src: documents/photo_specs.pdf
  title: Photo Specifications
- src: documents/guide.pdf
  title: Instruction Guide
- src: documents/checklist.pdf
  title: Document Checklist
- src: documents/payment.docx
  title: Proof of Payment
- name: pdf-file-:counter # pdf-file-1 pdf-file-2 pdf-file-3
  params:
    icon: pdf
  src: '**.pdf'
- params: # 所有 .docx 文档包含 .icon=word
    icon: word
  src: '**.docx'

1
2
3
4
5

resources:
- src: '*specs.pdf'
  title: 'Specification #:counter'
- name: pdf-file-:counter
  src: '**.pdf'

1
2
3
4
5

content/
└── posts/
    └── post-1/           <-- page bundle
        ├── index.md
        └── sunset.jpg    <-- page resource

1
2

{{ $image := resources.Get "images/sunset.jpg" }}
{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}

1
2

{{ $image := .Resources.GetMatch "sunset.jpg" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">

1
2
3
4

{{ $image := .Resources.GetMatch "sunset.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

1
2
3

{{ with .Resources.GetMatch "sunset.jpg" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

1
2
3
4
5
6
7
8

{{/* Resize to a width of 600px and preserve aspect ratio */}}
{{ $image := $image.Resize "600x" }}

{{/* Resize to a height of 400px and preserve aspect ratio */}}
{{ $image := $image.Resize "x400" }}

{{/* Resize to a width of 600px and a height of 400px */}}
{{ $image := $image.Resize "600x400" }}

1
2

{{/* 必须同时提供宽度和高度 */}}
{{ $image := $image.Fit "600x400" }}

1
2

{{/* 必须同时提供宽度和高度，使用定位选项更改裁剪框定位点 */}}
{{ $image := $image.Fill "600x400" }}

1
2

{{/* 必须同时提供宽度和高度，使用定位选项更改裁剪框定位点 */}}
{{ $image := $image.Crop "600x400" }}

1

{{ $image := $image.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

1

{{ $image := $image | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

1
2
3

{{ $filters := slice  (images.GaussianBlur 6) (images.Pixelate 8) }}
{{ $image1 := $image1.Filter $filters }}
{{ $image2 := $image2.Filter $filters }}

1

{{ $colors := $image.Colors }}

1
2
3
4
5
6
7
8

{{ with $image.Exif }}
  Date: {{ .Date }}
  LatLong: {{ .Lat }}, {{ .Long }}
  Tags:
  {{ range $k, $v := .Tags }}
    TAG: {{ $k }}: {{ $v }}
  {{ end }}
{{ end }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{ with $image.Exif }}
  <ul>
    {{ with .Date }}<li>Date: {{ .Format "January 02, 2006" }}</li>{{ end }}
    {{ with .Tags.ApertureValue }}<li>Aperture: {{ lang.FormatNumber 2 . }}</li>{{ end }}
    {{ with .Tags.BrightnessValue }}<li>Brightness: {{ lang.FormatNumber 2 . }}</li>{{ end }}
    {{ with .Tags.ExposureTime }}<li>Exposure Time: {{ . }}</li>{{ end }}
    {{ with .Tags.FNumber }}<li>F Number: {{ . }}</li>{{ end }}
    {{ with .Tags.FocalLength }}<li>Focal Length: {{ . }}</li>{{ end }}
    {{ with .Tags.ISOSpeedRatings }}<li>ISO Speed Ratings: {{ . }}</li>{{ end }}
    {{ with .Tags.LensModel }}<li>Lens Model: {{ . }}</li>{{ end }}
  </ul>
{{ end }}

1

{{ $image = $image.Resize "300x r90" }}

1
2
3
4
5

{{ with .Resources.GetMatch "sunset.jpg" }}
  {{ with .Resize (printf "%dx%d r90" .Height .Width) }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }}
{{ end }}

1
2
3

{{/* 可选值: TopLeft, Top, TopRight, Left, Center, Right */}}
{{/* 可选值: BottomLeft, Bottom, BottomRight, Smart */}}
{{ $image.Crop "200x100 TopLeft" }}

1
2
3
4
5
6
7
8

{{/* 可选值: bmp, gif, jpeg, jpg, png, tif, tiff, webp */}}
{{ $image.Resize "600x webp" }}
// 如果不需要缩放
{{ with .Resources.GetMatch "sunset.jpg" }}
  {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }}
{{ end }}

1

{{ $image.Resize "600x webp q50" }}

1

{{ $image.Resize "600x webp picture" }}

1

{{ $image.Resize "600x jpg #b31280" }}

1

{{ $image.Resize "600x400 Lanczos" }}

 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

{{ $img := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 }}
{{ $options := .Get 2 }}
{{ if eq $command "Fit"}}
  {{ $img = $img.Fit $options }}
{{ else if eq $command "Resize"}}
  {{ $img = $img.Resize $options }}
{{ else if eq $command "Fill"}}
  {{ $img = $img.Fill $options }}
{{ else if eq $command "Crop"}}
  {{ $img = $img.Crop $options }}
{{ else }}
  {{ errorf "无效的图片处理命令，必须是以下之一： Crop, Fit, Fill 或 Resize"}}
{{ end }}
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
  <img style="max-width: 100%; width: auto; height: auto;" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
  <figcaption>
  <small>
    {{ with .Inner }}
      {{ . }}
    {{ else }}
      .{{ $command }} "{{ $options }}"
    {{ end }}
  </small>
  </figcaption>
</figure>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

imaging:
  anchor: Smart
  bgColor: '#ffffff'
  hint: photo
  quality: 75
  resampleFilter: Box
  exif:
    disableDate: false
    disableLatLong: false
    excludeFields: ""
    includeFields: ""

1
2
3
4
5
6
7
8
9

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>相关内容</h3>
<ul>
 {{ range . }}
 <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 {{ end }}
</ul>
{{ end }}

1
2
3
4
5
6
7

{{ $page := . }}
{{ $opts := 
  "indices" (slice "tags" "keywords")
  "document" $page
  "namedSlices" (slice (keyVals "tags" "hugo" "rocks") (keyVals "date" $page.Date))
  "fragments" (slice "heading-1" "heading-2")
}}