Rework of main template, adds options for more fine customisation

This commit is contained in:
Alex Shpak 2020-01-24 00:07:47 +01:00
parent 2acd6ab280
commit ba5d38ad44
31 changed files with 161 additions and 110 deletions

View file

@ -200,7 +200,7 @@ bookCollapseSection = true
bookHidden = true
# (Optional) Set how many levels of ToC to show. use 'false' to hide ToC completely
bookToC = 3
bookToC = true
# (Optional) If you have enabled BookComments for the site, you can disable it for specific pages.
bookComments = true
@ -329,6 +329,12 @@ x = \begin{cases}
{{< /katex >}}
```
## Versioning
Theme follows simple incremental versioning. e.g. `v1`, `v2` and so on. There might be breaking changes between versions.
If you want lower maintenance use one of released versions. If you want to live on the edge of changes you can use `master` branch and update your website when needed.
## Contributing
### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors)

View file

@ -2,6 +2,8 @@
title: "{{ .Name | humanize | title }}"
weight: 1
# bookFlatSection: false
# bookToc: 6
# bookToc: true
# bookHidden: false
# bookCollapseSection: false
# bookComments: true
---

View file

@ -31,15 +31,14 @@ $body-background: white !default;
$body-font-color: $gray-800 !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
$body-min-width: 25rem !default;
$container-max-width: 80rem !default;
$header-height: 3.5rem !default;
$menu-width: 16rem !default;
$toc-width: 16rem !default;
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
$sm-breakpoint: $menu-width + $body-min-width !default;
$mobile-breakpoint: $menu-width + $body-min-width + $toc-width !default;
// Hint colors
$hint-colors: (

View file

@ -47,11 +47,6 @@ img {
vertical-align: baseline;
}
main {
display: flex;
flex-direction: row-reverse;
}
aside nav ul {
padding: 0;
margin: 0;
@ -162,8 +157,12 @@ ul.pagination {
}
.book-header {
margin-bottom: $padding-16;
display: none;
margin-bottom: $padding-16;
label {
line-height: 0;
}
}
.book-search {
@ -230,7 +229,6 @@ ul.pagination {
}
.book-footer {
display: flex;
padding-top: $padding-16;
font-size: $font-size-14;
@ -272,7 +270,7 @@ ul.pagination {
}
img {
opacity: .1;
opacity: 0.1;
}
li.active img {
@ -298,46 +296,41 @@ ul.pagination {
// Responsive styles
aside nav,
.book-page,
.book-header aside,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin, opacity;
will-change: transform, margin;
}
@media screen and (max-width: $md-breakpoint) {
@media screen and (max-width: $mobile-breakpoint) {
.book-menu {
margin-left: -$menu-width;
font-size: $font-size-base;
}
.book-toc {
margin-right: -$toc-width;
font-size: $font-size-base;
display: none;
}
.book-header {
display: flex;
display: block;
}
#menu-control:checked ~ main {
.book-menu #BookMenu,
#menu-control:checked + main {
.book-menu nav,
.book-page {
transform: translateX($menu-width);
}
.book-header aside,
.markdown {
opacity: 0.25;
}
.book-header #menu-control {
transform: rotate(90deg);
}
}
#toc-control:checked ~ main {
aside #TableOfContents,
.book-page {
transform: translateX(-$menu-width);
}
.markdown {
opacity: 0.25;
}
#toc-control:checked + aside {
display: block;
}
}

View file

@ -1,19 +1,17 @@
@media print {
.book-menu,
.book-footer {
.book-footer,
.book-toc {
display: none;
}
main {
.book-header,
.book-header aside {
display: block;
}
.book-toc {
flex: none;
nav {
position: relative;
width: auto;
}
main {
// Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897
display: block !important;
}
}

View file

@ -77,8 +77,7 @@
> div {
margin: $padding-16 0;
// max-width: 50%;
min-width: $body-min-width * 0.66;
min-width: $body-min-width / 2;
padding: 0 $padding-16;
}
}
@ -102,7 +101,6 @@ a.book-btn {
&.#{$name} {
border-left-color: $color;
background-color: rgba($color, 0.1);
// background-color: $gray-100;
}
};
}

View file

@ -46,6 +46,12 @@
display: none;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
@mixin spin($duration) {
animation: spin $duration ease infinite;
@keyframes spin {

View file

@ -37,10 +37,10 @@ enableGitInfo = true
weight = 3
[params]
# (Optional, default 6) Set how many table of contents levels to be showed on page.
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
# You can also specify this parameter per page in front matter
BookToC = 3
# (Optional, default true) Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
# You can also specify this parameter per page in front matter.
BookToC = true
# (Optional, default none) Set the path to a logo for the book. If the logo is
# /static/logo.png then the path would be logo.png

View file

@ -35,10 +35,10 @@ languages:
weight: 3
params:
# (Optional, default 6) Set how many table of contents levels to be showed on page.
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
# You can also specify this parameter per page in front matter
BookToC: 3
# (Optional, default true) Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
# You can also specify this parameter per page in front matter.
BookToC: true
# (Optional, default none) Set the path to a logo for the book. If the logo is
# /static/logo.png then the path would be logo.png

View file

@ -3,6 +3,8 @@ title: Introduction
type: docs
---
# Acerbo datus maxime
{{< columns >}}
## Astris ipse furtiva

View file

@ -1 +1 @@
{"Target":"book.min.327a7346ed65bd45e7889adff447f01f212a1b54dbf3c12139d26b63b077108f.css","MediaType":"text/css","Data":{"Integrity":"sha256-MnpzRu1lvUXniJrf9EfwHyEqG1Tb88EhOdJrY7B3EI8="}}
{"Target":"book.min.232a19b11d60be2ef65e25692295b4ba14eb16031dc765d576d62c9a1f4312e6.css","MediaType":"text/css","Data":{"Integrity":"sha256-IyoZsR1gvi72XiVpIpW0uhTrFgMdx2XVdtYsmh9DEuY="}}

View file

@ -1 +1 @@
{"Target":"book.min.2f0632dc31655f852f191d7c354e584af6f6ca239af70afdd117bbe5950815b2.css","MediaType":"text/css","Data":{"Integrity":"sha256-LwYy3DFlX4UvGR18NU5YSvb2yiOa9wr90Re75ZUIFbI="}}
{"Target":"book.min.651109bd6f1663cae20024e8b68d60fd4127eade8c26dfdc236a797a99163647.css","MediaType":"text/css","Data":{"Integrity":"sha256-ZREJvW8WY8riACToto1g/UEn6t6MJt/cI2p5epkWNkc="}}

View file

@ -7,6 +7,9 @@
- id: Last modified by
translation: Last modified by
- id: Expand
translation: Expand
- id: bookSearchConfig
translation: |
{

View file

@ -7,5 +7,8 @@
- id: Last modified by
translation: Last modified by
- id: Expand
translation: Expand
- id: bookSearchConfig
translation: '{ cache: true }'

View file

@ -7,5 +7,8 @@
- id: Last modified by
translation: Última modificación por
- id: Expand
translation: Expand
- id: bookSearchConfig
translation: '{ cache: true }'

View file

@ -7,6 +7,9 @@
- id: Last modified by
translation: Last modified by
- id: Expand
translation: Expand
- id: bookSearchConfig
translation: |
{

View file

@ -7,6 +7,9 @@
- id: Last modified by
translation: Last modified by
- id: Expand
translation: Expand
- id: bookSearchConfig
translation: |
{

View file

@ -2,10 +2,13 @@
translation: Поиск
- id: Edit this page
translation: Редактировать эту сраницу
translation: Редактировать
- id: Last modified by
translation: Last modified by
- id: Expand
translation: Развернуть
- id: bookSearchConfig
translation: '{ split: /[^a-zа-яё0-9\w]/gi }'

View file

@ -7,24 +7,69 @@
</head>
<body>
<input type="checkbox" class="hidden" id="toc-control" />
<input type="checkbox" class="hidden" id="menu-control" />
<main class="container">
{{ template "toc" . }}
<main class="container flex">
<aside class="book-menu">
{{ template "menu" . }} <!-- Left menu Content -->
</aside>
<div class="book-page">
{{ partial "docs/mobile-header" . }}
{{ template "main" . }}
{{ partial "docs/footer" . }}
<header class="book-header">
{{ template "header" . }} <!-- Mobile layout header -->
</header>
{{ template "main" . }} <!-- Page Content -->
<footer class="book-footer">
{{ template "footer" . }} <!-- Footer under page content -->
{{ template "comments" . }} <!-- Comments block -->
</footer>
{{ partial "docs/inject/footer" . }}
</div>
<aside class="book-menu fixed">
{{ partial "docs/menu" . }}
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
<aside class="book-toc">
{{ template "toc" . }} <!-- Table of Contents -->
</aside>
{{ end }}
</main>
{{ partial "docs/inject/body" . }}
</body>
</html>
{{ define "menu" }}
{{ partial "docs/menu" . }}
{{ end }}
{{ define "header" }}
{{ partial "docs/header" . }}
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
<input type="checkbox" class="hidden" id="toc-control" />
<aside class="hidden clearfix">
{{ template "toc" . }}
</aside>
{{ end }}
{{ end }}
{{ define "footer" }}
{{ partial "docs/footer" . }}
{{ end }}
{{ define "comments" }}
{{ if and .Content (default true (default .Site.Params.BookComments .Params.BookComments)) }}
<div class="book-comments">
{{- partial "docs/comments" . -}}
</div>
{{ end }}
{{ end }}
{{ define "main" }}
{{ .Content }}
{{ end }}
{{ define "toc" }}
{{ .TableOfContents }}
{{ end }}

View file

@ -1,5 +1,5 @@
<h2 class="book-brand">
<a href="{{ .Site.BaseURL }}">
<a href="{{ .Site.BaseURL | relLangURL }}">
{{- with .Site.Params.BookLogo -}}
<img src="{{ . | relURL }}" alt="Logo" />
{{- end -}}

View file

@ -1,33 +1,24 @@
<div class="book-footer justify-between">
{{ if .Site.IsMultiLingual }}
<div class="flex justify-between">
{{ if .Site.IsMultiLingual }}
{{ partial "docs/languages" . }}
{{ end }}
{{ end }}
{{ if and .GitInfo .Site.Params.BookRepo }}
{{ with .GitInfo }}
{{ if and .GitInfo .Site.Params.BookRepo }}
<div>
{{ $date := .AuthorDate.Local.Format (default "January 2, 2006" $.Site.Params.BookDateFormat) }}
<a class="flex align-center" href="{{ $.Site.Params.BookRepo }}/commit/{{ .Hash }}" title='{{ i18n "Last modified by" }} {{ .AuthorName }} | {{ $date }}' target="_blank">
{{ $date := .GitInfo.AuthorDate.Local.Format (default "January 2, 2006" .Site.Params.BookDateFormat) }}
<a class="flex align-center" href="{{ .Site.Params.BookRepo }}/commit/{{ .GitInfo.Hash }}" title='{{ i18n "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
<img src="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="Calendar" />
<span>{{ $date }}</span>
</a>
</div>
{{ end }}
{{ end }}
{{ end }}
{{ if and .File .Site.Params.BookRepo .Site.Params.BookEditPath }}
{{ if and .File .Site.Params.BookRepo .Site.Params.BookEditPath }}
<div>
<a class="flex align-center" href="{{ .Site.Params.BookRepo }}/{{ .Site.Params.BookEditPath }}/{{ replace .File.Path "\\" "/" }}" target="_blank">
<a class="flex align-center" href="{{ .Site.Params.BookRepo }}/{{ .Site.Params.BookEditPath }}/{{ replace .File.Path "\\" "/" }}" target="_blank" rel="noopener">
<img src="{{ "svg/edit.svg" | relURL }}" class="book-icon" alt="Edit" />
<span>{{ i18n "Edit this page" }}</span>
</a>
</div>
{{ end }}
</div>
{{ if (default true (default .Site.Params.BookComments .Params.bookComments)) }}
<div class="book-comments">
{{ partial "docs/comments" . }}
</div>
{{ end }}
</div>

View file

@ -0,0 +1,11 @@
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
</label>
<strong>{{ partial "docs/title" . }}</strong>
<label for="toc-control">
<img src="{{ "svg/toc.svg" | relURL }}" class="book-icon" alt="Table of Contents" />
</label>
</div>

View file

@ -1,12 +1,12 @@
<nav id="BookMenu">
<nav>
{{ partial "docs/brand" . }}
{{ partial "docs/search" . }}
{{ partial "docs/inject/menu-before" . }}
{{ if .Site.Params.BookMenuBundle }}
{{ partial "docs/menu-bundle" . }}
{{ partial "docs/menu-bundle" . }}
{{ else }}
{{ partial "docs/menu-filetree" . }}
{{ partial "docs/menu-filetree" . }}
{{ end }}
{{ partial "docs/inject/menu-after" . }}

View file

@ -1,8 +0,0 @@
<header class="flex align-center justify-between book-header">
<label id="menu-control" for="menu-control">
<img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
</label>
<label id="toc-control" for="toc-control">
<strong>{{ partial "docs/title" . }}</strong>
</label>
</header>

View file

@ -1,4 +1,4 @@
{{ $dateFormat := default "January 2, 2006" .Site.Params.BookDateFormat }}
{{ $dateFormat := (default "January 2, 2006" .Site.Params.BookDateFormat) }}
{{ if or .Date .Params.tags }}
<div>
{{ with .Date}}
@ -6,10 +6,10 @@
{{ end }}
{{ range $term, $_ := .Site.Taxonomies }}
{{ with $list := index $.Params $term }}
{{ with $list := $.Param $term }}
<div>
{{ range $n, $single := $list }}{{ if $n }}, {{ end }}
{{ with $.Site.GetPage (printf "/%s/%s" $term $single | urlize) }}
{{- with $.Site.GetPage (printf "/%s/%s" $term $single | urlize) }}
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{- end }}
{{- end }}

View file

@ -1,4 +1,3 @@
<aside class="book-toc fixed">
<nav>
<ul>
{{ range $term, $_ := .Site.Taxonomies }}
@ -17,4 +16,3 @@
{{ end }}
</ul>
</nav>
</aside>

View file

@ -1,10 +1 @@
{{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }}
{{ if and $tocLevels .Page.TableOfContents }}
<aside class="book-toc levels-{{$tocLevels}} fixed">
{{ with .Page.TableOfContents }}
<label id="toc-control" for="toc-control">
{{ . }}
</label>
{{ end }}
</aside>
{{ end }}
{{ .TableOfContents }}

View file

@ -1,7 +1,7 @@
<div class="book-expand">
<label>
<div class="book-expand-head flex justify-between">
<span>{{ default "Expand" (.Get 0) }}</span>
<span>{{ default (i18n "Expand") (.Get 0) }}</span>
<span>{{ default "↕" (.Get 1) }}</span>
</div>
<input type="checkbox" class="hidden" />

1
static/svg/toc.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

After

Width:  |  Height:  |  Size: 228 B