Syntax on 我的博客

Using Hugo page bundles

Thu, 24 Mar 2022 00:00:00 +0000

Page bundles are an optional way to organize page resources within Hugo.

You can opt-in to using page bundles in Hugo Clarity with usePageBundles in your site configuration or in a page’s front matter. Read more about usePageBundles.

With page bundles, resources for a page or section, like images or attached files, live in the same directory as the content itself rather than in your static directory.

Hugo Clarity supports the use of leaf bundles, which are any directories within the content directory that contain an index.md file. Hugo’s documentation gives this example:

content
├── about
│   ├── index.md
├── posts
│   ├── my-post
│   │   ├── content1.md
│   │   ├── content2.md
│   │   ├── image1.jpg
│   │   ├── image2.png
│   │   └── index.md
│   └── my-other-post
│       └── index.md
│
└── another-section
    ├── ..
    └── not-a-leaf-bundle
        ├── ..
        └── another-leaf-bundle
            └── index.md

In the above example `content` directory, there are four leaf bundles:
about: This leaf bundle is at the root level (directly under content directory) and has only the index.md.

my-post: This leaf bundle has the index.md, two other content Markdown files and two image files. image1 is a page resource of my-post and only available in my-post/index.md resources. image2 is a page resource of my-post and only available in my-post/index.md resources.

my-other-post: This leaf bundle has only the index.md.

another-leaf-bundle: This leaf bundle is nested under couple of directories. This bundle also has only the index.md.

The hierarchy depth at which a leaf bundle is created does not matter, as long as it is not inside another leaf bundle.

Advantages to using page bundles

The image below is part of the bundle of this page, and is located at content/post/bundle/building.png. Because it’s within this page’s bundle, the markup for the image only has to specify the image’s filename, building.png.

If you ever change the name of the directory in which this Markdown file and the image reside, the reference to the image would not need to be updated.

In addition to more cleanly organizing your content and related assets, when using page bundles, Hugo Clarity will automatically generate markup for modern image formats, which are smaller in file size.

For instance, when you reference an image like building.png, Hugo Clarity will check to see if the same image (based on filename) exists in WebP, AVIF or JXL formats. If you inspect the image above, you’ll see a <source> element for building.webp, because that file is also present. Hugo Clarity will only include the markup if these images exist.

Browsers that support these formats and the <picture> element will load them, while browsers that do not will fall-back to the default image. Read more about this process.

Finally, note that page assets can be further managed and refined within the page’s front matter if you wish, and are not limited to images alone.

Disadvantages to using page bundles

Page resources in a bundle are only available to the page with which they are bundled — that means you can’t include an image with one page and then reference it from another.

Images that are being used in multiple places are more appropriate for your Hugo assets directory. Unlike files in the Hugo static directory, files in the assets directory can be run through Hugo Pipes, which includes image processing.

Markdown Syntax Guide

Mon, 11 Mar 2019 00:00:00 +0000

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Local image, alt text as caption

The following image is located within the Hugo site. Because it has alt text but no title text, the caption is generated by the alt text.

Remote image, specified caption

The following image is loaded from a remote URL. The alt text is the same (for screen readers and in cases when the image doesn’t load) but because a separate title is provided, the title is used for the caption:

Image with alt text and no caption

Alt text is always recommended for SEO, accessibility and in cases when images don’t load. However, you don’t necessarily always want an image to have a caption. In that case, use a title with one space:

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Code block with backticks

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
<!-- this line is extraneous 2Error from server (Forbidden): deployments.apps is forbidden: User "chiptest" cannot create resource "deployments" in API group "apps" in the namespace "default" -->
</html>

Code block indented with four spaces

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎