Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make it possible to add custom attributes to the body tag #1542

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Make it possible to add custom attributes to the body tag #1542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6951fd0
Make it possible to add custom attributes to the body tag
fekete-robert Jun 6, 2023
43930ba
Adds documentation
fekete-robert Jun 6, 2023
c00ab0f
Adds cascade to documentation
fekete-robert Jun 6, 2023
74f8352
Merge branch 'main' into add-body-attribute
fekete-robert Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}" {{ with .Page.Params.body_attribute }} {{ . | safeHTMLAttr }}{{ end }}>
<header>
{{ partial "navbar.html" . }}
</header>
Expand Down
2 changes: 1 addition & 1 deletion layouts/blog/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }} td-blog {{- with .Page.Params.body_class }} {{ . }}{{ end }}">
<body class="td-{{ .Kind }} td-blog {{ with .Page.Params.body_class }} {{ . }}{{ end }}" {{ with .Page.Params.body_attribute }} {{ . | safeHTMLAttr }}{{ end }}>
<header>
{{ partial "navbar.html" . }}
</header>
Expand Down
2 changes: 1 addition & 1 deletion layouts/docs/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}" {{ with .Page.Params.body_attribute }} {{ . | safeHTMLAttr }}{{ end }}>
<header>
{{ partial "navbar.html" . }}
</header>
Expand Down
2 changes: 1 addition & 1 deletion layouts/docs/baseof.print.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}" {{ with .Page.Params.body_attribute }} {{ . | safeHTMLAttr }}{{ end }}>
<header>
{{ partial "navbar.html" . }}
</header>
Expand Down
17 changes: 17 additions & 0 deletions userguide/content/en/docs/adding-content/lookandfeel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,3 +337,20 @@ Both `head.html` and `scripts.html` are then used to build Docsy's [base page la
</html>
```

## Adding custom attributes to the body element

Sometimes it's useful to assign custom attributes to a page, or to an entire section. Docsy automatically adds the value of the `body_attribute` parameter of the frontmatter as an attribute of the `body` element of the page.

For example, to add the `data-pagefind-filter="section:4.0"` attribute, add the following line to the frontmatter of the page:

```toml
body_attribute: data-pagefind-filter="section:4.0"
```

The output of the page will look something like:

```html
<body class="td-page" data-pagefind-filter="section:4.0">
```

To apply the custom attribute to every page of a section or a directory, use the [Front Matter Cascade](https://gohugo.io/content-management/front-matter/#front-matter-cascade) feature of Hugo in your configuration file, or in the frontmatter of the highest-level page you want to modify.