起因

为了更好的使用Hugo模板，尝试新建一个模板，从而学习和理解模板的工作方式。
理想情况下创建属于自己的模板。

环境

hugo version查看hugo版本

hugo version
hugo v0.148.1+extended linux/amd64 BuildDate=unknown

创建

hugo new theme learn会在目录themes/下创建一个名为learn的新主题，里面包含了基本的目录结构。

learn
├── archetypes
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
└── static

与site结构对比

使用hugo new site somesite生成的目录结构，除了少一个themes目录，其他都有。
并且site的目录内都是空的，theme的目录内还带不少基础内容。
theme也可以直接用hugo serve运行起来，非常方便theme的调试。

运行

运行起来后，是一个有文本填充的Blog示例。有内容结构，但没有样式。
页面有Home、Posts、Tags，以及Post的详情页面。

引入tailwind

根据Hudo Function css.TailwindCSS，使用TailwindCSS CLI应该是最简单的方式了。

从tailwindcss github下载tailwindcss-linux-x64文件重命名为tailwindcss，放到PATH路径下，给予执行权限。

创建文件assets/css/tailwind.css，这是v4的写法。

@import "tailwindcss";

创建文件tailwind.config.js

module.exports = {
  content: [
    "./layouts/**/*.html",
    "./content/**/*.md",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建layouts/_default/baseof.html

{{ with resources.Get "css/tailwind.css" | css.TailwindCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

修改hugo.toml

[module]
[module.hugoVersion]
extended = true

[build]
writeStats = true

[security]
[security.exec]
allow = ['^tailwindcss$'] # 允许 Hugo 执行 Tailwind CLI

最后修改于 2025-07-17