Configurations§
You’ll need to turn on the markup.goldmark.parser.attribute.block
, to attach attributes on title and description.
Similarly, you can attach the AOS animations on any content.
hugo.toml
1[markup]
2 [markup.goldmark]
3 [markup.goldmark.parser]
4 [markup.goldmark.parser.attribute]
5 block = true
6 title = true
toml
hugo.yaml
1markup:
2 goldmark:
3 parser:
4 attribute:
5 block: true
6 title: true
yaml
hugo.json
1{
2 "markup": {
3 "goldmark": {
4 "parser": {
5 "attribute": {
6 "block": true,
7 "title": true
8 }
9 }
10 }
11 }
12}
json
Requirements§
Module |
---|
github.com/hbstack/banner |
github.com/hugomods/aos |
Source Code§
Copy
--- title: "Header Banner Animations" description: "Apply AOS animations on header banner title and description." date: 2023-09-02T18:57:06+08:00 draft: false series: - Examples categories: - Banner tags: - AOS - Animations requirements: - github.com/hbstack/header/modules/banner - github.com/hugomods/aos header: banner: img: /images/banners/black.jpg title: | Header Banner Animations { data-aos="fade-up" } description: | Apply AOS animations on titles and descriptions to make the page impressive. { data-aos="fade-up" data-aos-delay="200" } --- ## Configurations You'll need to turn on the `markup.goldmark.parser.attribute.block`, to attach attributes on title and description. > Similarly, you can attach the AOS animations on any content. {{< bs/config-toggle hugo >}} markup: goldmark: parser: attribute: block: true title: true {{< /bs/config-toggle >}} {{% example %}}