返回
Featured image of post Hugo 页面布局

Hugo 页面布局

front matter

文档最上方的模块。用来定义文章标题、描述等元数据

文章路径有一系列规则,简而言之,会根据文章在 content 的目录路径、front matter中定义的 slug,文章名称等生成 URL,例如我的文章目录结构如下

/content/post/demo.md 则会对应生成 https://blog.kkfreedom.top/post/demo.html 如果 demo.md 中定义了 slug 则会替换 demo.html 为 slug.html

front matter 中还可以定义 type和 layout,例如我们需要给某篇文章使用不同的页面布局,就可以定义 type:new layout:mylayout,同时按照如下路径添加文件

layouts/new/mylayout.html

也可以通过 url 直接定制文章的 url,该字段值的优先级最高,即如果显式设置了 url 则会覆盖其余所有设置

front matter 常用字段

  • weight 非 0 数字代表的权重,数字越小优先级越高。可以实现置顶的效果
  • draft 如果设置为 true,不会渲染发布
  • layout 自定义页面布局
  • type 文章的类型,可以结合layout 给某篇文章定义单独的布局

页面布局 layouts

  • 主页- layouts/index.html
  • 归档 - partials/article-list partial 可以理解是hugo提供的模板关键字,可以用来调用其他partial模板
  • 文章 - layouts/article/article.html
Built with Hugo
Theme Stack designed by Jimmy