natenom-website-dump-2024-0.../natenom.de/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/index.html
2024-02-01 17:43:06 +01:00

310 lines
No EOL
104 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html class=position-relative itemscope itemtype=https://schema.org/WebPage lang=de data-bs-theme=auto data-palette=blue><head><script src=/assets/init/bundle.min.a63b05c8004831f165aca508cfe52bdc3b3c568ce762c0e22f82b1fe1ed14173.js integrity="sha256-pjsFyABIMfFlrKUIz+Ur3Ds8VoznYsDiL4Kx/h7RQXM=" crossorigin=anonymous></script><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen - Natenoms Blog</title>
<link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_16x16_resize_catmullrom_3.png sizes=16x16 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_32x32_resize_catmullrom_3.png sizes=32x32 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_150x150_resize_catmullrom_3.png sizes=150x150 type=image/png><link rel=apple-touch-icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_180x180_resize_catmullrom_3.png sizes=180x180 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_192x192_resize_catmullrom_3.png sizes=192x192 type=image/png><link rel=mask-icon href=/safari-pinned-tab.svg color=#6f42c1><meta name=keywords content="Verkehrswende,Fahrrad,CriticalMass,OpenBikeSensor,SimRa,Mumble,Open Source,Minimalismus,OpenStreetMap,Müllsammeln,Fotografie,Malen,Zeichnen"><meta name=description content="Nachdem ich vor ein paar Tagen mein neues Wiki online stellte und komplett zufrieden war, schaute ich auch mal auf der Website pagespeed.web.dev nach, wie viele Punkte das Wiki bekommt.
Schock: Es waren nur 52 Punkte (mobile Ansicht) und 71 Punkte (Desktop). Das ist weit weniger, als bei meinem alten Wiki mit 74 Punkten (mobil) und 98 Punkten (Desktop)."><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://natenom.de/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/cover.png"><meta name=twitter:title content="Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen"><meta name=twitter:description content="Nachdem ich vor ein paar Tagen mein neues Wiki online stellte und komplett zufrieden war, schaute ich auch mal auf der Website pagespeed.web.dev nach, wie viele Punkte das Wiki bekommt.
Schock: Es waren nur 52 Punkte (mobile Ansicht) und 71 Punkte (Desktop). Das ist weit weniger, als bei meinem alten Wiki mit 74 Punkten (mobil) und 98 Punkten (Desktop)."><meta property="og:title" content="Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen"><meta property="og:description" content="Nachdem ich vor ein paar Tagen mein neues Wiki online stellte und komplett zufrieden war, schaute ich auch mal auf der Website pagespeed.web.dev nach, wie viele Punkte das Wiki bekommt.
Schock: Es waren nur 52 Punkte (mobile Ansicht) und 71 Punkte (Desktop). Das ist weit weniger, als bei meinem alten Wiki mit 74 Punkten (mobil) und 98 Punkten (Desktop)."><meta property="og:type" content="article"><meta property="og:url" content="https://natenom.de/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/"><meta property="og:image" content="https://natenom.de/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/cover.png"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-22T18:04:56+01:00"><meta property="article:modified_time" content="2022-03-22T18:04:56+01:00"><meta itemprop=name content="Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen"><meta itemprop=description content="Nachdem ich vor ein paar Tagen mein neues Wiki online stellte und komplett zufrieden war, schaute ich auch mal auf der Website pagespeed.web.dev nach, wie viele Punkte das Wiki bekommt.
Schock: Es waren nur 52 Punkte (mobile Ansicht) und 71 Punkte (Desktop). Das ist weit weniger, als bei meinem alten Wiki mit 74 Punkten (mobil) und 98 Punkten (Desktop)."><meta itemprop=datePublished content="2022-03-22T18:04:56+01:00"><meta itemprop=dateModified content="2022-03-22T18:04:56+01:00"><meta itemprop=wordCount content="1864"><meta itemprop=image content="https://natenom.de/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/cover.png"><meta itemprop=keywords content="Web,Hugo,Natenom,Wiki,Suche,Galerie,Schriften,Docsy,Themes,Thema,"><meta property="og:image:alt" content="Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen"><meta name=twitter:image:alt content="Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen"><link data-precache rel=stylesheet href="/assets/main/bundle.min.b189232e48c49a02f23e6616502e93a36137102626fd47589f55ab6447b15b4d.css" integrity="sha256-sYkjLkjEmgLyPmYWUC6To2E3ECYm/UdYn1WrZEexW00=" crossorigin=anonymous></head><body><header class="mb-4 sticky-top"><nav class="top-app-bar shadow navbar navbar-expand-xxl"><div class=container><a class="navbar-brand d-flex align-items-center flex-grow-1 flex-xxl-grow-0 justify-content-xxl-start ms-2 ms-xxl-0 mx-auto me-xxl-2" href=https://natenom.de/><picture><img class=logo alt=Logo src=https://natenom.de/images/logo.svg loading=lazy>
</picture>Natenoms Blog</a><div class="offcanvas-xxl offcanvas-end flex-grow-1" data-bs-scroll=true tabindex=-1 id=navbarMenus aria-labelledby=navbarMenusLabel><div class="offcanvas-header px-4 pb-0"><div class="offcanvas-title h5" id=navbarMenusLabel>Natenoms Blog</div><button type=button class="btn-close btn-close-white" data-bs-dismiss=offcanvas data-bs-target=#navbarMenus aria-label=Close></button></div><div class="offcanvas-body p-4 pt-0 p-xxl-0"><hr class=d-xxl-none><ul class="navbar-nav flex-row flex-wrap align-items-center me-auto"><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/><i class="fas fa-home me-1"></i></a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/ueber/>Über</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://wiki.natenom.de/ target=_blank rel="noopener noreferrer">Wiki</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/blogroll/>Blogroll</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://kagube.de/ target=_blank rel="noopener noreferrer">Blog vom kleinen 🐘</a></li></ul><hr class=d-xxl-none><form class="search-bar ms-auto my-auto" action=/search/ novalidate><div class="input-group align-items-center"><span class="btn btn-search disabled position-absolute left-0 border-0 px-1"><i class="fas fa-fw fa-search fa-lg"></i>
</span><input class="my-1 form-control border-white rounded-5 search-input bg-body" name=q type=search placeholder=Suchen aria-label=Search required>
<span class="search-shortcut position-absolute end-0 top-0 me-2"><kbd class="text-dark bg-white opacity-75 rounded-3 shadow border border-primary py-1 fw-bold">/</kbd></span></div></form><hr class=d-xxl-none><ul class="navbar-nav flex-row flex-wrap align-items-center ms-md-auto"><li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto"><nav class="social-links nav justify-content-center flex-row"><a class="nav-link social-link col-6 col-xxl-auto p-1" target=_blank href=https://digitalcourage.social/@natenom title=Mastodon rel=me><i class="fa-fw fab fa-mastodon"></i>
<span class="ms-1 d-xxl-none">Mastodon</span>
</a><a class="nav-link social-link col-6 col-xxl-auto p-1" target=_blank href=/index.xml title=RSS rel=me><i class="fas fa-fw fa-rss"></i>
<span class="ms-1 d-xxl-none">RSS</span></a></nav></li><li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto"><div class="vr d-none d-xxl-flex h-100 mx-xxl-2 text-white"></div><hr class="d-xxl-none my-2"></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=fontSizeDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="fas fa-fw fa-font"></i>
<span class=d-xxl-none>Schriftgröße</span></a><ul class="font-size-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby=fontSizeDropdown><li><button class="font-size-item dropdown-item" data-size=xs>
Extra klein</button></li><li><button class="font-size-item dropdown-item" data-size=sm>
Klein</button></li><li><button class="font-size-item dropdown-item active" data-size=md>
Mittel</button></li><li><button class="font-size-item dropdown-item" data-size=lg>
Groß</button></li><li><button class="font-size-item dropdown-item" data-size=xl>
Extra groß</button></li></ul></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=paletteDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="fas fa-fw fa-palette"></i>
<span class=d-xxl-none>Palette</span></a><ul class="palette-dropdown-menu dropdown-menu dropdown-menu-end px-2 row g-2" aria-labelledby=paletteDropdown><li class="col-4 my-1"><a role=button id=palette-blue aria-label=Blau class="btn btn-sm w-100 palette text-bg-blue" data-palette=blue></a></li><li class="col-4 my-1"><a role=button id=palette-blue-gray aria-label=Blaugrau class="btn btn-sm w-100 palette text-bg-blue-gray" data-palette=blue-gray></a></li><li class="col-4 my-1"><a role=button id=palette-brown aria-label=Braun class="btn btn-sm w-100 palette text-bg-brown" data-palette=brown></a></li><li class="col-4 my-1"><a role=button id=palette-cyan aria-label=Cyan class="btn btn-sm w-100 palette text-bg-cyan" data-palette=cyan></a></li><li class="col-4 my-1"><a role=button id=palette-green aria-label=Grün class="btn btn-sm w-100 palette text-bg-green" data-palette=green></a></li><li class="col-4 my-1"><a role=button id=palette-indigo aria-label=Indigo class="btn btn-sm w-100 palette text-bg-indigo" data-palette=indigo></a></li><li class="col-4 my-1"><a role=button id=palette-orange aria-label=Orange class="btn btn-sm w-100 palette text-bg-orange" data-palette=orange></a></li><li class="col-4 my-1"><a role=button id=palette-pink aria-label=Rosa class="btn btn-sm w-100 palette text-bg-pink" data-palette=pink></a></li><li class="col-4 my-1"><a role=button id=palette-purple aria-label=Purpur class="btn btn-sm w-100 palette text-bg-purple" data-palette=purple></a></li><li class="col-4 my-1"><a role=button id=palette-red aria-label=Rot class="btn btn-sm w-100 palette text-bg-red" data-palette=red></a></li><li class="col-4 my-1"><a role=button id=palette-teal aria-label=Teal class="btn btn-sm w-100 palette text-bg-teal" data-palette=teal></a></li><li class="col-4 my-1"><a role=button id=palette-yellow aria-label=Gelb class="btn btn-sm w-100 palette text-bg-yellow" data-palette=yellow></a></li></ul></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=modeDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="mode-icon fas fa-fw fa-adjust" id=modeIcon></i>
<span class=d-xxl-none>Modus</span></a><ul class="mode-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby=modeDropdown><li class=mode-item data-color-mode=light data-icon=sun><button class=dropdown-item>
<i class="mode-icon fas fa-fw fa-sun"></i> Hell</button></li><li class=mode-item data-color-mode=dark data-icon=moon><button class=dropdown-item>
<i class="mode-icon fas fa-fw fa-moon"></i> Dunkel</button></li><li class="mode-item active" data-color-mode=auto data-icon=adjust><button class=dropdown-item>
<i class="mode-icon fas fa-fw fa-adjust"></i> Auto</button></li></ul></li></ul></div></div><div class=d-flex><button class="navbar-toggler order-5 border-0" type=button data-bs-toggle=offcanvas data-bs-target=#navbarMenus aria-controls=navbarMenus aria-expanded=false aria-label="Toggle navigation">
<i class="fas fa-ellipsis-h"></i></button></div></div></nav></header><main class=container><div class="row content"><noscript><div class="alert alert-danger" role=alert>Dein Browser unterstützt kein JavaScript.</div></noscript><div class=col-xxl-8><div class=container><nav class="row card component" aria-label=breadcrumb><div class="card-body pb-0"><ol class="hbs-breadcrumb breadcrumb flex-nowrap"><li class="breadcrumb-item text-surface"><a href=/>Blog</a></li><li class="breadcrumb-item text-surface"><a href=/posts/>Posts</a></li><li class="breadcrumb-item active">Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen</li></ol></div></nav><div class="post-panel-wrapper position-relative d-flex justify-content-center"><div class="d-flex flex-row justify-content-center rounded-5 border post-panel position-fixed px-3 py-1 surface shadow-1"><a class="action action-toc d-none d-xxl-block" href=#postTOC role=button title=Inhaltsverzeichnis><i class="fas fa-fw fa-list-alt"></i>
</a><a class="action action-toc d-block d-xxl-none" href=#post-toc-container role=button title=Inhaltsverzeichnis><i class="fas fa-fw fa-list-alt"></i>
</a><a class="action action-post-comments" href=#post-comments role=button aria-label=Comments title=Kommentare><i class="fas fa-fw fa-comments"></i>
</a><a id=sidebarToggler class="action action-sidebar-toggler d-none d-xxl-block" role=button title><i class="fas fa-fw fa-expand-alt" data-fa-transform=rotate-45></i></a></div></div><article class="row card component mb-4 post"><div class=card-header><h1 class="card-title post-title my-2">Mein neues Wiki mit Hugo Neue Suche und andere Optimierungen</h1></div><div class=card-body><div class="post-meta mb-3"><span class="post-date me-1 mb-1" title="Erstellt am 2022-03-22 18:04:56 +0100 CET.">Dienstag, 22. März 2022</span><span class="post-reading-time me-1 mb-1">9 Min. Lesezeit</span><a href=/categories/web/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-category">
<i class="fas fa-fw fa-folder me-1"></i>Web</a><a href=/tags/docsy/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Docsy</a><a href=/tags/galerie/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Galerie</a><a href=/tags/hugo/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Hugo</a><a href=/tags/natenom/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Natenom</a><a href=/tags/schriften/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Schriften</a><a href=/tags/suche/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Suche</a><a href=/tags/thema/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Thema</a><a href=/tags/themes/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Themes</a><a href=/tags/web/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Web</a><a href=/tags/wiki/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Wiki</a></div><div id=postTOC class=toc-details><details open><summary>Inhaltsverzeichnis</summary><nav id=TableOfContents><ul><li><a href=#unschön-gemachte-offlinesuche>Unschön gemachte Offlinesuche</a></li><li><a href=#unschönes-css>Unschönes CSS</a></li><li><a href=#was-nun>Was nun?</a></li><li><a href=#optimierungen>Optimierungen</a><ul><li><a href=#css-ohne-preload>CSS ohne Preload</a></li><li><a href=#suche-nur-auf-bestimmten-seiten>Suche nur auf bestimmten Seiten</a></li><li><a href=#andere-implementierung-für-die-suche>Andere Implementierung für die Suche</a><ul><li><a href=#zu-erstellende-dateien-und-verzeichnisse>Zu erstellende Dateien und Verzeichnisse</a></li><li><a href=#noch-etwas-css-für-die-neue-suchfunktion>Noch etwas CSS für die neue Suchfunktion</a></li><li><a href=#ergebnis--suchfunktion-auf-einer-einzelnen-seite>Ergebnis Suchfunktion auf einer einzelnen Seite</a></li></ul></li><li><a href=#sidebar>Sidebar</a></li><li><a href=#zeit-zum-rendern-des-wiki>Zeit zum Rendern des Wiki</a></li><li><a href=#swap-fonts>Swap Fonts</a></li><li><a href=#gar-keine-systemfremden-schriften>Gar keine systemfremden Schriften</a></li></ul></li><li><a href=#galerie-hinzugefügt>Galerie hinzugefügt</a></li></ul></nav></details></div><div class="post-content mb-3" data-bs-spy=scroll data-bs-target=#TableOfContents tabindex=0><div id=post-summary><p>Nachdem ich vor ein paar Tagen mein neues Wiki online stellte und komplett zufrieden war, schaute ich auch mal auf der Website <a class=urlextern href=https://pagespeed.web.dev/>pagespeed.web.dev</a> nach, wie viele Punkte das Wiki bekommt.</p><p>Schock: Es waren nur 52 Punkte (mobile Ansicht) und 71 Punkte (Desktop). Das ist weit weniger, als bei meinem alten Wiki mit 74 Punkten (mobil) und 98 Punkten (Desktop).</p></div><div id=post-content-body><p></p><figure class=image-caption><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_a4ea59e36698e9072a94b870c5d3fa9a.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_f92f8c0777e60ea91230c7486962cb43.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_16971a4668dbfd25a4565e91c35ff5f4.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_a4ea59e36698e9072a94b870c5d3fa9a.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_f92f8c0777e60ea91230c7486962cb43.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_16971a4668dbfd25a4565e91c35ff5f4.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_125346_16971a4668dbfd25a4565e91c35ff5f4.webp title loading=lazy width=816 height=710></picture><figcaption></figcaption></figure><p></p><p></p><figure class=image-caption><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_e5ca22bca05f7a3ca9ca3b4faa7f9e32.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_299ee1af79a9315fcdfe386e79939fa1.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_536f501a2f6ff8fc8a903e7ab0167b6d.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_e5ca22bca05f7a3ca9ca3b4faa7f9e32.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_299ee1af79a9315fcdfe386e79939fa1.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_536f501a2f6ff8fc8a903e7ab0167b6d.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu135ddcacfb2813adbbe146be2d6de259_138964_536f501a2f6ff8fc8a903e7ab0167b6d.webp title loading=lazy width=816 height=710></picture><figcaption></figcaption></figure><p></p><p>Da das verwendete Theme mit dem Namen &ldquo;Docsy&rdquo; von Google stammt (das habe ich erst nach der Entscheidung dafür bemerkt), nahm ich an, dass auch die Punktezahl bei dem Test entsprechend hoch sein sollte.</p><p>Auch die Website des Themes <a class=urlextern href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.docsy.dev%2F">erreicht dort nur 48 Punkte (mobil) und immerhin 96 Punkte (Desktop)</a>.</p><h2 id=unschön-gemachte-offlinesuche data-numberify>Unschön gemachte Offlinesuche<a class="anchor ms-1" href=#unschön-gemachte-offlinesuche></a></h2><p>Dann haben wir (Vri und ich) viel ausprobiert und haben herausgefunden, dass es hauptsächlich an der verwendeten Offlinesuche des Themes liegt. Schaltet man diese ab, dann steigt das Ergebnis auf 89 Punkte (mobile Ansicht) und 100 Punkte (Desktop).</p><p>Der Grund: Die Index-Datei für die Offlinesuche wird bei jedem Seitenaufruf automatisch abgerufen und ausgewertet. Bei einer ungepackten Größe von ca. 800 KiB der json-Datei ist das nicht unerheblich.</p><h2 id=unschönes-css data-numberify>Unschönes CSS<a class="anchor ms-1" href=#unschönes-css></a></h2><p>Aber auch ein &ldquo;Preload&rdquo; eines CSS ist nicht gerade schön gemacht. Dieses bewirkt, dass es relativ lange dauert, bevor überhaupt Inhalte im Browser angezeigt werden.</p><h2 id=was-nun data-numberify>Was nun?<a class="anchor ms-1" href=#was-nun></a></h2><p>Mir ist grundsätzlich egal, wie viele Menschen auf meinen Webseiten gucken und ich habe deshalb dazu auch keine Auswertungen. Mir ist jedoch wichtig, dass man die Inhalte findet, wenn man danach sucht. Und meines Wissens verweisen Suchmaschinen weniger gerne auf Webseiten, die relativ langsam sind. <em>(Stimmt dieses alte Halbwissen überhaupt noch?)</em></p><p>Abgesehen davon soll das neue Wiki auch auf älterer Hardware (Desktop und Smartphone) und langsamen Verbindungen gut funktionieren.</p><h2 id=optimierungen data-numberify>Optimierungen<a class="anchor ms-1" href=#optimierungen></a></h2><h3 id=css-ohne-preload data-numberify>CSS ohne Preload<a class="anchor ms-1" href=#css-ohne-preload></a></h3><p>Um das Preload aus dem CSS herauszubekommen, kopiert man die Datei <code>themes/docsy/layouts/partials/head-css.html</code> nach <code>layouts/partials/head-css.html</code> und ändert die unteren Zeilen von:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>&lt;link rel=&#34;preload&#34; href=&#34;{{ $css.RelPermalink }}&#34; as=&#34;style&#34;&gt;
</span></span><span style=display:flex><span>&lt;link href=&#34;{{ $css.RelPermalink }}&#34; rel=&#34;stylesheet&#34; integrity=&#34;{{ $css.Data.integrity }}&#34;&gt;</span></span></code></pre></div><p>Nach:<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>&lt;link href=&#34;{{ $css.RelPermalink }}&#34; rel=&#34;stylesheet&#34;&gt;
</span></span><span style=display:flex><span>&lt;link href=&#34;{{ $css.RelPermalink }}&#34; rel=&#34;stylesheet&#34; integrity=&#34;{{ $css.Data.integrity }}&#34;&gt;</span></span></code></pre></div></p><div class="shortcode-notice update"><div class="shortcode-notice-title update">Update</div><div class=notice-content>25.03.2022: Jemand hat mich darauf hingewiesen, dass diese beiden geänderten Zeilen zwei mal das selbe einbinden. Ich habe daher die letzte mit <code>integrity=</code> gelöscht.</div></div><h3 id=suche-nur-auf-bestimmten-seiten data-numberify>Suche nur auf bestimmten Seiten<a class="anchor ms-1" href=#suche-nur-auf-bestimmten-seiten></a></h3><p>Eine Möglichkeit ist es, die eingebaute Offlinesuche des Themes nicht mehr auf allen Seiten im Wiki anzuzeigen, sondern nur auf einer eigenen Suchseite.</p><p>Ich bin kein Profi bei sowas, habe mir den Quelltext des Themes angeschaut und keine Stelle gefunden, das zu tun und diese Möglichkeit daher verworfen. Aber schlaue Menschen können hier bestimmt mehr und könnten das für sich so umsetzen. Daher sei diese Möglichkeit genannt.</p><h3 id=andere-implementierung-für-die-suche data-numberify>Andere Implementierung für die Suche<a class="anchor ms-1" href=#andere-implementierung-für-die-suche></a></h3><p>Eine andere Möglichkeit ist, die eingebaute Suchfunktion zu deaktivieren und selbst eine zu implementieren. Ich habe mich für die Methode entschieden, die in <a class=urlextern href=https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae#static-js-searchjs>diesem Gist beschrieben</a> wird. (In der <a class=urlextern href=https://gohugo.io/tools/search/>Hugo-Dokumentation wird u. a. darauf verwiesen</a>.</p><p>Der Code im Gist steht unter der MIT-Lizenz zur Verfügung, <a class=urlextern href=https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae#mit-license>siehe hier</a>.</p><h4 id=zu-erstellende-dateien-und-verzeichnisse data-numberify>Zu erstellende Dateien und Verzeichnisse<a class="anchor ms-1" href=#zu-erstellende-dateien-und-verzeichnisse></a></h4><ol><li><p>In die Datei <code>config.toml</code>:<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>[outputs]
</span></span><span style=display:flex><span>home = [ &#34;HTML&#34;, &#34;JSON&#34; ]</span></span></code></pre></div></p></li><li><p>In die Datei <code>content/de/search/_index.md</code><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>---
</span></span><span style=display:flex><span>title: &#34;Suche&#34;
</span></span><span style=display:flex><span>sitemap:
</span></span><span style=display:flex><span> priority : 0.1
</span></span><span style=display:flex><span>layout: &#34;search&#34;
</span></span><span style=display:flex><span>weight: 20
</span></span><span style=display:flex><span>menu:
</span></span><span style=display:flex><span> main:
</span></span><span style=display:flex><span> weight: 50
</span></span><span style=display:flex><span>---</span></span></code></pre></div></p></li><li><p>In die Datei <code>layouts/_default/index.json</code>:<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>{{- $.Scratch.Add &#34;index&#34; slice -}}
</span></span><span style=display:flex><span>{{- range .Site.RegularPages -}}
</span></span><span style=display:flex><span> {{- $.Scratch.Add &#34;index&#34; (dict &#34;title&#34; .Title &#34;tags&#34; .Params.tags &#34;categories&#34; .Params.categories &#34;contents&#34; .Plain &#34;permalink&#34; .Permalink) -}}
</span></span><span style=display:flex><span>{{- end -}}
</span></span><span style=display:flex><span>{{- $.Scratch.Get &#34;index&#34; | jsonify -}}</span></span></code></pre></div></p></li></ol><p>Beim nächsten Bau der Website wird die Datei <code>/index.json</code> automatisch erstellt.</p><ol start=4><li><p>In die Datei <code>layouts/_default/search.html</code> (abgeändert vom Original, da es nicht funktioniert hat):<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html><span style=display:flex><span>{{ define &#34;main&#34; }}
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>script</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;/js/offsearch/jquery.min.js&#34;</span>&gt;&lt;/<span style=color:#f92672>script</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>script</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;/js/offsearch/fuse.min.js&#34;</span>&gt;&lt;/<span style=color:#f92672>script</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>script</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;/js/offsearch/jquery.mark.min.js&#34;</span>&gt;&lt;/<span style=color:#f92672>script</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>script</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;/js/offsearch/offsearch.js&#34;</span>&gt;&lt;/<span style=color:#f92672>script</span>&gt;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>section</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;offsearch&#34;</span>&gt;
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>noscript</span>&gt;&lt;<span style=color:#f92672>p</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;offsearch-noscript&#34;</span>&gt;Diese Suchfunktion benötigt JavaScript.&lt;/<span style=color:#f92672>p</span>&gt;&lt;/<span style=color:#f92672>noscript</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#f92672>div</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;offsearch&#34;</span> &gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#f92672>form</span> <span style=color:#a6e22e>action</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;{{ &#34;</span><span style=color:#a6e22e>search</span><span style=color:#960050;background-color:#1e0010>&#34;</span> <span style=color:#960050;background-color:#1e0010>|</span> <span style=color:#a6e22e>absURL</span> <span style=color:#960050;background-color:#1e0010>}}&#34;</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#f92672>input</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;search-query&#34;</span> <span style=color:#a6e22e>name</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;s&#34;</span> <span style=color:#a6e22e>placeholder</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;Wiki durchsuchen…&#34;</span> <span style=color:#a6e22e>aria-label</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;Search&#34;</span> /&gt;
</span></span><span style=display:flex><span> &lt;/<span style=color:#f92672>form</span>&gt;
</span></span><span style=display:flex><span> &lt;<span style=color:#f92672>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;search-results&#34;</span>&gt;&lt;/<span style=color:#f92672>div</span>&gt;
</span></span><span style=display:flex><span> &lt;/<span style=color:#f92672>div</span>&gt;
</span></span><span style=display:flex><span>&lt;/<span style=color:#f92672>section</span>&gt;
</span></span><span style=display:flex><span><span style=color:#75715e>&lt;!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style --&gt;</span>
</span></span><span style=display:flex><span>&lt;<span style=color:#f92672>script</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;search-result-template&#34;</span> <span style=color:#a6e22e>type</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;text/x-js-template&#34;</span>&gt;
</span></span><span style=display:flex><span> <span style=color:#f92672>&lt;</span><span style=color:#a6e22e>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;summary-${key}&#34;</span><span style=color:#f92672>&gt;</span>
</span></span><span style=display:flex><span> <span style=color:#f92672>&lt;</span><span style=color:#a6e22e>h4</span><span style=color:#f92672>&gt;&lt;</span><span style=color:#a6e22e>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;${link}&#34;</span><span style=color:#f92672>&gt;</span><span style=color:#a6e22e>$</span>{<span style=color:#a6e22e>title</span>}<span style=color:#f92672>&lt;</span><span style=color:#960050;background-color:#1e0010>/a&gt;&lt;/h4&gt;</span>
</span></span><span style=display:flex><span> <span style=color:#f92672>&lt;</span><span style=color:#a6e22e>p</span><span style=color:#f92672>&gt;</span><span style=color:#a6e22e>$</span>{<span style=color:#a6e22e>snippet</span>}<span style=color:#f92672>&lt;</span><span style=color:#960050;background-color:#1e0010>/p&gt;</span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>{ <span style=color:#a6e22e>isset</span> <span style=color:#a6e22e>tags</span> }<span style=color:#f92672>&lt;</span><span style=color:#a6e22e>p</span><span style=color:#f92672>&gt;</span><span style=color:#a6e22e>Tags</span><span style=color:#f92672>:</span> <span style=color:#a6e22e>$</span>{<span style=color:#a6e22e>tags</span>}<span style=color:#f92672>&lt;</span><span style=color:#960050;background-color:#1e0010>/p&gt;${ end }</span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>{ <span style=color:#a6e22e>isset</span> <span style=color:#a6e22e>categories</span> }<span style=color:#f92672>&lt;</span><span style=color:#a6e22e>p</span><span style=color:#f92672>&gt;</span><span style=color:#a6e22e>Categories</span><span style=color:#f92672>:</span> <span style=color:#a6e22e>$</span>{<span style=color:#a6e22e>categories</span>}<span style=color:#f92672>&lt;</span><span style=color:#960050;background-color:#1e0010>/p&gt;${ end }</span>
</span></span><span style=display:flex><span> <span style=color:#f92672>&lt;</span><span style=color:#960050;background-color:#1e0010>/div&gt;</span>
</span></span><span style=display:flex><span>&lt;/<span style=color:#f92672>script</span>&gt;
</span></span><span style=display:flex><span>{{ end }}</span></span></code></pre></div></p></li><li><p>Ich habe das Verzeichnis <code>static/js/offsearch/</code> erstellt, wo später die notwendigen JavaScript-Dateien bereitgestellt werden.</p></li><li><p>JavaScript selbst hosten: Ich habe die in der Originaldatei <code>search.html</code> eingebundenen Dateien ins Verzeichnis <code>static/js/offsearch/</code> heruntergeladen, diese entsprechend lokal eingebunden und hoste sie nun selbst.</p></li><li><p>JavaScript für die Suchfunktion
Diese Datei kommt nach <code>static/js/offsearch/offsearch.js</code>:<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-javascript data-lang=javascript><span style=display:flex><span><span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>=</span><span style=color:#ae81ff>60</span>;
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>fuseOptions</span> <span style=color:#f92672>=</span> {
</span></span><span style=display:flex><span><span style=color:#a6e22e>shouldSort</span><span style=color:#f92672>:</span> <span style=color:#66d9ef>true</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>includeMatches</span><span style=color:#f92672>:</span> <span style=color:#66d9ef>true</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>threshold</span><span style=color:#f92672>:</span> <span style=color:#ae81ff>0.0</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>tokenize</span><span style=color:#f92672>:</span><span style=color:#66d9ef>true</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>location</span><span style=color:#f92672>:</span> <span style=color:#ae81ff>0</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>distance</span><span style=color:#f92672>:</span> <span style=color:#ae81ff>100</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>maxPatternLength</span><span style=color:#f92672>:</span> <span style=color:#ae81ff>32</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>minMatchCharLength</span><span style=color:#f92672>:</span> <span style=color:#ae81ff>1</span>,
</span></span><span style=display:flex><span><span style=color:#a6e22e>keys</span><span style=color:#f92672>:</span> [
</span></span><span style=display:flex><span> {<span style=color:#a6e22e>name</span><span style=color:#f92672>:</span><span style=color:#e6db74>&#34;title&#34;</span>,<span style=color:#a6e22e>weight</span><span style=color:#f92672>:</span><span style=color:#ae81ff>0.8</span>},
</span></span><span style=display:flex><span> {<span style=color:#a6e22e>name</span><span style=color:#f92672>:</span><span style=color:#e6db74>&#34;contents&#34;</span>,<span style=color:#a6e22e>weight</span><span style=color:#f92672>:</span><span style=color:#ae81ff>0.5</span>},
</span></span><span style=display:flex><span> {<span style=color:#a6e22e>name</span><span style=color:#f92672>:</span><span style=color:#e6db74>&#34;tags&#34;</span>,<span style=color:#a6e22e>weight</span><span style=color:#f92672>:</span><span style=color:#ae81ff>0.3</span>},
</span></span><span style=display:flex><span> {<span style=color:#a6e22e>name</span><span style=color:#f92672>:</span><span style=color:#e6db74>&#34;categories&#34;</span>,<span style=color:#a6e22e>weight</span><span style=color:#f92672>:</span><span style=color:#ae81ff>0.3</span>}
</span></span><span style=display:flex><span>]
</span></span><span style=display:flex><span>};
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>searchQuery</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>param</span>(<span style=color:#e6db74>&#34;s&#34;</span>);
</span></span><span style=display:flex><span><span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>searchQuery</span>){
</span></span><span style=display:flex><span><span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#34;#search-query&#34;</span>).<span style=color:#a6e22e>val</span>(<span style=color:#a6e22e>searchQuery</span>);
</span></span><span style=display:flex><span><span style=color:#a6e22e>executeSearch</span>(<span style=color:#a6e22e>searchQuery</span>);
</span></span><span style=display:flex><span>}<span style=color:#66d9ef>else</span> {
</span></span><span style=display:flex><span><span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#39;#search-results&#39;</span>).<span style=color:#a6e22e>append</span>(<span style=color:#e6db74>&#34;&lt;p&gt;Please enter a word or phrase above&lt;/p&gt;&#34;</span>);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>executeSearch</span>(<span style=color:#a6e22e>searchQuery</span>){
</span></span><span style=display:flex><span><span style=color:#a6e22e>$</span>.<span style=color:#a6e22e>getJSON</span>( <span style=color:#e6db74>&#34;/index.json&#34;</span>, <span style=color:#66d9ef>function</span>( <span style=color:#a6e22e>data</span> ) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>pages</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>data</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>fuse</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> <span style=color:#a6e22e>Fuse</span>(<span style=color:#a6e22e>pages</span>, <span style=color:#a6e22e>fuseOptions</span>);
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>result</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>fuse</span>.<span style=color:#a6e22e>search</span>(<span style=color:#a6e22e>searchQuery</span>);
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>({<span style=color:#e6db74>&#34;matches&#34;</span><span style=color:#f92672>:</span><span style=color:#a6e22e>result</span>});
</span></span><span style=display:flex><span> <span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>result</span>.<span style=color:#a6e22e>length</span> <span style=color:#f92672>&gt;</span> <span style=color:#ae81ff>0</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>populateResults</span>(<span style=color:#a6e22e>result</span>);
</span></span><span style=display:flex><span> }<span style=color:#66d9ef>else</span>{
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#39;#search-results&#39;</span>).<span style=color:#a6e22e>append</span>(<span style=color:#e6db74>&#34;&lt;p&gt;No matches found&lt;/p&gt;&#34;</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>});
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>populateResults</span>(<span style=color:#a6e22e>result</span>){
</span></span><span style=display:flex><span><span style=color:#a6e22e>$</span>.<span style=color:#a6e22e>each</span>(<span style=color:#a6e22e>result</span>,<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>key</span>,<span style=color:#a6e22e>value</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>contents</span><span style=color:#f92672>=</span> <span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>item</span>.<span style=color:#a6e22e>contents</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>snippet</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>&#34;&#34;</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>snippetHighlights</span><span style=color:#f92672>=</span>[];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>tags</span> <span style=color:#f92672>=</span>[];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>if</span>( <span style=color:#a6e22e>fuseOptions</span>.<span style=color:#a6e22e>tokenize</span> ){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>snippetHighlights</span>.<span style=color:#a6e22e>push</span>(<span style=color:#a6e22e>searchQuery</span>);
</span></span><span style=display:flex><span> }<span style=color:#66d9ef>else</span>{
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>.<span style=color:#a6e22e>each</span>(<span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>matches</span>,<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>matchKey</span>,<span style=color:#a6e22e>mvalue</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>key</span> <span style=color:#f92672>==</span> <span style=color:#e6db74>&#34;tags&#34;</span> <span style=color:#f92672>||</span> <span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>key</span> <span style=color:#f92672>==</span> <span style=color:#e6db74>&#34;categories&#34;</span> ){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>snippetHighlights</span>.<span style=color:#a6e22e>push</span>(<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>value</span>);
</span></span><span style=display:flex><span> }<span style=color:#66d9ef>else</span> <span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>key</span> <span style=color:#f92672>==</span> <span style=color:#e6db74>&#34;contents&#34;</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>start</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>0</span>]<span style=color:#f92672>-</span><span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>&gt;</span><span style=color:#ae81ff>0</span><span style=color:#f92672>?</span><span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>0</span>]<span style=color:#f92672>-</span><span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>:</span><span style=color:#ae81ff>0</span>;
</span></span><span style=display:flex><span> <span style=color:#a6e22e>end</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>1</span>]<span style=color:#f92672>+</span><span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>&lt;</span><span style=color:#a6e22e>contents</span>.<span style=color:#a6e22e>length</span><span style=color:#f92672>?</span><span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>1</span>]<span style=color:#f92672>+</span><span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>:</span><span style=color:#a6e22e>contents</span>.<span style=color:#a6e22e>length</span>;
</span></span><span style=display:flex><span> <span style=color:#a6e22e>snippet</span> <span style=color:#f92672>+=</span> <span style=color:#a6e22e>contents</span>.<span style=color:#a6e22e>substring</span>(<span style=color:#a6e22e>start</span>,<span style=color:#a6e22e>end</span>);
</span></span><span style=display:flex><span> <span style=color:#a6e22e>snippetHighlights</span>.<span style=color:#a6e22e>push</span>(<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>substring</span>(<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>0</span>],<span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>1</span>]<span style=color:#f92672>-</span><span style=color:#a6e22e>mvalue</span>.<span style=color:#a6e22e>indices</span>[<span style=color:#ae81ff>0</span>][<span style=color:#ae81ff>0</span>]<span style=color:#f92672>+</span><span style=color:#ae81ff>1</span>));
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>snippet</span>.<span style=color:#a6e22e>length</span><span style=color:#f92672>&lt;</span><span style=color:#ae81ff>1</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>snippet</span> <span style=color:#f92672>+=</span> <span style=color:#a6e22e>contents</span>.<span style=color:#a6e22e>substring</span>(<span style=color:#ae81ff>0</span>,<span style=color:#a6e22e>summaryInclude</span><span style=color:#f92672>*</span><span style=color:#ae81ff>2</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#75715e>//pull template from hugo templarte definition
</span></span></span><span style=display:flex><span><span style=color:#75715e></span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>templateDefinition</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#39;#search-result-template&#39;</span>).<span style=color:#a6e22e>html</span>();
</span></span><span style=display:flex><span> <span style=color:#75715e>//replace values
</span></span></span><span style=display:flex><span><span style=color:#75715e></span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>output</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>render</span>(<span style=color:#a6e22e>templateDefinition</span>,{<span style=color:#a6e22e>key</span><span style=color:#f92672>:</span><span style=color:#a6e22e>key</span>,<span style=color:#a6e22e>title</span><span style=color:#f92672>:</span><span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>item</span>.<span style=color:#a6e22e>title</span>,<span style=color:#a6e22e>link</span><span style=color:#f92672>:</span><span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>item</span>.<span style=color:#a6e22e>permalink</span>,<span style=color:#a6e22e>tags</span><span style=color:#f92672>:</span><span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>item</span>.<span style=color:#a6e22e>tags</span>,<span style=color:#a6e22e>categories</span><span style=color:#f92672>:</span><span style=color:#a6e22e>value</span>.<span style=color:#a6e22e>item</span>.<span style=color:#a6e22e>categories</span>,<span style=color:#a6e22e>snippet</span><span style=color:#f92672>:</span><span style=color:#a6e22e>snippet</span>});
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#39;#search-results&#39;</span>).<span style=color:#a6e22e>append</span>(<span style=color:#a6e22e>output</span>);
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>.<span style=color:#a6e22e>each</span>(<span style=color:#a6e22e>snippetHighlights</span>,<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>snipkey</span>,<span style=color:#a6e22e>snipvalue</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>&#34;#summary-&#34;</span><span style=color:#f92672>+</span><span style=color:#a6e22e>key</span>).<span style=color:#a6e22e>mark</span>(<span style=color:#a6e22e>snipvalue</span>);
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>});
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>param</span>(<span style=color:#a6e22e>name</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> decodeURIComponent((<span style=color:#a6e22e>location</span>.<span style=color:#a6e22e>search</span>.<span style=color:#a6e22e>split</span>(<span style=color:#a6e22e>name</span> <span style=color:#f92672>+</span> <span style=color:#e6db74>&#39;=&#39;</span>)[<span style=color:#ae81ff>1</span>] <span style=color:#f92672>||</span> <span style=color:#e6db74>&#39;&#39;</span>).<span style=color:#a6e22e>split</span>(<span style=color:#e6db74>&#39;&amp;&#39;</span>)[<span style=color:#ae81ff>0</span>]).<span style=color:#a6e22e>replace</span>(<span style=color:#e6db74>/\+/g</span>, <span style=color:#e6db74>&#39; &#39;</span>);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>function</span> <span style=color:#a6e22e>render</span>(<span style=color:#a6e22e>templateString</span>, <span style=color:#a6e22e>data</span>) {
</span></span><span style=display:flex><span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>conditionalMatches</span>,<span style=color:#a6e22e>conditionalPattern</span>,<span style=color:#a6e22e>copy</span>;
</span></span><span style=display:flex><span><span style=color:#a6e22e>conditionalPattern</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>/\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g</span>;
</span></span><span style=display:flex><span><span style=color:#75715e>//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
</span></span></span><span style=display:flex><span><span style=color:#75715e></span><span style=color:#a6e22e>copy</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>templateString</span>;
</span></span><span style=display:flex><span><span style=color:#66d9ef>while</span> ((<span style=color:#a6e22e>conditionalMatches</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>conditionalPattern</span>.<span style=color:#a6e22e>exec</span>(<span style=color:#a6e22e>templateString</span>)) <span style=color:#f92672>!==</span> <span style=color:#66d9ef>null</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>if</span>(<span style=color:#a6e22e>data</span>[<span style=color:#a6e22e>conditionalMatches</span>[<span style=color:#ae81ff>1</span>]]){
</span></span><span style=display:flex><span> <span style=color:#75715e>//valid key, remove conditionals, leave contents.
</span></span></span><span style=display:flex><span><span style=color:#75715e></span> <span style=color:#a6e22e>copy</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>copy</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#a6e22e>conditionalMatches</span>[<span style=color:#ae81ff>0</span>],<span style=color:#a6e22e>conditionalMatches</span>[<span style=color:#ae81ff>2</span>]);
</span></span><span style=display:flex><span> }<span style=color:#66d9ef>else</span>{
</span></span><span style=display:flex><span> <span style=color:#75715e>//not valid, remove entire section
</span></span></span><span style=display:flex><span><span style=color:#75715e></span> <span style=color:#a6e22e>copy</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>copy</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#a6e22e>conditionalMatches</span>[<span style=color:#ae81ff>0</span>],<span style=color:#e6db74>&#39;&#39;</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span><span style=color:#a6e22e>templateString</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>copy</span>;
</span></span><span style=display:flex><span><span style=color:#75715e>//now any conditionals removed we can do simple substitution
</span></span></span><span style=display:flex><span><span style=color:#75715e></span><span style=color:#66d9ef>var</span> <span style=color:#a6e22e>key</span>, <span style=color:#a6e22e>find</span>, <span style=color:#a6e22e>re</span>;
</span></span><span style=display:flex><span><span style=color:#66d9ef>for</span> (<span style=color:#a6e22e>key</span> <span style=color:#66d9ef>in</span> <span style=color:#a6e22e>data</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>find</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>&#39;\\$\\{\\s*&#39;</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>key</span> <span style=color:#f92672>+</span> <span style=color:#e6db74>&#39;\\s*\\}&#39;</span>;
</span></span><span style=display:flex><span> <span style=color:#a6e22e>re</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>new</span> RegExp(<span style=color:#a6e22e>find</span>, <span style=color:#e6db74>&#39;g&#39;</span>);
</span></span><span style=display:flex><span> <span style=color:#a6e22e>templateString</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>templateString</span>.<span style=color:#a6e22e>replace</span>(<span style=color:#a6e22e>re</span>, <span style=color:#a6e22e>data</span>[<span style=color:#a6e22e>key</span>]);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span><span style=color:#66d9ef>return</span> <span style=color:#a6e22e>templateString</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#75715e>/* MIT License
</span></span></span><span style=display:flex><span><span style=color:#75715e>
</span></span></span><span style=display:flex><span><span style=color:#75715e>Copyright 2022 Edward A. Webbinaro
</span></span></span><span style=display:flex><span><span style=color:#75715e>
</span></span></span><span style=display:flex><span><span style=color:#75715e>Permission is hereby granted, free of charge, to any person
</span></span></span><span style=display:flex><span><span style=color:#75715e>obtaining a copy of this software and associated documentation
</span></span></span><span style=display:flex><span><span style=color:#75715e>files (the &#34;Software&#34;), to deal in the Software without
</span></span></span><span style=display:flex><span><span style=color:#75715e>restriction, including without limitation the rights to
</span></span></span><span style=display:flex><span><span style=color:#75715e>use, copy, modify, merge, publish, distribute, sublicense,
</span></span></span><span style=display:flex><span><span style=color:#75715e>and/or sell copies of the Software, and to permit persons
</span></span></span><span style=display:flex><span><span style=color:#75715e>to whom the Software is furnished to do so, subject to
</span></span></span><span style=display:flex><span><span style=color:#75715e>the following conditions:
</span></span></span><span style=display:flex><span><span style=color:#75715e>
</span></span></span><span style=display:flex><span><span style=color:#75715e>The above copyright notice and this permission notice shall
</span></span></span><span style=display:flex><span><span style=color:#75715e>be included in all copies or substantial portions of the Software.
</span></span></span><span style=display:flex><span><span style=color:#75715e>
</span></span></span><span style=display:flex><span><span style=color:#75715e>THE SOFTWARE IS PROVIDED &#34;AS IS&#34;, WITHOUT WARRANTY OF
</span></span></span><span style=display:flex><span><span style=color:#75715e>ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
</span></span></span><span style=display:flex><span><span style=color:#75715e>TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
</span></span></span><span style=display:flex><span><span style=color:#75715e>PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
</span></span></span><span style=display:flex><span><span style=color:#75715e>SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
</span></span></span><span style=display:flex><span><span style=color:#75715e>CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
</span></span></span><span style=display:flex><span><span style=color:#75715e>OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
</span></span></span><span style=display:flex><span><span style=color:#75715e>IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
</span></span></span><span style=display:flex><span><span style=color:#75715e>DEALINGS IN THE SOFTWARE. */</span></span></span></code></pre></div></p></li></ol><h4 id=noch-etwas-css-für-die-neue-suchfunktion data-numberify>Noch etwas CSS für die neue Suchfunktion<a class="anchor ms-1" href=#noch-etwas-css-für-die-neue-suchfunktion></a></h4><p>Dieses CSS kommt in die Datei <code>assets/css/_styles_project.scss</code>:<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-text data-lang=text><span style=display:flex><span>.offsearch form {margin-bottom: 40px;}
</span></span><span style=display:flex><span>.offsearch #search-query {width: 100%; padding: 10px;}
</span></span><span style=display:flex><span>.offsearch #search-results p {hyphens: auto;}</span></span></code></pre></div></p><h4 id=ergebnis--suchfunktion-auf-einer-einzelnen-seite data-numberify>Ergebnis Suchfunktion auf einer einzelnen Seite<a class="anchor ms-1" href=#ergebnis--suchfunktion-auf-einer-einzelnen-seite></a></h4><p>Die Suche findet man jetzt unter <a href=https://wiki.natenom.de/search/>wiki.natenom.com/search/</a> und diese Seite ist immer rechts oben verlinkt.</p><p>Für die Zukunft ist geplant, diese als Suchfeld in der Navigation einzufügen.</p><p>Ich bin sehr zufrieden mit der neuen Suche. Im Vergleich zu der Suche im Blog ist sie extrem schnell und zeigt die Ergebnisse auch schön an.</p><p>Deshalb werde ich diese Suche in den nächsten Tagen vermutlich auch in meinem Blog einbauen. Dort dauert die Suche aktuell sehr lange und verursacht sehr viel CPU-Last, obwohl dort als auch im neuen Wiki <a class=urlextern href=https://fusejs.io/>fuse.js</a> genutzt wird.</p><p></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-neue-suche-im-neuen-wiki_hu6cea242130cd4f5322f24f37902a6af3_79290_816x0_resize_q95_h2_catmullrom_3.webp title="Neue Suche im neuen Wiki" loading=lazy width=816 height=446></picture></a><figcaption>Neue Suche im neuen Wiki</figcaption></figure><p></p><p>Bei der Punktezahl erreicht das Wiki jetzt in 89 Punkte (mobil) (statt zuvor 52) und 100 Punkte (Desktop) (statt zuvor 71).</p><p></p><figure class=image-caption><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_eea79d505cbc6af6a93ea0eef27a93d9.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_857e6e6665f0ef0b3d5a1ebffac440e5.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_2ee73814ff2766e624c6c5d603375e37.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_eea79d505cbc6af6a93ea0eef27a93d9.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_857e6e6665f0ef0b3d5a1ebffac440e5.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_2ee73814ff2766e624c6c5d603375e37.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_125702_2ee73814ff2766e624c6c5d603375e37.webp title="89 Punkte für die mobile Ansicht" loading=lazy width=816 height=708></picture><figcaption>89 Punkte für die mobile Ansicht</figcaption></figure><p></p><p></p><figure class=image-caption><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_85d4f421e40d249d7e99097df0b0191d.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_73b519f1fd1690d9fae279e1f0702133.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_4f265062b97adbd5e9cfce3f7cb2f726.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_85d4f421e40d249d7e99097df0b0191d.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_73b519f1fd1690d9fae279e1f0702133.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_4f265062b97adbd5e9cfce3f7cb2f726.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/_hu800f6acdbdfaf0c6f3e590b3cc99fe6e_137423_4f265062b97adbd5e9cfce3f7cb2f726.webp title="100 Punkte für die Desktop Ansicht" loading=lazy width=816 height=708></picture><figcaption>100 Punkte für die Desktop Ansicht</figcaption></figure><p></p><h3 id=sidebar data-numberify>Sidebar<a class="anchor ms-1" href=#sidebar></a></h3><p>Ursprünglich hatte ich die Sidebar links (Seitenverzeichnis) so eingestellt, dass man jeden Bereich einzeln aufklappen/zuklappen konnte. Dadurch wurden aber im fertigen HTML ungefähr 2000 Zeilen nur für die Sidebar eingefügt. Übersichtlicher wurde es dadurch aber nicht.</p><p></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-aufklappbar_hua1c850ead444d36ce113802bfa5b5f8c_447107_816x0_resize_q95_h2_catmullrom_3.webp title="sidebar_menu_foldable = true" loading=lazy width=816 height=523></picture></a><figcaption>sidebar_menu_foldable = true</figcaption></figure><p></p><p>Deshalb habe ich die Sidebar jetzt so eingestellt, dass aufklappen/einklappen nicht mehr möglich ist. Es ist immer nur der aktuelle Bereich geöffnet.</p><p>Hier gibt es vom Theme mehrere Einstellungsmöglichkeiten im Bereich <code>params</code> in der Datei <code>config.toml</code>:</p><ul><li><code>ui.ul_show</code> Gibt an, bis zu welcher Anzahl die Unterebenen des aktuellen Bereichs geöffnet dargestellt werden.<ul><li>Hier mit <code>ui.ul_show = 1</code></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-1_hu703f199450f0b9f1b2eada2e0196058a_445419_816x0_resize_q95_h2_catmullrom_3.webp title="ui.ul_show = 1" loading=lazy width=816 height=523></picture></a><figcaption>ui.ul_show = 1</figcaption></figure><p></li><li>Hier mit <code>ui.ul_show = 2</code></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-nicht-aufklappbar-ul-show-2_hu4633a6a92cfe403971b70afbf57f7346_446861_816x0_resize_q95_h2_catmullrom_3.webp title="ui.ul_show = 2" loading=lazy width=816 height=523></picture></a><figcaption>ui.ul_show = 2</figcaption></figure><p></li></ul></li><li><code>sidebar_menu_compact</code> Man kann auch alles immer offen einstellen. Aber das eignet sich wirklich nur für sehr kleine Websites:</p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-21-sidebar-compact-false_hud35ec0696c9840b09f92aa7f8fea8430_448990_816x0_resize_q95_h2_catmullrom_3.webp title="sidebar_menu_compact = false" loading=lazy width=816 height=523></picture></a><figcaption>sidebar_menu_compact = false</figcaption></figure><p></li></ul><p>Auch auf die generierten HTML-Dateien wirkt sich das aus. Circa 2000 Zeilen werden benötigt, wenn die Sidebar aufklappbar ist und &ldquo;nur&rdquo; noch ca. 1400, wenn die Sidebar nur im aktuellen Bereich geöffnet ist. <em>(Ich hätte erwartet, dass es im letzteren Fall bei sehr kleinen Bereichen wie &ldquo;Fotografie&rdquo; nur ein paar Dutzend Zeilen wären.)</em></p><p><a class=urlextern href=https://www.docsy.dev/docs/adding-content/navigation/#section-menu-options>Dokumentation zur Sidebar</a></p><h3 id=zeit-zum-rendern-des-wiki data-numberify>Zeit zum Rendern des Wiki<a class="anchor ms-1" href=#zeit-zum-rendern-des-wiki></a></h3><p>Beim Durchstöbern der Einstellungsmöglichkeiten zur Sidebar (<a href=#optimierung--sidebar>siehe oben</a>) habe ich auch die <code>sidebar_cache_limit</code> gefunden.</p><p>Aus der Dokumentation:</p><pre><code>On large sites (default: &gt; 2000 pages) the section menu is not generated for each page, but cached for the whole section. The HTML classes for marking the active menu item (and menu path) are then set using JS. You can adjust the limit for activating the cached section menu with the optional parameter .ui.sidebar_cache_limit.
</code></pre><p>In meinem Wiki gibt es aktuell 1333 Seiten und ich habe das Limit testweise auf 500 eingestellt:</p><pre><code>sidebar_cache_limit = 500
</code></pre><p>Die Zeit, um mein gesamtes Wiki zu rendern verringert sich damit von circa 12 Sekunden auf circa 2 Sekunden.</p><p>Der Nachteil ist jedoch, dass die übergeordneten Seiten nicht mehr angezeigt werden, sobald man zu tief in den Unterebenen eines Bereichs ist.</p><p></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-cached_hu8d0b628ae7e8831f915000633f270ec8_149846_816x0_resize_q95_h2_catmullrom_3.webp title="Sidebar wird gecached und es ist nicht alles sichtbar." loading=lazy width=816 height=583></picture></a><figcaption>Sidebar wird gecached und es ist nicht alles sichtbar.</figcaption></figure><p></p><p></p><figure class=image-caption><a href=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached.png><picture><source type=image/webp srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt srcset="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_816x0_resize_q95_h2_catmullrom_3.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/images/2022-03-22-sidebar-not-cached_hu33d0182cf2cdff4949dec88c9c0f9335_165734_816x0_resize_q95_h2_catmullrom_3.webp title="Sidebar wird nicht gecached und es ist alles sichtbar." loading=lazy width=816 height=583></picture></a><figcaption>Sidebar wird nicht gecached und es ist alles sichtbar.</figcaption></figure><p></p><p>Damit ich nicht in Zukunft von diesem Mechanismus überrascht werde, sobald das Wiki über 2000 Seiten hat, habe ich den Wert auf 5000 eingestellt.</p><h3 id=swap-fonts data-numberify>Swap Fonts<a class="anchor ms-1" href=#swap-fonts></a></h3><p>Ich wurde darauf hingewiesen, dass in bei der Einbindung der selbst gehosteten Schriften im CSS noch einstellen kann, dass lokal vorhandene Systemschriften im Browser verwendet werden, solange die vom Server bereitgestellten Schriften noch nicht heruntergeladen wurden. Dadurch werden Inhalte früher dargestellt.</p><p>Pro <code>@font-face {</code>-Eintrag in der Datei <code>assets/scss/_variables_project.scss</code> kommt diese Zeile hinzu: <sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-css data-lang=css><span style=display:flex><span><span style=color:#f92672>font-display</span><span style=color:#f92672>:</span> <span style=color:#f92672>swap</span><span style=color:#f92672>;</span></span></span></code></pre></div><h3 id=gar-keine-systemfremden-schriften data-numberify>Gar keine systemfremden Schriften<a class="anchor ms-1" href=#gar-keine-systemfremden-schriften></a></h3><p>Es ist auch möglich, die Verwendung der eingebundenen Schriften komplett zu unterbinden. Dazu trägt man in der Datei <code>assets/scss/_variables_project.scss</code> ein:</p><pre><code>$td-enable-google-fonts: false;
</code></pre><p>Mir gefällt die verwendete Schriftart des Themes, daher nutze ich nicht die Möglichkeit zur Abschaltung.</p><h2 id=galerie-hinzugefügt data-numberify>Galerie hinzugefügt<a class="anchor ms-1" href=#galerie-hinzugefügt></a></h2><p>Ich habe zum Wiki-Theme noch die <a href=/2022/02/aenderungen-blog-hoehere-aufloesung-hovereffekt/>hugo-shortcode-gallery</a> hinzugefügt, die ich auch bereits hier im Blog verwende.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-bash data-lang=bash><span style=display:flex><span>cd themes
</span></span><span style=display:flex><span>git submodule add https://github.com/mfg92/hugo-shortcode-gallery.git</span></span></code></pre></div><p>Änderungen in der Datei <code>config.toml</code>:</p><ul><li>Aus <code>theme = "docsy"</code> wird <code>theme = [ "docsy", "hugo-shortcode-gallery" ]</code></li></ul><p>Dazu kommen diese Einträge in den Bereich <code>params</code> (die ich so auch im Blog verwende):</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml><span style=display:flex><span><span style=color:#a6e22e>galleryShowExif</span> = <span style=color:#66d9ef>true</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>gallerylastRow</span> = <span style=color:#e6db74>&#34;nojustify&#34;</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>gallerythumbnailResizeOptions</span> = <span style=color:#e6db74>&#34;450x450 q85 Lanczos&#34;</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>gallerythumbnailHoverEffect</span> = <span style=color:#e6db74>&#34;enlarge&#34;</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>galleryloadJQuery</span> = <span style=color:#66d9ef>true</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>galleryrowHeight</span> = <span style=color:#e6db74>&#34;150&#34;</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>gallerysortOrder</span> = <span style=color:#e6db74>&#34;desc&#34;</span>
</span></span><span style=display:flex><span><span style=color:#a6e22e>gallerypreviewType</span> = <span style=color:#e6db74>&#34;none&#34;</span></span></span></code></pre></div><p>Eine Beispielgalerie kann man hier ansehen: <a href=https://wiki.natenom.de/docs/sauerbraten/maps/kleinestadt/#screenshots>wiki.natenom.com/docs/sauerbraten/maps/kleinestadt/</a>.</p><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p><a class=urlextern href=https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display>https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display</a>&#160;<a href=#fnref:1 class=footnote-backref role=doc-backlink>&#8617;&#xfe0e;</a></p></li></ol></div></div></div></div><div class=card-footer><div class="post-navs d-flex justify-content-evenly"><div class="post-nav post-prev"><i class="fas fa-fw fa-chevron-down post-prev-icon me-1" data-fa-transform=rotate-90></i>
<a href=/2022/03/umzug-dokuwiki-hugo-4-einrichtung-fertig/>Umzug von DokuWiki nach Hugo Teil 4 Einrichten und fertig</a></div><div class="post-nav post-next"><a href=/2022/03/python-script-fuer-die-arbeit-mit-hugo/>Ein Python-Script für die Arbeit mit Hugo (Update 2024-01-09)</a>
<i class="fas fa-fw fa-chevron-down post-next-icon ms-1" data-fa-transform=rotate-270></i></div></div></div></article><section class="related-posts row card component"><div class=card-header><h2 class="card-title fs-4 my-2 text-surface">Ähnliche Beiträge</h2></div><div class=card-body><ul class="post-list list-styled"><li><a href=https://natenom.de/2022/03/umzug-dokuwiki-hugo-3-einrichtung/>Umzug von DokuWiki nach Hugo Teil 3 Einrichtung des neuen Wikis</a></li><li><a href=https://natenom.de/2022/03/umzug-dokuwiki-hugo-4-einrichtung-fertig/>Umzug von DokuWiki nach Hugo Teil 4 Einrichten und fertig</a></li><li><a href=https://natenom.de/2022/03/umzug-dokuwiki-hugo-1-vorarbeiten/>Umzug von DokuWiki nach Hugo Teil 1 Vorarbeiten</a></li><li><a href=https://natenom.de/2022/03/umzug-dokuwiki-hugo-2-pandoc/>Umzug von DokuWiki nach Hugo Teil 2 Export mit Pandoc</a></li><li><a href=https://natenom.de/2022/02/aenderungen-blog-hoehere-aufloesung-hovereffekt/>Änderungen im Blog Bessere Auflösung in den Galerien</a></li><li><a href=https://natenom.de/2019/11/neues-design-fuer-meinen-blog/>Neues Design für meinen Blog</a></li><li><a href=https://natenom.de/2022/03/interwiki-links-richtig-implementiert/>Interwiki-Links für Hugo richtig implementiert</a></li><li><a href=https://natenom.de/2022/02/galerien-im-feed/>Galerien im Feed</a></li><li><a href=https://natenom.de/2022/02/bleibt-alles-wie-es-ist-fast/>Es bleibt alles wie es ist fast</a></li><li><a href=https://natenom.de/2022/02/bildbeschreibungen-in-meinen-galerien-zwei-methoden/>Bildbeschreibungen in meinen Galerien Zwei Methoden verfügbar</a></li></ul></div></section><div class="card component row post-comments" id=post-comments><div class=card-header><h2 class="card-title my-2 fs-4 text-surface">Kommentare</h2></div><div class=card-body><p>Bisher gibt es hier keine Kommentare.</p><p><details class="mastodon-comments email"><summary class="mastodon-comments email-summary">Kommentar oder Anmerkung für diesen Blogbeitrag</summary><div class="mastodon-comments emailcontent"><p>Öffentlicher Kommentar per E-Mail: <a href='mailto:natenom@posteo.de?subject=Kommentar zum Blogbeitrag: Mein%20neues%20Wiki%20mit%20Hugo%20%e2%80%93%20Neue%20Suche%20und%20andere%20Optimierungen&body=Hallo Natenom, %0D%0A%0D%0Azu diesem Blogbeitrag habe ich einen Kommentar:%0D%0A%0D%0AMein Name (optional):%0D%0AMeine Website (optional):%0D%0AIch beziehe mich speziell auf den Kommentar mit der ID:%0D%0A%0D%0AURL zum Blogbeitrag: https%3a%2f%2fnatenom.de%2f2022%2f03%2fmein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen%2f'>Hier klicken</a></p><p>Nicht öffentliche Anmerkung per E-Mail: <a href='mailto:natenom@posteo.de?subject=Persönliche Anmerkung zum Blogbeitrag: Mein%20neues%20Wiki%20mit%20Hugo%20%e2%80%93%20Neue%20Suche%20und%20andere%20Optimierungen&body=Hallo Natenom,%0D%0A%0D%0Azu diesem Blogbeitrag habe ich eine persönliche, nicht zu veröffentlichende Anmerkung:%0D%0A%0D%0AURL zum Blogbeitrag: https%3a%2f%2fnatenom.de%2f2022%2f03%2fmein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen%2f'>Hier klicken</a></p></p><p>Sonstige Kontaktaufnahme: <a href=/natenom/>Kontakt</a></p></div></details></p></div></div></div></div><aside class="col-xxl-4 sidebar d-flex"><div class="container d-flex flex-column"><div class="accordion profile"><div class="accordion-item card row text-center component"><div class="accordion-header card-header border-0" id=profile-header><a class="accordion-button d-lg-none mb-2 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#profile aria-expanded=false aria-controls=profile>Profil</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=profile aria-labelledby=profile-header><div class="col-12 d-flex align-items-center justify-content-center"><picture><img class="profile-avatar rounded-circle" alt=Natenom src=https://natenom.de/images/logo-natenom-circle-150x150.png loading=lazy data-viewer-invisible width=150 height=150></picture></div><div class="col-12 profile-meta"><div class="profile-name fw-fold fs-lg">Natenom</div><div class=profile-bio>Verkehrswende, Fahrrad, CriticalMass, OpenBikeSensor, SimRa, OpenSource, Minimalist, OpenStreetMap, Müllsammeln, Malen, Zeichnen</div><a class=profile-about target=_blank rel="noopener noreferrer" href=/natenom/><i class="fas fa-fw fa-user"></i>Über mich</a></div></div></div></div><div class="accordion recent-posts"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block">Neueste Beiträge</h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent collapsed" role=button data-bs-toggle=collapse href=#recent-posts aria-expanded=false aria-controls=recent-posts>Neueste Beiträge</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=recent-posts><ul class="post-list list-unstyled ms-1"><li class=mb-2><a href=/2024/01/mal-wieder-einen-personalausweis-gefunden/>Mal wieder einen Personalausweis gefunden</a></li><li class=mb-2><a href=/2024/01/ueberfordert-im-eigenen-auto/>Überfordert im eigenen Auto</a></li><li class=mb-2><a href=/2024/01/was-damals-bei-kugelmaeusen-geholfen-hat-hilft-auch-bei-solchen-mit-laser/>Was damals bei Kugelmäusen geholfen hat, hilft auch bei solchen mit Laser</a></li><li class=mb-2><a href=/2024/01/haltbarkeit-meiner-ersten-barfussschuhe/>Haltbarkeit meiner ersten Barfußschuhe</a></li><li class=mb-2><a href=/2024/01/link-strassenlaerm/>Link(s): Straßenlärm</a></li><li class=mb-2><a href=/2024/01/simpletools-apps-fuer-android-daten-sammeln-oder-bezahlen-wechsel-zum-fork-fossify/>SimpleTools Apps: Daten sammeln oder bezahlen Wechselt zum Fork Fossify</a></li><li class=mb-2><a href=/2024/01/dateinamen-mit-emojies-in-telescope-in-neovim/>Dateinamen mit Emojies in Telescope in NeoVim</a></li><li class=mb-2><a href=/2024/01/capslock-als-esc-verwenden--ein-traum-fuer-neovim/>Capslock als Esc verwenden Ein Traum für NeoVim</a></li></ul></div></section></div><div class="accordion categories-taxonomies"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=https://natenom.de/categories>Kategorien</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#taxonomy-categories aria-expanded=false aria-controls=taxonomy-categories>Kategorien</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=taxonomy-categories><div class=py-2><a href=/categories/mobilit%C3%A4t/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Mobilität>Mobilität
<span class="badge badge-sm text-secondary bg-white ms-1">450</span>
</a><a href=/categories/fotografie/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Fotografie>Fotografie
<span class="badge badge-sm text-secondary bg-white ms-1">328</span>
</a><a href=/categories/diverses/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Diverses>Diverses
<span class="badge badge-sm text-secondary bg-white ms-1">242</span>
</a><a href=/categories/web/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Web>Web
<span class="badge badge-sm text-secondary bg-white ms-1">200</span>
</a><a href=/categories/linux/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Linux>Linux
<span class="badge badge-sm text-secondary bg-white ms-1">135</span>
</a><a href=/categories/android/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Android>Android
<span class="badge badge-sm text-secondary bg-white ms-1">68</span>
</a><a href=/categories/linkdump/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Linkdump>Linkdump
<span class="badge badge-sm text-secondary bg-white ms-1">42</span>
</a><a href=/categories/mumble/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Mumble>Mumble
<span class="badge badge-sm text-secondary bg-white ms-1">16</span>
</a><a href=/categories/navesima/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=NavesiMa>NavesiMa
<span class="badge badge-sm text-secondary bg-white ms-1">9</span>
</a><a href=/categories/links/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Links>Links
<span class="badge badge-sm text-secondary bg-white ms-1">2</span></a></div></div></section></div><div class="accordion tags-taxonomies"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=https://natenom.de/tags>Tags</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#taxonomy-tags aria-expanded=false aria-controls=taxonomy-tags>Tags</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=taxonomy-tags><div class=py-2><a href=/tags/fahrrad/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Fahrrad>Fahrrad
<span class="badge badge-sm text-secondary bg-white ms-1">557</span>
</a><a href=/tags/fotos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Fotos>Fotos
<span class="badge badge-sm text-secondary bg-white ms-1">410</span>
</a><a href=/tags/mobilit%C3%A4t/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Mobilität>Mobilität
<span class="badge badge-sm text-secondary bg-white ms-1">380</span>
</a><a href=/tags/pforzheim/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Pforzheim>Pforzheim
<span class="badge badge-sm text-secondary bg-white ms-1">263</span>
</a><a href=/tags/open-source/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title="Open Source">Open Source
<span class="badge badge-sm text-secondary bg-white ms-1">237</span>
</a><a href=/tags/natur/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Natur>Natur
<span class="badge badge-sm text-secondary bg-white ms-1">208</span>
</a><a href=/tags/linux/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Linux>Linux
<span class="badge badge-sm text-secondary bg-white ms-1">161</span>
</a><a href=/tags/autos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Autos>Autos
<span class="badge badge-sm text-secondary bg-white ms-1">131</span>
</a><a href=/tags/enzkreis/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Enzkreis>Enzkreis
<span class="badge badge-sm text-secondary bg-white ms-1">115</span>
</a><a href=/tags/statistiken/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Statistiken>Statistiken
<span class="badge badge-sm text-secondary bg-white ms-1">110</span>
</a><a href=/tags/hardware/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Hardware>Hardware
<span class="badge badge-sm text-secondary bg-white ms-1">107</span>
</a><a href=/tags/web/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Web>Web
<span class="badge badge-sm text-secondary bg-white ms-1">107</span>
</a><a href=/tags/android/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Android>Android
<span class="badge badge-sm text-secondary bg-white ms-1">98</span>
</a><a href=/tags/hugo/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Hugo>Hugo
<span class="badge badge-sm text-secondary bg-white ms-1">89</span>
</a><a href=/tags/m%C3%BCll/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Müll>Müll
<span class="badge badge-sm text-secondary bg-white ms-1">89</span>
</a><a href=/tags/sicherheit/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Sicherheit>Sicherheit
<span class="badge badge-sm text-secondary bg-white ms-1">88</span>
</a><a href=/tags/blog/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Blog>Blog
<span class="badge badge-sm text-secondary bg-white ms-1">87</span>
</a><a href=/tags/m%C3%BCllsammeln/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Müllsammeln>Müllsammeln
<span class="badge badge-sm text-secondary bg-white ms-1">86</span>
</a><a href=/tags/politik/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Politik>Politik
<span class="badge badge-sm text-secondary bg-white ms-1">86</span>
</a><a href=/tags/polizei/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Polizei>Polizei
<span class="badge badge-sm text-secondary bg-white ms-1">76</span>
</a><a href=/tags/strecke/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Strecke>Strecke
<span class="badge badge-sm text-secondary bg-white ms-1">75</span>
</a><a href=/tags/abstand/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Abstand>Abstand
<span class="badge badge-sm text-secondary bg-white ms-1">74</span>
</a><a href=/tags/landschaften/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Landschaften>Landschaften
<span class="badge badge-sm text-secondary bg-white ms-1">74</span>
</a><a href=/tags/w%C3%A4lder/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Wälder>Wälder
<span class="badge badge-sm text-secondary bg-white ms-1">68</span>
</a><a href=/tags/wordpress/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=WordPress>WordPress
<span class="badge badge-sm text-secondary bg-white ms-1">64</span>
</a><a href=/tags/neuhausen/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Neuhausen>Neuhausen
<span class="badge badge-sm text-secondary bg-white ms-1">60</span>
</a><a href=/tags/apps/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Apps>Apps
<span class="badge badge-sm text-secondary bg-white ms-1">59</span>
</a><a href=/tags/videos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Videos>Videos
<span class="badge badge-sm text-secondary bg-white ms-1">59</span>
</a><a href=/tags/landstra%C3%9Fen/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Landstraßen>Landstraßen
<span class="badge badge-sm text-secondary bg-white ms-1">54</span>
</a><a href=/tags/makrofotos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Makrofotos>Makrofotos
<span class="badge badge-sm text-secondary bg-white ms-1">54</span>
</a><a href=https://natenom.de/tags class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=ALLE>ALLE
<span class="badge badge-sm text-secondary bg-white ms-1">816</span></a></div></div></section></div><div class="accordion archives"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=/archiv/>Archiv</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent collapsed" role=button data-bs-toggle=collapse href=#archives aria-expanded=false aria-controls=archives>Archiv</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=archives><a href=/archiv/2024/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2024>2024 <span class="badge badge-sm text-secondary bg-white ms-1">23</span>
</a><a href=/archiv/2023/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2023>2023 <span class="badge badge-sm text-secondary bg-white ms-1">147</span>
</a><a href=/archiv/2022/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2022>2022 <span class="badge badge-sm text-secondary bg-white ms-1">188</span>
</a><a href=/archiv/2021/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2021>2021 <span class="badge badge-sm text-secondary bg-white ms-1">111</span>
</a><a href=/archiv/2020/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2020>2020 <span class="badge badge-sm text-secondary bg-white ms-1">193</span>
</a><a href=/archiv/2019/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2019>2019 <span class="badge badge-sm text-secondary bg-white ms-1">118</span>
</a><a href=/archiv/2018/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2018>2018 <span class="badge badge-sm text-secondary bg-white ms-1">143</span>
</a><a href=/archiv/2017/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2017>2017 <span class="badge badge-sm text-secondary bg-white ms-1">163</span>
</a><a href=/archiv/2016/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2016>2016 <span class="badge badge-sm text-secondary bg-white ms-1">108</span>
</a><a href=/archiv/2015/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2015>2015 <span class="badge badge-sm text-secondary bg-white ms-1">85</span>
</a><a href=/archiv/2014/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2014>2014 <span class="badge badge-sm text-secondary bg-white ms-1">85</span>
</a><a href=/archiv/2013/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2013>2013 <span class="badge badge-sm text-secondary bg-white ms-1">56</span>
</a><a href=/archiv/2012/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2012>2012 <span class="badge badge-sm text-secondary bg-white ms-1">43</span>
</a><a href=/archiv/2011/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2011>2011 <span class="badge badge-sm text-secondary bg-white ms-1">36</span></a></div></section></div></div></aside></div></main><footer class="footer mt-auto py-3 text-center container"><div class="row text-center"><div class="col-12 mt-2"><p class=mb-2>Natenoms Blog</p><p class="text-secondary mb-2"><small>Mein Blog über verschiedene Themen, die mich über die Zeit beschäftigen. Derzeit sind dies: Verkehrswende, Mobilität, Fahrrad, Minimalismus, Fotografie, Malen, Zeichnen …</small></p><div class="copyright mb-2 text-secondary"><small></small></div><div class="powered-by mb-2 text-secondary"><small>Build with ❤️ from the <a class=text-primary href=https://gohugo.io target=_blank rel="noopener noreferrer">Hugo</a> and the <a class=text-primary href=https://github.com/razonyang/hugo-theme-bootstrap target=_blank rel="noopener noreferrer">HBS</a> theme.</small></div><nav class="social-links nav justify-content-center mb-2 mt-3"><a class="nav-link social-link p-0 me-1 mb-2" target=_blank href=/index.xml title=RSS rel=me><i class="fas fa-fw fa-2x fa-rss" style=color:#ea6221></i></a></nav></div><div class="col-12 col-lg-8 offset-0 offset-lg-1"></div></div><div class=natenom-footer><a href=/ueber/impressum/>Impressum</a> <a href=/ueber/datenschutz/>Datenschutz</a></div></footer><script data-precache src=/assets/main/bundle.min.b0a436c85b86c431bb1c0fdb2ade0445de95435dc453dc7f4f30acad2153b535.js integrity="sha256-sKQ2yFuGxDG7HA/bKt4ERd6VQ13EU9x/TzCsrSFTtTU=" crossorigin=anonymous async></script><script data-precache src=/assets/icons/bundle.min.691458a56c2eef480bec8d31c967801a416b6445459ae901fe213e7870a0dd83.js integrity="sha256-aRRYpWwu70gL7I0xyWeAGkFrZEVFmukB/iE+eHCg3YM=" crossorigin=anonymous defer></script></body></html>