什么是 PaperMod？

PaperMod 是一个为 Hugo 设计的极简主题，以其简洁的设计、快速的加载速度和丰富的功能配置而受欢迎。它提供了现代化的外观，同时保持了高性能和易用性。

为什么选择 PaperMod？

1. 极简设计

PaperMod 采用极简主义设计理念，页面清爽，专注于内容展示。没有多余的装饰，让读者专注于你的文章。

2. 高性能

主题经过优化，加载速度快，SEO 友好。生成的网站在 Google PageSpeed Insights 上通常能获得高分。

3. 丰富的功能

  • 深色/浅色主题切换
  • 多语言支持
  • 内置搜索功能
  • 社交媒体分享
  • 代码高亮
  • 响应式设计

4. 易于定制

通过简单的配置和 CSS 覆盖，可以轻松自定义主题外观。

安装 PaperMod

方法 1：使用 Git Submodule（推荐）

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive

方法 2：直接克隆

git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

基础配置

1. 在 hugo.yaml 中启用主题

theme: PaperMod

2. 配置基本参数

params:
  title: "Your Site Title"
  description: "Site description"
  author: "Your Name"
  
  # 主题相关
  defaultTheme: auto  # auto/dark/light
  disableThemeToggle: false
  
  # 文章显示选项
  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true

主要功能配置

1. 首页配置

使用 profileMode 配置首页显示个人信息：

params:
  profileMode:
    enabled: true
    title: "Hello 👋"
    subtitle: "Welcome to my website"
    imageUrl: "/images/avatar.png"
    imageTitle: "Profile Image"
    buttons:
      - name: Blog
        url: /blog/
      - name: Tools
        url: /toolbox/

2. 菜单配置

menu:
  main:
    - name: Blog
      url: /blog/
      weight: 1
    - name: Toolbox
      url: /toolbox/
      weight: 2
    - name: About
      url: /about/
      weight: 3

3. 多语言支持

languages:
  zh:
    languageName: "中文"
    weight: 1
    menu:
      main:
        - name: 博客
          url: /blog/
          weight: 1
  en:
    languageName: "English"
    weight: 2
    menu:
      main:
        - name: Blog
          url: /blog/
          weight: 1

自定义样式

1. 创建自定义 CSS

在 assets/css/extended/ 目录下创建 CSS 文件（如 custom.css）：

/* 自定义颜色 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

/* 自定义字体 */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 自定义卡片样式 */
.post-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

2. 覆盖主题模板

在 layouts/ 目录下创建与主题相同的目录结构来覆盖模板：

layouts/
├── partials/
│   └── header.html
├── _default/
│   └── single.html
└── ...

常用前置元数据

---
title: "文章标题"
date: 2025-12-12
description: "文章描述"
tags: ["标签1", "标签2"]
categories: ["分类"]
author: "作者名"
draft: false
---

优化建议

1. 性能优化

  • 启用 Hugo 的压缩功能
  • 优化图片大小和格式
  • 使用 CDN 加速静态资源

2. SEO 优化

  • 为每篇文章添加合适的描述
  • 使用有意义的标签和分类
  • 启用 sitemap 和 robots.txt

3. 用户体验

  • 使用清晰的导航结构
  • 添加面包屑导航
  • 提供搜索功能
  • 支持深色模式

常见问题

Q: 如何修改主题颜色？

A: 在自定义 CSS 中覆盖 CSS 变量：

:root {
  --primary: #007bff;
  --secondary: #6c757d;
}

Q: 如何添加自定义字体？

A: 在 assets/css/extended/ 中添加字体导入：

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

body {
  font-family: 'Noto Sans SC', sans-serif;
}

Q: 如何禁用某些功能？

A: 在 hugo.yaml 中设置相应参数为 false：

params:
  ShowReadingTime: false
  ShowShareButtons: false
  ShowBreadCrumbs: false

总结

PaperMod 是一个功能强大且易于定制的 Hugo 主题。通过合理的配置和自定义，你可以创建一个既美观又高效的个人网站。

无论你是想建立个人博客、作品集还是文档网站，PaperMod 都能提供良好的基础。

相关资源：