页头横幅动画

2023年9月2日 1 分钟阅读横幅示例 AOS 动画

于页头横幅标题和描述上应用 AOS 动画。

本页内容

赞助

配置

你需要开启 markup.goldmark.parser.attribute.block 以于标题和描述上添加属性。

类似地，你可以于任意内容添加属性。

hugo.toml

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.parser]
4      [markup.goldmark.parser.attribute]
5        block = true
6        title = true

hugo.yaml

1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true
6        title: true

hugo.json

 1{
 2   "markup": {
 3      "goldmark": {
 4         "parser": {
 5            "attribute": {
 6               "block": true,
 7               "title": true
 8            }
 9         }
10      }
11   }
12}

Requirements

Module
`github.com/hbstack/header/modules/banner`
`github.com/hugomods/aos`

Source Code

 1---
 2header:
 3  banner:
 4    description: |
 5      于页头横幅标题和描述上应用 AOS 动画，使页面给人留下深刻印象。
 6      { data-aos="fade-up" data-aos-delay="200" }      
 7    img: /images/banners/black.jpg
 8    title: |
 9      页头横幅动画
10      { data-aos="fade-up" }      
11---