From 1984cf1302d87a302b6a7267cf03335921c5efbd Mon Sep 17 00:00:00 2001 From: Franz Steininger Date: Mon, 15 Mar 2021 23:07:57 +0100 Subject: [PATCH 1/3] icons for header menu add icons to header menu items like explained in Hugo docs --- assets/scss/_nav.scss | 33 ++++++++++++++++++++++++ layouts/partials/navbar.html | 4 ++- userguide/config.toml | 3 +++ userguide/content/en/about/_index.md | 1 + userguide/content/en/community/_index.md | 1 + userguide/content/en/docs/_index.md | 1 + 6 files changed, 42 insertions(+), 1 deletion(-) diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index 6113f802c5..3950a28bae 100644 --- a/assets/scss/_nav.scss +++ b/assets/scss/_nav.scss @@ -95,4 +95,37 @@ } } } +} + +// Icons +#main_navbar { + li i { + padding-right: 0.5em; + + &:before { + display: inline-block; + text-align: center; + min-width: 1em; + } + } + .alert { + background-color: inherit; + padding:0; + color: $secondary; + border: 0; + font-weight: inherit; + + &:before { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + content: "\f0d9"; + padding-left: 0.5em; + padding-right: 0.5em; + } + } } \ No newline at end of file diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 284283b3c4..8f782910f3 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -12,9 +12,11 @@ {{ with .Page }} {{ $active = or $active ( $.IsDescendant .) }} {{ end }} + {{ $pre := .Pre }} + {{ $post := .Post }} {{ $url := urls.Parse .URL }} {{ $baseurl := urls.Parse $.Site.Params.Baseurl }} - {{ .Name }} + {{ with .Pre}}{{ $pre }}{{ end }}{{ .Name }}{{ with .Post}}{{ $post }}{{ end }} {{ end }} {{ if .Site.Params.versions }} diff --git a/userguide/config.toml b/userguide/config.toml index fa8ef30945..fb5253fb77 100644 --- a/userguide/config.toml +++ b/userguide/config.toml @@ -58,10 +58,13 @@ anchor = "smart" name = "Example Site" weight = 40 url = "https://example.docsy.dev" + pre = "" [[menu.main]] name = "GitHub" weight = 50 url = "https://github.com/google/docsy/" + pre = "" + post = "New!" [services] [services.googleAnalytics] diff --git a/userguide/content/en/about/_index.md b/userguide/content/en/about/_index.md index f16b34d2ec..e2fc666eb7 100644 --- a/userguide/content/en/about/_index.md +++ b/userguide/content/en/about/_index.md @@ -4,6 +4,7 @@ linkTitle: About menu: main: weight: 10 + pre: layout: docs --- diff --git a/userguide/content/en/community/_index.md b/userguide/content/en/community/_index.md index cdade16308..191ce2026c 100644 --- a/userguide/content/en/community/_index.md +++ b/userguide/content/en/community/_index.md @@ -3,6 +3,7 @@ title: Community menu: main: weight: 40 + pre: --- diff --git a/userguide/content/en/docs/_index.md b/userguide/content/en/docs/_index.md index ff67eb7dc8..fea25a6e5b 100755 --- a/userguide/content/en/docs/_index.md +++ b/userguide/content/en/docs/_index.md @@ -5,6 +5,7 @@ linkTitle: "Documentation" menu: main: weight: 20 + pre: --- Welcome to the Docsy theme user guide! This guide shows you how to get started creating technical documentation sites using Docsy, including site customization and how to use Docsy's blocks and templates. From d4b4419ac34152b9b650adf26f87369d16521e74 Mon Sep 17 00:00:00 2001 From: Franz Steininger Date: Mon, 15 Mar 2021 23:32:21 +0100 Subject: [PATCH 2/3] Docs for adding icons in header menu --- userguide/content/en/docs/Adding content/navigation.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md index a1aa559b67..7f1cb6ce4a 100644 --- a/userguide/content/en/docs/Adding content/navigation.md +++ b/userguide/content/en/docs/Adding content/navigation.md @@ -14,11 +14,12 @@ To add a page or section to this menu, add it to the site's `main` menu in eithe ```yaml --- -title: "Docsy Documentation" +title: "Welcome to Docsy" linkTitle: "Documentation" menu: main: weight: 20 + pre: --- ``` @@ -31,8 +32,14 @@ If you want to add a link to an external site to this menu, add it in `config.to name = "GitHub" weight = 50 url = "https://github.com/google/docsy/" + pre = "" + post = "New!" ``` +### Adding icons top-level menu + +As described in the [official Hugo docs](https://gohugo.io/content-management/menus/#add-non-content-entries-to-a-menu) it's possible to add icons by using the pre and/or post parameter for main menu items definied in your site's `config.toml` or via page front matter (see also above examples). + ### Adding a version drop-down If you add some `[params.versions]` in `config.toml`, the Docsy theme adds a From b6ade4bbb18fe7e8db5b5f306855517cba32b3f2 Mon Sep 17 00:00:00 2001 From: LisaFC Date: Mon, 22 Mar 2021 11:03:41 +0000 Subject: [PATCH 3/3] Update navigation.md Expanded the explanation a bit.... --- .../content/en/docs/Adding content/navigation.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md index 7f1cb6ce4a..60622d37ce 100644 --- a/userguide/content/en/docs/Adding content/navigation.md +++ b/userguide/content/en/docs/Adding content/navigation.md @@ -27,6 +27,17 @@ The menu is ordered from left to right by page `weight`. So, for example, a sect If you want to add a link to an external site to this menu, add it in `config.toml`, specifying the `weight`. +```yaml +[[menu.main]] + name = "GitHub" + weight = 50 + url = "https://github.com/google/docsy/" +``` + +### Adding icons to the top-level menu + +As described in the [Hugo docs](https://gohugo.io/content-management/menus/#add-non-content-entries-to-a-menu), you can add icons to the top-level menu by using the pre and/or post parameter for main menu items defined in your site's `config.toml` or via page front matter. For example, the following configuration adds the GitHub icon to the GitHub menu item, and a **New!** alert to indicate that this is a new addition to the menu. + ```yaml [[menu.main]] name = "GitHub" @@ -36,9 +47,7 @@ If you want to add a link to an external site to this menu, add it in `config.to post = "New!" ``` -### Adding icons top-level menu - -As described in the [official Hugo docs](https://gohugo.io/content-management/menus/#add-non-content-entries-to-a-menu) it's possible to add icons by using the pre and/or post parameter for main menu items definied in your site's `config.toml` or via page front matter (see also above examples). +You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default. ### Adding a version drop-down