# 基于Tailwind CSS 4.0构建的简洁Hugo主题hugo-narrow

*Published:* 2025-06-11
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2025年6月11日，已超过 180天没有更新



一个现代化、简洁的 Hugo 主题，基于 Tailwind CSS 4.0 构建，支持自定义主题。

[![](https://www.xarjtc.com/wp-content/uploads/2025/06/d1195334ecbea5f.webp)](https://www.xarjtc.com/wp-content/uploads/2025/06/d1195334ecbea5f.webp)

**主题特色：**

多主题设计 - 内置多种主题，支持自定义主题

亮色/暗色模式 - 自动适配系统主题或手动切换，所有主题均支持暗色模式

响应式设计 - 完美适配桌面端、平板和移动设备

多语言支持 - 多种语言支持。

Markdown 增强 - 支持 GitHub 风格的 Markdown Alert，适配 Obsidian 折叠(+/-) Alert

代码块增强 - 代码块一键复制、语言显示、代码框折叠

数学公式 - KaTeX 支持

图表支持 - Mermaid 图表，支持流程图、序列图等

目录导航 - 目录支持高亮、滚动监听

多评论系统 - 支持 Giscus、Disqus、Utterances、Waline、Artalk、Twikoo

搜索功能 - 支持全站搜索

用户体验良好 - 底部 dock 包含常见功能：返回上一层、一键跳转顶部或评论区、查看目录、全站搜索

多分析平台 - 支持 Google Analytics、Microsoft Clarity、Baidu Analytics、Umami

SEO 优化 - 完整的 Open Graph、Twitter Card、JSON-LD 支持

**使用步骤：**

使用下面的命令创建 Hugo 站点并将主题作为子模块引入。

```
hugo new site myblog
cd myblog
git init
git submodule add https://github.com/tom2almighty/hugo-narrow.git themes/hugo-narrow
# 更新子模块
git submodule update --init --recursive
```

将 exampleSite 目录下的文件复制到根目录下

在 hugo.yaml 文件中修改 theme 为 hugo-narrow

运行hugo server -D 本地预览

github地址：https://github.com/tom2almighty/hugo-narrow