natenom-website-dump-2024-0.../natenom.de/ueber/markdownsyntax/index.html
2024-02-01 17:43:06 +01:00

153 lines
No EOL
58 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>Markdown-Syntax - 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="Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben."><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://natenom.de/images/logo-natenom-800x800.png"><meta name=twitter:title content="Markdown-Syntax"><meta name=twitter:description content="Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben."><meta property="og:title" content="Markdown-Syntax"><meta property="og:description" content="Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben."><meta property="og:type" content="article"><meta property="og:url" content="https://natenom.de/ueber/markdownsyntax/"><meta property="og:image" content="https://natenom.de/images/logo-natenom-800x800.png"><meta property="article:section" content="pages"><meta property="article:published_time" content="2021-04-13T03:07:08+02:00"><meta property="article:modified_time" content="2021-04-13T03:07:08+02:00"><meta itemprop=name content="Markdown-Syntax"><meta itemprop=description content="Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben."><meta itemprop=datePublished content="2021-04-13T03:07:08+02:00"><meta itemprop=dateModified content="2021-04-13T03:07:08+02:00"><meta itemprop=wordCount content="1506"><meta itemprop=image content="https://natenom.de/images/logo-natenom-800x800.png"><meta itemprop=keywords content="Blog,Formatierung,Howtos,"><meta property="og:image:alt" content="Markdown-Syntax"><meta name=twitter:image:alt content="Markdown-Syntax"><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=/pages/>Pages</a></li><li class="breadcrumb-item active">Markdown-Syntax</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 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">Markdown-Syntax</h1></div><div class=card-body><div class="post-meta mb-3"><span class="post-date me-1 mb-1" title="Erstellt am 2021-04-13 03:07:08 +0200 CEST.">Dienstag, 13. April 2021</span><span class="post-reading-time me-1 mb-1">8 Min. Lesezeit</span><a href=/tags/blog/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Blog</a><a href=/tags/formatierung/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Formatierung</a><a href=/tags/howtos/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Howtos</a></div><div id=postTOC class=toc-details><details open><summary>Inhaltsverzeichnis</summary><nav id=TableOfContents><ul><li><a href=#einen-neuen-blogbeitrag-erstellen>Einen neuen Blogbeitrag erstellen</a><ul><li><a href=#mindestanforderungen-für-einen-blogbeitrag>Mindestanforderungen für einen Blogbeitrag</a></li><li><a href=#front-matter>Front Matter</a><ul><li><a href=#titel-title>Titel (Title)</a></li><li><a href=#slug>Slug</a></li><li><a href=#comments>comments</a></li><li><a href=#jsoncomments>jsoncomments</a></li><li><a href=#beschreibung>Beschreibung</a></li><li><a href=#empfohlener-blogbeitrag>Empfohlener Blogbeitrag</a></li><li><a href=#angepinnt>Angepinnt</a></li></ul></li><li><a href=#url>URL</a></li><li><a href=#a_cover>Beitragsbilder</a></li></ul></li><li><a href=#grundsätzliches>Grundsätzliches</a><ul><li><a href=#code>Code</a></li></ul></li><li><a href=#a_syntax_blog-und-wiki>Dinge, die im Blog und Wiki gleichermaßen gelten</a><ul><li><a href=#interwiki-links>Interwiki-Links</a></li><li><a href=#seiten-verschieben>Seite(n) verschieben</a></li><li><a href=#shortcodes>Shortcodes</a></li><li><a href=#bilderfotosscreenshots>Bilder/Fotos/Screenshots</a><ul><li><a href=#einzelbilder-per-markdown-syntax>Einzelbilder per Markdown-Syntax</a></li><li><a href=#a_figure>Einzelbild(er) per figure</a></li><li><a href=#galerie>Galerie</a></li></ul></li><li><a href=#audiovideo>Audio/Video</a></li><li><a href=#anker-manuell-definieren>Anker manuell definieren</a></li><li><a href=#360-foto-mit-optionaler-karte>360°-Foto mit optionaler Karte</a></li></ul></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><del>Sobald das Git-Repo dieses Blogs online ist, wird jeder in der Lage sein, Inhalte zu ändern oder Fehler zu korrigieren. Ob und in welchen Fällen ich Pull Requests annehme, das werde ich in Zukunft noch beschreiben.</del></p></div><div id=post-content-body><p>FIXME, noch weitere Dinge erklären.</p><h2 id=einen-neuen-blogbeitrag-erstellen data-numberify>Einen neuen Blogbeitrag erstellen<a class="anchor ms-1" href=#einen-neuen-blogbeitrag-erstellen></a></h2><h3 id=mindestanforderungen-für-einen-blogbeitrag data-numberify>Mindestanforderungen für einen Blogbeitrag<a class="anchor ms-1" href=#mindestanforderungen-für-einen-blogbeitrag></a></h3><p>Ein Blogbeitrag sollte mindestens enthalten:</p><ul><li>Angaben im <code>Front Matter</code> (<a href=#front-matter>siehe hier</a>).<ul><li>Einen aussagekräftigen Titel.</li><li>Passende Tags (an den vorhandenen Tags orientieren und nur wenig neue Tags erstellen). Tags immer in der Mehrzahl verwenden, außer bei feststehenden Begriffen.</li><li>Bereits verwendete Tags kann man mit dem Hugo Helper (<code>-ft xyz</code>) suchen und deren Anzahl anzeigen lassen.</li><li>Eine Beschreibung mit maximal ~200 Zeichen (<a href=#beschreibung>siehe hier</a>).</li></ul></li><li>Seitenbild (<a href=#a_cover>siehe hier</a>).</li></ul><h3 id=front-matter data-numberify>Front Matter<a class="anchor ms-1" href=#front-matter></a></h3><p>Als Vorlage kann man dieses Front Matter benutzen:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>title</span>: <span style=color:#ae81ff>Fotos vom Ausflug 12.04.2022</span>
</span></span><span style=display:flex><span>---
</span></span><span style=display:flex><span><span style=color:#f92672>slug</span>: <span style=color:#ae81ff>fotos-ausflug</span>
</span></span><span style=display:flex><span><span style=color:#f92672>date</span>: <span style=color:#e6db74>2022-04-13T00:55:46</span><span style=color:#ae81ff>+02</span>:<span style=color:#ae81ff>00</span>
</span></span><span style=display:flex><span><span style=color:#f92672>draft</span>: <span style=color:#66d9ef>false</span>
</span></span><span style=display:flex><span><span style=color:#f92672>author</span>: <span style=color:#ae81ff>Name</span>
</span></span><span style=display:flex><span><span style=color:#f92672>categories</span>:
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>Allgemein</span>
</span></span><span style=display:flex><span><span style=color:#f92672>tags</span>:
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>Fotos</span>
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>Natur</span>
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>Kagube</span>
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>Pforzheim</span>
</span></span><span style=display:flex><span>---
</span></span></code></pre></div><h4 id=titel-title data-numberify>Titel (Title)<a class="anchor ms-1" href=#titel-title></a></h4><p>Der Titel einer Seite.</p><h4 id=slug data-numberify>Slug<a class="anchor ms-1" href=#slug></a></h4><p>URL des Blogbeitrags. Mit dem Datum wird im oberen Beispiel dann die URL <code>natenom.de/2022/04/fotos-ausflug</code>.</p><h4 id=comments data-numberify>comments<a class="anchor ms-1" href=#comments></a></h4><p>Wird dieser Parameter auf <code>false</code> (Standardwert ist <code>true</code>) gesetzt, dann wird die Info zu Anmerkungen/Kommentaren nicht angezeigt.</p><h4 id=jsoncomments data-numberify>jsoncomments<a class="anchor ms-1" href=#jsoncomments></a></h4><p>Wird dieser Parameter auf <code>true</code> (Standardwert ist <code>false</code>) gesetzt, dann wird die Datei <code>comments.json</code> im Kommentarbereich eines Blogbeitrags eingebunden. Die Syntax der json-Datei ist <a href=/2023/12/kommentare-koennen-jetzt-via-json-hinterlegt-werden-und-mir-sonstwie-zugeschickt-werden/#beispiel>hier</a> dokumentiert.</p><p>Die Datei <code>comments.json</code> kann mit Hilfe des Hugo Helpers erstellt werden.</p><h4 id=beschreibung data-numberify>Beschreibung<a class="anchor ms-1" href=#beschreibung></a></h4><p>Man kann im Front Matter eine Beschreibung einfügen:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>description</span>: <span style=color:#ae81ff>Beschreibung</span>
</span></span></code></pre></div><p>Alternativ verwende man dieses Tag:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#ae81ff>&lt;!--more--&gt;</span>
</span></span></code></pre></div><p>Dadurch wird alles vom Anfang des Beitrags bis zu dieser Zeile als Beschreibung verwendet.</p><h4 id=empfohlener-blogbeitrag data-numberify>Empfohlener Blogbeitrag<a class="anchor ms-1" href=#empfohlener-blogbeitrag></a></h4><p>Damit ein Blogbeitrag rechts in der Sidebar in das Widget &ldquo;Empfohlene Beiträge&rdquo; eingefügt wird, fügt man im <code>Front Matter</code> ein:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>featured</span>: <span style=color:#66d9ef>true</span>
</span></span></code></pre></div><h4 id=angepinnt data-numberify>Angepinnt<a class="anchor ms-1" href=#angepinnt></a></h4><p>Einen Beitrag kann man auf der Startseite im Blog anpinnen mit dem Eintrag im <code>Front Matter</code>:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>pinned</span>: <span style=color:#66d9ef>true</span>
</span></span></code></pre></div><h3 id=url data-numberify>URL<a class="anchor ms-1" href=#url></a></h3><p>Sollte, wie meist bei Pages, also Einzelseiten wie dieser hier, eine bestimmte URL für die Seite benötigt werden, so kann man das Tag <code>url</code> verwenden, z. B. für die Seite hier:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>url</span>: <span style=color:#ae81ff>/ueber/markdownsyntax/</span>
</span></span></code></pre></div><h3 id=a_cover data-numberify>Beitragsbilder<a class="anchor ms-1" href=#a_cover></a></h3><p>Dateien, die bestimmte Teilstrings enthalten und im Hauptverzeichnis eines Page Bundles liegen, werden automatisch genutzt für:</p><ul><li><code>cover</code> und <code>thumbnail</code>: Wird nur in der Liste von Blogbeiträgen als Thumbnail angezeigt.</li><li><code>feature</code>: Wird nur im geöffneten Blogbeitrag oben im Header angezeigt.</li></ul><p>Gibt es eines der drei, wird diese automatisch als Bild für Twitter Cards und Open Graph verwendet.</p><h2 id=grundsätzliches data-numberify>Grundsätzliches<a class="anchor ms-1" href=#grundsätzliches></a></h2><h3 id=code data-numberify>Code<a class="anchor ms-1" href=#code></a></h3><p>Man kann Code auf verschiedene Weisen darstellen:</p><ul><li>Codefence mit Angabe der Sprache, als mit 3 Backticks (<a class=urlextern href=https://gohugo.io/content-management/syntax-highlighting/>Details zum Syntax-Highlighting</a>)</li><li>Hightlight Shortcode builtin (<a class=urlextern href=https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode>Details in offizieller Doku</a>)</li><li>Einrückungen</li></ul><h2 id=a_syntax_blog-und-wiki data-numberify>Dinge, die im Blog und Wiki gleichermaßen gelten<a class="anchor ms-1" href=#a_syntax_blog-und-wiki></a></h2><p>Weil diese Dinge für Blog und Wiki gelten, sind sie nur hier beschrieben und im Wiki wird hierher verlinkt.</p><h3 id=interwiki-links data-numberify>Interwiki-Links<a class="anchor ms-1" href=#interwiki-links></a></h3><p>Trotz des Namens sind solche Interwiki-Links sowohl im Blog als auch im Wiki nutzbar.</p><p>Folgende Interwiki-Links stehen zur Verfügung:<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></p><table><thead><tr><th>Name</th><th>Ziel</th></tr></thead><tbody><tr><td>nat-blog</td><td><code>https://natenom.de/</code></td></tr><tr><td>nat-files</td><td><code>https://f.natenom.de/</code></td></tr><tr><td>nat-wiki</td><td><code>https://wiki.natenom.de/</code></td></tr><tr><td>nat-www</td><td><code>https://www.natenom.de/</code></td></tr><tr><td>kagube</td><td><code>https://kagube.de/</code></td></tr><tr><td>wpde</td><td><code>https://de.wikipedia.org/wiki/</code></td></tr><tr><td>wpen</td><td><code>https://en.wikipedia.org/wiki/</code></td></tr><tr><td>github</td><td><code>https://github.com/</code></td></tr><tr><td>giistvo (Gesetze im Internet StVO)</td><td><code>https://www.gesetze-im-internet.de/stvo_2013/</code></td></tr></tbody></table><p>Die Syntax für die Nutzung ist an die von Markdown angelehnt:</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-markdown data-lang=markdown><span style=display:flex><span>[<span style=color:#f92672>Link zu meinem Wiki</span>](<span style=color:#a6e22e>nat-wiki&gt;docs/fahrrad/faq/strasse_trotz_radweg/</span>)
</span></span></code></pre></div><p>Das wird aufgelöst zu:</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-markdown data-lang=markdown><span style=display:flex><span>[<span style=color:#f92672>Link zu meinem Wiki</span>](<span style=color:#a6e22e>https://wiki.natenom.de/docs/fahrrad/faq/strasse_trotz_radweg/</span>)
</span></span></code></pre></div><div class="shortcode-notice hinweis"><div class="shortcode-notice-title hinweis">Hinweis</div><div class=notice-content><p>Interwiki-Links, die mit <code>nat-</code> beginnen und auch <code>kagube</code> erhalten kein Icon, mit dem sonst externe URLs gekennzeichnet werden, da die Websites alle auf dem selben Webserver liegen.</p><p><a href=/2022/03/interwiki-links-richtig-implementiert/>Hier kann man nachlesen</a>, wie ich die Interwiki-Links implementiert habe.</p></div></div><h3 id=seiten-verschieben data-numberify>Seite(n) verschieben<a class="anchor ms-1" href=#seiten-verschieben></a></h3><p>Verschiebt man (nur aus guten Gründen) eine Seite innerhalb des Wikis oder Blogs (z. B. innerhalb von <code>pages/</code>), dann muss im Front Matter der Parameter <code>aliases:</code> hinzugefügt werden mit dem alten Standort der Seite.</p><p>Beispielsweise hatte ich mal diese Anweisungen hier verschoben von <code>/docs/ueber/format/</code> nach <code>/docs/ueber/mitarbeit/</code>. Der richtige Alias-Eintrag war deshalb:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>aliases</span>:
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>/docs/ueber/format/</span>
</span></span></code></pre></div><p>Benennt man eine einzelne Seite nur um, ohne den Standort innerhalb der Verzeichnishierarchie zu verändern, dann reicht es aus, den Namen der alten Datei in Aliases einzutragen. Hieß die alte Seite z. B. <code>ohne_kuehlschrank_leben.md</code> und benennt man diese um in <code>kuehlschrank.md</code>, dann ist der passende Eintrag in Aliases:</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-yaml data-lang=yaml><span style=display:flex><span><span style=color:#f92672>aliases</span>:
</span></span><span style=display:flex><span> - <span style=color:#ae81ff>ohne_kuehlschrank_leben</span>
</span></span></code></pre></div><div class="shortcode-notice hinweis"><div class="shortcode-notice-title hinweis">Hinweis</div><div class=notice-content><p>Der Alias-Eintrag bewirkt, dass an der alten URL eine HTML-Datei erzeugt wird, die nur eine Weiterleitung per HTTP Status Code 301 (&ldquo;Moved permanently&rdquo;) enthält und auf die neue URL zeigt.</p><p>Zudem sollte der Alias bei absoulten URLs immer mit einem <code>/</code> abgeschlossen sein, sonst funktioniert die Weiterleitung lokal oder bei nicht gut konfiguriertem Server nicht zuverlässig, wenn man in der alten URL den Slash weglässt oder hinzufügt.</p></div></div><h3 id=shortcodes data-numberify>Shortcodes<a class="anchor ms-1" href=#shortcodes></a></h3><p>Bitte nur so wenig wie möglich Shortcodes verwenden und so oft wie möglich die Formatierungen von Markdown verwenden.</p><h3 id=bilderfotosscreenshots data-numberify>Bilder/Fotos/Screenshots<a class="anchor ms-1" href=#bilderfotosscreenshots></a></h3><p>Bilder Screenshots sollten nur verlinkt werden, wenn es notwendig ist, das Bild in groß sehen zu müssen, um es erkennen zu können. Wenn ein Bild nicht breiter als ca. 600 Pixel ist, dann reicht es aus, wenn es eingebettet wird, aber nicht verlinkt.</p><p>Den Hugo Helper kann man nutzen, um Bilder im Page Bundle auf maximal 4000x4000 Pixel zu beschränken, Metadaten aus Bildern und Videos zu entfernen, und mehr. Aufruf ist <code>hgh.py -pp</code>.</p><ul><li>Alle Bilder werden auf 4000x4000 verkleinert, es sei denn im Dateinamen ist <code>pano</code> oder <code>sphere</code> enthalten.</li><li>Enthält der Dateiname <code>2k</code>, wird auf maximal 2000x2000 Pixel verkleinert.</li><li>Zusätzlich werden fast alle Exifdaten entfernt außer diejenigen, die für Fotos relevant sind.</li><li>Bei Spheres (360°-Fotos) bleiben zusätzlich die Metadaten erhalten, die für die Darstellung dieser Spheres notwendig sind.</li></ul><h4 id=einzelbilder-per-markdown-syntax data-numberify>Einzelbilder per Markdown-Syntax<a class="anchor ms-1" href=#einzelbilder-per-markdown-syntax></a></h4><p>Die Syntax ist:</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-markdown data-lang=markdown><span style=display:flex><span>![<span style=color:#f92672>Alt Text</span>](<span style=color:#a6e22e>pfad/zu_bild.jpg &#34;Bildbeschreibung unter dem Bild&#34;</span>)
</span></span></code></pre></div><p>Man kann auch ein Bild einbinden und darauf einen Link auf ein anderes Bild oder auf das Orinalbild legen:</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-markdown data-lang=markdown><span style=display:flex><span>[<span style=color:#f92672>![</span>](<span style=color:#a6e22e>bild.jpg</span>)](bild.jpg)
</span></span></code></pre></div><p>Oder einen Link auf ein Bild legen:</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-markdown data-lang=markdown><span style=display:flex><span>[<span style=color:#f92672>![</span>](<span style=color:#a6e22e>bild.jpg</span>)](/url)
</span></span></code></pre></div><h4 id=a_figure data-numberify>Einzelbild(er) per figure<a class="anchor ms-1" href=#a_figure></a></h4><p>Den Shortcode <code>figure</code> bitte nur benutzen, wenn:</p><ul><li>Das Bild verlinkt sein soll UND Titel oder Beschreibung (caption) enthält, in der Markdown notwendig ist, was innerhalb von Caption möglich ist, in der Markdown-Syntax (siehe Punkt oben drüber), allerdings nicht.</li><li>Das Bild kleiner dargestellt werden soll als das Original bzw. die maximale Breite im Blog (816 Pixel), obwohl das Originalbild breiter ist.</li></ul><p>Einschränkung: Derzeit funktioniert <code>figure</code> nur, wenn das Bild im Pagebundle liegt. Liegt es auf einem Remote-Server, dann geht die Einbindung nur via Markdown-Syntax.</p><p>Syntax für figure:</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-jinja data-lang=jinja><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>&lt;</span> figure src<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> link<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> alt<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> title<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> caption<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> width<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> float<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;&#34;</span> <span style=color:#f92672>&gt;</span><span style=color:#75715e>}}</span>
</span></span></code></pre></div><p>Mit dem Attribut <code>float=</code> kann man Float entweder auf <code>left</code> oder <code>right</code> setzen. So ist es möglich, Bilder nebeneinander zu positionieren. Damit danach der Text wieder in einem eigenen Absatz anfängt, kann man diesen Shortcode verwenden:</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-jinja data-lang=jinja><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>&lt;</span> clear <span style=color:#f92672>&gt;</span><span style=color:#75715e>}}</span>
</span></span></code></pre></div><div class="shortcode-notice hinweis"><div class="shortcode-notice-title hinweis">Hinweis</div><div class=notice-content>Neu: Wenn man <code>link="_self"</code> angibt, dann verlinkt der Shortcode automatisch auf das in <code>src</code> angegebene Bild.</div></div><h4 id=galerie data-numberify>Galerie<a class="anchor ms-1" href=#galerie></a></h4><p>Bitte keine Galerien mehr verwenden, sondern nur noch Einzelbilder mit <a href=#a_figure>Figure</a>. Das ist fürs Durchschauen des Blogs später schöner, weil man auch zu jedem Bild etwas schreiben kann. Auch ohne externe Tools.</p><p>Ist zwar mehr Arbeit, liefert aber später mehr Anhaltspunkte für Erinnerungen.</p><p><del>Sollen mehrere Bilder mit Overlay angezeigt werden, dann eine Galerie verwenden:</del></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-jinja data-lang=jinja><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>&lt;</span> nat_gallery match<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;images/*&#34;</span> <span style=color:#f92672>&gt;</span><span style=color:#75715e>}}</span>
</span></span></code></pre></div><h3 id=audiovideo data-numberify>Audio/Video<a class="anchor ms-1" href=#audiovideo></a></h3><p>Bitte für Audio UND Video den Shortcode <code>video</code> nutzen und dabei nur die notwendigen Attribute angeben:</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-jinja data-lang=jinja><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>&lt;</span> video src<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;file.mp4&#34;</span> <span style=color:#f92672>&gt;</span><span style=color:#75715e>}}</span>
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>&lt;</span> video src<span style=color:#f92672>=</span><span style=color:#e6db74>&#34;42.oga&#34;</span> <span style=color:#f92672>&gt;</span><span style=color:#75715e>}}</span>
</span></span></code></pre></div><p>Optionale Attribute:</p><ul><li><code>caption</code>: Untertitel des Videos, das darunter angezeigt wird. Es darf Markdown verwendet werden.</li><li><code>linktext</code>: Text für den Link zum Video. Nur angeben, wenn es abweichen soll von <code>shortcode_video_linktext</code> in der <code>config.toml</code>.</li><li><code>type</code>: MIME-Typ der angegebenen Datei. Für Medien innerhalb eines Page Bundles muss man <code>type</code> nicht angeben (da Hugo das selbst herausfindet und angibt) sondern nur bei Dateien, die via http oder https eingebunden werden. Ein angegebenes <code>type</code> hat immer die höchste Priorität.<ul><li>Video z. B. <code>video/mp4</code></li><li>Audio z. B. <code>audio/ogg</code></li></ul></li><li><code>preload</code>: none|auto|metadata (<a class=urlextern href=https://www.w3schools.com/tags/att_video_preload.asp>Siehe auch hier</a>.)</li><li><code>poster</code>: Es ist möglich, ein selbst definiertes Vorschaubild für das Video mittels anzugeben. Das funktioniert jedoch nur, wenn <code>preload=none</code> verwendet wird.</li></ul><h3 id=anker-manuell-definieren data-numberify>Anker manuell definieren<a class="anchor ms-1" href=#anker-manuell-definieren></a></h3><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-markdown data-lang=markdown><span style=display:flex><span><span style=color:#75715e>## Local storage {#anker-123}
</span></span></span></code></pre></div><p>Verlinken kann man diese dann mit:</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-markdown data-lang=markdown><span style=display:flex><span>[<span style=color:#f92672>Linktext</span>](<span style=color:#a6e22e>/url#anker-123</span>)
</span></span></code></pre></div><p>Bitte den Namen von manuellen Ankern immer mit <code>a_</code> beginnen, um sie von automatisch gesetzten Ankern für Überschriften zu trennen.</p><h3 id=360-foto-mit-optionaler-karte data-numberify>360°-Foto mit optionaler Karte<a class="anchor ms-1" href=#360-foto-mit-optionaler-karte></a></h3><p>Der Shortcode <code>sphere</code> ermöglicht es, 360°-Fotos interaktiv und entzerrt darzustellen. Zusätzlich kann man mit dem selbst erstellten Shortcode eine Karte unter dem Foto anzeigen lassen.</p><p>Der Shortcode hat folgende Möglichkeiten:</p><ul><li>src: Link zum 360°-Foto</li><li>(optional) caption: Bildunterschrift</li><li>(optional) osmurl: Wird als Link angezeigt und soll eine Karte von OSM mit einer Markierung enthalten von dem Ort, wo das Foto aufgenommen wurde.</li><li>(optional) osmembedurl: Die Embed-URL (Verweis auf die OSM-Karte), die unter dem 360°-Foto als iframe angezeigt wird.</li><li>(optional) north: In den Metadaten ist der Nullpunkt (Startpunkt) eines Panoramas angegeben. Hier gibt man einen Wert zwischen +-0 bis 360 an, damit es eine Markierung gibt, die den Norden angibt.</li><li>(optional) direction: Ein Wert zwischen +-0deg bis 360deg, 0 wäre Nord. der angibt, in welche Richtung ein Panorama beim Laden zeigt.</li><li>(optional) autorotate: Ein Wert zwischen -360 und 360, der angibt, ob ein Panorama automatisch gedreht wird, in welche Richtung und wie schnell.</li></ul><p>Weitere Infos für north, direction und autorotate (eigentlich autorotatePitch) <a class=urlextern href=https://photo-sphere-viewer.js.org/plugins/>gibt es hier</a>.</p><p>Hier der Shortcode für <a href=/2023/02/360-foto-bei-neuhausen/>dieses Beispiel</a>:</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-go-html-template data-lang=go-html-template><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#960050;background-color:#1e0010>&lt;</span> <span style=color:#a6e22e>sphere</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;2023-02-24-neuhausen-1-small.webp&#34;</span> <span style=color:#a6e22e>caption</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;Landschaft nördlich von Neuhausen (Enzkreis)&#34;</span> <span style=color:#a6e22e>osmurl</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;https://www.openstreetmap.org/?mlat=48.80035&amp;mlon=8.77323#map=15/48.8010/8.7731&#34;</span> <span style=color:#a6e22e>imgsize</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;8,6&#34;</span> <span style=color:#a6e22e>osmembedurl</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;https://www.openstreetmap.org/export/embed.html?bbox=8.755288124084474%2C48.79391687059584%2C8.79112243652344%2C48.8067645369292&amp;amp;layer=mapnik&amp;amp;marker=48.800341115118435%2C8.773205280303955&#34;</span> <span style=color:#960050;background-color:#1e0010>&gt;</span><span style=color:#75715e>}}</span>
</span></span></code></pre></div><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>Es gibt noch mehr für alte Domains von mir, die aber nicht mehr verwendet werden. Alle Interwiki-Links sind in <code>layouts/_default/_markup/render-link.html</code> zu finden.&#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=/ueber/>Über Natenoms Blog</a></div><div class="post-nav post-next"><a href=/ueber/themen/>Themen in Natenoms Blog</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/2021/01/neues-aussehen-im-blog-mit-der-moeglichkeit-zwischen-hell-und-dunkel-zu-wechseln/>Neues Aussehen im Blog Mit der Möglichkeit zwischen hell und dunkel zu wechseln</a></li><li><a href=https://natenom.de/2020/09/loesung-fuer-hintergrund-updates-funktionieren-nicht-wie-erwartet-in-wordpress/>Lösung für „Hintergrund-Updates funktionieren nicht wie erwartet“ in WordPress</a></li><li><a href=https://natenom.de/2020/09/ungueltige-sitemap-auf-meinem-blog-repariert/>Ungültige Sitemap auf meinem Blog repariert</a></li><li><a href=https://natenom.de/2020/09/upgrade-auf-wordpress-5-5-1-endlich-auch-mit-funktionierender-sitemap/>Upgrade auf WordPress 5.5.1 endlich auch mit funktionierender Sitemap</a></li><li><a href=https://natenom.de/2020/02/umstrukturierung-im-blog/>Umstrukturierung im Blog</a></li><li><a href=https://natenom.de/2020/01/nein-ich-verdiene-kein-geld-mit-meinen-webseiten-disclaimer/>Nein, ich verdiene kein Geld mit meinen Webseiten Disclaimer</a></li><li><a href=https://natenom.de/2019/11/mein-logo-fuer-twitter-cards-meines-wikis-und-blogs-in-hoehrerer-aufloesung/>Mein Logo für Twitter-Cards (Open Graph) meines Wikis und Blogs in höhrerer Auflösung</a></li><li><a href=https://natenom.de/2019/04/gutenberg-editor-fuer-wordpress-wegen-bug-werden-in-galerien-nur-kleine-bildervarianten-verlinkt/>Gutenberg-Editor für WordPress Wegen Bug werden in Galerien nur kleine Bildervarianten verlinkt</a></li><li><a href=https://natenom.de/2018/12/struktur-der-kategorien-in-meinem-blog-stark-vereinfacht/>Struktur der Kategorien und Tags in meinem Blog stark vereinfacht</a></li><li><a href=https://natenom.de/2018/09/hoerbuecher-in-voice-auf-android-schneller-als-in-25-facher-geschwindigkeit-anhoeren/>Hörbücher in Voice auf Android schneller als in 2,5-facher Geschwindigkeit anhören</a></li></ul></div></section></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>