mirror of
https://github.com/alex-shpak/hugo-book.git
synced 2024-11-21 19:09:29 +00:00
Rework of main template, adds options for more fine customisation
This commit is contained in:
Alex Shpak
parent
2acd6ab280
commit
ba5d38ad44
@ -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)
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
title: "{{ .Name | humanize | title }}"
|
||||
weight: 1
|
||||
# bookFlatSection: false
|
||||
# bookToc: 6
|
||||
# bookToc: true
|
||||
# bookHidden: false
|
||||
# bookCollapseSection: false
|
||||
# bookComments: true
|
||||
---
|
||||
|
||||
@ -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: (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -46,6 +46,12 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@mixin spin($duration) {
|
||||
animation: spin $duration ease infinite;
|
||||
@keyframes spin {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -3,6 +3,8 @@ title: Introduction
|
||||
type: docs
|
||||
---
|
||||
|
||||
# Acerbo datus maxime
|
||||
|
||||
{{< columns >}}
|
||||
## Astris ipse furtiva
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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="}}
|
||||
File diff suppressed because one or more lines are too long
@ -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="}}
|
||||
@ -7,6 +7,9 @@
|
||||
- id: Last modified by
|
||||
translation: Last modified by
|
||||
|
||||
- id: Expand
|
||||
translation: Expand
|
||||
|
||||
- id: bookSearchConfig
|
||||
translation: |
|
||||
{
|
||||
|
||||
@ -7,5 +7,8 @@
|
||||
- id: Last modified by
|
||||
translation: Last modified by
|
||||
|
||||
- id: Expand
|
||||
translation: Expand
|
||||
|
||||
- id: bookSearchConfig
|
||||
translation: '{ cache: true }'
|
||||
|
||||
@ -7,5 +7,8 @@
|
||||
- id: Last modified by
|
||||
translation: Última modificación por
|
||||
|
||||
- id: Expand
|
||||
translation: Expand
|
||||
|
||||
- id: bookSearchConfig
|
||||
translation: '{ cache: true }'
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
- id: Last modified by
|
||||
translation: Last modified by
|
||||
|
||||
- id: Expand
|
||||
translation: Expand
|
||||
|
||||
- id: bookSearchConfig
|
||||
translation: |
|
||||
{
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
- id: Last modified by
|
||||
translation: Last modified by
|
||||
|
||||
- id: Expand
|
||||
translation: Expand
|
||||
|
||||
- id: bookSearchConfig
|
||||
translation: |
|
||||
{
|
||||
|
||||
@ -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 }'
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 -}}
|
||||
|
||||
@ -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>
|
||||
|
||||
11
layouts/partials/docs/header.html
Normal file
11
layouts/partials/docs/header.html
Normal 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>
|
||||
@ -1,4 +1,4 @@
|
||||
<nav id="BookMenu">
|
||||
<nav>
|
||||
{{ partial "docs/brand" . }}
|
||||
{{ partial "docs/search" . }}
|
||||
{{ partial "docs/inject/menu-before" . }}
|
||||
|
||||
@ -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>
|
||||
@ -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 }}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
<aside class="book-toc fixed">
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range $term, $_ := .Site.Taxonomies }}
|
||||
@ -17,4 +16,3 @@
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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
1
static/svg/toc.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user