Hugo-Gallery 开源项目教程

最新推荐文章于 2024-09-10 08:39:06 发布

田鲁焘Gilbert

最新推荐文章于 2024-09-10 08:39:06 发布

阅读量799

点赞数 9

本文链接：https://blog.csdn.net/gitblog_00147/article/details/141443124

版权

Hugo-Gallery 开源项目教程

hugo-galleryA gallery generator for the Hugo static site generator项目地址:https://gitcode.com/gh_mirrors/hu/hugo-gallery

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

Hugo-Gallery 是一个用于创建图片画廊的 Hugo 主题。以下是其基本的目录结构：

hugo-gallery/
├── archetypes/
│   └── default.md
├── assets/
│   └── css/
│       └── gallery.css
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── partials/
│   │   ├── footer.html
│   │   ├── gallery.html
│   │   ├── header.html
│   │   └── head.html
│   └── shortcodes/
│       └── gallery.html
├── static/
│   └── images/
├── config.toml
└── README.md

目录结构介绍：

archetypes/: 包含默认的内容模板文件。
assets/: 包含主题所需的 CSS 文件。
layouts/: 包含主题的 HTML 模板文件。
- _default/: 包含默认的页面模板。
- partials/: 包含可重用的 HTML 片段。
- shortcodes/: 包含短代码模板。
static/: 包含静态资源，如图片。
config.toml: 项目的配置文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

Hugo-Gallery 项目的启动文件主要是 config.toml 和 layouts/_default/baseof.html。

config.toml

这是 Hugo 项目的配置文件，包含了站点的基础配置，如标题、语言、主题等。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Gallery"
theme = "hugo-gallery"

layouts/_default/baseof.html

这是 Hugo 项目的基础模板文件，定义了整个站点的基本结构。

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    {{ partial "head.html" . }}
</head>
<body>
    {{ partial "header.html" . }}
    <main>
        {{ block "main" . }}{{ end }}
    </main>
    {{ partial "footer.html" . }}
</body>
</html>

3. 项目的配置文件介绍

config.toml

config.toml 文件包含了站点的基本配置信息。以下是一些常见的配置项：

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Gallery"
theme = "hugo-gallery"

[params]
    description = "A gallery of my favorite images"
    author = "John Doe"