Create catalog-based archetypes templates

It is possible to use full catalogs as archetypes templates in Hugo.

Preface

If you don’t want to clutter your articles with images in the same directory as your articles, you can create an images folder and put the images in it. But it’s too much of a hassle to create it manually every time, which can be simplified by setting up a directory-based template with archetypes.

This article is based on the Stack theme.

Creating a directory structure

Create a default_structure folder in the archetypes directory with an arbitrary filename and the following directory structure:

1
2
3
4
5
6

archetypes
├── default.md
└── default_structure
    ├── images
    │   └── default.png
    └── index.md

The index.md in the default_structure directory can also have template content added to it, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title:"{{ replace .Name "-" " " | title }}"
description. 
date: {{ .Date }}
image: images/default.png
hidden: false
comments: true
categories:["C++"]
tags:["C++"]
lastmod: {{ .Date }}
---

New article

Once the template is created, it’s time to create a new article to see how it looks, using the command:

1

hugo new --kind default_structure post/demo

This command will create a new folder /content/posts/demo and it will contain the same folder structure as in the default_structure prototype folder.

Note: The argument after --kind needs to be the same as the folder name of the directory structure created earlier, i.e. the default_structure directory name.

At this point the article is created and you can see that the structure of the demo directory is as expected.

1
2
3
4
5

post
└── demo
    ├── images
    │   └── default.png
    └── index.md

At the same time, the template content of demo/index.md was successfully added

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "Demo"
description: 
date: 2023-11-28T21:29:54+08:00
image: images/default.png
hidden: false
comments: true
categories: ["C++"]
tags: ["C++"]
lastmod: 2023-11-28T21:29:54+08:00
---

Summary

The archetypes prototype template allows you to create a directory structure that meets your needs.

Of course, if you don’t like the idea of having the images folder in the same directory as the article, you can also consider creating the images folder in the static directory, so that it will show up when referenced in the md file (e.g. ! [](images/one.jpg)).