hugo主题修改,调试等


hugo调试技巧

hugo函数api
Hugo 官方 Markdown 指南
Shortcodes 文档

常用调试变量/对象清单

变量/对象说明用法示例
.Page当前页面对象,几乎所有页面相关信息都在这里{{ .Page.Title }}
.Params当前页面 front matter 中的参数{{ .Params.author }}
.File当前内容文件信息,如路径、目录、扩展名{{ .File.Path }}
.Site站点全局信息,如站点配置、语言、菜单等{{ .Site.Title }}
.Site.Params站点全局配置文件 config.toml 中的 [params]{{ .Site.Params.logo }}
.IsHome布尔值,是否首页{{ if .IsHome }}首页{{ end }}
.IsPage是否为单页(单篇内容){{ if .IsPage }}单页{{ end }}
.IsSection是否为某个内容区块(Section){{ if .IsSection }}区块页{{ end }}
.IsNode是否为节点页面(Section 或列表页){{ if .IsNode }}节点页{{ end }}
.IsTaxonomy是否为分类或标签列表页{{ if .IsTaxonomy }}分类页{{ end }}
.IsTaxonomyTerm是否为分类或标签汇总页{{ if .IsTaxonomyTerm }}汇总页{{ end }}
.Title当前页面标题{{ .Title }}
.Content页面正文 HTML 内容{{ .Content }}
.RawContent页面原始 Markdown 内容{{ .RawContent }}
.Date页面发布日期{{ .Date.Format "2006-01-02" }}
.PublishDate发布日期(如果设置){{ .PublishDate }}
.Params.images如果 front matter 有图片列表参数{{ range .Params.images }}{{ . }}{{ end }}
.Resources页面关联的资源,如 Page Bundle 中的图片{{ range .Resources }}{{ .RelPermalink }}{{ end }}
.Site.Menus站点菜单配置{{ range .Site.Menus.main }}{{ .Name }}{{ end }}

调试信息

  • 启动调试
1nmp install
2hugo server --bind 0.0.0.0
  • 控制台打印调试信息
1{{ warnf "调试信息:变量 a 的值是 %v" $a }}
2{{ $c := printf "%s%s" $.File.Dir $img | absURL }}
  • 网页上直接显示变量 — printf + HTML 标签
1<p>变量 a 的值是{{ printf "%v" $a }}</p>
2<p>变量 a 的值是{{ $a }}</p>
  • 网页上格式化复杂对象
1<pre>{{ .Params | jsonify }}</pre>
  • Hugo 模板如果被多次调用,定位问题
1{{- $uid := now.UnixNano -}}
2{{ warnf "===== uid =====: [%d] " $uid }}

githug page —> cloudfare

  • 配置dns解析🔗
  • github page Enforce HTTPS

    在 Cloudflare 的 DNS 设置中把 Proxy status 全部设置为 DNS Only 状态,即灰色的云朵 设置成功之后,再开启代理

  • cloudfare SSL/TLS 设置
    • 概述:Full (strict)
    • 边缘证书:勾选始终使用 HTTPS
    • 源服务器:勾选经过身份验证的源服务器拉取

plantuml

  1. 添加文件:layouts/_default/_markup/render-codeblock.html
1{{- $language := .Type | default "text" -}}
2{{- if eq $language "plantuml" -}}
3  <pre><code class="language-plantuml">{{ .Inner | safeHTML }}</code></pre>
4{{- else -}}
5  {{ highlight .Inner $language "" }}
6{{- end -}}
  1. 添加文件:static/js/plantuml-init.js
 1const loadScript = (url, onloadFunction) => {
 2  var newScript = document.createElement("script");
 3  newScript.onerror =  (oError) => {
 4    throw new URIError("The script " + oError.target.src + " didn't load correctly.");
 5  };
 6  if (onloadFunction) { newScript.onload = onloadFunction; }
 7  document.head.insertAdjacentElement('beforeend', newScript);
 8  newScript.src = url;
 9}
10
11const loadPlantUMLOnNeed = () => {
12  let plantumlPrefix = "language-plantuml";
13
14  if (document.querySelectorAll("[class^=" + plantumlPrefix + "]").length > 0) {
15    loadScript('https://cdn.jsdelivr.net/gh/jmnote/[email protected]/dist/plantuml-encoder.min.js', () => {
16      (function(){
17        Array.prototype.forEach.call(document.querySelectorAll("[class^=" + plantumlPrefix + "]"), function(code){
18          let image = document.createElement("IMG");
19          image.loading = 'lazy';
20          image.src = 'http://www.plantuml.com/plantuml/svg/~1' + plantumlEncoder.encode(code.innerText);
21          code.parentNode.insertBefore(image, code);
22          code.style.display = 'none';
23        });
24      })();
25
26      console.log("PlantUML init done");
27    })
28  }
29}
30
31window.addEventListener('load', function(event) {
32  loadPlantUMLOnNeed();
33});
  1. 尾部添加 themes/hugo-theme-bootstrap/layouts/partials/footer.html
1<script src="/js/plantuml-init.js"></script>

删除未引用的图片

根据路径调整line:9的位置

 1import os
 2import re
 3import sys
 4
 5referenced_images = set()
 6all_image_files = set()
 7
 8# 遍历所有 .md 文件
 9for root, _, files in os.walk(os.path.join(os.path.dirname(os.path.abspath(__file__)), '../content/docs')):
10    for file in files:
11        if file.endswith('.md'):
12            md_path = os.path.join(root, file)
13            md_dir = os.path.dirname(md_path)
14
15            # 图片目录为 md 文件同目录下的 images/
16            image_folder = os.path.join(md_dir, 'images')
17
18            # 只处理存在的 images 目录
19            if not os.path.isdir(image_folder):
20                continue
21
22            # 正则匹配: ![](images/xxx.png)
23            pattern = re.compile(r'!\[.*?\]\((images/.*?\.\w+)\)')
24
25            # 读取 md 文件
26            with open(md_path, 'r', encoding='utf-8') as f:
27                content = f.read()
28
29            # 提取引用图片路径,并转换为绝对路径
30            matches = pattern.findall(content)
31            for match in matches:
32                referenced_path = os.path.normpath(os.path.join(md_dir, match))
33                referenced_images.add(referenced_path)
34
35            # 收集该目录下实际存在的 .png 图片
36            md_img_dir = os.path.splitext(os.path.join(image_folder, file))[0]
37            if  os.path.isdir(md_img_dir):
38                for img_file in os.listdir(md_img_dir):
39                    full_img_path = os.path.normpath(os.path.join(md_img_dir, img_file))
40                    all_image_files.add(full_img_path)
41
42# 找出未引用的图片并删除
43unused_images = [img for img in all_image_files if img not in referenced_images]
44
45for img in unused_images:
46    try:
47        if len(sys.argv) == 2:
48            os.remove(img)
49        print(f"🗑️ Deleted unused image: {img}")
50    except Exception as e:
51        print(f"❌ Error deleting {img}: {e}")
52
53print(f"\n✅ Done. {len(unused_images)} unused image(s) deleted.")

参考

hugo-theme-bootstrap-skeleton: ec447c05d7891b9fafa7457607db55763123ef1a
hugo-theme-bootstrap: 8ede3af8cab8d261847edb763db8fcda60540401