Hugo 主题
Hugo Saasify
一个使用 TailwindCSS 构建的,适用于 SaaS 网站的现代 Hugo 主题
- 作者:Chaoming Li
- GitHub 星星数:12
- 更新时间:2024-12-09
- 许可证:MIT
- 标签:公司响应式
Hugo Saasify 主题
一个专为 SaaS 网站设计的现代而优雅的 Hugo 主题。该主题使用 TailwindCSS 构建,在保持卓越的性能和自定义选项的同时,提供了简洁、专业的外观。
演示站点
功能
- 🎨 使用 TailwindCSS 的现代设计
- 📱 完全响应式布局
- 🚀 性能优化
- 💅 带有 Inter 和 Plus Jakarta Sans 字体的简洁排版
- 🎯 非常适合 SaaS 和商业网站
- 🛠 易于自定义
- 📦 无 jQuery,最少的 JavaScript
- 📊 支持 Google Analytics
要求
- Hugo Extended 版本(>= 0.80.0)
- Node.js (>= 14.x)
- npm 或 yarn
安装
1. 创建一个新的 Hugo 站点(如果已存在站点,请跳过)
hugo new site your-site-name
cd your-site-name
2. 将主题添加为子模块
git init
git submodule add https://github.com/chaoming/hugo-saasify-theme themes/hugo-saasify-theme
3. 示例站点(可选)
该主题附带一个功能齐全的示例站点,演示了其功能和特性。在构建自己的站点时,可以将其作为参考。
使用示例站点
- 复制示例站点内容
cp -r themes/hugo-saasify-theme/exampleSite/* .
- 示例站点包括
- 包含示例页面的完整内容结构
- 具有各种布局的博客文章
- 功能页面
- 职业/招聘部分
- 定价页面
- 公司信息页面
- 正确配置的 hugo.toml
- 启动开发服务器
npm run start
示例站点提供了一个很好的起点,可以了解如何
- 构建您的内容
- 使用不同的页面布局
- 配置导航菜单
- 设置站点参数
- 实现常见的 SaaS 网站功能
4. 安装依赖项
# Copy package.json and other config files to your site root
cp themes/hugo-saasify-theme/package.json .
cp themes/hugo-saasify-theme/postcss.config.js .
cp themes/hugo-saasify-theme/tailwind.config.js .
# Update tailwind.config.js with the following content:
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('./themes/hugo-saasify-theme/tailwind.config.js')],
content: [
"./themes/hugo-saasify-theme/layouts/**/*.html",
"./layouts/**/*.html",
"./content/**/*.{html,md}"
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
heading: ['Plus Jakarta Sans', 'sans-serif'],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
# Install dependencies
npm install
5. 配置您的 Hugo 站点
使用以下配置创建或更新您的 hugo.toml
# Basic Configuration
baseURL = "/"
languageCode = "en-us"
title = "Your Site Title"
theme = "hugo-saasify-theme"
# Required Features
pygmentsCodeFences = true # Enable syntax highlighting
pygmentsUseClasses = true
enableEmoji = true # Enable emoji support
enableGitInfo = true # Enable Git info for lastmod
# Required Module Configuration
[module]
[module.hugoVersion]
extended = true
min = "0.80.0"
# Required Build Configuration
[build]
writeStats = true # Required for TailwindCSS
# Required Markup Configuration
[markup]
[markup.highlight]
noClasses = false
lineNos = true
codeFences = true
[markup.goldmark.renderer]
unsafe = true # Allow HTML in markdown
[markup.tableOfContents]
endLevel = 3
ordered = false
startLevel = 2
# Theme Parameters
[params]
description = "Your site description"
author = "Your Name"
logo = "/images/logo.svg" # Path to your logo
# Google Analytics ID (e.g., "G-XXXXXXXXXX")
googleAnalytics = "G-XXXXXXXXXX" # Only enabled in production
# Header Configuration
[params.header]
background = "bg-white/80 backdrop-blur-sm"
border = "border-b border-gray-100"
# Header Logo
[params.header.logo]
src = "/images/logo.svg"
# Header Buttons (optional)
[params.header.buttons]
[params.header.buttons.signIn]
text = "Sign in"
url = "/signin"
[params.header.buttons.getStarted]
text = "Get Started"
url = "/get-started"
# Global CTA Configuration (optional)
[params.cta]
enable = true
title = "Ready to Get Started?"
description = "Join companies using our platform"
[params.cta.primary_button]
text = "Get Started Free"
url = "/get-started"
[params.cta.secondary_button]
text = "Book Demo"
url = "/demo"
# Social Media Links (optional)
[params.social]
linkedin = "https://linkedin.com/in/yourusername"
twitter = "https://twitter.com/yourusername"
github = "https://github.com/yourusername"
# Navigation Menu
[menu]
[[menu.main]]
name = "Features"
weight = 1
[menu.main.params]
has_submenu = true
submenu = [
{ name = "Feature 1", url = "/features/feature-1/" },
{ name = "Feature 2", url = "/features/feature-2/" }
]
[[menu.main]]
name = "Pricing"
url = "/pricing"
weight = 2
[[menu.main]]
name = "Blog"
url = "/blog"
weight = 3
此配置包括
- 基本设置:站点标题、语言和主题选择
- 必要功能:语法高亮、表情符号支持和 Git 集成
- 模块配置:Hugo 版本要求
- 构建设置:TailwindCSS 集成所需
- 标记设置:代码高亮和 Markdown 渲染选项
- 主题参数:
- 带有徽标和导航的标题配置
- 号召性用语 (CTA) 部分
- 社交媒体链接
- Google Analytics 配置(仅在生产环境中启用)
- 导航菜单:带有下拉支持的主菜单结构
开发
要启动带有实时重新加载的开发服务器
npm run start
这将
- 监视您的 TailwindCSS 样式的更改
- 运行 Hugo 开发服务器
- 在检测到更改时自动重建
要构建您的生产站点
npm run build
这将
- 构建并缩小您的 TailwindCSS 样式
- 在
public
目录中生成缩小的 Hugo 站点
自定义
颜色
该主题使用可在 tailwind.config.js
中自定义的主色和辅助配色方案
colors: {
primary: {
// Your primary color palette
},
secondary: {
// Your secondary color palette
}
}
排版
该主题对正文文本使用 Inter,对标题使用 Plus Jakarta Sans。您可以在 tailwind.config.js
中修改此设置
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
heading: ['Plus Jakarta Sans', 'sans-serif'],
}
布局组件
可以在 assets/css/main.css
中自定义按钮、卡片和部分等常见组件。
内容结构
content/
├── _index.md # Homepage content
├── blog/ # Blog posts
├── features/ # Feature pages
└── docs/ # Documentation pages
许可
本主题基于 MIT 许可证发布。
支持
如果您有任何问题或需要帮助,请提交 issue。