深色模式支持自动或手动切换,并持久保存用户偏好
hugo-fortyten — Hugo 启动器模板
作者 marcelorodrigo
Hugo FortyTen 是一个基于 Tailwind CSS 构建的极简响应式博客主题,支持深色模式、全文搜索、多语言与标签分类。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
客户端模糊全文搜索,支持键盘导航
移动优先的响应式布局,适配各类设备
基于标签的相关文章推荐与标签分类归档
内置图标、iframe 与 Strava 嵌入等自定义 shortcode
多语言支持,并输出 meta 标签、结构化元数据与 sitemap
模板详细介绍
Hugo FortyTen 是面向 Hugo 的极简响应式博客主题,使用 Tailwind CSS 构建,适合搭建以文章为主的个人博客或内容站点。主题提供自动或手动深色模式切换并保留用户偏好,内置客户端模糊全文搜索并支持键盘导航,同时带有基于标签的相关文章推荐与标签分类归档。
主题包含图标、iframe 和 Strava 嵌入等自定义 shortcode,集成 Alpine.js 提供轻量交互,并使用 Tailwind Typography 处理正文排版。主题具备多语言(l10n)支持,并输出 meta 标签、结构化元数据与 sitemap 等 SEO 相关配置。
使用前需注意环境限制:主题要求 Hugo Extended(README 标注 v0.161.0+)以处理 css.TailwindCSS,并需要 Node.js(v20+)通过 npm 安装 Tailwind CSS CLI 及相关依赖;自该版本起 Hugo 不再支持 Tailwind 独立二进制。主题通过 hugo.yaml 配置作者信息、站点元数据、菜单与搜索等。
适合你的项目吗?
适用场景
- 搭建以文章为主的个人博客
- 需要深色模式与全文搜索的内容站点
- 使用标签组织与筛选文章的多语言站点
- 需要在文章中嵌入图标、iframe 或 Strava 内容的博客
适合人群
- 使用 Hugo 并熟悉 hugo.yaml 配置的开发者
- 希望以 Tailwind CSS 定制样式的博客作者
- 需要多语言与标签分类的内容站点维护者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
在 themes 目录下克隆仓库:git clone https://github.com/marcelorodrigo/hugo-fortyten.git
- 2
在 hugo.yaml 中设置 theme: "hugo-fortyten"
- 3
需安装 Hugo Extended(README 标注 v0.161.0+),用于 css.TailwindCSS 处理
- 4
需安装 Node.js(v20+),并通过 npm 安装 tailwindcss、@tailwindcss/cli 与 @tailwindcss/typography
- 5
开发时运行 hugo server,生产构建使用 hugo --minify
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用该主题必须安装 Hugo Extended 版本(README 标注 v0.161.0 及以上),普通版 Hugo 无法处理 css.TailwindCSS,主题将无法正常构建。
- 必须安装 Node.js v20 及以上版本,并通过 npm 安装 Tailwind CSS 相关依赖,否则无法完成样式构建。
- 自 Hugo v0.161.0 起不再支持 Tailwind 独立二进制,必须改用 npm 安装 Tailwind CSS CLI,构建流程依赖 Node.js 环境。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
**Hugo Extended** (v0.161.0+) — required for `css.TailwindCSS` processing
README 原文
**Node.js** (v20+) — required for Tailwind CSS and npm dependencies
README 原文
https://github.com/marcelorodrigo/hugo-fortyten/blob/master/LICENSEhttps://github.com/marcelorodrigo/hugo-fortyten/blob/master/README.mdAs of v0.161.0, Hugo no longer supports the Tailwind standalone binary. You must install the Tailwind CSS CLI via npm.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- Hugo Themes
- 资料与维护参考分
- 资料较完整 · 75 / 100
- 技术栈
- Hugo
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-13
- 截图检查日期
- 2026-10-03
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-04
查看当时使用的来源资料
SHA-256: 8e68428de1c21f1e75e45ec6f0917f45d8fc13563b5862a8bbb9cba661717bac
2026-10-03T16:42:45.720Z
来源文件 / 仓库# Hugo FortyTen <img src="https://raw.githubusercontent.com/marcelorodrigo/hugo-fortyten/refs/heads/master/images/screenshot.jpg" alt="Hugo FortyTen Theme Preview" /> A minimalist, responsive blog theme for Hugo built with Tailwind CSS. ## Features - **Dark mode**: automatic or manual theme switching with persistent preference - **Full-text search**: client-side fuzzy search with keyboard navigation - **Responsive design**: mobile-first approach that works on all devices - **Dark mode aware**: optimize images and prose styling for light and dark themes - **Localization (l10n)**: multi-language support ready - **Shortcodes**: custom components for icons, iframes, and Strava embeds - **Related posts**: intelligent post recommendations based on tags - **Tag taxonomy**: organize and filter content by tags - **SEO optimized**: meta tags, structured metadata, and sitemap support - **Alpine.js integration**: lightweight interactivity without heavy dependencies - **Typography plugin**: beautiful prose styling with Tailwind typography ## Quick Start ### Installation ```shell cd themes git clone https://github.com/marcelorodrigo/hugo-fortyten.git ``` ### Usage Add to your `hugo.yaml`: ```yaml theme: "hugo-fortyten" ``` ### Development Start the dev server: ```shell hugo server ``` Build for production: ```shell hugo --minify ``` ## Requirements - **Hugo Extended** (v0.161.0+) — required for `css.TailwindCSS` processing - **Node.js** (v20+) — required for Tailwind CSS and npm dependencies As of v0.161.0, Hugo no longer supports the Tailwind standalone binary. You must install the Tailwind CSS CLI via npm. Verify: ```shell hugo version # Should show "extended" node --version # Should be v20+ ``` Install dependencies: ```shell npm install --save-dev tailwindcss @tailwindcss/cli @tailwindcss/typography ``` ## Configuration The theme is configured via your `hugo.yaml` file. Customize author information, site metadata, menu structure, and search settings through standard Hugo configuration. ## License Open source and free to use.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

hugo-xmin
eXtremely Minimal Hugo theme: about 140 lines of code in total, including HTML and CSS (with no dependencies)
Hugo · 启动器

hugo-theme-gallery
Gallery Theme for Hugo
Hugo · 启动器

reveal-hugo
📽️ Create rich HTML-based presentations with Hugo and Reveal.js
Hugo · 启动器

anatole
Anatole is a minimalistic two-column theme for Hugo.
Hugo · 启动器

hugo-theme-diary
Moments piled up. A Hugo theme ported from SumiMakito/hexo-theme-Journal.
Hugo · 启动器

risotto
A minimalist, responsive hugo theme inspired by terminal ricing aesthetics.
Hugo · 启动器
