mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
Navigation home option (#381)
* enabled mermaid by default * implemented logic to use internal oder cdn mermaid * added english documentation * added french translation for the mermaid options * Removed useless test print * Hugo does not use upper case letters in params * fixed false sample link * improved mermaid pages * fixed always load mermaid if no frontmatter specified * applied 3 new params to default config * Implemented Home Button logic * Applied default style * applied same landingpage ref to logo partials * added sample image, how the button will looks like * added en documentation on how to configure the button * translated home button configuration to french via deepl * applied home button style to theme variants * set button disabled by default * fixed mermaid samples * removed obsolete css files * changed default version of mermaid cdn * renamed mermaidURL to customMermaidURL and removed css link * improved mermaid configuration description Co-authored-by: Arthur Ferdinand Lindner <Arthur-Ferdinand.Lindner@Telekom.de> Co-authored-by: Arthur Ferdinand Lindner <arthur.lindner@outlook.de>
This commit is contained in:
mirisbowring
GitHub
parent
023fe7ef2b
commit
6cfd61e0f6
11 changed files with 174 additions and 26 deletions
|
|
@ -15,6 +15,7 @@ defaultContentLanguageInSubdir= true
|
|||
showVisitedLinks = true
|
||||
disableBreadcrumb = false
|
||||
disableNextPrev = false
|
||||
disableLandingPageButton = true
|
||||
disableMermaid = false
|
||||
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
|
||||
titleSeparator = "::"
|
||||
|
|
@ -27,6 +28,8 @@ home = [ "HTML", "RSS", "JSON"]
|
|||
title = "Documentation for Hugo Learn Theme"
|
||||
weight = 1
|
||||
languageName = "English"
|
||||
landingPageURL = "/en"
|
||||
landingPageName = "<i class='fas fa-home'></i> Home"
|
||||
|
||||
[[Languages.en.menu.shortcuts]]
|
||||
name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
|
||||
|
|
@ -54,6 +57,8 @@ weight = 30
|
|||
title = "Documentation du thème Hugo Learn"
|
||||
weight = 2
|
||||
languageName = "Français"
|
||||
landingPageURL = "/fr"
|
||||
landingPageName = "<i class='fas fa-home'></i> Accueil"
|
||||
|
||||
[[Languages.fr.menu.shortcuts]]
|
||||
name = "<i class='fab fa-fw fa-github'></i> Repo GitHub"
|
||||
|
|
@ -81,6 +86,8 @@ weight = 30
|
|||
title = "Hugo 主题的 Learn 文档"
|
||||
weight = 3
|
||||
languageName = "简体中文"
|
||||
landingPageURL = "/zh"
|
||||
landingPageName = "<i class='fas fa-home'></i> 家"
|
||||
|
||||
[[Languages.zh.menu.shortcuts]]
|
||||
name = "<i class='fab fa-fw fa-github'></i> GitHub 仓库"
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ Note that some of these parameters are explained in details in other sections of
|
|||
disableInlineCopyToClipBoard = false
|
||||
# A title for shortcuts in menu is set by default. Set this to true to disable it.
|
||||
disableShortcutsTitle = false
|
||||
# If set to false, a Home button will appear below the search bar on the menu.
|
||||
# It is redirecting to the landing page of the current language if specified. (Default is "/")
|
||||
disableLandingPageButton = true
|
||||
# When using mulitlingual website, disable the switch language button.
|
||||
disableLanguageSwitchingButton = false
|
||||
# Hide breadcrumbs in the header and only show the current page title
|
||||
|
|
@ -75,3 +78,35 @@ The mermaid configuration parameters can also be set on a specific page. In this
|
|||
> On page "Architecture" you need a class diagram. You can set the mermaid parameters locally to only load mermaid on this page (not on the others).
|
||||
|
||||
You also can disable mermaid for specific pages while globally enabled.
|
||||
|
||||
## Home Button Configuration
|
||||
|
||||
If the `disableLandingPage` option is set to `false`, an Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure two parameters for the defined languages:
|
||||
|
||||
```toml
|
||||
[Lanugages]
|
||||
[Lanugages.en]
|
||||
...
|
||||
landingPageURL = "/en"
|
||||
landingPageName = "<i class='fas fa-home'></i> Redirect to Home"
|
||||
...
|
||||
[Lanugages.fr]
|
||||
...
|
||||
landingPageURL = "/fr"
|
||||
landingPageName = "<i class='fas fa-home'></i> Accueil"
|
||||
...
|
||||
```
|
||||
|
||||
If those params are not configured for a specific language, they will get their
|
||||
default values:
|
||||
|
||||
```toml
|
||||
landingPageURL = "/"
|
||||
landingPageName = "<i class='fas fa-home'></i> Home"
|
||||
```
|
||||
|
||||
The home button is going to looks like this:
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
|
|||
disableInlineCopyToClipBoard = false
|
||||
# Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
|
||||
disableShortcutsTitle = false
|
||||
# S'il est réglé sur faux, un bouton Accueil apparaîtra sous la barre de recherche dans le menu.
|
||||
# Il redirige vers la page d'accueil de la langue actuelle si cela est spécifié. (La valeur par défaut est "/")
|
||||
disableLandingPageButton = true
|
||||
# Si défini à true, empêche Hugo d'inclure le module "mermaid" s'il n'est pas nécessaire (réduira les temps de chargement et le trafic)
|
||||
disableMermaid = false
|
||||
# Spécifie l'emplacement distant du mermaid js
|
||||
|
|
@ -69,3 +72,39 @@ Les paramètres de configuration du mermaid peuvent également être définis su
|
|||
> À la page "Architecture", vous avez besoin d'un diagramme de classe. Vous pouvez régler les paramètres de mermaid localement pour ne charger que la sirène sur cette page (pas sur les autres).
|
||||
|
||||
Vous pouvez également désactiver mermaid pour des pages spécifiques tout en l'activant globalement.
|
||||
<<<<<<< HEAD
|
||||
|
||||
## Configuration du bouton Accueil
|
||||
|
||||
Si l'option `disableLandingPage` est définie sur `false`, un bouton
|
||||
"Accueil" apparaîtra dans le menu de gauche. C'est une alternative pour cliquer
|
||||
sur le logo. Pour modifier le vous devrez configurer deux paramètres pour les
|
||||
langues définies :
|
||||
|
||||
```toml
|
||||
[Lanugages]
|
||||
[Lanugages.en]
|
||||
...
|
||||
landingPageURL = "/en"
|
||||
landingPageName = "<i class='fas fa-home'></i> Redirect to Home"
|
||||
...
|
||||
[Lanugages.fr]
|
||||
...
|
||||
landingPageURL = "/fr"
|
||||
landingPageName = "<i class='fas fa-home'></i> Accueil"
|
||||
...
|
||||
```
|
||||
|
||||
Si ces paramètres ne sont pas configurés pour une langue spécifique, ils
|
||||
obtiendront leur valeurs par défaut:
|
||||
|
||||
```toml
|
||||
landingPageURL = "/"
|
||||
landingPageName = "<i class='fas fa-home'></i> Home"
|
||||
```
|
||||
|
||||
Le bouton d'accueil va ressembler à ceci:
|
||||
|
||||
|
||||
=======
|
||||
>>>>>>> 023fe7ef2b4c45fe66ac932d9e25d09f30b74a4e
|
||||
|
|
|
|||
BIN
exampleSite/content/basics/configuration/images/home_button_defaults.jpg
Executable file
BIN
exampleSite/content/basics/configuration/images/home_button_defaults.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<a id="logo" href="/">
|
||||
<a id="logo" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/") }}'>
|
||||
|
||||
<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="100%" height="100%" viewBox="0 0 285.1 69.9" xml:space="preserve">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<a id="logo" href="{{ .Site.BaseURL }}">
|
||||
<a id="logo" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/de") }}'>
|
||||
<svg id="grav-logo" style="width:100%; height:100%;" viewBox="0 0 504 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<path d="M235.832,71.564l-7.98,-0.001c-1.213,0.001 -2.197,0.987 -2.197,2.204l0,15.327l-0.158,0.132c-4.696,3.962 -10.634,6.14 -16.719,6.14c-14.356,0 -26.034,-11.68 -26.034,-26.037c0,-14.358 11.678,-26.035 26.034,-26.035c5.582,0 10.919,1.767 15.437,5.113c0.877,0.649 2.093,0.56 2.866,-0.211l5.69,-5.69c0.444,-0.442 0.675,-1.055 0.639,-1.681c-0.034,-0.627 -0.336,-1.206 -0.828,-1.597c-6.76,-5.363 -15.214,-8.314 -23.805,-8.314c-21.18,0 -38.414,17.233 -38.414,38.415c0,21.183 17.234,38.415 38.414,38.415c10.937,0 21.397,-4.705 28.698,-12.914c0.358,-0.403 0.556,-0.921 0.556,-1.46l0,-19.603c0,-1.217 -0.985,-2.203 -2.2,-2.203"
|
||||
style="fill:#000;fill-rule:nonzero;"></path>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,20 @@
|
|||
{{ partial "search.html" . }}
|
||||
{{end}}
|
||||
</div>
|
||||
{{if not .Site.Params.disableLandingPageButton }}
|
||||
<section id="homelinks">
|
||||
<ul>
|
||||
<li>
|
||||
<a class="padding" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (.Site.IsMultiLingual)) .Site.Params.landingPageURL "/") }}'>{{ safeHTML (cond (ne .Site.Params.landingPageName nil) .Site.Params.landingPageName "<i class='fas fa-home'></i> Home") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<div class="highlightable">
|
||||
<ul class="topics">
|
||||
|
||||
{{if eq .Site.Params.ordersectionsby "title"}}
|
||||
{{if eq .Site.Params.ordersectionsby "title"}}
|
||||
{{range .Site.Home.Sections.ByTitle}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
|
||||
{{end}}
|
||||
|
|
@ -22,7 +31,7 @@
|
|||
{{range .Site.Home.Sections.ByWeight}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
{{ $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle}}
|
||||
|
|
@ -31,7 +40,7 @@
|
|||
<h3>{{ if not $disableShortcutsTitle}}{{ T "Shortcuts-Title"}}{{ end }}</h3>
|
||||
<ul>
|
||||
{{ range sort . "Weight"}}
|
||||
<li>
|
||||
<li>
|
||||
{{.Pre}}<a class="padding" href="{{.URL | absLangURL }}">{{safeHTML .Name}}</a>{{.Post}}
|
||||
</li>
|
||||
{{end}}
|
||||
|
|
@ -77,7 +86,7 @@
|
|||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
|
||||
|
||||
{{ if $showvisitedlinks}}
|
||||
<li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> {{T "Clear-History"}}</a></li>
|
||||
{{ end }}
|
||||
|
|
@ -99,7 +108,7 @@
|
|||
{{with .sect}}
|
||||
{{if and .IsSection (or (not .Params.hidden) $.showhidden)}}
|
||||
{{safeHTML .Params.head}}
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item
|
||||
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item
|
||||
{{if .IsAncestor $currentNode }}parent{{end}}
|
||||
{{if eq .File.UniqueID $currentFileUniqueID}}active{{end}}
|
||||
{{if .Params.alwaysopen}}parent{{end}}
|
||||
|
|
@ -118,24 +127,24 @@
|
|||
{{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}
|
||||
{{end}}
|
||||
{{ $pages := ($currentNode.Scratch.Get "pages") }}
|
||||
|
||||
{{if eq .Site.Params.ordersectionsby "title"}}
|
||||
|
||||
{{if eq .Site.Params.ordersectionsby "title"}}
|
||||
{{ range $pages.ByTitle }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{else}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
{{else}}
|
||||
{{ range $pages.ByWeight }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{ if and .Params.hidden (not $.showhidden) }}
|
||||
{{else}}
|
||||
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
{{end}}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</li>
|
||||
{{else}}
|
||||
{{ if not .Params.Hidden }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
|
||||
:root{
|
||||
|
||||
|
||||
--MAIN-TEXT-color:#323232; /* Color of text by default */
|
||||
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
|
||||
--MAIN-LINK-color:#1C90F3; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
|
||||
|
||||
--MENU-HOME-LINK-color: #323232; /* Color of the home button text */
|
||||
--MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
|
||||
|
||||
--MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
|
||||
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
|
||||
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
|
||||
|
||||
--MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
|
||||
--MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
|
||||
|
|
@ -23,7 +26,7 @@
|
|||
|
||||
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
|
||||
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -103,9 +106,23 @@ a:hover {
|
|||
}
|
||||
|
||||
#body .tags a.tag-link {
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#body .tags a.tag-link:before {
|
||||
border-right-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#homelinks {
|
||||
background: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BORDER-color);
|
||||
border-bottom-color: var(--MENU-HEADER-BORDER-color);
|
||||
}
|
||||
|
||||
#homelinks a {
|
||||
color: var(--MENU-HOME-LINK-color);
|
||||
}
|
||||
|
||||
#homelinks a:hover {
|
||||
color: var(--MENU-HOME-LINK-HOVERED-color);
|
||||
}
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
|
||||
:root{
|
||||
|
||||
|
||||
--MAIN-TEXT-color:#323232; /* Color of text by default */
|
||||
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
|
||||
--MAIN-LINK-color:#599a3e; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color:#3f6d2c; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */
|
||||
|
||||
--MENU-HOME-LINK-color: #323232; /* Color of the home button text */
|
||||
--MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
|
||||
|
||||
--MENU-HEADER-BG-color:#74b559; /* Background color of menu header */
|
||||
--MENU-HEADER-BORDER-color:#9cd484; /*Color of menu header border */
|
||||
|
||||
--MENU-HEADER-BORDER-color:#9cd484; /*Color of menu header border */
|
||||
|
||||
--MENU-SEARCH-BG-color:#599a3e; /* Search field background color (by default borders + icons) */
|
||||
--MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */
|
||||
--MENU-SEARCH-BOX-ICONS-color: #c7f7c4; /* Override search field icons color */
|
||||
|
|
@ -23,7 +26,7 @@
|
|||
|
||||
--MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */
|
||||
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -103,9 +106,23 @@ a:hover {
|
|||
}
|
||||
|
||||
#body .tags a.tag-link {
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#body .tags a.tag-link:before {
|
||||
border-right-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#homelinks {
|
||||
background: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BORDER-color);
|
||||
border-bottom-color: var(--MENU-HEADER-BORDER-color);
|
||||
}
|
||||
|
||||
#homelinks a {
|
||||
color: var(--MENU-HOME-LINK-color);
|
||||
}
|
||||
|
||||
#homelinks a:hover {
|
||||
color: var(--MENU-HOME-LINK-HOVERED-color);
|
||||
}
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
|
||||
:root{
|
||||
|
||||
|
||||
--MAIN-TEXT-color:#323232; /* Color of text by default */
|
||||
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
|
||||
--MAIN-LINK-color:#f31c1c; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color:#d01616; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */
|
||||
|
||||
--MENU-HOME-LINK-color: #ccc; /* Color of the home button text */
|
||||
--MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */
|
||||
|
||||
--MENU-HEADER-BG-color:#dc1010; /* Background color of menu header */
|
||||
--MENU-HEADER-BORDER-color:#e23131; /*Color of menu header border */
|
||||
--MENU-HEADER-BORDER-color:#e23131; /*Color of menu header border */
|
||||
|
||||
--MENU-SEARCH-BG-color:#b90000; /* Search field background color (by default borders + icons) */
|
||||
--MENU-SEARCH-BOX-color: #ef2020; /* Override search field border color */
|
||||
|
|
@ -20,10 +23,10 @@
|
|||
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
|
||||
|
||||
|
||||
--MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
|
||||
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -103,9 +106,23 @@ a:hover {
|
|||
}
|
||||
|
||||
#body .tags a.tag-link {
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#body .tags a.tag-link:before {
|
||||
border-right-color: var(--MENU-HEADER-BG-color);
|
||||
}
|
||||
|
||||
#homelinks {
|
||||
background: var(--MENU-HEADER-BG-color);
|
||||
background-color: var(--MENU-HEADER-BORDER-color);
|
||||
border-bottom-color: var(--MENU-HEADER-BORDER-color);
|
||||
}
|
||||
|
||||
#homelinks a {
|
||||
color: var(--MENU-HOME-LINK-color);
|
||||
}
|
||||
|
||||
#homelinks a:hover {
|
||||
color: var(--MENU-HOME-LINK-HOVERED-color);
|
||||
}
|
||||
|
|
@ -1127,6 +1127,13 @@ pre .copy-to-clipboard:hover {
|
|||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#homelinks {
|
||||
background-color: #9c6fb6;
|
||||
color: #fff;
|
||||
padding: 7px 0;
|
||||
border-bottom: 4px solid #9c6fb6;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue