↓跳过正文
  1. Teches/
  2. 前端/
  3. Hugo/

Hugo理解

技 hugo 前端 learning
·309 字
目录

hugo工作流程
#

  1. 导入主题后，完成自定义配置和资源
</> markdown
 1- config yaml/toml/json
 2- assets
 3    - css
 4    - js
 5    - images
 6- layouts
 7  - 404.html : 404错误页面模板
 8  - _default/ : 默认模板
 9    - baseof.html : 基础模板框架
10    - list.html : 列表页模板（如分类、标签页）
11    - single.html : 单内容页模板（如文章页）
12    - terms.html : 分类列表模板（如所有标签的列表）
13  - partials/ : 可重用部分模板
14    - header.html : 页头部分
15    - footer.html : 页脚部分
16    - head.html : <head>部分
17    - ... : 其他部分模板
18  - shortcodes/ : 短代码模板
19    - figure.html : 图片短代码
20    - ... : 其他短代码
21  - index.html : 首页模板
22  - section/ : 分区模板（如博客、文档等）
23    - blog.html : 博客分区模板
24    - ... : 其他分区模板
25  - taxonomy/ : 分类法模板
26    - category.html : 分类页面模板
27    - tag.html : 标签页面模板
28  - ... : 其他自定义模板

所有layouts模板均可

  1. 通过 {{ define “blockname” }} 和 {{ block }} 继承主题逻辑
    限制：需要原模板使用{{ block “blockname” . }}定义了对应block，才能继承这个block，并添加自定义逻辑
</> html
1{{ define "blockname" }}
2
3    <!-- 你的自定义内容 -->
4    <div>...</div>
5{{ end }}
  1. 直接复制主题的模板文件到自定义html中更改

自定义配置和资源
#

config/_default 中的 yaml/toml/json格式基础全局配置
#

  1. 所有配置文件可以随意增加用户自定义参数，但不同的文件中可能有不同的预定义参数
  2. 一般分为
  • config.yaml
    config配置一般是hugo原生预定义参数
</> yaml
 1# 部署网页url，如部署在Github pages上，需要改为github page的url，本地开发时无影响
 2baseURL: "http://example.org"
 3# 网站title
 4title: "nayun blog"
 5# 网站默认语言，影响本地化设置
 6languageCode: "zh-cn"
 7# 文档（内容文件）默认语言
 8defaultContentLanguage: "zh-cn"
 9# 主题
10theme: "blowfish"
11# markup也即markdown 相关设置
12# 参考https://hugo.opendocs.io/getting-started/%E9%85%8D%E7%BD%AE%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/
13markup: 
14  goldmark:
15    renderer:
16      hardWraps: True       # markup.goldmark.renderer.hardWraps 硬换行，md文档中强制单个回车换行（默认回车不会换行，而是双空格换行）
  • menu.yaml
    导航栏目录，原生预定义参数，但不同主题可能有不同的主题预定义参数，以实现不同的效果，比如icon
</> yaml
1main:
2  - identifier: "tech"
3    name: "技"
4    url: "/tech/"
5    weight: 2
  • params.yaml
    完全由主题预定义参数构成

Blowfish调用链
#

graph LR A[baseof.html] --> B[head.html] A --> C[header.html] A --> D[main content] A --> E[footer.html] B --> F[CSS 资源] B --> G[预加载资源] C --> H[导航栏部分] E --> I[JS 资源] F --> F1[main.min.css] F --> F2[syntax.min.css] F --> F3[第三方字体] G --> G1[preload 字体] G --> G2[preload 图标] I --> I1[theme.min.js] I --> I2[第三方 JS] I1 --> I1a[暗黑模式切换] I1 --> I1b[移动端菜单] I2 --> I2a[Alpine.js] I2 --> I2b[HTMX]