Hugo 主题 Tailwind

使用 Tailwind CSS 构建的 Hugo 主题，主要用于博主。

请访问 https://hugo-theme-tailwind.tomo.dev/ 查看演示。

特性

• 高 Lighthouse 分数
• 暗黑模式 - 在亮色和暗黑模式之间切换，或根据系统偏好设置默认模式。
• 感谢 tabler icons 提供的 SVG 图标
• Google Analytics - 将您的 Google Analytics ID 添加到 hugo.toml
• disqus 和 giscus 的评论设置
• 社交媒体链接数据设置
• 其他短代码：bilibili，asciinema
• 响应式设计
• 多语言
• 用于懒加载和 srcset 的默认图像处理
• 搜索（使用 fuse.js 和 mark.js）
• 文章的图像支持（在前言中使用 image 参数）
• 文章的结构化数据 JSON-LD（在配置文件或前言中启用 jsonLD）
• 简单的 PWA 支持 - 请查看配置文件中的 params.pwa

安装

您可以使用 git 子模块或 Hugo 模块安装主题。

Git 子模块

通过在您的 Hugo 站点的根目录中运行以下命令，将主题添加为子模块

git submodule add https://github.com/tomowang/hugo-theme-tailwind.git themes/tailwind
# Or to update to the latest version
git submodule update --remote

Hugo 模块

1. 首先，为您的 Hugo 站点初始化模块：hugo mod init github.com/username/xxxx
2. 然后，在您的 hugo.toml 中添加模块导入

[module]
  [[module.imports]]
    path = "github.com/tomowang/hugo-theme-tailwind"

3. 最后，运行 hugo mod get -u 下载主题。

配置

[!IMPORTANT] exampleSite 的 giscus 设置使用了我自己的个人资料仓库。您**应该**将其更改为您自己的仓库（使用 https://giscus.app/）。

您可以使用以下配置进行基本使用。

baseURL = "https://example.com/"
title = "Hugo Theme Tailwind Example Site"
author = "Your Name"
copyright = "Your Name"
pagination.pagerSize = 10
languageCode = "en"
theme = "tailwind"

[markup]
  _merge = "deep"

[params]
  # dir name of your blog content (default is `content/posts`).
  # the list of set content will show up on your index page (baseurl).
  contentTypeName = "posts"

  [params.header]
    logo = "logo.webp"

  [params.footer]
    since = 2023
    poweredby = true

[menu]

  [[menu.main]]
    identifier = "post"
    name = "Post"
    pageRef = "/posts"
    weight = 10

  [[menu.main]]
    identifier = "about"
    name = "About"
    pageRef = "/about"
    weight = 20

[taxonomies]
category = "categories"
tag = "tags"
series = "series"

有关高级用法，请参阅配置目录 config/_default 和 exampleSite/config/_default。一些配置选项是

• markup：goldmark 和 markdown 渲染选项
• params.header：页眉设置（徽标和固定导航栏）
• params.footer：页脚设置（版权年份、技术支持等）
• contentTypeName：您的博客内容的目录名称（默认为 content/posts）。
• params.taxonomies.icons：分类（类别、标签、系列等）的图标。
• params.giscus：giscus 设置
• params.social_media：页脚中显示的社交媒体链接
• params.search：搜索设置
• params.author：JSON-LD 中使用的作者
• params.showAuthor：在文章列表和文章页面中显示作者姓名
• params.jsonLD：启用或禁用 JSON-LD（默认禁用）
• params.pwa：启用或禁用 PWA（默认禁用）

对于社交媒体链接数据，您可以参考 params.social_media.items 中的条目（您可以在 params.social_media.items 中添加更多或禁用现有条目）。

[[social_media.items]]
enabled = false
title = 'Facebook'
icon = 'brand-facebook'
link = 'https://#/'

开发

扩展功能

主题文件夹结构如下

您可以通过在您的站点文件夹中创建以下文件来扩展主题

• layouts/partials/custom_head.html
• layouts/partials/custom_footer.html

更新样式表

此主题使用 Tailwind CSS 进行样式设置。如果您想进行一些更改，请使用 pnpm install 安装依赖项。

• 开发：pnpm dev，这将为主题用户生成 css 并启动示例站点。

exampleSite 是从 https://github.com/gohugoio/hugoBasicExample 获取的，并进行了一些修改。

添加新图标

在 tabler icons 中搜索图标。**下载**或**复制 SVG** 并粘贴到 theme/tailwind/assets/icons/。记住删除 SVG 文件中的 width="24" height="24"。在您的站点配置中使用图标文件名。或者，如果您想更新主题布局内容，可以使用以下代码。

<i class="h-6 w-6 flex-none">
  {{ partial "icon.html" "brightness-down" }}
</i>

星星历史

另请参阅

• Adritian-Free-Hugo-Theme
• Hugoplate
• Yue
• 用于个人博客和文档的 Bootstrap 主题
• Bear Cub