add hugo menu & change singlePage class to body

This commit is contained in:
DhammaCharts 2022-07-11 14:24:00 +01:00
parent 1f725eeee3
commit 1c775a8c9f
13 changed files with 161 additions and 20 deletions

View File

@ -307,11 +307,11 @@ hr {
}
.singlePage {
padding: 4em 30vw;
@media all and (max-width: 1200px) {
padding: 25px 5vw;
}
// padding: 4em 30vw;
//
// @media all and (max-width: 1200px) {
// padding: 25px 5vw;
// }
}
.page-end {
@ -357,7 +357,7 @@ hr {
}
}
#graph-container-modal {
border: var(--outlinegray) 1px solid;
border-radius: 5px;

View File

@ -4,6 +4,27 @@ div.sticky {
top: 0;
// background-color: yellow;
}
.tree,
.tree ol {
list-style: none;
margin: 0;
padding: 0;
}
.tree ol {
padding-left: 1em;
}
.tree summary {
color: #6b879a;
}
.tree a{
font-weight:unset;
color: black;
}
a.active{
color: #f28482;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */

View File

@ -0,0 +1,5 @@
---
title: test_page_2
---
test

View File

@ -0,0 +1,5 @@
---
title: test_page_20
---
test

View File

@ -0,0 +1,4 @@
---
title: test_page_21
---
test

View File

@ -0,0 +1,4 @@
---
title: test_page_22
---
test

View File

@ -0,0 +1,5 @@
---
title: test_page_1
---
test

View File

@ -0,0 +1,4 @@
---
title: test_page_10
---
test

View File

@ -0,0 +1,4 @@
---
title: test_page_11
---
test

View File

@ -2,14 +2,14 @@
<html lang="{{ .Lang }}">
{{ partial "head.html" . }}
<body>
<body class="singlePage">
{{partial "search.html" .}}
{{if $.Site.Data.config.enableColumnLayout}}
<r-c join>
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1 class="singlePage">
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
{{else}}
<main class="singlePage">
<main >
{{end}}
<!-- Begin actual content -->
@ -49,13 +49,22 @@
</main>
{{if $.Site.Data.config.enableColumnLayout}}
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3 class="singlePage">
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
<div class="sticky page-end vertical">
<h3> Menu </h3>
<div id="jstree"></div>
<h3> Menu hugo</h3>
<div class="menu-toc">
<ol class="tree">
{{partial "menu-hugo.html" .}}
</ol>
</div>
<h3> Menu JStree</h3>
<div id="jstree">
</div>
</div>
</aside>
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2 class="singlePage">
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
<div class="sticky">
<div class="page-end vertical">
<button id="myBtn">Open Modal</button>

View File

@ -2,14 +2,14 @@
<html lang="{{ .Lang }}">
{{ partial "head.html" . }}
<body>
<body class="singlePage">
{{partial "search.html" .}}
{{if $.Site.Data.config.enableColumnLayout}}
<r-c join>
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1 class="singlePage">
<main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1 >
{{else}}
<main class="singlePage">
<main>
{{end}}
<!-- Begin actual content -->
@ -42,13 +42,22 @@
</main>
{{if $.Site.Data.config.enableColumnLayout}}
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3 class="singlePage">
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
<div class="sticky page-end vertical">
<h3> Menu </h3>
<div id="jstree"></div>
<h3> Menu hugo</h3>
<div class="menu-toc">
<ol class="tree">
{{partial "menu-hugo.html" .}}
</ol>
</div>
<h3> Menu JStree</h3>
<div id="jstree">
</div>
</div>
</aside>
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2 class="singlePage">
<aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
<div class="sticky">
<div class="page-end vertical">
<button id="myBtn">Open Modal</button>

View File

@ -0,0 +1,55 @@
<!--
based on
https://github.com/alex-shpak/hugo-book/blob/master/layouts/partials/docs/menu-filetree.html
This is template for hugo menus, accepts MenuEntity as context
https://gohugo.io/variables/menus/
-->
{{ $bookSection := default "/" .Site.Params.BookSection }}
{{ if eq $bookSection "*" }}
{{ $bookSection = "/" }}{{/* Backward compatibility */}}
{{ end }}
{{ with .Site.GetPage $bookSection }}
{{ template "book-section-children" (dict "Section" . "CurrentPage" $) }}
{{ end }}
{{ define "book-section-children" }}{{/* (dict "Section" .Section "CurrentPage" .CurrentPage) */}}
<ol>
{{ range (where .Section.Pages "Params.bookhidden" "ne" true) }}
{{ if .IsSection }}
<details open>
<summary>
{{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
</summary>
{{ template "book-section-children" (dict "Section" . "CurrentPage" $.CurrentPage) }}
</details>
{{ else if and .IsPage .Content }}
<li>
{{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
</li>
{{ end }}
{{ end }}
</ol>
{{ end }}
{{ define "book-page-link" }}{{/* (dict "Page" .Page "CurrentPage" .CurrentPage) */}}
{{ $current := eq .CurrentPage .Page }}
{{ $ancestor := .Page.IsAncestor .CurrentPage }}
{{ if .Page.Params.bookCollapseSection }}
<input type="checkbox" id="section-{{ md5 .Page }}" class="toggle" {{ if or $current $ancestor }}checked{{ end }} />
<label for="section-{{ md5 .Page }}" class="flex justify-between">
<a {{ if .Page.Content }}href="{{ .Page.Permalink }}"{{ else }}role="button"{{ end }} class="{{ if $current }}active{{ end }}">
{{- partial "docs/title" .Page -}}
</a>
</label>
{{ else if .Page.Content }}
<a href="{{ .Page.Permalink }}" class="{{ if $current }}active{{ end }}">
{{- partial "title" .Page -}}
</a>
{{ else }}
<span>{{- partial "title" .Page -}}</span>
{{ end }}
{{ end }}

View File

@ -0,0 +1,16 @@
<!--
Partial to generate page name from Title or File name.
Accepts Page as context
-->
{{ $title := "" }}
{{ if .Title }}
{{ $title = .Title }}
{{ else if and .IsSection .File }}
{{ $title = path.Base .File.Dir | humanize | title }}
{{ else if and .IsPage .File }}
{{ $title = .File.BaseFileName | humanize | title }}
{{ end }}
{{ return $title }}