From a69236d160cf3d9d5de8612a65e1809256824d41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Wed, 25 Aug 2021 00:10:09 +0200 Subject: [PATCH] menu: control sub-menu expansion #49 --- exampleSite/content/cont/pages/_index.en.md | 16 +++++++ .../content/shortcodes/children/_index.en.md | 1 + .../children/children-1/_index.en.md | 1 + .../children-1-1/children-1-1-2/_index.en.md | 6 +++ .../children-1-1-2-1/_index.en.md | 6 +++ .../children-1-1-2-2/_index.en.md | 6 +++ .../children/children-2/_index.en.md | 1 + .../children/children-3/_index.en.md | 1 + .../children/children-4/_index.en.md | 1 + layouts/partials/menu.html | 26 +++++------ static/css/theme.css | 44 +------------------ 11 files changed, 51 insertions(+), 58 deletions(-) create mode 100644 exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md create mode 100644 exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md create mode 100644 exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md diff --git a/exampleSite/content/cont/pages/_index.en.md b/exampleSite/content/cont/pages/_index.en.md index b77fbe33c7..aed0484689 100644 --- a/exampleSite/content/cont/pages/_index.en.md +++ b/exampleSite/content/cont/pages/_index.en.md @@ -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: diff --git a/exampleSite/content/shortcodes/children/_index.en.md b/exampleSite/content/shortcodes/children/_index.en.md index 38e832d991..56a6bfe059 100644 --- a/exampleSite/content/shortcodes/children/_index.en.md +++ b/exampleSite/content/shortcodes/children/_index.en.md @@ -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. diff --git a/exampleSite/content/shortcodes/children/children-1/_index.en.md b/exampleSite/content/shortcodes/children/children-1/_index.en.md index d0c5179dbc..d7be6be8bb 100644 --- a/exampleSite/content/shortcodes/children/children-1/_index.en.md +++ b/exampleSite/content/shortcodes/children/children-1/_index.en.md @@ -1,6 +1,7 @@ +++ title = "page 1" description = "This is a demo child page" +alwaysopen = false +++ This is a demo child page \ No newline at end of file diff --git a/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md new file mode 100644 index 0000000000..39064567a2 --- /dev/null +++ b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md @@ -0,0 +1,6 @@ ++++ +title = "page 1-1-2" +description = "This is a demo child page" ++++ + +This is a demo child page \ No newline at end of file diff --git a/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md new file mode 100644 index 0000000000..854138911f --- /dev/null +++ b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md @@ -0,0 +1,6 @@ ++++ +title = "page 1-1-2-1" +description = "This is a demo child page" ++++ + +This is a demo child page \ No newline at end of file diff --git a/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md new file mode 100644 index 0000000000..c392fb6028 --- /dev/null +++ b/exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md @@ -0,0 +1,6 @@ ++++ +title = "page 1-1-2-2" +description = "This is a demo child page" ++++ + +This is a demo child page \ No newline at end of file diff --git a/exampleSite/content/shortcodes/children/children-2/_index.en.md b/exampleSite/content/shortcodes/children/children-2/_index.en.md index 01e1758e56..a35dde3d97 100644 --- a/exampleSite/content/shortcodes/children/children-2/_index.en.md +++ b/exampleSite/content/shortcodes/children/children-2/_index.en.md @@ -1,6 +1,7 @@ +++ title = "page 2" description = "" +alwaysopen = false +++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod diff --git a/exampleSite/content/shortcodes/children/children-3/_index.en.md b/exampleSite/content/shortcodes/children/children-3/_index.en.md index f36f8616e6..72925af60c 100644 --- a/exampleSite/content/shortcodes/children/children-3/_index.en.md +++ b/exampleSite/content/shortcodes/children/children-3/_index.en.md @@ -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 \ No newline at end of file diff --git a/exampleSite/content/shortcodes/children/children-4/_index.en.md b/exampleSite/content/shortcodes/children/children-4/_index.en.md index b9f042d811..b81706a474 100644 --- a/exampleSite/content/shortcodes/children/children-4/_index.en.md +++ b/exampleSite/content/shortcodes/children/children-4/_index.en.md @@ -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 \ No newline at end of file diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 539a6a428e..af81f02543 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -23,11 +23,11 @@ @@ -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}} -
  • + {{ $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }} +
  • {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}} - {{ if $showvisitedlinks}} - - {{ end }} + {{ if $showvisitedlinks}}{{end}} {{ $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 }}
    • {{else if not .Params.Hidden }} -
  • +
  • - {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}} - {{ if $showvisitedlinks}}{{end}} + {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}} + {{ if $showvisitedlinks}}{{end}}
    • {{end}} diff --git a/static/css/theme.css b/static/css/theme.css index 9d2e29ccfb..9c2e39f7c3 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -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;