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
- 添加文件: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 -}}
- 添加文件: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});
- 尾部添加 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 # 正则匹配: 
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
评论