added toc post parameter and normal+sidebar layouts

This commit is contained in:
Gabriele Musco 2021-12-16 13:29:08 +01:00
parent b0d60e3bf5
commit d613c241be
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
4 changed files with 47 additions and 9 deletions

View File

@ -117,6 +117,7 @@ summaryLength = 70 # number of words for article summaries
enableSidebarLayout = false enableSidebarLayout = false
sidebarBackgroundColor = "#34363b" sidebarBackgroundColor = "#34363b"
sidebarForegroundColor = "white" sidebarForegroundColor = "white"
tocInSidebar = false # if the sidebar is enbabled, show the TOC in the sidebar
# redirect to baseURL if current URL host doesn't match # redirect to baseURL if current URL host doesn't match
# useful if deploying in gitlab pages with custom domain and don't want # useful if deploying in gitlab pages with custom domain and don't want
@ -249,8 +250,21 @@ Every post can have various parameters in the frontmatter, here are some that yo
- `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true) - `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true)
- `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important - `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important
- `norss`: boolean, if set to true the page will be skipped in the rss feed - `norss`: boolean, if set to true the page will be skipped in the rss feed
- `toc`: boolean, if set to true a table of contents will be shown for the article
## Generate icons ## Table of contents settings
You can tweak the TOC settings in your `config.toml`:
```toml
[markup]
[markup.tableOfContents]
endLevel = 5
ordered = false
startLevel = 1
```
# Generate icons
It's best to use the provided `generate_icons.sh` script to generate all necessary icons for your website. This script requires ImageMagick, that you will need to install separately. It's best to use the provided `generate_icons.sh` script to generate all necessary icons for your website. This script requires ImageMagick, that you will need to install separately.
@ -271,7 +285,7 @@ Finally, make sure to edit your config.toml to include the following:
# ... # ...
``` ```
## Inject custom content # Inject custom content
Ficurinia supports injecting custom content into the theme. There are several files you can create in `layouts/partials/inject` that will be included inside the theme in different places. Ficurinia supports injecting custom content into the theme. There are several files you can create in `layouts/partials/inject` that will be included inside the theme in different places.

View File

@ -137,7 +137,7 @@ table {
font-size: .9em; font-size: .9em;
} }
#pageNavigation, .nerdlink, nav { #pageNavigation, .nerdlink, nav:not(#TableOfContents) {
a { a {
border-bottom: none; border-bottom: none;
&:hover { &:hover {
@ -482,7 +482,7 @@ ul.list {
} }
} }
nav, #links { nav:not(#TableOfContents), #links {
ul { ul {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
@ -507,7 +507,7 @@ header {
justify-content: space-between; justify-content: space-between;
} }
} }
nav { nav:not(#TableOfContents) {
font-size: .9em; font-size: .9em;
ul { ul {
li { li {
@ -638,7 +638,7 @@ header {
padding: ($content_spacing / 4); padding: ($content_spacing / 4);
align-self: center; align-self: center;
} }
nav { nav:not(#TableOfContents) {
ul#main-nav { ul#main-nav {
&, li, li a {text-shadow: none !important;} &, li, li a {text-shadow: none !important;}
display: none; display: none;
@ -920,7 +920,7 @@ header.jumbotronContainer {
}}; }};
header { header {
#sidebar_nav { #sidebar_nav, .sidebarToc {
display: none; display: none;
} }
#wide_nav { #wide_nav {
@ -930,7 +930,7 @@ header.jumbotronContainer {
@media only screen and (min-width: 950px) { @media only screen and (min-width: 950px) {
html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} { html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} {
overflow-y: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0;
#baseContainer { #baseContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -957,7 +957,7 @@ header.jumbotronContainer {
display: block; display: block;
margin: 12px 0; margin: 12px 0;
width: 100%; width: 100%;
nav { nav:not(#TableOfContents) {
font-size: 1.1em; font-size: 1.1em;
ul#main-nav { ul#main-nav {
flex-direction: column; flex-direction: column;
@ -974,12 +974,26 @@ header.jumbotronContainer {
#wide_nav { #wide_nav {
display: none; display: none;
} }
.sidebarToc {
display: block;
nav#TableOfContents {
ul {
padding-left: 24px;
a:not(:hover) {
border-color: transparent;
}
}
}
}
} }
#contentContainer { #contentContainer {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
} }
} }
.articleToc {
display: none;
}
} }
} }

View File

@ -11,6 +11,10 @@
{{ if .Params.Image }} {{ if .Params.Image }}
<img src="{{ .Params.Image }}" alt="" /> <img src="{{ .Params.Image }}" alt="" />
{{ end }} {{ end }}
<div class="articleToc">
{{ .TableOfContents }}
<hr />
</div>
<div>{{ .Content }}</div> <div>{{ .Content }}</div>
</article> </article>
{{ if .Params.tags }} {{ if .Params.tags }}

View File

@ -42,6 +42,12 @@
<div id="sidebar_nav"> <div id="sidebar_nav">
{{- partial "header_navigation.html" . -}} {{- partial "header_navigation.html" . -}}
</div> </div>
{{ if and .IsPage .Params.toc }}
<div class="sidebarToc">
<hr />
{{ .TableOfContents }}
</div>
{{ end }}
{{ end }} {{ end }}
{{- partial "inject/header-after.html" . -}} {{- partial "inject/header-after.html" . -}}
{{- partial "jumbotron.html" . -}} {{- partial "jumbotron.html" . -}}