mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
menu: control sub-menu expansion #49
This commit is contained in:
Sören Weber
parent
2fcc3979b4
commit
a69236d160
11 changed files with 51 additions and 58 deletions
|
|
@ -102,6 +102,8 @@ Each Hugo page has to define a [Front Matter](https://gohugo.io/content/front-ma
|
|||
disableToc = "false"
|
||||
# If set, this will be used for the page's menu entry (instead of the `title` attribute)
|
||||
menuTitle = ""
|
||||
# If set, this will explicitly override common rules for the expand state of a page's menu entry
|
||||
alwaysopen = true
|
||||
# The title of the page in menu will be prefixed by this HTML content
|
||||
pre = ""
|
||||
# The title of the page in menu will be postfixed by this HTML content
|
||||
|
|
@ -159,6 +161,20 @@ menuTitle = "Linux"
|
|||
+++
|
||||
```
|
||||
|
||||
### Override expand state rules for menu entries
|
||||
|
||||
You can change how the theme expands menu entries on the side of the content with the `alwaysopen` setting on a per page basis. If `alwaysopen=false` for any given entry, its children will not be shown in the menu as long as it is not necessary for the sake of navigation.
|
||||
|
||||
The theme generates the menu based on the following rules:
|
||||
|
||||
- all parent entries of the active page including their siblings are shown regardless of any settings
|
||||
- immediate children entries of the active page are shown regardless of any settings
|
||||
- if not overridden, all other first level entries behave like they would have been given `alwaysopen=false`
|
||||
- if not overridden, all other entries of levels besides the first behave like they would have been given `alwaysopen=true`
|
||||
- all visible entries show their immediate children entries if `alwaysopen=true`; this proceeds recursivley
|
||||
- all remaining entries are not shown
|
||||
|
||||
You can see this feature in action on the example page for [children shortcode]({{< relref "shortcodes/children" >}}) and its children pages.
|
||||
## Homepage
|
||||
|
||||
To configure your home page, you basically have three choices:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title : Children
|
||||
description : List the child pages of a page
|
||||
alwaysopen : false
|
||||
---
|
||||
|
||||
Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
+++
|
||||
title = "page 1"
|
||||
description = "This is a demo child page"
|
||||
alwaysopen = false
|
||||
+++
|
||||
|
||||
This is a demo child page
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
title = "page 1-1-2"
|
||||
description = "This is a demo child page"
|
||||
+++
|
||||
|
||||
This is a demo child page
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
title = "page 1-1-2-1"
|
||||
description = "This is a demo child page"
|
||||
+++
|
||||
|
||||
This is a demo child page
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
title = "page 1-1-2-2"
|
||||
description = "This is a demo child page"
|
||||
+++
|
||||
|
||||
This is a demo child page
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
+++
|
||||
title = "page 2"
|
||||
description = ""
|
||||
alwaysopen = false
|
||||
+++
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
+++
|
||||
title = "page 3"
|
||||
description = "This is a demo child page"
|
||||
alwaysopen = false
|
||||
+++
|
||||
|
||||
This is a demo child page, not displayed in the menu
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
title = "page 4"
|
||||
description = "This is a demo child page"
|
||||
hidden = true
|
||||
alwaysopen = false
|
||||
+++
|
||||
|
||||
This is a demo child page, not displayed in the menu
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
<ul class="topics">
|
||||
{{if eq .Site.Params.ordersectionsby "title"}}
|
||||
{{range .Site.Home.Sections.ByTitle}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" false }}
|
||||
{{end}}
|
||||
{{else}}
|
||||
{{range .Site.Home.Sections.ByWeight}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" false }}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</ul>
|
||||
|
|
@ -102,20 +102,16 @@
|
|||
{{ $showvisitedlinks := .showvisitedlinks }}
|
||||
{{ $currentNode := .currentnode }}
|
||||
{{ $currentFileUniqueID := "" }}
|
||||
{{ $alwaysopen := .alwaysopen }}
|
||||
{{ with $currentNode.File }}{{ $currentFileUniqueID = .UniqueID }}{{ end }}
|
||||
{{with .sect}}
|
||||
{{if and .IsSection (or (not .Params.hidden) $.showhidden)}}
|
||||
{{safeHTML .Params.head}}
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item
|
||||
{{if .IsAncestor $currentNode }}parent{{end}}
|
||||
{{if eq .File.UniqueID $currentFileUniqueID}}active{{end}}
|
||||
{{if .Params.alwaysopen}}parent{{end}}
|
||||
">
|
||||
{{ $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if eq .File.UniqueID $currentFileUniqueID}} active{{else if .IsAncestor $currentNode }} parent{{else if $currentAlwaysopen}} parent{{end}}">
|
||||
<a href="{{.RelPermalink}}">
|
||||
{{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
|
||||
{{ if $showvisitedlinks}}
|
||||
<i class="fas fa-check read-icon"></i>
|
||||
{{ end }}
|
||||
{{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
|
||||
</a>
|
||||
{{ $numberOfPages := (add (len ( where .Pages "Params.hidden" "ne" true )) (len ( where .Sections "Params.hidden" "ne" true ))) }}
|
||||
{{ if ne $numberOfPages 0 }}
|
||||
|
|
@ -130,14 +126,14 @@
|
|||
{{ range $pages.ByTitle }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{else}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" true}}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
{{else}}
|
||||
{{ range $pages.ByWeight }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{else}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" true}}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
{{end}}
|
||||
|
|
@ -145,10 +141,10 @@
|
|||
{{ end }}
|
||||
</li>
|
||||
{{else if not .Params.Hidden }}
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item {{if eq .File.UniqueID $currentFileUniqueID}}active{{end}}">
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if eq .File.UniqueID $currentFileUniqueID}} active{{end}}">
|
||||
<a href="{{ .RelPermalink}}">
|
||||
{{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
|
||||
{{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
|
||||
{{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
|
||||
{{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -190,43 +190,6 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
|
|||
#sidebar a.padding {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#sidebar h5 {
|
||||
margin: 2rem 0 0;
|
||||
position: relative;
|
||||
line-height: 2;
|
||||
}
|
||||
#sidebar h5 a {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
#sidebar h5 i {
|
||||
color: rgba(204, 204, 204, 0.6);
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 0.7rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
#sidebar h5.parent a {
|
||||
background: #201b24;
|
||||
color: #d9d9d9 !important;
|
||||
}
|
||||
#sidebar h5.active a {
|
||||
background: #fff;
|
||||
color: #777 !important;
|
||||
}
|
||||
#sidebar h5.active i {
|
||||
color: #777 !important;
|
||||
}
|
||||
#sidebar h5 + ul.topics {
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
#sidebar h5.parent + ul.topics, #sidebar h5.active + ul.topics {
|
||||
display: block;
|
||||
}
|
||||
#sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -254,7 +217,7 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
|
|||
#sidebar ul.topics ul ul {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
|
||||
#sidebar ul.topics li.parent > ul, #sidebar ul.topics li.active > ul {
|
||||
display: block;
|
||||
}
|
||||
#sidebar ul.topics > li > a {
|
||||
|
|
@ -1093,11 +1056,6 @@ pre .copy-to-clipboard:hover {
|
|||
border-color: #505050;
|
||||
background-color: rgba( 236, 236, 236, .9 );
|
||||
}
|
||||
.parent-element {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#sidebar ul.topics > li > a .read-icon {
|
||||
margin-top: 9px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue