From 863e70863a9d1333d0d1512ddf3b322e1c6c9871 Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 6 Jun 2023 10:49:38 +0200 Subject: [PATCH 01/10] Documents the body_class parameter --- .../en/docs/adding-content/lookandfeel.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index eb3c93f2c..bece4c4f1 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -527,4 +527,22 @@ which is used by all the other page templates: ``` +## Adding custom class to the body element + +Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. Docsy automatically adds the value of the `body_class` parameter of the frontmatter to the `class` attribute of the `body` element of the page. + +By default, Docsy adds the `td-section` class, like this: + +```html + +``` + +To add the classes `myclass` and `anotherclass`, add the following line to the frontmatter of the page: + +```toml +body_class: "myclass anotherclass" +``` + +To apply the custom class 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. + [bs-docs]: https://getbootstrap.com/docs/ From e8c0f98254d592eb7cff8036e3ff88bd94b588af Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 6 Jun 2023 10:53:27 +0200 Subject: [PATCH 02/10] Minor clarification --- userguide/content/en/docs/adding-content/lookandfeel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index bece4c4f1..0cf433d55 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -531,7 +531,7 @@ which is used by all the other page templates: Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. Docsy automatically adds the value of the `body_class` parameter of the frontmatter to the `class` attribute of the `body` element of the page. -By default, Docsy adds the `td-section` class, like this: +By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of the page, like section, blog, and so on. For example: ```html From 3a65db1b7573b2db98820d7eb3532c50eb7687c4 Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 6 Jun 2023 12:57:28 +0200 Subject: [PATCH 03/10] Corrections from review comments --- .../en/docs/adding-content/lookandfeel.md | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 0cf433d55..20d20cc56 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -529,18 +529,33 @@ which is used by all the other page templates: ## Adding custom class to the body element -Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. Docsy automatically adds the value of the `body_class` parameter of the frontmatter to the `class` attribute of the `body` element of the page. - By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of the page, like section, blog, and so on. For example: ```html ``` +Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. To do so, add the `body_class` parameter to the frontmatter of your page. The value of the parameter will be then added to the class attribute of your page's body element. + To add the classes `myclass` and `anotherclass`, add the following line to the frontmatter of the page: -```toml -body_class: "myclass anotherclass" +{{< tabpane persistLang=false >}} +{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="hugo.toml" lang="toml" >}} +body_class = "myclass anotherclass" +{{< /tab >}} +{{< tab header="hugo.yaml" lang="yaml" >}} +body_class : "myclass anotherclass" +{{< /tab >}} +{{< tab header="hugo.json" lang="json" >}} +"body_class" = "myclass anotherclass" +{{< /tab >}} +{{< /tabpane >}} + +The output will look like: + +```html + ``` To apply the custom class 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. From f889badcdd2712e6c3521080a49b2e9fe9ad2000 Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 6 Jun 2023 13:00:21 +0200 Subject: [PATCH 04/10] Fix json example --- userguide/content/en/docs/adding-content/lookandfeel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 20d20cc56..cff7f50c7 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -548,7 +548,7 @@ body_class = "myclass anotherclass" body_class : "myclass anotherclass" {{< /tab >}} {{< tab header="hugo.json" lang="json" >}} -"body_class" = "myclass anotherclass" +"body_class" : "myclass anotherclass" {{< /tab >}} {{< /tabpane >}} From 291979bbf3bf40b19b4052cc37c2ddf46516be3f Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 2 Jul 2024 12:55:43 +0200 Subject: [PATCH 05/10] Update userguide/content/en/docs/adding-content/lookandfeel.md Co-authored-by: Patrice Chalin --- userguide/content/en/docs/adding-content/lookandfeel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index cff7f50c7..04410c10e 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -545,7 +545,7 @@ To add the classes `myclass` and `anotherclass`, add the following line to the f body_class = "myclass anotherclass" {{< /tab >}} {{< tab header="hugo.yaml" lang="yaml" >}} -body_class : "myclass anotherclass" +body_class : myclass anotherclass {{< /tab >}} {{< tab header="hugo.json" lang="json" >}} "body_class" : "myclass anotherclass" From 2f636908bb0f0807868cdfaa8531db300a737905 Mon Sep 17 00:00:00 2001 From: Robert Fekete Date: Tue, 2 Jul 2024 12:55:50 +0200 Subject: [PATCH 06/10] Update userguide/content/en/docs/adding-content/lookandfeel.md Co-authored-by: Patrice Chalin --- userguide/content/en/docs/adding-content/lookandfeel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 04410c10e..0503843cd 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -552,7 +552,7 @@ body_class : myclass anotherclass {{< /tab >}} {{< /tabpane >}} -The output will look like: +The page's opening body tag will look like this (assuming it is a section page): ```html From 4649ce76f510c3743c06f4ac095db7d80e4f493c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 7 Aug 2024 12:30:43 -0400 Subject: [PATCH 07/10] Review comment fixes & fix format --- .../en/docs/adding-content/lookandfeel.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 0503843cd..242a441ca 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -529,16 +529,23 @@ which is used by all the other page templates: ## Adding custom class to the body element -By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of the page, like section, blog, and so on. For example: +By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of +the page, like section, blog, and so on. For example: + ```html ``` -Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. To do so, add the `body_class` parameter to the frontmatter of your page. The value of the parameter will be then added to the class attribute of your page's body element. +Sometimes it's useful to assign custom classes to a page, or to an entire +section, for example, to apply custom styling. To do so, add the `body_class` +parameter to the frontmatter of your page. The value of the parameter will then +be added to the class attribute of your page's body element. -To add the classes `myclass` and `anotherclass`, add the following line to the frontmatter of the page: +To add the classes `myclass` and `anotherclass`, add the following line to the +frontmatter of the page: + {{< tabpane persistLang=false >}} {{< tab header="Configuration file:" disabled=true />}} {{< tab header="hugo.toml" lang="toml" >}} @@ -554,10 +561,14 @@ body_class : myclass anotherclass The page's opening body tag will look like this (assuming it is a section page): + ```html ``` -To apply the custom class 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. +To apply the custom class 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. [bs-docs]: https://getbootstrap.com/docs/ From 9e71398e6d7690970e87165b4793d9cc1b0c90cd Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 7 Aug 2024 12:33:51 -0400 Subject: [PATCH 08/10] Fix tabs header and spelling --- .../content/en/docs/adding-content/lookandfeel.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 242a441ca..6d42cbfaa 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -3,7 +3,7 @@ title: Look and Feel date: 2017-01-05 weight: 2 description: Customize colors, fonts, code highlighting, and more for your site. -spelling: cSpell:ignore wordmark docsy +spelling: cSpell:ignore wordmark docsy myclass anotherclass --- By default, a site using Docsy has the theme's default fonts, colors, and @@ -539,15 +539,15 @@ the page, like section, blog, and so on. For example: Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. To do so, add the `body_class` -parameter to the frontmatter of your page. The value of the parameter will then +parameter to the front matter of your page. The value of the parameter will then be added to the class attribute of your page's body element. To add the classes `myclass` and `anotherclass`, add the following line to the -frontmatter of the page: +front matter of the page: {{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="Front matter :" disabled=true />}} {{< tab header="hugo.toml" lang="toml" >}} body_class = "myclass anotherclass" {{< /tab >}} @@ -568,7 +568,7 @@ The page's opening body tag will look like this (assuming it is a section page): To apply the custom class 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 +feature of Hugo in your configuration file, or in the front matter of the highest-level page you want to modify. [bs-docs]: https://getbootstrap.com/docs/ From 7b1dfd9cea6e4f2b4e76621c491923d00108e97a Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 7 Aug 2024 12:34:56 -0400 Subject: [PATCH 09/10] Ok to persist the pane settings --- userguide/content/en/docs/adding-content/lookandfeel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index 6d42cbfaa..a6be08b9b 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -546,7 +546,7 @@ To add the classes `myclass` and `anotherclass`, add the following line to the front matter of the page: -{{< tabpane persistLang=false >}} +{{< tabpane >}} {{< tab header="Front matter :" disabled=true />}} {{< tab header="hugo.toml" lang="toml" >}} body_class = "myclass anotherclass" From 7270fa120e93b2d9ac191ed3cc7f1d9d7a6f9f70 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 7 Aug 2024 12:36:36 -0400 Subject: [PATCH 10/10] Actually, this isn't hugo config, dropping the tabbed pane! --- .../en/docs/adding-content/lookandfeel.md | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index a6be08b9b..5a2fb44c5 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -545,19 +545,9 @@ be added to the class attribute of your page's body element. To add the classes `myclass` and `anotherclass`, add the following line to the front matter of the page: - -{{< tabpane >}} -{{< tab header="Front matter :" disabled=true />}} -{{< tab header="hugo.toml" lang="toml" >}} -body_class = "myclass anotherclass" -{{< /tab >}} -{{< tab header="hugo.yaml" lang="yaml" >}} -body_class : myclass anotherclass -{{< /tab >}} -{{< tab header="hugo.json" lang="json" >}} -"body_class" : "myclass anotherclass" -{{< /tab >}} -{{< /tabpane >}} +```yaml +body_class: myclass anotherclass +``` The page's opening body tag will look like this (assuming it is a section page):