主题模板系统：打造你的品牌风格

主题的战略意义

主题 = 品牌视觉识别

%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#e3f2fd','primaryTextColor':'#1565c0','primaryBorderColor':'#1976d2','lineColor':'#42a5f5'}}}%%
graph TB
    A[主题设计] --> B[视觉识别]
    B --> C[品牌印象]
    C --> D[专业感]
    D --> E[信任度]
    E --> F[转化率]
    
    style F fill:#42a5f5

主题的三大作用：

Hugo主题生态

为什么选择Hugo主题？

Hugo优势：

推荐主题

内容创作者主题：

推荐：PaperMod

快速安装主题

安装PaperMod

cd my-website
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

baseURL = 'https://yoursite.com/'
languageCode = 'zh-cn'
title = '你的一人公司'
theme = 'PaperMod'

[params]
  description = "专注一人公司实战经验分享"
  author = "你的名字"
  
  # 首页显示
  homeInfoParams:
    Title = "欢迎来到我的一人公司"
    Content = "分享一人公司的实战经验"
  
  # 社交链接
  [[params.socialIcons]]
    name = "twitter"
    url = "https://twitter.com/yourhandle"
  
  [[params.socialIcons]]
    name = "github"
    url = "https://github.com/yourusername"

# 菜单
[[menu.main]]
  name = "文章"
  url = "/posts/"
  weight = 1

[[menu.main]]
  name = "关于"
  url = "/about/"
  weight = 2

hugo server
# 访问 localhost:1313

主题定制

Level 1：参数定制（无需代码）

常用定制：

[params]
  # 外观
  defaultTheme = "auto"  # light/dark/auto
  disableThemeToggle = false
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true
  ShowBreadCrumbs = true
  ShowCodeCopyButtons = true
  ShowWordCount = true
  
  # 首页
  homeInfoParams:
    Title = "👋 你好，我是[你的名字]"
    Content = """
    专注一人公司，分享实战经验。
    
    这里你会学到：
    - 内容创作系统
    - 产品变现路径
    - 自动化工作流
    """
  
  # 社交图标
  [[params.socialIcons]]
    name = "email"
    url = "mailto:your@email.com"
  
  [[params.socialIcons]]
    name = "twitter"
    url = "https://twitter.com/you"
  
  [[params.socialIcons]]
    name = "youtube"
    url = "https://youtube.com/c/you"
  
  # SEO
  [params.assets]
    favicon = "/favicon.ico"
    favicon16x16 = "/favicon-16x16.png"
    favicon32x32 = "/favicon-32x32.png"
    apple_touch_icon = "/apple-touch-icon.png"
  
  # Analytics
  googleAnalytics = "UA-XXXXXXXXX-X"

Level 2：CSS定制（简单）

创建custom.css：

/* assets/css/extended/custom.css */

/* 主色调 */
:root {
    --primary: #0066cc;
    --secondary: #f3f4f6;
    --content: #1a1a1a;
    --border: #e5e7eb;
}

/* 字体 */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.8;
}

/* 标题 */
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.3;
}

/* 链接 */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 代码块 */
code {
    background: var(--secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* 引用块 */
blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 1em;
    margin-left: 0;
    font-style: italic;
    color: #666;
}

/* 按钮 */
.button {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
}

.button:hover {
    opacity: 0.9;
    text-decoration: none;
}

配置使用：

[params.assets]
  customCSS = ["css/extended/custom.css"]

Level 3：布局定制（进阶）

自定义布局：

# 复制主题layout到本地
cp -r themes/PaperMod/layouts/partials layouts/

# 现在可以修改 layouts/partials/ 下的文件

常用自定义：

品牌元素

Logo设计

<!-- layouts/partials/header.html -->
<div class="logo">
  <span class="logo-text">你的名字</span>
</div>

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
}

<div class="logo">
  <img src="/logo.svg" alt="Logo" />
</div>

配色方案

:root {
  --primary: #0066cc;
  --primary-dark: #0052a3;
  --primary-light: #3385d6;
}

:root {
  --primary: #0066cc;
  --secondary: #ff6b6b;
}

字体选择

body {
  font-family: 
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "WenQuanYi Micro Hei",
    sans-serif;
}

body {
  font-family: 
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

code, pre {
  font-family: 
    "Fira Code",
    "Cascadia Code",
    "JetBrains Mono",
    monospace;
}

模板系统

文章模板

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: []
categories: []
description: ""
---

## 引言



## 正文



## 总结

hugo new posts/my-article.md
# 自动使用模板创建

页面模板

---
title: "关于我"
url: "/about/"
layout: "about"
---

## 👋 你好

我是[名字]，专注一人公司实战。

## 💼 我在做什么

- 内容创作
- 数字产品
- 社群运营

## 📬 联系方式

- Email: your@email.com
- Twitter: @yourhandle

---
title: "我的产品"
url: "/products/"
layout: "products"
---

## 📚 电子书

### 一人公司启动手册
- 价格：$19
- [购买链接](#)

## 🎓 课程

### 内容创作系统
- 价格：$99
- [购买链接](#)

性能优化

加载速度

[minify]
  disableHTML = false
  disableCSS = false
  disableJS = false

移动端优化

常见问题

Q1: 如何更换主题？

# 1. 删除旧主题
git submodule deinit themes/old-theme
git rm themes/old-theme

# 2. 添加新主题
git submodule add https://github.com/xxx/new-theme themes/new-theme

# 3. 修改config.toml
theme = "new-theme"

# 4. 测试
hugo server

Q2: 主题更新会影响定制吗？

Q3: 如何添加新功能？

<!-- layouts/shortcodes/cta.html -->
<div class="cta-box">
  <h3>{{ .Get "title" }}</h3>
  <p>{{ .Get "description" }}</p>
  <a href="{{ .Get "link" }}" class="button">
    {{ .Get "button" }}
  </a>
</div>

{{< cta 
  title="订阅Newsletter" 
  description="每周一封深度文章"
  link="/subscribe"
  button="立即订阅"
>}}

行动指南

今天美化你的网站

总结

主题选择建议

关键原则

下一步阅读

• 加密交付结构
• 从做事到做系统
• 时间复利

打造你的品牌主题，建立专业形象！