Hugo Fresh 项目教程

1. 项目的目录结构及介绍

Hugo Fresh 项目的目录结构如下：

hugo-fresh/
├── archetypes/
│   └── default.md
├── assets/
│   ├── css/
│   ├── js/
│   └── scss/
├── content/
│   └── example/
├── data/
├── layouts/
│   ├── _default/
│   ├── partials/
│   └── shortcodes/
├── static/
│   ├── images/
│   └── favicon.ico
├── themes/
│   └── hugo-fresh/
├── config.toml
└── README.md

目录结构介绍

• archetypes/: 包含默认的内容模板文件。
• assets/: 存放项目的CSS、JS和SCSS文件。
• content/: 存放网站的内容文件，例如示例页面。
• data/: 存放数据文件，供模板使用。
• layouts/: 包含网站的模板文件，定义页面的布局。
• static/: 存放静态文件，如图片和favicon。
• themes/: 存放主题文件，本项目使用的是hugo-fresh主题。
• config.toml: 项目的配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

Hugo Fresh 项目的启动文件主要是 config.toml 和 layouts/ 目录下的模板文件。

config.toml

config.toml 是 Hugo 项目的配置文件，包含了网站的基本配置信息，如网站标题、语言、主题等。以下是一个示例：

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-fresh"

layouts/

layouts/ 目录下的文件定义了网站的页面布局和结构。主要的文件包括：

• layouts/_default/baseof.html: 基础模板文件，定义了页面的基本结构。
• layouts/_default/list.html: 列表页面模板。
• layouts/_default/single.html: 单个内容页面模板。
• layouts/partials/: 包含可重用的部分模板，如头部、底部等。
• layouts/shortcodes/: 包含短代码模板，用于在内容中插入动态内容。

3. 项目的配置文件介绍

config.toml

config.toml 是 Hugo 项目的主要配置文件，包含了以下关键配置项：

• baseURL: 网站的基础URL。
• languageCode: 网站的语言代码。
• title: 网站的标题。
• theme: 使用的主题名称，本项目使用的是 hugo-fresh。

此外，还可以配置其他选项，如菜单、参数、插件等。以下是一个更详细的示例：

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-fresh"

[params]
  description = "A fresh Hugo theme"
  author = "StefMa"

[menu]
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 1

通过这些配置，可以自定义网站的外观和行为。