add documentation for different menu types

uci-hugo-doc
Robert Kaussow 2020-12-22 13:15:36 +01:00
parent 2f90aa4d95
commit ee380e697d
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
8 changed files with 85 additions and 4 deletions

View File

@ -12,3 +12,4 @@ pre-build
submodule submodule
GPL GPL
IcoMoon IcoMoon
YAML

View File

@ -1,5 +1,11 @@
There are multiple ways to add code blocks. Most of them works out of the box only the Hugo shortcode `<highlight>` need some configuration to work properly. There are multiple ways to add code blocks. Most of them works out of the box only the Hugo shortcode `<highlight>` need some configuration to work properly.
<!-- spellchecker-disable -->
{{< toc >}}
<!-- spellchecker-enable -->
## Inline code ## Inline code
To display an inline shortcode use single quotes: To display an inline shortcode use single quotes:

View File

@ -41,4 +41,4 @@ a:visited { color: #73bfb8 }
And that is how the result will looks like. Happy customizing! And that is how the result will looks like. Happy customizing!
[![HC-primary Color Scheme](/media/color_scheme_example.png)](/media/color_scheme_example.png) [![HC-primary Color Scheme](/media/colorscheme-example.png)](/media/colorscheme-example.png)

View File

@ -3,6 +3,12 @@ title: Configuration
weight: -10 weight: -10
--- ---
<!-- spellchecker-disable -->
{{< toc >}}
<!-- spellchecker-enable -->
## Site configuration ## Site configuration
{{< tabs "site-config" >}} {{< tabs "site-config" >}}

View File

@ -1,4 +1,10 @@
The theme supports two different kinds of menus. [File-tree menu](#file-tree-menu) is the default one and does not require further configuration to work. If you want full control about your menu the [bundle menu](#bundle-menu) is a powerful option to accomplish it. The theme supports two different kinds of menus. File-tree menu is the default one and does not require further configuration to work. If you want full control about your menu the bundle menu is a powerful option to accomplish it.
<!-- spellchecker-disable -->
{{< toc >}}
<!-- spellchecker-enable -->
## File-tree menu ## File-tree menu
@ -6,7 +12,7 @@ As the name already suggests, the file tree menu builds a menu from the file sys
**Example:** **Example:**
A file structure like shown below... File system structure:
```plain ```plain
content/ content/
@ -23,8 +29,70 @@ content/
└── level-2-2.md └── level-2-2.md
``` ```
... results in a menu that looks like this. Generated navigation:
[![Example file-tree menu](/media/file-tree.png)](/media/file-tree.png) [![Example file-tree menu](/media/file-tree.png)](/media/file-tree.png)
## Bundle menu ## Bundle menu
This type of navigation needs to be enabled first by setting `geekdocMenuBundle` to `true` in your [site configuration](/usage/configuration/#site-configuration). After you have activated the bundle menu, you start with an empty navigation. This is intentional because bundle menus have to be defined manually in a data file. While this increases the effort it also offers maximum flexibility in the design. The data file needs to be written in YAML and placed at `data/menu/main.yml`.
**Example:**
```YAML
---
main:
- name: Level 1
ref: "/level-1"
icon: "notification"
sub:
- name: Level 1.1
ref: "/level-1/level-1-1"
- name: Level 1.2
ref: "/level-1/level-1-2"
- name: Level 1.3
ref: "/level-1/level-1-3"
sub:
- name: Level 1.3.1
ref: "/level-1/level-1-3/level-1-3-1"
- name: Level 2
ref: "/level-2"
sub:
- name: Level 2.1
ref: "/level-2/level-2-1"
- name: Level 2.2
ref: "/level-2/level-2-2"
```
As an advantage you can add icons to your menu entries e.g. `icon: "notification"`.
[![Example bundle menu](/media/bundle-menu.png)](/media/bundle-menu.png)
### More menu
{{< hint info >}}
**Tip**\
The more menu is special type of the bundle menu and can be combined with the default file-tree menu.
{{< /hint >}}
As this is a special type of the bundle menu it is basically working in the same way. To enable it just add a data file to `data/menu/more.yml`. The more menu will also work with the file-tree menu and therefor **don't need to be enabled** by the `geekdocMenuBundle` parameter.
**Example:**
```YAML
---
more:
- name: News
ref: "/#"
icon: "notification"
- name: Releases
ref: "https://github.com/thegeeklab/hugo-geekdoc/releases"
external: true
icon: "download"
- name: "View Source"
ref: "https://github.com/thegeeklab/hugo-geekdoc"
external: true
icon: "github"
```
[![Example bundle menu](/media/more-menu.png)](/media/more-menu.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View File

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB