3009 lines
511 KiB
XML
3009 lines
511 KiB
XML
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Web on Natenoms Blog</title><link>https://natenom.de/categories/web/</link><description>Recent content in Web on Natenoms Blog</description><generator>Hugo -- gohugo.io</generator><language>de</language><copyright/><lastBuildDate>Sun, 21 Jan 2024 01:56:20 +0100</lastBuildDate><atom:link href="https://natenom.de/categories/web/index.xml" rel="self" type="application/rss+xml"/><item><title>Hugo Shortcode kann per Einstellung aufs Original verlinken</title><link>https://natenom.de/2024/01/hugo-shortcode-kann-per-einstellung-aufs-original-verlinken/</link><pubDate>Sun, 21 Jan 2024 01:56:20 +0100</pubDate><guid>https://natenom.de/2024/01/hugo-shortcode-kann-per-einstellung-aufs-original-verlinken/</guid><description><![CDATA[<p>Wenn ich hier im Blog Fotos/Bilder/Grafiken einbinde, dann sind sie fast immer auf das Original des Bildes verlinkt. Im Blog selbst werden nur kleine, automatisch erstellte Varianten in geringerer Auflösung eingebunden.</p>
|
|||
|
|
<p>Das hat den Nachteil, dass man unnötig viel Schreibarbeit hat bzw. den Dateinamen zweimal einfügen muss.</p>
|
|||
|
|
<p>Es stand schon lange auf meiner Todo-Liste, das endlich mal anzugehen. Heute habe ich das sehr einfach gelöst.</p>]]></description><content:encoded><![CDATA[<p>Wenn ich hier im Blog Fotos/Bilder/Grafiken einbinde, dann sind sie fast immer auf das Original des Bildes verlinkt. Im Blog selbst werden nur kleine, automatisch erstellte Varianten in geringerer Auflösung eingebunden.</p>
|
|||
|
|
<p>Das hat den Nachteil, dass man unnötig viel Schreibarbeit hat bzw. den Dateinamen zweimal einfügen muss.</p>
|
|||
|
|
<p>Es stand schon lange auf meiner Todo-Liste, das endlich mal anzugehen. Heute habe ich das sehr einfach gelöst.</p>
|
|||
|
|
<p>Und das geht so:</p>
|
|||
|
|
<p>Ich verwende im Blog und auch im Wiki einen eigenen Shortcode, den ich wie folgt aufrufe:</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"><</span> figure src<span style="color:#f92672">=</span><span style="color:#e6db74">"deckel-vorne-2.webp"</span> link<span style="color:#f92672">=</span><span style="color:#e6db74">"deckel-vorne-2.webp"</span> <span style="color:#f92672">></span><span style="color:#75715e">}}</span>
|
|||
|
|
</span></span></code></pre></div><p>Im obigen Beispiel wird die Datei im Blogbeitrag angezeigt und auf das Original verlinkt.</p>
|
|||
|
|
<p>Seit heute gibt es dafür die vereinfachte Variante:</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"><</span> figure src<span style="color:#f92672">=</span><span style="color:#e6db74">"deckel-vorne-2.webp"</span> link<span style="color:#f92672">=</span><span style="color:#e6db74">"_self"</span> <span style="color:#f92672">></span><span style="color:#75715e">}}</span>
|
|||
|
|
</span></span></code></pre></div><p>Wenn der Wert von <code>link=</code> den Wert <code>_self</code> hat, dann verlinkt der Shortcode automatisch das Originalfoto bei der Einbindung.</p>
|
|||
|
|
<p>Wenn sich in Zukunft der Dateiname ändert, muss man weniger ändern. Und auch beim Schreiben des Shortcodes muss man das selbe nicht zweimal eingeben.</p>
|
|||
|
|
<p>Im Quellcode des Shortcodes habe ich dafür nur diese eine Zeile hinzugefügt:</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">-</span> <span style="color:#66d9ef">if</span> <span style="color:#f92672">(</span>eq <span style="color:#960050;background-color:#1e0010">$</span>link <span style="color:#e6db74">"_self"</span><span style="color:#f92672">)</span> -<span style="color:#75715e">}}{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>link <span style="color:#f92672">=</span> <span style="color:#960050;background-color:#1e0010">$</span>original_img.RelPermalink -<span style="color:#75715e">}}{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span></code></pre></div><p>Verlinkungen alter Blogbeiträge funktionieren weiterhin.</p>]]></content:encoded></item><item><title>Und wieder ein neues Helferlein, um einfacher bloggen zu können</title><link>https://natenom.de/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/</link><pubDate>Sat, 20 Jan 2024 22:22:07 +0100</pubDate><guid>https://natenom.de/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/</guid><description><![CDATA[<p>Ich hatte bereits vor kurzem ein Helferlein beschrieben, <a href="/2024/01/neues-helferlein-fuer-hugo-erleichtert-das-bloggen/">siehe hier</a>, das mir die “Arbeit” im Blog erleichtert. Doch ich hatte immer noch einige Dinge, die ich von Hand machen musste und die mich immer wieder genervt hatten. Und wenn genervt ist von Dingen, dann macht man sie weniger wahrscheinlich. Daher habe ich meinen Hugo Helper noch etwas erweitert, um noch weniger manuell machen zu müssen.</p>]]></description><content:encoded><![CDATA[<p>Ich hatte bereits vor kurzem ein Helferlein beschrieben, <a href="/2024/01/neues-helferlein-fuer-hugo-erleichtert-das-bloggen/">siehe hier</a>, das mir die “Arbeit” im Blog erleichtert. Doch ich hatte immer noch einige Dinge, die ich von Hand machen musste und die mich immer wieder genervt hatten. Und wenn genervt ist von Dingen, dann macht man sie weniger wahrscheinlich. Daher habe ich meinen Hugo Helper noch etwas erweitert, um noch weniger manuell machen zu müssen.</p>
|
|||
|
|
<p>Angenommen, ich wollte ein paar Bilder in einem Blogbeitrag unterbringen. Die Bilder, die ich ins Page Bundle kopiert hatte, konnte ich über einen Rechtsklick über ein eigenes Script verkleinern. Über ein weiteres Script musste ich auch wieder per Rechtsklick alle Metadaten entfernen und dabei entscheiden, ob ich das Script nutze, das alle Daten entfernt oder das Script, das nur die entfernt, die nicht relevant für Fotos sind. Im Fall von 360 ° Fotos müssen bestimmte Metadaten nämlich erhalten bleiben, da sonst der Betrachter hier im Blog nicht funktioniert, <a href="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/#metadaten--so-wichtig-f%c3%bcr-unvollst%c3%a4ndige-panoramen">siehe hier</a>.</p>
|
|||
|
|
<h2 id="hugo-helper-erweitert" data-numberify>Hugo Helper erweitert<a class="anchor ms-1" href="#hugo-helper-erweitert"></a></h2>
|
|||
|
|
<p>Diese beschriebenen Schritte erledigt jetzt mein Hugo Helper automatisch. Ich muss nur weiterhin die Bilder in das Page Bundle (ein Verzeichnis, das den Blogbeitrag und alle zugehörigen Dateien beinhaltet), benennen und führe irgendwann nur noch meinen Hugo Helper aus, der die folgenden Dinge macht:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Alle Bilder in 4000x4000 Pixel herunterskalieren, wenn sie größer sind.</li>
|
|||
|
|
<li>Beinhaltet der Dateiname die Zeichenkette <code>2k</code>, dann wird auf 2000x2000 Pixel herunterskaliert. Das hat den Hintergrund, dass nicht alle Fotos die volle Auflösung haben müssen, wenn es z. B. nicht um Fotografie geht.</li>
|
|||
|
|
<li>Enthält der Dateiname den String “pano” oder “sphere” (360°-Foto) wird die Auflösung nicht verringert.</li>
|
|||
|
|
<li>Alle Bilder werden nach .webp konvertiert.</li>
|
|||
|
|
<li>Die alten Bilder werden in ein temporäres Verzeichnis außerhalb des Blog-Verzeichnisses verschoben, statt direkt gelöscht zu werden, falls etwas schiefgehen sollte.</li>
|
|||
|
|
<li>Die Exifdaten aller Fotos und Videos werden gelöscht bis auf für Fotografie relevante Daten.</li>
|
|||
|
|
<li>Enthält der Dateiname den String <code>sphere</code>, dann werden auch die dafür relevanten Exifdaten in der Datei belassen (siehe oben).</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="neuer-workflow-für-blogbeiträge" data-numberify>Neuer Workflow für Blogbeiträge<a class="anchor ms-1" href="#neuer-workflow-für-blogbeiträge"></a></h2>
|
|||
|
|
<p>Somit ergibt sich für neue Blogbeiträge der folgende, sehr einfache Ablauf:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>hgb -cpb "Ich habe eine neue Idee für einen Blogbeitrag"</code></li>
|
|||
|
|
<li>NeoVimm starten und Verzeichnis des neuen Blogbeitrags öffnen</li>
|
|||
|
|
<li>Mit <code><Leader>nd</code> (eigenes Keybinding) das Verzeichnis in Dolphin öffnen.</li>
|
|||
|
|
<li>In Dolphin die Dateien reinwerfen, die ich gerne verewenden möchte, richtig benennen, ggf auf oben genannte Substrings achten und im Blogbeitrag mit einem eigenen Shortcode <code>figure</code> einbetten.</li>
|
|||
|
|
<li>Blogbeitrag schreiben.</li>
|
|||
|
|
<li>Wenn ich fertig bin, <code>hgb -hs</code> aufrufen und im Browser <code>http://localhost:1313</code> aufrufen, Ergebnis überprüfen.</li>
|
|||
|
|
<li>Wenn das Ergebnis mir gefällt, dann kann ich noch im FrontMatter das aktuelle Datum einfügen, das Tag <code>draft</code> auf <code>false</code> setzen oder die ganze Zeile löschen und in NeoVim <code><Leader>gg</code> drücken und damit LazyGit aufrufen, commiten und pushen.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Fertig. ☺️</p>
|
|||
|
|
<p>Und hier noch ein Screenshot dieses Blogbeitrags im Zen-Mode:</p>
|
|||
|
|
<figure class="image-caption"><a href="/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_816x0_resize_q95_h2_catmullrom_2.webp 816w, /2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px" />
|
|||
|
|
<img alt="" srcset="/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_816x0_resize_q95_h2_catmullrom_2.webp 816w,/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"
|
|||
|
|
src="/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover_hueb4e7b7046bca8ff3686b8be239c22ea_99862_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="472" /></picture></a></figure>]]></content:encoded><enclosure url="https://natenom.de/2024/01/und-wieder-ein-neues-helferlein-um-einfacher-bloggen-zu-koennen/2024-01-20-screenshot-zen-mode-neovim-cover.webp" length="99862" type="image/webp"/></item><item><title>Mein Hugo Helper Python Script und was es tun kann</title><link>https://natenom.de/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/</link><pubDate>Tue, 09 Jan 2024 21:51:16 +0100</pubDate><guid>https://natenom.de/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/</guid><description><p>Alle meine Webseiten werden mit Hilfe von Hugo statisch generiert. Für die Arbeit mit Hugo nutze ich schon länger ein eigenes Python-Script, das mir einige Arbeit abnimmt.</p>
|
|||
|
|
<p>Vor ein paar Tagen hat mich jemand gefragt, ob ich das Script nicht öffentlich machen könnte und ich habe das zum Anlass genommen, da mal einige Dinge zu verschönern, damit auch andere Menschen damit etwas anfangen können.</p></description><content:encoded><![CDATA[<p>Alle meine Webseiten werden mit Hilfe von Hugo statisch generiert. Für die Arbeit mit Hugo nutze ich schon länger ein eigenes Python-Script, das mir einige Arbeit abnimmt.</p>
|
|||
|
|
<p>Vor ein paar Tagen hat mich jemand gefragt, ob ich das Script nicht öffentlich machen könnte und ich habe das zum Anlass genommen, da mal einige Dinge zu verschönern, damit auch andere Menschen damit etwas anfangen können.</p>
|
|||
|
|
<div class="shortcode-notice warnung">
|
|||
|
|
<div class="shortcode-notice-title warnung">
|
|||
|
|
Warnung</div>
|
|||
|
|
<div class="notice-content"><p>Ich bin kein Programmierer und das Script hat vermutlich eine eher schlechte Qualität. Aber das stört mich nicht, denn es funktioniert (für mich).</p>
|
|||
|
|
<p>Wenn es andere Menschen für sich nutzen können, dann ist das großartig. Wenn nicht, dann ist es auch okay.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Zur Installation des Scripts bitte in die <code>README.md</code> des Projekts schauen.</p>
|
|||
|
|
<h2 id="konfiguration" data-numberify>Konfiguration<a class="anchor ms-1" href="#konfiguration"></a></h2>
|
|||
|
|
<p>In der Konfigurationsdatei <code>~/.config/hgh/hgh.json</code> gibt es einen Abschnitt für allgemeine Einstellungen und dann je einen Abschnitt pro Website, die mit hgh verwaltet werden soll.</p>
|
|||
|
|
<p>Hier ist hinterlegt, welcher Editor verwendet werden soll, wo die Basisverzeichnisse der Websites liegen, wo die <code>content</code>-Verzeichnisse, welcher Benutzernamen für rsync verwendet werden soll, usw.</p>
|
|||
|
|
<h2 id="ein-alias-macht-das-leben-einfacher" data-numberify>Ein Alias macht das Leben einfacher<a class="anchor ms-1" href="#ein-alias-macht-das-leben-einfacher"></a></h2>
|
|||
|
|
<p>Damit ich nicht dauernd <code>hgh.py --site blog</code> tippen muss, habe ich für jede meiner Websites in der <code>.bashrc</code> einen Alias erstellt:</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>alias hgb<span style="color:#f92672">=</span><span style="color:#e6db74">`</span>hgh.py --site blog<span style="color:#e6db74">`</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>alias hgw<span style="color:#f92672">=</span><span style="color:#e6db74">`</span>hgh.py --site wiki<span style="color:#e6db74">`</span>
|
|||
|
|
</span></span></code></pre></div><p>Somit kann ich z. B. mittels <code>hgb -cdb</code> ins Basisverzeichnis des Blogs wechseln.</p>
|
|||
|
|
<h2 id="was-der-hugo-helper-hgh-für-mich-macht" data-numberify>Was der Hugo Helper (hgh) für mich macht<a class="anchor ms-1" href="#was-der-hugo-helper-hgh-für-mich-macht"></a></h2>
|
|||
|
|
<h3 id="allgemeine-infos" data-numberify>Allgemeine Infos<a class="anchor ms-1" href="#allgemeine-infos"></a></h3>
|
|||
|
|
<p>Mit <code>--help</code> gibt es eine hoffentlich hilfreiche Hilfe. 😁</p>
|
|||
|
|
<p>Mit <code>hgh.py --sites</code> bekomme ich eine Liste aller Websites und der zugehörigen Basisverzeichnisse. Mit <code>--printconfig</code> wird die ganze Konfiguration ausgegeben.</p>
|
|||
|
|
<h3 id="verzeichniswechsel" data-numberify>Verzeichniswechsel<a class="anchor ms-1" href="#verzeichniswechsel"></a></h3>
|
|||
|
|
<p>Mit <code>-cdb</code> kann ich ins Basisverzeichnis einer Website wechseln, mit <code>-cdc</code> ins normale Content-Verzeichnis und mit <code>-cdl</code> in ein alternatives Content-Verzeichnis.</p>
|
|||
|
|
<p>Letzeres nutze ich für verschiedene Blogbeiträge im Entwurfsmodus. Denn mein Blog besteht aus mehreren tausend Blogbeiträgen und das Bauen dauert sehr lange. Zum Schreiben von längeren Blogbeiträgen nutze ich dieses Verzeichnis und das Bauen dauert dann nur wenige Sekunden.</p>
|
|||
|
|
<h3 id="kommentar-datei" data-numberify>Kommentar-Datei<a class="anchor ms-1" href="#kommentar-datei"></a></h3>
|
|||
|
|
<p>Für Kommentare im Blog nutze mittlerweile eine eigene Implementation, bei der die Kommentare im Page Bundle innerhalb der Datei <code>comments.json</code> stehen.</p>
|
|||
|
|
<p>Mit <code>hgh.py --site blog --create-comments-file</code> wird im aktuellen Verzeichnis eine <code>comments.json</code>-Datei erstellt, die bereits ein Skelett für einen Kommentar enthält. Dazu wird die Info ausgegeben, dass man noch im Front Matter <code>jsoncomments: true</code> eintragen muss. Da es hier im Blog nur sehr selten Kommentare gibt, vergesse ich das sonst und will auch nicht jedes Mal nachschauen, wie die Syntax eines Kommentars ist.</p>
|
|||
|
|
<h3 id="neuer-blogbeitrag" data-numberify>Neuer Blogbeitrag<a class="anchor ms-1" href="#neuer-blogbeitrag"></a></h3>
|
|||
|
|
<p>Diese Funktion nutze ich nur für meinen Blog und kann mit einem kurzen <code>hgb --create "Ein neuer Blogbeitrag bla blub"</code> gleich mehrere Aufgaben automatisieren:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>benötigte Verzeichnisse erstellen</li>
|
|||
|
|
<li>Slug aus dem angegebenen Titel erzeugen</li>
|
|||
|
|
<li>Page Bundle erstellen</li>
|
|||
|
|
<li>Markdown-Datei für den Blogbeitrag erstellen und mit einem Template befüllen</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Details dazu, was alles gemacht wird, gibt es <a href="/2024/01/neues-helferlein-fuer-hugo-erleichtert-das-bloggen/">in diesem Blogbeitrag</a>.</p>
|
|||
|
|
<p>In der aktuellen Version des Scripts kann ich auch noch mit <code>--template</code> angeben, welches Template verwendet werden soll.</p>
|
|||
|
|
<p>Mit <code>hgh.py --list-templates</code> wird eine Liste aller vorhandenen Templates angezeigt.</p>
|
|||
|
|
<p>Wer das benutzen will, muss den Code dafür im Script anpassen, um alle notwendigen Variablen auch zu befüllen.</p>
|
|||
|
|
<h3 id="tmux" data-numberify>Tmux<a class="anchor ms-1" href="#tmux"></a></h3>
|
|||
|
|
<p>Bevor ich VSCode für die Bearbeitung meiner Websites nutzte, habe ich dafür den micro-Editor auf der Kommandozeile benutzt. Aus dieser Zeit stammt <code>--tmux</code>, das ein bestimmtes Layout in Tmux startet. Das habe ich aber schon länger nicht mehr verwendet und man müsste es für sich anpassen.</p>
|
|||
|
|
<h3 id="lokale-vorschau-einer-website" data-numberify>Lokale Vorschau einer Website<a class="anchor ms-1" href="#lokale-vorschau-einer-website"></a></h3>
|
|||
|
|
<p>Mittels <code>--hugo-server</code> wird der Blog lokal gebaut und auf dem einstellbaren Port zugänglich gemacht. Für das alternative Content-Verzeichnis gibt es <code>--hugo-server-light</code>.</p>
|
|||
|
|
<p>Dazu kann man noch <code>--hugo-server-env</code> angeben, mit dem sich einstellen lässt, welche Umgebung Hugo verwendet. Default hier ist <code>development</code>. Ich nutze diese Funktion, um den umfangreichen Blog testweise so zu bauen, dass nur die Blogbeiträge der letzten Monate enthalten sind, was dann statt 35 Sekunden (für den gesamten Blog) nur ca. 3 Sekunden dauert.</p>
|
|||
|
|
<h3 id="tags-kategorien-und-deren-häufigkeit" data-numberify>Tags, Kategorien und deren Häufigkeit<a class="anchor ms-1" href="#tags-kategorien-und-deren-häufigkeit"></a></h3>
|
|||
|
|
<p>Was mir am Anfang bei Hugo im Vergleich zu WordPress sehr gefehlt hat, waren die Vorschläge für zu verwendende Tags und Kategorien in einem neuen Blogbeitrag.</p>
|
|||
|
|
<p>Hierfür muss man mit dem Hugo Helper eine kleine “Datenbank” erstellen lassen. Dazu wird mit Hilfe von <code>find</code> und dem Tool <code>yq</code> je eine Liste aller bisher verwendeten Tags und Kategorien erstellt und dazu auch die Häufigkeit der Verwendung angegeben.</p>
|
|||
|
|
<p>Diese “Datenbank” erstellt man mit <code>hgh.py --site blog --create-tags-categories-caches</code> und das dauert ein paar Sekunden. Im Ergebnis werden innerhalb von <code>~/.cache/hgh/</code> für jede Website zwei Dateien erzeugt:</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>> ls -1 .cache/hgh/
|
|||
|
|
</span></span><span style="display:flex;"><span>natenom.de_categories.list
|
|||
|
|
</span></span><span style="display:flex;"><span>natenom.de_tags.list
|
|||
|
|
</span></span></code></pre></div><p>Ein Auszug aus den Tags:</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>[…]
|
|||
|
|
</span></span><span style="display:flex;"><span>8:F-Droid
|
|||
|
|
</span></span><span style="display:flex;"><span>1:FLAC
|
|||
|
|
</span></span><span style="display:flex;"><span>4:Facebook
|
|||
|
|
</span></span><span style="display:flex;"><span>1:Fahrbahn
|
|||
|
|
</span></span><span style="display:flex;"><span>556:Fahrrad
|
|||
|
|
</span></span><span style="display:flex;"><span>52:Fahrradanhänger
|
|||
|
|
</span></span><span style="display:flex;"><span>1:Fahrradbubble
|
|||
|
|
</span></span><span style="display:flex;"><span>22:Fahrradcomputer
|
|||
|
|
</span></span><span style="display:flex;"><span>6:Fahrradmordor
|
|||
|
|
</span></span><span style="display:flex;"><span>6:Fahrradparkplätze
|
|||
|
|
</span></span><span style="display:flex;"><span>2:Fahrradstaffel
|
|||
|
|
</span></span><span style="display:flex;"><span>1:Fahrräder
|
|||
|
|
</span></span><span style="display:flex;"><span>10:Falschparker
|
|||
|
|
</span></span><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span></code></pre></div><p>Um nicht manuell in den “Datenbanken” herumstöbern zu müssen, gibt es <code>--find-tags xyz</code> und <code>--find-categories xyz</code> bzw. die Kurzformen <code>-ft xyz</code> und <code>-fc xyz</code>. Man kann reguläre Ausdrücke verwenden.</p>
|
|||
|
|
<p>Führt man diese aus, wird das Tool <code>fzf</code> (Fuzzy Find) benutzt, um die Liste anzuzeigen und darin suchen zu können:</p>
|
|||
|
|
|
|||
|
|
<figure class="shortcode-video">
|
|||
|
|
<video preload="metadata" controls>
|
|||
|
|
<source src="2024-01-06-hugo-searchtag.mp4" type="video/mp4" poster="">
|
|||
|
|
Your browser does not seem to support video.
|
|||
|
|
</video>
|
|||
|
|
|
|||
|
|
<figcaption>Mittels fzf kann man in der Liste der Tags suchen. Die Anzahl der Verwendung wird auch angezeigt. (<a href="2024-01-06-hugo-searchtag.mp4">Link zum Video</a>)</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content">Ab und zu muss man die Datenbanken neu erstellen lassen, da sonst Tags und Kategorien neuer Blogbeiträge nicht enthalten sind.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content">Ich weiß, dass es für VSCode z. B. das Plugin FrontMatter gibt, das genau diese Funktionialität liefert. Ich möchte jedoch kein riesiges Plugin mit tausenden anderen Funktionen nutzen, wenn es auch einfacher geht. Und wer weiß, ob ich in x Zeit immer noch mit VSCode arbeiten werde.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="alles-andere-finden" data-numberify>Alles andere finden<a class="anchor ms-1" href="#alles-andere-finden"></a></h3>
|
|||
|
|
<p>Mittlerweile nutze ich zum Auffinden von Blogbeitragen die Tastenkombination <code>Strg + Shift + f</code> in VSCode. Aber früher brauchte ich dafür etwas Eigenes.</p>
|
|||
|
|
<p>Hierfür gibt es zwei Varianten.</p>
|
|||
|
|
<h4 id="einfache-variante" data-numberify>Einfache Variante<a class="anchor ms-1" href="#einfache-variante"></a></h4>
|
|||
|
|
<p>Mittels <code>--find xyz</code> bzw. der Kurzform <code>-f xyz</code> wird einfach nur rekursiv nach xyz im Content-Verzeichnis der angegebenen Website gegrept und es gibt eine farbige Ausgabe mit Dateinamen und der zum Suchbegriff passenden Zeile. Groß- und Kleinschreibung werden dabei nicht ignoriert.</p>
|
|||
|
|
<p>Hier z. B. das Ergebnis für die Suche nach <code>^hugo</code>. Das ist ein Regulärer Ausdruck, der nur auf Zeilen passt, in denen <code>hugo</code> am Anfang der Zeile steht:</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>posts/2022/2022-02-18-mein-workflow-mit-hugo/index.md:130:1:hugo server -E -D -F -v -c /home/hugo-light/content/
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2022/2022-02-27-hugo-theme-optimiert-zeit-zum-rendern-massiv-verringert.md:24:1:hugo --templateMetrics --templateMetricsHints --gc --minify > hugo-metric_0.txt
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2022/2022-02-06-ich-mache-wieder-einen-linkdump-woechentlich/index.md:64:1:hugo new -k linkdump posts/2022-02-linkdump-kw-6-2022
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2022/2022-03-19-umzug-dokuwiki-hugo-3-einrichtung/index.md:29:1:hugo new site wiki.natenom.com
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2022/2022-02-03-umzug-von-wordpress-zu-hugo-1/index.md:310:1:hugo server --renderToDisk -D -E -F -v
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2022/2022-02-13-weiterleitungen-auf-umlaut-urls/index.md:55:1:hugo-search-tags -E "(ä|ö|ü|ß)" | cut -d':' -f2 > /tmp/umlaut-urls-hugo.txt
|
|||
|
|
</span></span></code></pre></div><p>So kann ich z. B. sehr einfach alle Blogbeiträge anzeigen lassen, die ein bestimmtes Tag oder eine Kategorie verwenden, hier z. B. “Linux”, in dem ich den Regulären Ausdruck <code>hgb -f "^\W+- Linux"</code> nutze, der auf Zeilen passt, die am Zeilenanfang beliebig viele Leerzeichen enthalten, gefolgt von <code>- Linux</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-text" data-lang="text"><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2013/2013-06-27-alle-videos-eines-youtube-kanals-auf-einmal-herunterladen-mit-youtube-dl.md:7:1: - Linux
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2018/2018-11-12-mit-fensterregeln-in-plasma5-kde-bestimmte-fenster-beim-task-switcher-und-anderen-effekten-ignorieren.md:13:1: - Linux
|
|||
|
|
</span></span><span style="display:flex;"><span>posts/2013/2013-08-15-neuer-versuch-mit-kde-sc.md:11:1: - Linux
|
|||
|
|
</span></span><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span></code></pre></div><h4 id="erweiterte-variante" data-numberify>Erweiterte Variante<a class="anchor ms-1" href="#erweiterte-variante"></a></h4>
|
|||
|
|
<p>Mittels <code>--find-fuzzy xyz</code> bzw. der Kurzform <code>-ff xyz</code> wird die Ausgabe der oben gezeigten einfachen Variante zusätzlich an <code>fzf</code> übergeben, sodass man darin suchen kann, eine Vorschau der Datei angezeigt bekommt und durch Drücken von <code>F4</code> die Datei direkt im Editor öffnen kann, den man in der Konfiguration in <code>bin_editor</code> eingestellt hat.</p>
|
|||
|
|
<p>Auch hier kann man reguläre Ausdürcke verwenden, z. B. <code>-ff "Markdown.*kate"</code></p>
|
|||
|
|
<figure class="image-caption"><a href="2024-01-09-beispiel-hgh-ff-cover.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover_hub930d5896ab04f44420e5ef9ccf62eb9_74206_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="623" /></picture></a></figure>
|
|||
|
|
<h3 id="website-bauen-und-hochladen" data-numberify>Website bauen und hochladen<a class="anchor ms-1" href="#website-bauen-und-hochladen"></a></h3>
|
|||
|
|
<p>Mit <code>hgh.py --site blog --build</code> wird mein Blog lokal gebaut, sodass ich ihn nach einer kurzen Prüfung mit <code>hgh.py --site blog --upload</code> hochladen kann.</p>
|
|||
|
|
<p>Wenn ich mir sicher bin, kann ich auch beide Schritte vereinen mit <code>hgh.py --site blog --deploy</code>.</p>
|
|||
|
|
<h2 id="hugo-helper-herunterladen" data-numberify>Hugo Helper herunterladen<a class="anchor ms-1" href="#hugo-helper-herunterladen"></a></h2>
|
|||
|
|
<p>Das Hugo Helper Script gibt es <a class='urlextern' href="https://code.cozy.town/natenom/hgh">hier</a>.</p>
|
|||
|
|
<p>Viel Spaß damit. Oder eben nicht. ☺️</p>]]></content:encoded><enclosure url="https://natenom.de/2024/01/mein-hugo-helper-python-script-und-was-es-tun-kann/2024-01-09-beispiel-hgh-ff-cover.webp" length="74206" type="image/webp"/></item><item><title>Verbessertes Script für Häufigkeit von Kategorien und Tags in einem Hugo Blog (Update 2024-01-09)</title><link>https://natenom.de/2024/01/verbessertes-script-fuer-haeufigkeit-von-kategorien-und-tags-in-einem-hugo-blog/</link><pubDate>Sat, 06 Jan 2024 07:57:13 +0100</pubDate><guid>https://natenom.de/2024/01/verbessertes-script-fuer-haeufigkeit-von-kategorien-und-tags-in-einem-hugo-blog/</guid><description><p>Vor langer Zeit hatte ich mal eine sehr umständliche Möglichkeit geschaffen, um in der Shell anzuzeigen, welche Tags und Kategorien in meinem Blog wie häufig verwendet wurden.</p>
|
|||
|
|
<p>Das habe ich nun deutlich vereinfacht.</p></description><content:encoded><![CDATA[<p>Vor langer Zeit hatte ich mal eine sehr umständliche Möglichkeit geschaffen, um in der Shell anzuzeigen, welche Tags und Kategorien in meinem Blog wie häufig verwendet wurden.</p>
|
|||
|
|
<p>Das habe ich nun deutlich vereinfacht.</p>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">2024-01-09: Das Script ist jetzt in meinem veröffentlichten Hugo Helper enthalten, <a href="/2024/01/wofuer-ich-mein-hugo-helper-python-script-verwende-und-wo-man-es-findet/">siehe hier</a>.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="alte-lösung-mit-hugo-und-sehr-umständlich" data-numberify>Alte Lösung mit Hugo und sehr umständlich<a class="anchor ms-1" href="#alte-lösung-mit-hugo-und-sehr-umständlich"></a></h2>
|
|||
|
|
<p>Früher hatte ich das mit Hilfe von Hugo gemacht, das lokal eine eigene Seite im Blog erstellt hat. Die HTML-Ausgabe davon habe ich dann durch diverse Shell-Kommandos gefiltert und heraus kamen Tags und deren Häufigkeit. Das musste man dann ab und zu mal neu generieren lassen und war alles andere als einfach zu benutzen. Details siehe <a href="/2022/02/kategorien-und-tags-anzahl-vorkommen-hugo-anzeige-und-filter/">hier</a>.</p>
|
|||
|
|
<h2 id="jetzt-ohne-hugo" data-numberify>Jetzt ohne Hugo<a class="anchor ms-1" href="#jetzt-ohne-hugo"></a></h2>
|
|||
|
|
<p>Jetzt habe ich das außerhalb von Hugo mit einem Python-Script und einem Shell-Script umgesetzt.</p>
|
|||
|
|
<p>Ich habe ein Shell-Script erstellt, das alle Tags und Kategorien aller Blogbeiträge mit Hilfe von <code>yq</code> ausliest und in eine Datei schreibt, die von einem Python-Script eingelesen wird und Häufigkeit der Tags und Kategorien bestimmt und das Ergebnis in einer endgültigen Datei speichert.</p>
|
|||
|
|
<p>Man könnte das auch alles in einem einzigen Python-Script unterbringen, doch ich kann das nicht. Ich habe es versucht, es aber nicht geschafft.</p>
|
|||
|
|
<h2 id="detaillierter-ablauf" data-numberify>Detaillierter Ablauf<a class="anchor ms-1" href="#detaillierter-ablauf"></a></h2>
|
|||
|
|
<p>Im ersten Schritt werden im <code>content</code>-Verzeichnis des Blogs mit find und mit Hilfe von <code>yq</code> alle Tags jedes Blogbeitrags ausgelesen und ein eine Datei geschrieben:</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>find -iname <span style="color:#e6db74">"*.md"</span> -exec yq --front-matter<span style="color:#f92672">=</span>extract <span style="color:#e6db74">".tags"</span> <span style="color:#e6db74">'{}'</span> >> <span style="color:#e6db74">"/tmp/tmp_tags.list"</span> <span style="color:#ae81ff">\;</span>
|
|||
|
|
</span></span></code></pre></div><p>Für diesen Blogbeitrag hier würde die Ausführung dieser Zeile ergeben:</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>- Web
|
|||
|
|
</span></span><span style="display:flex;"><span>- Hugo
|
|||
|
|
</span></span><span style="display:flex;"><span>- Bash
|
|||
|
|
</span></span><span style="display:flex;"><span>- Python
|
|||
|
|
</span></span><span style="display:flex;"><span>- Shell
|
|||
|
|
</span></span></code></pre></div><p>Das Ergebnis ist eine Datei mit ca. 9000 unsortierten und sehr vielen Zeilen und doppelt vorkommenden Tags, weil für jeden Blogbeitrag die Liste aller dort verwendeten Tags in die Datei eingefügt wird.</p>
|
|||
|
|
<p>Im nächsten Schritt wird das Python-Script aufgerufen, das diese Datei Zeile für Zeile einliest, für jedes neue Wort einen eigenen Zähler in einem Dictionary erstellt und für bereits vorgekommene Wörter den Zähler um 1 erhöht. Ich habe dafür <a class='urlextern' href="https://www.geeksforgeeks.org/python-count-occurrences-of-each-word-in-given-text-file/">hier</a> ein passendes Script gefunden und es für meine Zwecke angepasst.</p>
|
|||
|
|
<p>Am Ende des Python-Scripts wird das Dictionary sortiert ausgegeben und in eine finale Datei umgeleitet.</p>
|
|||
|
|
<p>Ein Auszug der finalen Datei mit nur noch 819 Zeilen mit je einem Tag pro Zeile und dessen Häufigkeit im Blog:</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>[…]
|
|||
|
|
</span></span><span style="display:flex;"><span>Aussicht 5
|
|||
|
|
</span></span><span style="display:flex;"><span>Auswertungen 5
|
|||
|
|
</span></span><span style="display:flex;"><span>Autobahn 7
|
|||
|
|
</span></span><span style="display:flex;"><span>Autofahrer 9
|
|||
|
|
</span></span><span style="display:flex;"><span>Autos 129
|
|||
|
|
</span></span><span style="display:flex;"><span>Avatar 1
|
|||
|
|
</span></span><span style="display:flex;"><span>BNN 2
|
|||
|
|
</span></span><span style="display:flex;"><span>BOA 2
|
|||
|
|
</span></span><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span><span style="display:flex;"><span>Zebrastreifen 4
|
|||
|
|
</span></span><span style="display:flex;"><span>Zeichnen 2
|
|||
|
|
</span></span><span style="display:flex;"><span>Zeit Online 4
|
|||
|
|
</span></span><span style="display:flex;"><span>Zeitraffer 2
|
|||
|
|
</span></span><span style="display:flex;"><span>Zeitungen 8
|
|||
|
|
</span></span><span style="display:flex;"><span>Zeitzonen 1
|
|||
|
|
</span></span><span style="display:flex;"><span>Zertifikate 4
|
|||
|
|
</span></span><span style="display:flex;"><span>Zuständigkeiten 1
|
|||
|
|
</span></span><span style="display:flex;"><span>ZweiRat 3
|
|||
|
|
</span></span><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span></code></pre></div><p>Mit Hilfe des Tools <code>fzf</code> (Fuzzy Finder) kann ich nun sehr einfach in dieser Datei nach Tags suchen, die im Blog verwendet wurden und sehe auch gleich die Häufigkeit.</p>
|
|||
|
|
<p>Und hier ein Video von der Benutzung mittels <code>fzf</code>:</p>
|
|||
|
|
|
|||
|
|
<figure class="shortcode-video">
|
|||
|
|
<video preload="metadata" controls>
|
|||
|
|
<source src="2024-01-06-hugo-searchtag.mp4" type="video/mp4" poster="">
|
|||
|
|
Your browser does not seem to support video.
|
|||
|
|
</video>
|
|||
|
|
|
|||
|
|
<figcaption>(<a href="2024-01-06-hugo-searchtag.mp4">Link zum Video</a>)</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<h2 id="update-der-daten" data-numberify>Update der Daten<a class="anchor ms-1" href="#update-der-daten"></a></h2>
|
|||
|
|
<p>Um die Daten zu aktualisieren, muss ich nur ab und zu das Script ausführen und die Ausführung dauert nur ein paar Sekunden.</p>]]></content:encoded></item><item><title>Neues Helferlein für Hugo erleichtert das Bloggen</title><link>https://natenom.de/2024/01/neues-helferlein-fuer-hugo-erleichtert-das-bloggen/</link><pubDate>Fri, 05 Jan 2024 20:36:47 +0100</pubDate><guid>https://natenom.de/2024/01/neues-helferlein-fuer-hugo-erleichtert-das-bloggen/</guid><description><p>Ich habe hier seit Anfang Dezember nichts mehr im Blog geschrieben und das liegt unter anderem daran, dass der Start eines Blogbeitrags immer etwas umständlich war.</p>
|
|||
|
|
<p>Das habe ich jetzt mit einem Script automatisiert und kann direkt mit dem Schreiben beginnen, statt die verschiedenen Dinge im Voraus manuell machen zu müssen.</p></description><content:encoded><![CDATA[<p>Ich habe hier seit Anfang Dezember nichts mehr im Blog geschrieben und das liegt unter anderem daran, dass der Start eines Blogbeitrags immer etwas umständlich war.</p>
|
|||
|
|
<p>Das habe ich jetzt mit einem Script automatisiert und kann direkt mit dem Schreiben beginnen, statt die verschiedenen Dinge im Voraus manuell machen zu müssen.</p>
|
|||
|
|
<p>Das Script rufe ich z. B. so auf:</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>hgb --create <span style="color:#e6db74">"Neues Helferlein für Hugo erleichtert das Bloggen"</span>
|
|||
|
|
</span></span></code></pre></div><h2 id="das-script" data-numberify>Das Script<a class="anchor ms-1" href="#das-script"></a></h2>
|
|||
|
|
<p>Das Script macht folgende Arbeiten für mich:</p>
|
|||
|
|
<h3 id="verzeichnisse-erstellen" data-numberify>Verzeichnisse erstellen<a class="anchor ms-1" href="#verzeichnisse-erstellen"></a></h3>
|
|||
|
|
<p>Innerhalb des <code>content</code> Verzeichnisses von Hugo legt es, wenn noch nicht vorhanden, alle Überverzeichnisse für Jahr und Monat an.</p>
|
|||
|
|
<p>Da dies der erste Beitrag in diesem Jahr ist, hat das Script die Verzeichnisstruktur in <code>…/content/posts/</code> erstellt:</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>2024/
|
|||
|
|
</span></span><span style="display:flex;"><span> 01/
|
|||
|
|
</span></span></code></pre></div><h3 id="slug-erzeugen" data-numberify>Slug erzeugen<a class="anchor ms-1" href="#slug-erzeugen"></a></h3>
|
|||
|
|
<p>Der Slug ist ein Teil der späteren URL. Bei mir im Blog besteht die endgültige URL eines Blogbeitrags z. B. aus <code>https://natenom.de/JAHR/MONAT/SLUG/</code>.</p>
|
|||
|
|
<p>Das Script erzeugt den Slug automatisch aus dem angegebenen Titel für den neuen Blogbeitrag. Dabei werden folgende Aufgaben erledigt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Der Slug wird auf xx Zeichen verkürzt.</li>
|
|||
|
|
<li>Großschreibung wird in Kleinschreibung umgewandelt.</li>
|
|||
|
|
<li>Leerzeichen werden durch Bindestriche ersetzt.</li>
|
|||
|
|
<li>Umlaute werden durch Entsprechungen wie z. B. <code>ae</code> oder <code>ss</code> ersetzt.</li>
|
|||
|
|
<li>Alle verbleibenden Zeichen, die nicht alphanumerisch und keine Bindestriche sind, werden entfernt.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="page-bundle" data-numberify>Page Bundle<a class="anchor ms-1" href="#page-bundle"></a></h3>
|
|||
|
|
<p>Innerhalb der bereits erstellten Verzeichnisstruktur für Jahr und Monat (siehe oben) wird nun ein Page Bundle erstellt. Der Verzeichnisname besteht aus dem aktuellen Datum und dem Slug. Hier z. B.:</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>2024-01-05-neues-helferlein-fuer-hugo-erleichtert-das-bloggen/
|
|||
|
|
</span></span></code></pre></div><h3 id="datei-indexmd" data-numberify>Datei index.md<a class="anchor ms-1" href="#datei-indexmd"></a></h3>
|
|||
|
|
<p>In dem erstellten Page Bundle wird nun die Datei <code>index.md</code> aus einem eigenen Template generiert, in welchem die Metadaten <code>title</code>, <code>slug</code> und <code>date</code> im Front Matter eingefügt werden. Die anderen Metadaten wie Kategorien und Tags fülle ich manuell aus.</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></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#e6db74">"Neues Helferlein für Hugo erleichtert das Bloggen"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">slug</span>: <span style="color:#ae81ff">neues-helferlein-fuer-hugo-erleichtert-das-bloggen</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">author</span>: <span style="color:#ae81ff">Natenom</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">date</span>: <span style="color:#e6db74">2024-01-05T20:25:55</span><span style="color:#ae81ff">+01</span>:<span style="color:#ae81ff">00</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">categories</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span> -
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">tags</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:#ae81ff"><!--more--></span>
|
|||
|
|
</span></span></code></pre></div><h2 id="nächster-schritt" data-numberify>Nächster Schritt<a class="anchor ms-1" href="#nächster-schritt"></a></h2>
|
|||
|
|
<p>Das Script zeigt nun ein paar Infos an und auch, wie ich die Datei direkt in VSCode öffnen kann, weil ich das fürs Schreiben in Markdown 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-text" data-lang="text"><span style="display:flex;"><span>Page Bundle erfolgreich erstellt:
|
|||
|
|
</span></span><span style="display:flex;"><span> Template: default
|
|||
|
|
</span></span><span style="display:flex;"><span> Slug: neues-helferlein-fuer-hugo-erleichtert-das-bloggen
|
|||
|
|
</span></span><span style="display:flex;"><span> Verzeichnis: /…/content/posts/2024/01/2024-01-05-neues-helferlein-fuer-hugo-erleichtert-das-bloggen
|
|||
|
|
</span></span><span style="display:flex;"><span>Hinweise:
|
|||
|
|
</span></span><span style="display:flex;"><span> Pfad zur Datei in Zwischenablage eingefügt. In VSCodium öffnen mit 'Strg + o' und einfügen, Leerzeichen am Ende entfernen. (Das Leerzeichen am Ende kommt von VSCode.)
|
|||
|
|
</span></span></code></pre></div><h2 id="blogbeitrag-schreiben" data-numberify>Blogbeitrag schreiben<a class="anchor ms-1" href="#blogbeitrag-schreiben"></a></h2>
|
|||
|
|
<p>Nun kann ich im bereits geöffneten VSCode die Tastenkombinatin <code>Strg + o</code> drücken, gefolgt von <code>Strg + v</code>, muss noch das Leerzeichen entfernen, das VSCode ans Ende angefügt hat, drücke Enter und kann anfangen, den Blogbeitrag zu schreiben.</p>
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>So soll das sein. Wenn ich in Zukunft eine Idee habe, kann ich sofort anfangen, zu schreiben und bin nicht erst noch abgelenkt von den vielen verschiedenen Aufgaben, um die Datei für den Blogbeitrag erst noch erstellen zu müssen.</p>
|
|||
|
|
<p>Das hat jetzt auch sehr gut funktioniert.</p>]]></content:encoded></item><item><title>Kommentare können jetzt via JSON hinterlegt werden – und mir sonstwie zugeschickt werden</title><link>https://natenom.de/2023/12/kommentare-koennen-jetzt-via-json-hinterlegt-werden-und-mir-sonstwie-zugeschickt-werden/</link><pubDate>Fri, 08 Dec 2023 23:15:10 +0100</pubDate><guid>https://natenom.de/2023/12/kommentare-koennen-jetzt-via-json-hinterlegt-werden-und-mir-sonstwie-zugeschickt-werden/</guid><description><p>Es ist soweit und hat nicht so lange gedauert, wie ich gedacht hatte. Man kann nu wieder Kommentare im Blog hinterlegen, aber nur sehr rudimentär.</p></description><content:encoded><![CDATA[<p>Es ist soweit und hat nicht so lange gedauert, wie ich gedacht hatte. Man kann nu wieder Kommentare im Blog hinterlegen, aber nur sehr rudimentär.</p>
|
|||
|
|
<h2 id="früher-mit-isso" data-numberify>Früher mit Isso<a class="anchor ms-1" href="#früher-mit-isso"></a></h2>
|
|||
|
|
<p>Bisher konnte man dank <code>Isso</code> sehr einfach einen Kommentar unter einen freigegebenen Blogbeitrag schreiben. Daraufhin wurde eine E-Mail an mich verschickt, die den Text enthielt und ich konnte mittels Aufruf zweier URLs bestimmen, ob der Kommentar freigeschaltet wird oder gelöscht. Das ganze war unabhängig von Hugo.</p>
|
|||
|
|
<h2 id="jetzt-mit-json-datei" data-numberify>Jetzt mit json-Datei<a class="anchor ms-1" href="#jetzt-mit-json-datei"></a></h2>
|
|||
|
|
<p>Der jetzige Ablauf ist: Wenn jemand einen Kommentar hinterlassen möchte, klickt er/sie/es im Kommentarbereich auf den Link und daraufhin öffnet sich der lokal installierte E-Mail-Client mit einer vordefinierten E-Mail, in der man den Kommentar schreiben und mir zusenden kann. Dort ist die URL des Blogbeitrags bereits enthalten. Sobald ich Zeit und Lust habe (wie bisher auch schon), werde ich den Kommentar und ein paar Zusatzinformationen in eine .json-Datei innerhalb des Page Bundles des Blogbeitrags eintragen.</p>
|
|||
|
|
<p>Die zusätzlichen Daten sind aktuell:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Eine innerhalb des Blogbeitrags eindeutige ID</li>
|
|||
|
|
<li>Name</li>
|
|||
|
|
<li>Website</li>
|
|||
|
|
<li>Datum</li>
|
|||
|
|
<li>Uhrzeit</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Dabei liegen alle Kommentare eines Blogbeitrags immer im Page Bundle. Sollte ich später einen Blogbeitrag depublizieren wollen, so muss ich nicht gesondert an die Kommentare denken, da alles in einem Verzeichnis enthalten ist. So gefällt mir das.</p>
|
|||
|
|
<h2 id="json-datei-nicht-veröffentlichen" data-numberify>json-Datei nicht veröffentlichen<a class="anchor ms-1" href="#json-datei-nicht-veröffentlichen"></a></h2>
|
|||
|
|
<p>Man muss aber noch dafür sorgen, dass die json-Datei mit den Kommentaren nicht in der fertigen, von Hugo gerenderten Website enthalten ist.</p>
|
|||
|
|
<p>Dazu habe ich noch keinen guten Ansatz gefunden.</p>
|
|||
|
|
<p>Es gibt z. B. <code>excludeFiles</code> (<a class='urlextern' href="https://gohugo.io/hugo-modules/configuration/#module-configuration-mounts">siehe hier</a>), aber dann wird die json-Datei auch gar nicht mehr für die Verarbeitung im Template gefunden. Dann gibt es noch per <code>Page Bundle</code> die Option <code>_build</code> (<a class='urlextern' href="https://gohugo.io/content-management/build-options/">siehe hier</a>), aber ich hätte das gerne global.</p>
|
|||
|
|
<p>Die “veraltete” Variante mit <code>ignoreFiles</code> (<a class='urlextern' href="https://gohugo.io/getting-started/configuration/#ignore-content-and-data-files-when-rendering">siehe hier</a>), die aber gar nicht greift, weil ich auch hier nicht schlau genug bin.</p>
|
|||
|
|
<p>D. h. derzeit wird die json-Datei noch immer mit veröffentlicht, enthält aber keine Daten, die nicht auf in der gerenderten html-Datei enthalten sind, außer vielleicht der ID.</p>
|
|||
|
|
<p>Alternativ könnte ich nach dem Rendern der Website per <code>find</code> alle entsprechenden json-Dateien löschen lassen, aber das spare ich mir aktuell noch.</p>
|
|||
|
|
<h2 id="noch-sehr-rudimentär" data-numberify>Noch sehr rudimentär<a class="anchor ms-1" href="#noch-sehr-rudimentär"></a></h2>
|
|||
|
|
<p>Bei Isso war es möglich, auf einen bestimmten Kommentar Bezug zu nehmen, das geht aktuell mit meiner eigenen Implementierung noch nicht, da ich dazu nicht schlau genug bin, noch nicht. 🤪</p>
|
|||
|
|
<p>Es werden stumpf alle Kommentare in der Reihenfolge der Ankunft bei mir nacheinander gelistet.</p>
|
|||
|
|
<h2 id="beispiel" data-numberify>Beispiel<a class="anchor ms-1" href="#beispiel"></a></h2>
|
|||
|
|
<p>Ich habe im Page Bundle dieses Blogbeitrags diese JSON-Datei hinterlegt:</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-json" data-lang="json"><span style="display:flex;"><span>[{
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"id"</span>: <span style="color:#ae81ff">0</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"author"</span>: <span style="color:#e6db74">"Natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"text"</span>: <span style="color:#e6db74">"[…]"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"website"</span>: <span style="color:#e6db74">"https://natenom.de/"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"date"</span>: <span style="color:#e6db74">"2023-12-08"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"time"</span>: <span style="color:#e6db74">"18:09"</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:#f92672">"id"</span>: <span style="color:#ae81ff">1</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"author"</span>: <span style="color:#e6db74">"Vrifox"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"text"</span>: <span style="color:#e6db74">"[…]"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"date"</span>: <span style="color:#e6db74">"2023-12-08"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"website"</span>: <span style="color:#e6db74">"https://vrifox.cc/"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"time"</span>: <span style="color:#e6db74">"18:10"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>}
|
|||
|
|
</span></span><span style="display:flex;"><span>]
|
|||
|
|
</span></span></code></pre></div><p>Das Ergebnis kann man unten im Kommentarbereich sehen.</p>
|
|||
|
|
<h2 id="nachtrag" data-numberify>Nachtrag<a class="anchor ms-1" href="#nachtrag"></a></h2>
|
|||
|
|
<p>Die alten 7 Kommentare aus der <a href="/2023/12/keine-kommentare-mehr-im-blog-da-fast-nicht-genutzt/">Zeit von Isso</a>, werde ich später hier auf diese Art nachtragen. 😄</p>]]></content:encoded></item><item><title>Keine Kommentare mehr im Blog, da fast nicht genutzt</title><link>https://natenom.de/2023/12/keine-kommentare-mehr-im-blog-da-fast-nicht-genutzt/</link><pubDate>Fri, 08 Dec 2023 18:42:15 +0100</pubDate><guid>https://natenom.de/2023/12/keine-kommentare-mehr-im-blog-da-fast-nicht-genutzt/</guid><description><p>Seit Anfang August 2023 gibt es hier im Blog wieder die Möglichkeit, <a href="/2023/08/kommentarfunktion-via-isso-fuer-meinen-blog/">Kommentare unter Blogbeiträgen</a> zu schreiben.</p></description><content:encoded><![CDATA[<p>Seit Anfang August 2023 gibt es hier im Blog wieder die Möglichkeit, <a href="/2023/08/kommentarfunktion-via-isso-fuer-meinen-blog/">Kommentare unter Blogbeiträgen</a> zu schreiben.</p>
|
|||
|
|
<h2 id="fast-nicht-genutzt" data-numberify>Fast nicht genutzt<a class="anchor ms-1" href="#fast-nicht-genutzt"></a></h2>
|
|||
|
|
<p>Die Nutzung davon ist ernüchternd. Wenn ich meine eigenen Kommentare und Antworten auf Kommentare aus der Zählung herausnehme und auch die Kommentare abziehe, die es im Blogbeitrag gab, das die Einführung dieser Möglichkeit beschrieb, dann gab es seitdem lediglich 8 Kommentare.</p>
|
|||
|
|
<p>Davon gehen noch 2 Spamkommentare weg, das ergibt sechs Kommentare in ziemlich genau 4 Monaten.</p>
|
|||
|
|
<p>Und fast alle davon hätte man mir genauso als E-Mail oder auf Mastodon schreiben können, da es mal ein Dankeschön für etwas war oder ein “schön, dass du dabei warst”. :)</p>
|
|||
|
|
<p>Ich wusste von Anfang an, dass es nicht viel werden würde, da es auch zu Zeiten, als hier noch WordPress lief, nur sehr wenige Kommentare gab.</p>
|
|||
|
|
<h2 id="keine-kommentare-mehr" data-numberify>Keine Kommentare mehr<a class="anchor ms-1" href="#keine-kommentare-mehr"></a></h2>
|
|||
|
|
<p>Deshalb habe ich die Möglichkeit wieder deaktiviert. <code>Isso</code> braucht zwar fast keine Ressourcen, ist aber letztlich Code, der auf dem Server läuft und potenziell eine Möglichkeit wäre, fiese Dinge zu tun, sollte es mal irgendwelche Lücken geben.</p>
|
|||
|
|
<p>Seit heute ist hier wieder alles statisch, wie zu vor auch. Somit ruft der Browser auch nicht mehr für jeden Blogbeitrag zusätzlich Daten von der Domain <code>comments.natenom.de</code> ab.</p>
|
|||
|
|
<h2 id="kommentare-gelöscht" data-numberify>Kommentare gelöscht<a class="anchor ms-1" href="#kommentare-gelöscht"></a></h2>
|
|||
|
|
<p>Keine Sorge, die bisher geschriebenen Kommentare sind nicht mehr zugänglich und ich werde die Datenbank zudem zeitnah löschen.</p>
|
|||
|
|
<h2 id="nur-noch-rückmeldungen-auf-anderen-wegen" data-numberify>Nur noch Rückmeldungen auf anderen Wegen<a class="anchor ms-1" href="#nur-noch-rückmeldungen-auf-anderen-wegen"></a></h2>
|
|||
|
|
<p>Ich werde unter den Blogbeiträgen wieder Informationen hinterlegen, wie man mich für Rückmeldungen erreichen kann und dass ich diese bei Bedarf auch gerne im Blogbeitrag hinterlege. Ich werde versuchen, das dann aber über json-Dateien zu machen, die beim Rendern des Blobs diesen Bereich füllen, weil es mich interessiert, wie das funktioniert.</p>
|
|||
|
|
<h2 id="und-nu-doch-wieder" data-numberify>Und nu doch wieder<a class="anchor ms-1" href="#und-nu-doch-wieder"></a></h2>
|
|||
|
|
<p>Nur wenige Stunden nach diesem Blogbeitrag hatte ich ein anderes System für Kommnetare in Hugo “implementiert”, <a href="/2023/12/kommentare-koennen-jetzt-via-json-hinterlegt-werden-und-mir-sonstwie-zugeschickt-werden/">siehe hier</a>.</p>]]></content:encoded></item><item><title>Suche im Wiki verbessert</title><link>https://natenom.de/2023/10/suche-im-wiki-verbessert/</link><pubDate>Fri, 27 Oct 2023 22:52:53 +0200</pubDate><guid>https://natenom.de/2023/10/suche-im-wiki-verbessert/</guid><description><p>Habe heute die Suche im Wiki verbessert. Bisher gab es in den Suchfeldern keine Vorgabetexte und nach der Ausführung der Suche verschwanden die Suchstrings.</p>
|
|||
|
|
<p>Das habe ich jetzt beides behoben.</p></description><content:encoded><![CDATA[<p>Habe heute die Suche im Wiki verbessert. Bisher gab es in den Suchfeldern keine Vorgabetexte und nach der Ausführung der Suche verschwanden die Suchstrings.</p>
|
|||
|
|
<p>Das habe ich jetzt beides behoben.</p>
|
|||
|
|
<p>Als Text steht in beiden Suchfeldern jetzt “Diese Seite durchsuchen” und wenn die Suche ausgeführt wurde, wird in beiden Suchfeldern der verwendete Suchstring eingefügt, sodass man diesen nun einfach anpassen kann, statt alles neu eingeben zu müssen.</p>
|
|||
|
|
<p>Früher mit verschwundenem Suchstring:</p>
|
|||
|
|
<figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-alt_hu8cf72bb9ad5993846f461036e882336c_23546_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="274" /></picture></figure>
|
|||
|
|
<p>Jetzt mit Suchstring, der erhalten bleibt:</p>
|
|||
|
|
<figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover_hua72002b8b1be0e488feae6537d46e64d_26280_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="274" /></picture></figure>
|
|||
|
|
<p>Da ich davon keine Ahnung habe und das nur auf Copy & Paste basiert, hat es ewig gedauert, dann aber im Ergebnis sehr einfach.</p>
|
|||
|
|
<p>Ich habe in die Funktion <code>populateResults</code> in der Datei <code>offsearch.js</code> am Anfang nur diese beiden Zeilen einfügen müssen:</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-javascript" data-lang="javascript"><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#custom-searchbox"</span>).<span style="color:#a6e22e">val</span>(<span style="color:#a6e22e">searchQuery</span>);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#search-query"</span>).<span style="color:#a6e22e">val</span>(<span style="color:#a6e22e">searchQuery</span>);
|
|||
|
|
</span></span></code></pre></div><div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content">Es gibt übrigens sowohl einen Menüeintrag für “Suche” als auch das Eingabefeld, weil Letzteres auf mobilen Geräten nicht mehr angezeigt wird. Aber davon hab ich ja keine Ahnung, wie ihr wisst, daher bleibt das erstmal so.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Details zu der Suchfunktion mit fuse.js, die ich im Wiki statt der Defaultsuche vom Docsy-Theme verwende, <a href="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/">gibt es hier</a>.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/10/suche-im-wiki-verbessert/2023-10-27-suche-wiki-neu-cover.webp" length="26280" type="image/webp"/></item><item><title>Weitere Verbesserung für 360°-Fotos und Panoramen hier im Blog</title><link>https://natenom.de/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/</link><pubDate>Tue, 26 Sep 2023 21:42:42 +0200</pubDate><guid>https://natenom.de/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/</guid><description><p>Ich habe heute den Viewer für 360°-Fotos und Panoramen noch etwas erweitert.</p>
|
|||
|
|
<p>So kann man nun in meinem eigenen Shortcode für den Viewer angeben, wo im Foto der Norden ist und dieser wird auch links oben auf einem Kompass und im Foto mit einer Markierung angezeigt.</p></description><content:encoded><![CDATA[<p>Ich habe heute den Viewer für 360°-Fotos und Panoramen noch etwas erweitert.</p>
|
|||
|
|
<p>So kann man nun in meinem eigenen Shortcode für den Viewer angeben, wo im Foto der Norden ist und dieser wird auch links oben auf einem Kompass und im Foto mit einer Markierung angezeigt.</p>
|
|||
|
|
<p>Zudem ist es möglich, die initiale Blickrichtung anzugeben, sodass man z. B. anfangs auf den Sonnenuntergang schaut und nicht zufällig z. B. auf einen Baumstamm. Auf dem Kompass kann man auch sehr gut sehen, welchen Blickwinkel man gerade im Viewer sehen kann.</p>
|
|||
|
|
<p>In <a href="/2023/09/fotos-von-einer-schoenen-tour/#360-fotos-bei-m%c3%bcnklingen">diesem Blogbeitrag</a> gibt es zwei 360°-Fotos, die beide Möglichkeiten bereits nutzen.</p>
|
|||
|
|
<p>Hier ein Screenshot davon:</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-09-26-photo-sphere-viewer-mit-kompass-cover.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover_hu3b360a44121321a72084839b02f01fad_174216_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="621" /></picture></a></figure>
|
|||
|
|
<p>Interessant könnte das werden, wenn ich mal wieder Infrastruktur dokumentiere und dazu eine Karte zeige.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/09/weitere-verbesserung-fuer-360-grad-fotos-und-panoramen-hier-im-blog/2023-09-26-photo-sphere-viewer-mit-kompass-cover.webp" length="174216" type="image/webp"/></item><item><title>Viewer für 360°-Fotos im Blog verbessert</title><link>https://natenom.de/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/</link><pubDate>Mon, 25 Sep 2023 00:40:56 +0200</pubDate><guid>https://natenom.de/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/</guid><description><![CDATA[<p>Gestern und heute habe ich mich viel mit dem Photo-Sphere-Viewer auseinander gesetzt, den ich hier im Blog verwende, um die 360°-Fotos darzustellen und dabei auch einige Dinge verbessern können.</p>
|
|||
|
|
<p>Mit Hilfe der ausführlichen Dokumentation des <a class='urlextern' href="https://github.com/mistic100/Photo-Sphere-Viewer">Photo-Sphere-Viewer</a> konnte ich den jetzt richtig im Blog einbinden, sodass ich auch die verschiedenen Plugins nutzen kann, was bisher nicht möglich war, da ich von dieser Thematik keine Ahnung habe.</p>
|
|||
|
|
<p>Auch konnte ich meinen Shortcode zum Einbinden des Viewers verbessern.</p>]]></description><content:encoded><![CDATA[<p>Gestern und heute habe ich mich viel mit dem Photo-Sphere-Viewer auseinander gesetzt, den ich hier im Blog verwende, um die 360°-Fotos darzustellen und dabei auch einige Dinge verbessern können.</p>
|
|||
|
|
<p>Mit Hilfe der ausführlichen Dokumentation des <a class='urlextern' href="https://github.com/mistic100/Photo-Sphere-Viewer">Photo-Sphere-Viewer</a> konnte ich den jetzt richtig im Blog einbinden, sodass ich auch die verschiedenen Plugins nutzen kann, was bisher nicht möglich war, da ich von dieser Thematik keine Ahnung habe.</p>
|
|||
|
|
<p>Auch konnte ich meinen Shortcode zum Einbinden des Viewers verbessern.</p>
|
|||
|
|
<h2 id="verbesserungen-des-360-viewers" data-numberify>Verbesserungen des 360°-Viewers<a class="anchor ms-1" href="#verbesserungen-des-360-viewers"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Es ist jetzt möglich, auch bei mehreren 360°-Fotos in einem Blogbeitrag jeweils eine OpenStreetMap-Karte mit dem Standort anzuzeigen, bisher war das nur einmal pro Blogbeitrag möglich. <a href="/2023/09/fotos-und-360-grad-fotos-von-sonntag/#360-fotos-oder-sogenannte-spheres">Hier ein Beispiel</a>.</li>
|
|||
|
|
<li>Dank des Gyroskop-Plugins kann man das Smartphone im Raum bewegen und sieht das, was vor Ort auch in dieser Richtung war. Das geht aber nur, wenn das Smartphone einen Lagesensor hat und der Browser das unterstützt. Dazu muss man unten rechts auf das Kompass-Symbol drücken.</li>
|
|||
|
|
<li>Der Fischaugen-Effekt ist aus. Das Foto wird also beim Verändern der Ansicht nicht mehr verzerrt.</li>
|
|||
|
|
<li>Der Photo-Sphere-Viewer wurde auf die neueste Version aktualisiert.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="weitere-möglichkeiten-in-zukunft-dank-plugins" data-numberify>Weitere Möglichkeiten in Zukunft dank Plugins<a class="anchor ms-1" href="#weitere-möglichkeiten-in-zukunft-dank-plugins"></a></h2>
|
|||
|
|
<p>In Zukunft kann ich mir vorstellen, auch noch mehr <a class='urlextern' href="https://photo-sphere-viewer.js.org/plugins/">Funktionen der Plugins</a> zu nutzen, wie z. B. die Möglichkeit für Markierungen innerhalb der 360°-Fotos. Oder auch das automatische scrollen der Fotos.</p>
|
|||
|
|
<h2 id="metadaten--so-wichtig-für-unvollständige-panoramen" data-numberify>Metadaten – so wichtig für unvollständige Panoramen<a class="anchor ms-1" href="#metadaten--so-wichtig-für-unvollständige-panoramen"></a></h2>
|
|||
|
|
<p>Beim Testen ist mir aufgefallen, dass der Viewer Panorama-Fotos automatisch auf nur einen Teil der “Leinwand tapeziert”, wenn das Foto nicht 360° in der Horizontalen abdeckt, sondern nur einen Teil davon. In vor allem älteren Panorama-Fotos funktioniert das jedoch nicht.</p>
|
|||
|
|
<p>Der Verdacht: Metadaten.</p>
|
|||
|
|
<p>Und tatsächlich, es liegt an Metadaten. In älteren Panorama-Fotos gab es die nie und in aktuellen Panorama-Fotos entferne ich die Metadaten vor dem Veröffentlichen per Script. Sobald die Metadaten fehlen, gibt es bei teilweisen Panoramen harte Schnitte und keine unvollständigen Bereiche mehr.</p>
|
|||
|
|
<p>Hier ein Vergleich, oben mit Metadaten, unten ohne:</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-09-24-leinwand-mit-metadaten.jpg"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_360x0_resize_q95_h2_catmullrom.webp 360w,/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_500x0_resize_q95_h2_catmullrom.webp 500w,/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_816x0_resize_q95_h2_catmullrom.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_360x0_resize_q95_h2_catmullrom.webp 360w, /2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_500x0_resize_q95_h2_catmullrom.webp 500w, /2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_816x0_resize_q95_h2_catmullrom.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-mit-metadaten_huca07ef848694fda6b487003cc1208909_55472_816x0_resize_q95_h2_catmullrom.webp" title="" loading="lazy" width="816" height="598" /></picture></a></figure>
|
|||
|
|
<figure class="image-caption"><a href="2023-09-24-leinwand-ohne-metadaten.jpg"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_360x0_resize_q95_h2_catmullrom.webp 360w,/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_500x0_resize_q95_h2_catmullrom.webp 500w,/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_816x0_resize_q95_h2_catmullrom.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_360x0_resize_q95_h2_catmullrom.webp 360w, /2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_500x0_resize_q95_h2_catmullrom.webp 500w, /2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_816x0_resize_q95_h2_catmullrom.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/09/viewer-fuer-360-grad-fotos-im-blog-verbessert/2023-09-24-leinwand-ohne-metadaten_huca9ef6b32c95b47a63018db3b0d28885_95438_816x0_resize_q95_h2_catmullrom.webp" title="" loading="lazy" width="816" height="598" /></picture></a></figure>
|
|||
|
|
<p>Welche Metadaten eine Rolle spielen, <a class='urlextern' href="https://developers.google.com/streetview/spherical-metadata">ist hier dokumentiert</a>. Auch auf der Projektseite von Photo-Sphere-Viewer gibt es dazu einen Abschnitt und es wird auch erklärt, wie man diese Daten angeben kann, ohne sie in die Metadaten zu schreiben, <a class='urlextern' href="https://photo-sphere-viewer.js.org/guide/adapters/equirectangular.html#cropped-panorama">siehe hier</a>. Dort gibt es ganz unten auch einen Bereich, wo man diese Angaben anhand eines lokalen Beispielfotos ausprobieren kann.</p>
|
|||
|
|
<p>Das sind die relevanten Metadaten (aus <code>exiftool</code>) mit den Werten für das hier verwendete Beispiel:<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
|
|||
|
|
<pre tabindex="0"><code>Cropped Area Left Pixels : 0
|
|||
|
|
Cropped Area Top Pixels : 1278
|
|||
|
|
Cropped Area Image Width Pixels : 6774
|
|||
|
|
Cropped Area Image Height Pixels: 1634
|
|||
|
|
Full Pano Width Pixels : 8330
|
|||
|
|
Full Pano Height Pixels : 4165
|
|||
|
|
</code></pre><p>Man kann diese Metadaten auch mit Hilfe von exiftool wieder in Fotos hineinschreiben, falls man z. B. noch auf das unbearbeitete Originalfoto Zugriff hat:</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>exiftool -overwrite_original -CroppedAreaImageHeightPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">1634</span> -CroppedAreaImageWidthPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">6774</span> -CroppedAreaLeftPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">0</span> -CroppedAreaTopPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">1278</span> -FullPanoWidthPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">8330</span> -FullPanoHeightPixels<span style="color:#f92672">=</span><span style="color:#ae81ff">4165</span> datei.webp
|
|||
|
|
</span></span></code></pre></div><p>Statt die Tags manuell hinzuzufügen kann man sie beim Entfernen der anderen Metadaten in den Fotos belassen. Mein Script zum Entfernen von Metadaten habe ich nun so umgeschrieben, dass diese Daten erhalten bleiben:</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>preservetags<span style="color:#f92672">=</span><span style="color:#e6db74">"-aperturevalue -shuttervalue -iso -mime -exposuretime -focallength -orientation -exposurebias -flash -CroppedAreaImageHeightPixels -CroppedAreaImageWidthPixels -CroppedAreaLeftPixels -CroppedAreaTopPixels -FullPanoWidthPixels -FullPanoHeightPixels -InitialViewHeadingDegrees -InitialViewPitchDegrees -InitialViewRollDegrees -ProjectionType"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>exiftool -all<span style="color:#f92672">=</span> -tagsfromfile @ <span style="color:#e6db74">${</span>preservetags<span style="color:#e6db74">}</span> -overwrite_original datei.webp<span style="color:#e6db74">"
|
|||
|
|
</span></span></span></code></pre></div><h2 id="sooo-schön" data-numberify>Sooo schön<a class="anchor ms-1" href="#sooo-schön"></a></h2>
|
|||
|
|
<p>Besonders die Funktion mit dem Gyroskop auf Smartphones gefällt mir sehr gut und auch, dass man jetzt auch bei mehreren 360°-Fotos pro Blogbeitrag zu jedem Foto jeweils eine eigene Karte mit dem Ort darstellen kann. Das sind wirklich schöne und einfach zu erstellende Erinnerungen.</p>
|
|||
|
|
<p>Ich werde ab jetzt auch Panorama-Fotos mit diesem Viewer darstellen lassen.</p>
|
|||
|
|
<h2 id="kleine-aber-nicht-mehr-aktive-alternative--pannellum" data-numberify>Kleine, aber nicht mehr aktive Alternative – Pannellum<a class="anchor ms-1" href="#kleine-aber-nicht-mehr-aktive-alternative--pannellum"></a></h2>
|
|||
|
|
<p>Es gibt eine Alternative zum Photo-Sphere-Viewer, nämlich <a class='urlextern' href="https://pannellum.org/">Pannellum</a>. Der Viewer ist nur 21 kB klein und hat einen ausreichenden Funktionsumfang, wenn ich davon ausgehe, was ich hier bisher im Blog benötigt hatte. Der Viewer wird aber schon seit 2019 nicht mehr groß weiterentwickelt. Man muss lediglich eine .js-Datei und eine .css-Datei einbinden, mehr nicht.</p>
|
|||
|
|
<p>An Pannellum gefällt mir unter anderem, dass das Foto optional erst nach einem Klick auf einen Knopf geladen wird. Das spart Bandbreite.</p>
|
|||
|
|
<div class="footnotes" role="doc-endnotes">
|
|||
|
|
<hr>
|
|||
|
|
<ol>
|
|||
|
|
<li id="fn:1">
|
|||
|
|
<p>Die Liste der aller für Panoramen relevanter Tags <a class='urlextern' href="https://exiftool.org/TagNames/XMP.html#GPano">gibt es hier</a>. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>]]></content:encoded></item><item><title>Mehrere Spheres (360°-Fotos) in einem Blogbeitrag</title><link>https://natenom.de/2023/09/mehrere-spheres-in-einem-blogbeitrag/</link><pubDate>Mon, 11 Sep 2023 00:17:50 +0200</pubDate><guid>https://natenom.de/2023/09/mehrere-spheres-in-einem-blogbeitrag/</guid><description><![CDATA[<p>Ich wollte heute einen Blogbeitrag erstellen, in dem mehrere 360°-Fotos (hier nur noch “Sphere” genannt) eingebunden werden und stellte fest, dass immer nur die erste Sphere angezeigt wurde. Vermutlich hatte ich <a href="/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/">damals beim “Implementieren”</a> nicht an so etwas gedacht.</p>]]></description><content:encoded><![CDATA[<p>Ich wollte heute einen Blogbeitrag erstellen, in dem mehrere 360°-Fotos (hier nur noch “Sphere” genannt) eingebunden werden und stellte fest, dass immer nur die erste Sphere angezeigt wurde. Vermutlich hatte ich <a href="/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/">damals beim “Implementieren”</a> nicht an so etwas gedacht.</p>
|
|||
|
|
<p>Das Problem ist, dass der Shortcode den folgenden Code beinhaltet:</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-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"viewer"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 100%; height: 60vh;"</span>></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> const viewer = new PhotoSphereViewer.Viewer({
|
|||
|
|
</span></span><span style="display:flex;"><span> container: document.querySelector('#viewer'),
|
|||
|
|
</span></span><span style="display:flex;"><span>[…]
|
|||
|
|
</span></span></code></pre></div><h2 id="eindeutige-id-mit-ordinal" data-numberify>Eindeutige ID mit .Ordinal<a class="anchor ms-1" href="#eindeutige-id-mit-ordinal"></a></h2>
|
|||
|
|
<p>Ich habe jetzt nicht wirklich Ahnung von diesem ganzen Zeugs, aber eine ID innerhalb eines HTML-Dokuments muss eindeutig sein und sobald man mehrere Spheres einbindet, gibt es mindestens zwei <code>id="viewer"</code>.</p>
|
|||
|
|
<p>D. h. ich musste den Code ändern und sowohl die ID als auch die Konstante <code>viewer</code> für jedes eingebundene Sphere eindeutig machen. Mit Hilfe der Variable <code>.Ordinal</code> ist das einfach umsetzbar. Die Variable besagt, an wie vielter Stelle der aktuelle Shortcode im Kontext der aktuellen Seite steht.</p>
|
|||
|
|
<p>Dabei stieß ich auf ein Problem, denn irgendwas in Hugo macht magische Dinge und fügt automatisch Anführungszeichen ein, sobald man eine Hugo Variable innerhalb eines <code><script></code>-Konstrukts einfügt.</p>
|
|||
|
|
<p>So wird aus:</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" data-lang="go"><span style="display:flex;"><span><<span style="color:#a6e22e">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">viewer_</span>{{ .<span style="color:#a6e22e">Ordinal</span> }} = <span style="color:#a6e22e">new</span> [<span style="color:#960050;background-color:#1e0010">…</span>]
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">/</span><span style="color:#a6e22e">script</span>>
|
|||
|
|
</span></span></code></pre></div><p>In Ergebnis das 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-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">viewer_</span><span style="color:#e6db74">"2"</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> [<span style="color:#960050;background-color:#1e0010">…</span>]
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span></code></pre></div><p>Details dazu gibt es <a class='urlextern' href="https://discourse.gohugo.io/t/cant-insert-shortcode-parameter-without-quotation-marks/1481/4">hier</a> zu lesen und die Lösung ist <a class='urlextern' href="https://gohugo.io/functions/safejs/">safeJS</a>.</p>
|
|||
|
|
<p>Der funktionierende Code sieht dann so aus und die Anführungszeichen sind dann weg:</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" data-lang="go"><span style="display:flex;"><span><<span style="color:#a6e22e">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">viewer_</span>{{ .<span style="color:#a6e22e">Ordinal</span> | <span style="color:#a6e22e">safeJS</span> }} = <span style="color:#a6e22e">new</span> [<span style="color:#960050;background-color:#1e0010">…</span>]
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">/</span><span style="color:#a6e22e">script</span>>
|
|||
|
|
</span></span></code></pre></div><h2 id="noch-mehr-arbeit-für-die-karte" data-numberify>Noch mehr Arbeit für die Karte<a class="anchor ms-1" href="#noch-mehr-arbeit-für-die-karte"></a></h2>
|
|||
|
|
<p>Optional kann ich für jede Sphere auch einen Kartenausschnitt von OpenStreetMap einbinden, <a href="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/#beispiel">siehe hier</a>. Dabei gibt es jedoch das selbe Problem mit der eindeutigen ID und auch hier lädt nur die erste Karte. Denn das JavaScript referenziert auch mehrere IDs.</p>
|
|||
|
|
<p>Doch das übersteigt meine Fertigkeiten mit JavaScript und Co und deshalb werde ich die Karten bei mehreren Spheres pro Blogbeitrag erst einmal nicht einbinden, bis ich eine Lösung gefunden habe.</p>
|
|||
|
|
<p>Immerhin gibt es unter jeder Sphere optional die Möglichkeit, einen Link zum Standort zu hinterlegen und das werde ich stattdessen nutzen.</p>
|
|||
|
|
<h2 id="scripte-und-css-nur-einmal-einbinden" data-numberify>Scripte und CSS nur einmal einbinden<a class="anchor ms-1" href="#scripte-und-css-nur-einmal-einbinden"></a></h2>
|
|||
|
|
<p>So kann ich jetzt auch mehrere Spheres in einem Blogbeitrag einfügen. Doch es werden noch bei jeder Einbindung die notwendigen, externen Scripte eingebunden. Ordinal kann ich hier nicht dafür verwenden, denn der liefert für jeden verwendeten Shortcode innerhalb eines Blogbeitrags eine eindeutige Nummer, jedoch nicht die Information, ob der Shortcode bereits aufgerufen wurde.</p>
|
|||
|
|
<p>Deshalb bietet sich die Funktion <code>.Scratch</code> an.</p>
|
|||
|
|
<p>Mit diesem Code werden Scripte und CSS nur beim ersten Sphere eingebunden, bei weiteren nicht erneut:</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" data-lang="go"><span style="display:flex;"><span><!<span style="color:#f92672">--</span> <span style="color:#a6e22e">Sphere</span> <span style="color:#a6e22e">js</span> <span style="color:#a6e22e">und</span> <span style="color:#a6e22e">css</span> <span style="color:#a6e22e">nur</span> <span style="color:#a6e22e">einmalig</span> <span style="color:#a6e22e">einbinden</span> <span style="color:#f92672">--</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>{{ <span style="color:#66d9ef">if</span> <span style="color:#a6e22e">ne</span> (<span style="color:#960050;background-color:#1e0010">$</span>.<span style="color:#a6e22e">Page</span>.<span style="color:#a6e22e">Scratch</span>.<span style="color:#a6e22e">Get</span> <span style="color:#e6db74">"sphere_used"</span>) <span style="color:#e6db74">"true"</span> }}
|
|||
|
|
</span></span><span style="display:flex;"><span>{{ <span style="color:#960050;background-color:#1e0010">$</span>.<span style="color:#a6e22e">Page</span>.<span style="color:#a6e22e">Scratch</span>.<span style="color:#a6e22e">Set</span> <span style="color:#e6db74">"sphere_used"</span> <span style="color:#e6db74">"true"</span> }}
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Hier</span> <span style="color:#a6e22e">Einbindung</span> <span style="color:#a6e22e">der</span> <span style="color:#a6e22e">Scripte</span> <span style="color:#a6e22e">und</span> <span style="color:#a6e22e">CSS</span>.
|
|||
|
|
</span></span><span style="display:flex;"><span>{{ <span style="color:#a6e22e">end</span> }}
|
|||
|
|
</span></span></code></pre></div>]]></content:encoded></item><item><title>Kommentarfunktion via Isso für meinen Blog</title><link>https://natenom.de/2023/08/kommentarfunktion-via-isso-fuer-meinen-blog/</link><pubDate>Sat, 12 Aug 2023 20:38:03 +0200</pubDate><guid>https://natenom.de/2023/08/kommentarfunktion-via-isso-fuer-meinen-blog/</guid><description><![CDATA[<p>Dank Isso ist es nun möglich, Kommentare hier im Blog zu schreiben. Zur Installation von Isso schreibe ich hier nichts, da gibt es eine gute Anleitung auf der Projektseite, aber ich schreibe etwas zur Motivation und zur Benutzung.</p>
|
|||
|
|
<p>Vor einiger Zeit hatte ich hier schon einmal die <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">Möglichkeit erläutert, Kommentare zu schreiben</a>, obwohl das hier eine statische Website ist, die mit Hugo betrieben wird.</p>]]></description><content:encoded><![CDATA[<p>Dank Isso ist es nun möglich, Kommentare hier im Blog zu schreiben. Zur Installation von Isso schreibe ich hier nichts, da gibt es eine gute Anleitung auf der Projektseite, aber ich schreibe etwas zur Motivation und zur Benutzung.</p>
|
|||
|
|
<p>Vor einiger Zeit hatte ich hier schon einmal die <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">Möglichkeit erläutert, Kommentare zu schreiben</a>, obwohl das hier eine statische Website ist, die mit Hugo betrieben wird.</p>
|
|||
|
|
<h2 id="wozu-überhaupt-kommentare" data-numberify>Wozu überhaupt Kommentare?<a class="anchor ms-1" href="#wozu-überhaupt-kommentare"></a></h2>
|
|||
|
|
<p>Wenn ich einen Blogbeitrag auf Social Media verlinke, bekomme ich dort Rückmeldungen dazu. Diese sind aber nur im Kontext Social Media zu finden und nicht, wenn man Blogbeiträge im Browser liest.</p>
|
|||
|
|
<h2 id="nicht-gut--kommentare-via-fediversemastodon" data-numberify>Nicht gut – Kommentare via Fediverse/Mastodon<a class="anchor ms-1" href="#nicht-gut--kommentare-via-fediversemastodon"></a></h2>
|
|||
|
|
<p>Letztes Jahr hatte ich bereits Kommentare via Mastodon bzw. dem Fediverse ermöglicht, was jedoch ein paar Nachteile hatte. Hauptsächlich war es umständlich, denn ich musste für jeden Blogbeitrag, für den Kommentare möglich sein sollten, einen Toot auf Mastodon erstellen und darin den Blogbeitrag verlinken. Dann im Front Matter (Header des Blogbeitrags) die URL zum Toot eintragen und den Blog neu generieren. Das hatte ich dann auch nur ein paar Mal gemacht.</p>
|
|||
|
|
<p>Weitere Nachteile:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Keine Moderation.</li>
|
|||
|
|
<li>Nicht wirklich transparent für Menschen, die im Fediverse kommentieren. Dazu hatte ich mein Setup dann noch etwas komplizierter gestaltet, <a href="/2022/11/transparenz-fuer-kommentare-im-blog-via-mastodon/">siehe hier</a>.</li>
|
|||
|
|
<li>Dass ich meine Toots immer mal wieder lösche, war nicht gerade hilfreich.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="besser--kommentare-via-isso" data-numberify>Besser – Kommentare via Isso<a class="anchor ms-1" href="#besser--kommentare-via-isso"></a></h2>
|
|||
|
|
<p>Hingegen gibt es bei Isso, das ich jetzt verwende, einige Vorteile:</p>
|
|||
|
|
<p>Vorteile für Benutzer:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Für einen einstellbaren Zeitraum lassen sich bereits gesendete Kommentare vom Absender ändern. Derzeit sind das 5 Minuten.</li>
|
|||
|
|
<li>Wenn die entsprechenden Cookies im Browser des Benutzers noch vorhanden sind, kann er eigene Kommentare wieder gelöscht werden.</li>
|
|||
|
|
<li>Man kann auf andere Kommentare Bezug nehmen und dies ist später auch in der Struktur erkennbar.</li>
|
|||
|
|
<li>Markdown kann verwendet werden.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Vorteile für mich als Betreiber:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Die Daten liegen auf meinem Server und ich kann sie jederzeit einfach vom Netz nehmen.</li>
|
|||
|
|
<li>Die Daten liegen in einer Sqlite-Datenbank, die man einfach sichern kann.</li>
|
|||
|
|
<li>Die Sqlite-Datenbank kann man direkt bearbeiten, entweder mit <code>sqlite3</code> oder mit <code>litecli</code>.</li>
|
|||
|
|
<li>Es gibt keine Metadaten, die in Blogbeiträgen enthalten sind. D. h. aus Sicht von Hugo muss nur das Script zum Laden/Schreiben von Kommentaren eingebunden werden. Dadurch kann man Kommentare auch nicht über die Suche finden.</li>
|
|||
|
|
<li>Es gibt eine Moderation für Kommentare. Ich kann einen Kommentar vor dem Freischalten bearbeiten.</li>
|
|||
|
|
<li>Isso kann auf einem anderen Server laufen und beherrscht auch Multisite, also das Bereitstellen der Kommentarfunktion für verschiedene Websites.</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content"><p>Ein Nachteil ist für mich, dass jetzt wieder eine dynamische Komponente auf dem Server läuft, die für den Betrieb von <code>comments.natenom.de</code> zuständig ist und hinter einem Nginx-Proxy läuft.</p>
|
|||
|
|
<p>Die kann ich aber jederzeit abschalten und es würden keine Probleme daraus entstehen.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="local-storage-cookies-und-ip-adresse" data-numberify>Local Storage, Cookies und IP-Adresse<a class="anchor ms-1" href="#local-storage-cookies-und-ip-adresse"></a></h2>
|
|||
|
|
<p>Sobald man einen Kommentar abschickt, speichert der Browser für weitere Kommentare den angegebenen Namen, die E-Mail-Adresse und die URL im LocalStorage des Browsers. Diese Daten können später clientseitig vom Script ausgelesen und verwendet werden.</p>
|
|||
|
|
<p>Des weiteren wird für jeden abgesendeten Kommentar ein Cookie gesetzt. Dieses wird auch nur vom JavaScript clientseitig ausgewertet und nur zur Authentifizierung an den Server geschickt, wenn man einen abgesendeten Kommentar ändern oder löschen möchte.</p>
|
|||
|
|
<p>Serverseitig werden vom Benutzer die offensichtlichen Daten des Kommentars gespeichert und zusätzlich auch die IP-Adresse, wobei der letzte Teil auf Null gesetzt wird.</p>
|
|||
|
|
<p>Ich habe für die neue Kommentarfunktion die Datenschutzerklärung im Blog entsprechend angepasst.</p>
|
|||
|
|
<h2 id="an-die-url-des-blogbeitrags-gebunden" data-numberify>An die URL des Blogbeitrags gebunden<a class="anchor ms-1" href="#an-die-url-des-blogbeitrags-gebunden"></a></h2>
|
|||
|
|
<p>Für jeden Kommentar wird die URL des Blogbeitrags (ohne <code>https://natenom.de</code> am Anfang) gespeichert. Wenn man also nachträglich den Slug eines Beitrags ändert, dann werden Kommentare nicht mehr sichtbar sein, wenn man nicht auch in der Datenbank von Isso diese URL in den entsprechenden Kommentaren ändert.</p>
|
|||
|
|
<h2 id="kommentarfunktion-in-einzelnen-beiträgen-deaktivieren" data-numberify>Kommentarfunktion in einzelnen Beiträgen deaktivieren<a class="anchor ms-1" href="#kommentarfunktion-in-einzelnen-beiträgen-deaktivieren"></a></h2>
|
|||
|
|
<p>Dank des Themes, das ich hier im Blog verwende (siehe unten im Footer), kann ich für einzelne Blogbeitrag Kommentare deaktivieren. Dazu füge ich im Front Matter eines Beitrags <code>comment: false</code> ein.</p>
|
|||
|
|
<p>Man kann natürlich trotzdem über die API Kommentare für solche Beiträge abgeben. Aber erstens sind Kommentare im Blog moderiert und zweitens werden sie in solchen Beiträgen gar nicht erst durch den Browser abgerufen/geladen.</p>
|
|||
|
|
<h2 id="recht-auf-vergessen" data-numberify>Recht auf Vergessen<a class="anchor ms-1" href="#recht-auf-vergessen"></a></h2>
|
|||
|
|
<p>Da ich das <a href="/2022/02/recht-auf-vergessen-kommentare-geloescht/">Recht auf Vergessen</a> gut finde, werde ich noch etwas einrichten, um alle Kommentare zu löschen, die älter sind als x. Wie lange x sein wird, habe ich noch nicht entschieden.</p>
|
|||
|
|
<h2 id="gespannt" data-numberify>Gespannt<a class="anchor ms-1" href="#gespannt"></a></h2>
|
|||
|
|
<p>Da es auch schon in der Vergangenheit, als der Blog noch mit WordPress betrieben wurde, nur selten Kommentare gab, bin ich gespannt, ob jetzt jemand diese Möglichkeit nutzen wird. Und vor allem, ob ich irgendwann von Spam oder sonst etwas genervt sein werde, und Kommentare wieder abschalten werde.</p>
|
|||
|
|
<p>Es kann jedoch im Zweifel etwas dauern, bis ich Kommentare freigebe.</p>
|
|||
|
|
<h2 id="projektseite" data-numberify>Projektseite<a class="anchor ms-1" href="#projektseite"></a></h2>
|
|||
|
|
<p>Hier die <a class='urlextern' href="https://isso-comments.de/">Projektseite von Isso</a>.</p>
|
|||
|
|
<p>Speziell die Clientkonfiguation fand ich hilfreich, <a class='urlextern' href="https://isso-comments.de/docs/reference/client-config/">siehe hier</a>.</p>]]></content:encoded></item><item><title>Archiviertes Wiki – Fehlerbehebung oder so</title><link>https://natenom.de/2023/06/archiviertes-wiki-fehlerbehebung-oder-so/</link><pubDate>Fri, 02 Jun 2023 23:01:22 +0200</pubDate><guid>https://natenom.de/2023/06/archiviertes-wiki-fehlerbehebung-oder-so/</guid><description><![CDATA[<p>Mir ist heute erst aufgefallen, dass ich nach dem letzten <a href="/2023/05/umzug-auf-andere-domains-blog-altes-wiki-dateien-und-in-zukunft-auch-das-neue-wiki/">Domainrumgeschubse</a> vergessen hatte, die Sitemap des archivierten Wikis auf <code>wikiarchiv.natenom.de</code> anzupassen. Dank vieler Weiterleitungen von altem Wiki zu neuem und umgekehrt, war das vermutlich ziemlich egal.</p>]]></description><content:encoded><![CDATA[<p>Mir ist heute erst aufgefallen, dass ich nach dem letzten <a href="/2023/05/umzug-auf-andere-domains-blog-altes-wiki-dateien-und-in-zukunft-auch-das-neue-wiki/">Domainrumgeschubse</a> vergessen hatte, die Sitemap des archivierten Wikis auf <code>wikiarchiv.natenom.de</code> anzupassen. Dank vieler Weiterleitungen von altem Wiki zu neuem und umgekehrt, war das vermutlich ziemlich egal.</p>
|
|||
|
|
<p>Jetzt habe ich aber die Sitemap des archivierten Wikis komplett entfernt und auch die Referenz aus der <code>robots.txt</code>. Schließlich sollen alte Inhalte noch auffindbar sein, und das sind sie scheinbar, neue werden aber nicht mehr dazukommen.</p>
|
|||
|
|
<p>Sollte also passen.</p>]]></content:encoded></item><item><title>Update für VSCode bringt neue Variable für Zeitzonenoffset</title><link>https://natenom.de/2023/05/update-fuer-vscode-bringt-neue-variable-fuer-zeitzonenoffeset/</link><pubDate>Wed, 17 May 2023 22:57:55 +0200</pubDate><guid>https://natenom.de/2023/05/update-fuer-vscode-bringt-neue-variable-fuer-zeitzonenoffeset/</guid><description><p>Heute mal die <a class='urlextern' href="https://code.visualstudio.com/updates/v1_78">Release-Notes von VSCode</a> gelesen und festgestellt, dass ich jetzt nicht mehr daran denken muss, bei Sommerzeit-Winterzeit-Umstellung meine Snippets zu bearbeiten.</p></description><content:encoded><![CDATA[<p>Heute mal die <a class='urlextern' href="https://code.visualstudio.com/updates/v1_78">Release-Notes von VSCode</a> gelesen und festgestellt, dass ich jetzt nicht mehr daran denken muss, bei Sommerzeit-Winterzeit-Umstellung meine Snippets zu bearbeiten.</p>
|
|||
|
|
<p>Denn als ich damals meine <a href="/2023/04/meine-snippets-in-vscode-fuer-markdown-mit-hugo/">Snippets für Hugo in VSCode</a> erstellt hatte, gab es noch keine Variable, die den Offset der aktuellen Zeitzone enthielt.</p>
|
|||
|
|
<p>Das hat man in diesem Release nachgeholt, die Variable heißt <code>$CURRENT_TIMEZONE_OFFSET</code> und enthält bei mir den String <code>+02:00</code>.</p>]]></content:encoded></item><item><title>Mehr Auflösung für Fotos im Blog</title><link>https://natenom.de/2023/05/mehr-aufloesung-fuer-fotos-im-blog/</link><pubDate>Sun, 07 May 2023 21:27:31 +0200</pubDate><guid>https://natenom.de/2023/05/mehr-aufloesung-fuer-fotos-im-blog/</guid><description><p>Bisher hatte ich Fotos, die ich im Blog veröffentlichen wollte, immer auf eine maximale Auflösung von 2000x2000 Pixel herunter skaliert, mit einem eigenen Script.</p></description><content:encoded><![CDATA[<p>Bisher hatte ich Fotos, die ich im Blog veröffentlichen wollte, immer auf eine maximale Auflösung von 2000x2000 Pixel herunter skaliert, mit einem eigenen Script.</p>
|
|||
|
|
<p>Die zur Verfügung stehenden Bandbreiten werden größer, die Displays auch und dank des Formats <code>webp</code> sind die Dateien bei gleicher Auflösung deutlich kleiner als im Format <code>jpg</code>.</p>
|
|||
|
|
<p>Deshalb werde ich die Fotos ab jetzt nicht mehr auf 2000x2000 Pixel herunter skalieren lassen sondern auf maximal 4000x4000 Pixel.</p>
|
|||
|
|
<p>Bei der Darstellung direkt auf der Website ändert sich nichts, da hier <a href="/2023/04/shortcode-und-render-hook-fuer-hugo-verbessert-weniger-datenmuell-und-schnelleres-rendern/">Hugo beim Rendern des Blogs dafür sorgt, dass kleinere Bildvarianten</a> der Originalfotos erzeugt werden. Die maximale Größe der Fotos erhält man erst, wenn man ein Foto in einem Blogbeitrag anklickt und somit das Originalfoto lädt.</p>
|
|||
|
|
<p>Das erste Foto in der neuen Auflösung ist das <a href="/2023/05/schoenes-foto-einer-schnecke/">von der Schnecke</a>.</p>
|
|||
|
|
<p>Das betrifft auch die Fotos bei <a href="https://kagube.de/">Kagube</a>.</p>]]></content:encoded></item><item><title>Auch das (neue) Wiki wurde umgezogen</title><link>https://natenom.de/2023/05/auch-das-wiki-wurde-umgezogen/</link><pubDate>Wed, 03 May 2023 22:22:34 +0200</pubDate><guid>https://natenom.de/2023/05/auch-das-wiki-wurde-umgezogen/</guid><description><p>Wenn man schonmal dabei ist, kann man auch gleich alles fertig machen. 🥳</p></description><content:encoded><![CDATA[<p>Wenn man schonmal dabei ist, kann man auch gleich alles fertig machen. 🥳</p>
|
|||
|
|
<p>Habe jetzt auch das neue Wiki von <code>wiki.natenom.com</code> nach <a href="https://wiki.natenom.de/">wiki.natenom.de</a> umgezogen.</p>
|
|||
|
|
<p>Damit man weiterhin auf die Inhalte zugreifen kann, die nur im alten, archivierten Wiki enthalten sind, habe ich nur diese Themenbereiche nach <code>wikiarchiv.natenom.de</code> weitergeleitet. Das sind nur die Bereiche “<a href="https://wikiarchiv.natenom.de/mumble">Mumble</a>” und “<a href="https://wikiarchiv.natenom.de/minecraft">Minecraft</a>”.</p>
|
|||
|
|
<p>Ein paar URLs, die ich ausprobiert hatte, funktionierten wie gewünscht.</p>
|
|||
|
|
<p>Das ist schön, wenn man von uralten Verlinkungen noch auf die richtigen Inhalte stößt. Für sogenannte “Hotlinks”, also Verlinkungen direkt auf eine Datei, funktioniert das natürlich so nicht. Nur die URLs zu HTML-Seiten werden richtig weitergeleitet.</p>
|
|||
|
|
<p>Update: Habe noch eingerichtet, dass auch alle Dateien unterhalb von <code>/_media/</code> ins archivierte Wiki weitergeleitet werden.</p>]]></content:encoded></item><item><title>Umzug auf andere Domains – Blog, altes Wiki, Dateien und in Zukunft auch das neue Wiki</title><link>https://natenom.de/2023/05/umzug-auf-andere-domains-blog-altes-wiki-dateien-und-in-zukunft-auch-das-neue-wiki/</link><pubDate>Wed, 03 May 2023 20:39:40 +0200</pubDate><guid>https://natenom.de/2023/05/umzug-auf-andere-domains-blog-altes-wiki-dateien-und-in-zukunft-auch-das-neue-wiki/</guid><description><p>Ich habe heute ein paar Webseiten auf andere Domains umgezogen und werde das in Zukunft auch noch weiter tun.</p></description><content:encoded><![CDATA[<p>Ich habe heute ein paar Webseiten auf andere Domains umgezogen und werde das in Zukunft auch noch weiter tun.</p>
|
|||
|
|
<h2 id="blog" data-numberify>Blog<a class="anchor ms-1" href="#blog"></a></h2>
|
|||
|
|
<p>Ich habe den Blog heute von <code>blog.natenom.com</code> nach <code>natenom.de</code> umgezogen, so wie es vor langer Zeit mal war. Ich weiß gar nicht mehr, weshalb ich damals auf die .com-Domain umgezogen bin. Jetzt ist die Domain kürzer und der Blog ist sowieso meine Hauptseite, schon immer gewesen, und kann deshalb auch direkt auf der Domain liegen.
|
|||
|
|
Damit alles weiterhin funktioniert, habe ich natürlich eine Weiterleitung eingerichtet, direkt mit HTTP-Status-Code 301 (Moved permanently). Denn das bleibt länger so.</p>
|
|||
|
|
<p>Der Blog lag seit 2014 auf <code>blog.natenom.com</code>, <a href="/2014/07/umzug-von-natenoms-blog-nach-blog-natenom-com/">siehe hier</a>.</p>
|
|||
|
|
<h2 id="dateien" data-numberify>Dateien<a class="anchor ms-1" href="#dateien"></a></h2>
|
|||
|
|
<p>Die Dateien, die bisher auf <code>f.natenom.de</code> zu finden waren, liegen jetzt auf <code>f.natenom.de</code>.</p>
|
|||
|
|
<p>Auch hier habe ich eine Weiterleitung mit HTTP-Status-Code 301 (Moved permanently) eingerichtet.</p>
|
|||
|
|
<h2 id="altes-wiki" data-numberify>Altes Wiki<a class="anchor ms-1" href="#altes-wiki"></a></h2>
|
|||
|
|
<p>Auch das alte Wiki, das bisher auf <code>wiki.natenom.de</code> lag, habe ich umgezogen auf <code>wikiarchiv.natenom.de</code>.</p>
|
|||
|
|
<p>Damit es sich auf der neuen Domain wohlfühlt, musste ich Folgendes ändern (und natürlich auch die Webserver Konfiguration anpassen):
|
|||
|
|
Die <code>/robots.txt</code> manuell an die neue Domain anpassen für die Sitemap.</p>
|
|||
|
|
<p>In <code>htdocs</code> musste ich Folgendes ausführen und somit alle Verlinkungen anpassen:</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>find . -iname <span style="color:#e6db74">"*.html"</span> -exec sed -i -E -e <span style="color:#e6db74">'s#https://wiki.natenom.de/#https://wikiarchiv.natenom.de/#g'</span> <span style="color:#e6db74">'{}'</span> <span style="color:#ae81ff">\;</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>find . -iname <span style="color:#e6db74">"*.css"</span> -exec sed -i -E -e <span style="color:#e6db74">'s#https://wiki.natenom.de/#https://wikiarchiv.natenom.de/#g'</span> <span style="color:#e6db74">'{}'</span> <span style="color:#ae81ff">\;</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>find . -iname <span style="color:#e6db74">"*.html"</span> -exec sed -i -E -e <span style="color:#e6db74">'s#https://blog.natenom.com/#https://natenom.de/#g'</span> <span style="color:#e6db74">'{}'</span> <span style="color:#ae81ff">\;</span> <span style="color:#75715e"># Da ich heute auch den Blog umgezogen hatte.</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>find . -iname <span style="color:#e6db74">"*.html"</span> -exec sed -i -E -e <span style="color:#e6db74">'s#https://wiki.natenom.de/#https://wiki.natenom.de/#g'</span> <span style="color:#e6db74">'{}'</span> <span style="color:#ae81ff">\;</span> <span style="color:#75715e"># Da ich später auch das neue Wiki umgezogen hatte.</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>find . -iname <span style="color:#e6db74">"*.html"</span> -exec sed -i -E -e <span style="color:#e6db74">'s#wiki.natenom.com#wiki.natenom.de#g'</span> <span style="color:#e6db74">'{}'</span> <span style="color:#ae81ff">\;</span> <span style="color:#75715e"># Für Texterwähnungen, die keine URLs darstellen.</span>
|
|||
|
|
</span></span></code></pre></div><h2 id="neues-wiki" data-numberify>Neues Wiki<a class="anchor ms-1" href="#neues-wiki"></a></h2>
|
|||
|
|
<p>Das neue Wiki, das derzeit noch auf <code>wiki.natenom.com</code> liegt, <del>wird in der nahen Zukunft</del> wurde nach <code>wiki.natenom.de</code> umgezogen, da die Domain jetzt sozusagen frei geworden ist, <a href="/2023/05/auch-das-wiki-wurde-umgezogen/">siehe hier</a>.</p>
|
|||
|
|
<h2 id="mumble" data-numberify>Mumble<a class="anchor ms-1" href="#mumble"></a></h2>
|
|||
|
|
<p>Da ich irgendwann die .com-Domain abschalten werde, gibt es jetzt auch einen Eintrag für <code>mumble.natenom.de</code> als auch <code>m.natenom.de</code>, die mit .com funktionieren jedoch weiterhin.</p>
|
|||
|
|
<h2 id="hugo-interwiki-links" data-numberify>Hugo Interwiki-Links<a class="anchor ms-1" href="#hugo-interwiki-links"></a></h2>
|
|||
|
|
<p>Die <a href="/2022/03/interwiki-links-richtig-implementiert/">Interwiki-Links für Hugo</a> mussten natürlich auch an die neuen Domains angepasst werden.</p>
|
|||
|
|
<h2 id="jetzt-auch-de-mit-ipv6-in-richtig" data-numberify>Jetzt auch .de mit IPv6 in richtig<a class="anchor ms-1" href="#jetzt-auch-de-mit-ipv6-in-richtig"></a></h2>
|
|||
|
|
<p>Beim Werkeln ist mir aufgefallen, dass es für die .de-Domain noch gar keinen IPv6 <code>AAAA</code> Eintrag gab, ist jetzt nachgeholt. IPv6 für den Webserver hat trotzdem immer funktioniert, da andere Ebene.</p>
|
|||
|
|
<h2 id="tschüss-com" data-numberify>Tschüss .com<a class="anchor ms-1" href="#tschüss-com"></a></h2>
|
|||
|
|
<p>Die .com-Domain lasse ich dann vermutlich auslaufen, wie Anfang des Jahres die <a href="/2023/02/natenom-name-domain-abgeschaltet/">.name-Domain</a>.</p>
|
|||
|
|
<h2 id="aber-das-buzzword-hier-einfügen" data-numberify>Aber das [Buzzword hier einfügen]?<a class="anchor ms-1" href="#aber-das-buzzword-hier-einfügen"></a></h2>
|
|||
|
|
<p>Ranking wegen Domainumzug? Suchergebnisse wegen bla? Mir alles egal :P</p>
|
|||
|
|
<p>Wer sucht, der findet.</p>]]></content:encoded></item><item><title>Noch mehr depublizert</title><link>https://natenom.de/2023/04/noch-mehr-depubliziert/</link><pubDate>Thu, 20 Apr 2023 19:32:23 +0200</pubDate><guid>https://natenom.de/2023/04/noch-mehr-depubliziert/</guid><description><p>Habe noch mehr Blogbeiträge depubliziert und Dinge im Blog verändert.</p></description><content:encoded><![CDATA[<p>Habe noch mehr Blogbeiträge depubliziert und Dinge im Blog verändert.</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Die Kategorie “Spiele” mit 54 Blogbeiträgen ist jetzt komplett weg. Auch hier war nichts mehr dabei, was ich noch für relevant halte.</li>
|
|||
|
|
<li>Ebenso die Kategorie “Linkdump” mit 41 Beiträgen.</li>
|
|||
|
|
<li>Die Kategorie “Allgemein”, der aktuell 535 Beiträge angehören, habe ich umbenannt zu “Diverses”. Das ist noch ein Uraltübrigbleibsel von WordPress gewesen und hat mir noch nie gefallen. Im Webserver habe ich entsprechend eine Weiterleitung zum neuen Namen angelegt.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Der Blog rendert jetzt in 30 Sekunden. 😊</p>]]></content:encoded></item><item><title>markdownlint für VSCode zeigt Fehler in der Formatierung von Markdown an</title><link>https://natenom.de/2023/04/markdownlint-fuer-vscode-zeigt-fehler-in-der-formatierung-von-markdown-an/</link><pubDate>Sun, 16 Apr 2023 13:12:51 +0200</pubDate><guid>https://natenom.de/2023/04/markdownlint-fuer-vscode-zeigt-fehler-in-der-formatierung-von-markdown-an/</guid><description><p>Ich benutze VSCode zum Schreiben von Beiträgen in Markdown für meinen Blog und für mein Wiki. Seit ein paar Tagen läuft in VSCode auch das Plugin <code>markdownlint</code>. Dieses zeigt mir Fehler in der Formatierung oder der Struktur meiner Beiträge an, schlägt aber auch gleich Lösungen vor.</p></description><content:encoded><![CDATA[<p>Ich benutze VSCode zum Schreiben von Beiträgen in Markdown für meinen Blog und für mein Wiki. Seit ein paar Tagen läuft in VSCode auch das Plugin <code>markdownlint</code>. Dieses zeigt mir Fehler in der Formatierung oder der Struktur meiner Beiträge an, schlägt aber auch gleich Lösungen vor.</p>
|
|||
|
|
<p>Ich nutze Markdown schon eine ganze Weile und es gab nie Fehler beim Rendern von Websites. Aber es ist natürlich schöner, wenn man Markdown so schreibt, wie es vorgegeben ist und so hoffentlich Probleme mit anderen Programmen vermeiden kann.</p>
|
|||
|
|
<h2 id="beispiele" data-numberify>Beispiele<a class="anchor ms-1" href="#beispiele"></a></h2>
|
|||
|
|
<p>Ein paar Beispiele für Fehler, die ich bisher falsch auch in älteren Beiträgen hatte und die durch das Plugin mit einer gelben Wellenlinie markiert werden:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Keine Leerzeile zwischen Überschrift und nächstem Absatz.</li>
|
|||
|
|
<li>Unformatierte inline URLs ohne <code>< … ></code> an Anfang und Ende.</li>
|
|||
|
|
<li>Unnötige Leerzeilen.</li>
|
|||
|
|
<li>Anzahl Leerzeichen für Einrückungen.</li>
|
|||
|
|
<li>Fehlende Bildbeschreibung für eingebettete Bilder. Natürlich geht das nur, wenn man die Markdown-Syntax dafür nutzt, für Shortcodes von Hugo funktioniert das nicht.</li>
|
|||
|
|
<li>Fußnote am Ende des Dokuments hat keine Entsprechung im Fließtext.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="infos-und-projektseite" data-numberify>Infos und Projektseite<a class="anchor ms-1" href="#infos-und-projektseite"></a></h2>
|
|||
|
|
<p>Eine Liste der Regeln, die markdownlint kennt, gibt es <a class='urlextern' href="https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md">hier</a>.</p>
|
|||
|
|
<p>Und hier die <a class='urlextern' href="https://github.com/DavidAnson/vscode-markdownlint">Projektseite</a>.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/04/markdownlint-fuer-vscode-zeigt-fehler-in-der-formatierung-von-markdown-an/2023-04-16-screenshot-vscode-mit-fehlern-cover-featured.webp" length="52550" type="image/webp"/></item><item><title>Meine Snippets in VSCode für Markdown mit Hugo</title><link>https://natenom.de/2023/04/meine-snippets-in-vscode-fuer-markdown-mit-hugo/</link><pubDate>Fri, 14 Apr 2023 02:43:36 +0200</pubDate><guid>https://natenom.de/2023/04/meine-snippets-in-vscode-fuer-markdown-mit-hugo/</guid><description><![CDATA[<p>Hier, wie versprochen, meine aktuellen Snippets, die ich in VSCode verwende, wenn ich Beiträge für meinen Blog oder das <a href="https://wiki.natenom.de/">Wiki</a> in Markdown schreibe, das dann von Hugo gerendert wird.</p>
|
|||
|
|
<p>Vielleicht ist für jemanden etwas Nützliches dabei.</p>]]></description><content:encoded><![CDATA[<p>Hier, wie versprochen, meine aktuellen Snippets, die ich in VSCode verwende, wenn ich Beiträge für meinen Blog oder das <a href="https://wiki.natenom.de/">Wiki</a> in Markdown schreibe, das dann von Hugo gerendert wird.</p>
|
|||
|
|
<p>Vielleicht ist für jemanden etwas Nützliches dabei.</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-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#e6db74">"nat_sphere"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-nat-sphere"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< sphere src=\"$1\" caption=\"$2\" osmurl=\"$3\" osmembedurl=\"$4\" imgsize=\"$5\" >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"360° Photosphere"</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:#e6db74">"nat_gallery"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-nat_gallery"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< nat_gallery match=\"images/*\" >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Natenoms own gallery"</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:#e6db74">"notice"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-notice"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< notice ${1|hinweis,tipp,info,warnung,update|} >}}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"${TM_SELECTED_TEXT}$0"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< /notice >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Notice, tip, info, …"</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:#e6db74">"codewarning"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-codewarning"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"{{< codewarning >}}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Codewarning wegen Copy & Paste in die Shell hinein."</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:#e6db74">"video"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-video"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< video src=\"$1\" caption=\"$2\" type=\"video/mp4\" linktext=\"\" >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Video"</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:#e6db74">"figure"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-figure"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< figure src=\"$1\" link=\"$2\" alt=\"$3\" title=\"$4\" caption=\"$5\" width=\"\" float=\"\" >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Bilder einfügen"</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:#e6db74">"disclaimer"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-disclaimer"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< disclaimer >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Disclaimer für Beiträge über Produkte"</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:#e6db74">"details"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-details"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< details title=\"$1\" >}}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"${TM_SELECTED_TEXT}$0"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< /details >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Ausklappbarer Details"</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:#e6db74">"clear"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-clear"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< clear >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Float clear"</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:#e6db74">"datetime"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-datetime"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Date/Time for blog post."</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:#e6db74">"blockquote"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-blockquote"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< blockquote cite=\"$1\" link=\"$2\" linktext=\"\" >}}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"${TM_SELECTED_TEXT}$0"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< /blockquote >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Zitat"</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:#e6db74">"frontmatter-blog"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-frontmatter-blog"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"title: \"$1\""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# linkTitle: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"slug: ${2/[\\ ]/-/g}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# featured: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"draft: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# comment: true"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# toc: true"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# reward: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# pinned: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# carousel: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# reward: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"author: Natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"#description: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"categories:"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" - $3"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"tags:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" - $4"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# series: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"#comments:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# host: social.anoxinon.de"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# username: natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"# id: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Front Matter Blog"</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:#e6db74">"blog-template-fahrradstatistik"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-blog-template-fahrradstatistik"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"title: \"Meine Fahrradstatistik für ${1:monat} ${CURRENT_YEAR}\""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"slug: fahrradstatistik-${1/(.*)/${1:/downcase}/}-${CURRENT_YEAR}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"author: Natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"categories:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Mobilität"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"tags:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- ${1}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Fahrrad"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Mobilität"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Statistiken"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Strecke"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"<!--more-->"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Gefahrene Kilometer: ${0} km ([${1}]() 2022: km)"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Reine Fahrzeit: h (${1} 2022: h min)"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Höhenmeter (nur hoch): hm (${1} 2022: hm)"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Gesamtkilometer 2023: km (gleicher Zeitraum 2022: km)"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Regentage: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Schneetage: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Kalorienverbrauch: kcal"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Durchschnittliche Geschwindigkeit: km/h"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Durchschnittlicher Puls: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Höchster Puls: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Aktuelles Gewicht: kg"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Blog Template Fahrradkilometer"</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:#e6db74">"blog-template-microblog"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-blog-template-microblog"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"title: \"Microblog: ${1:Titel}\""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"slug: ${2/[\\ ]/-/g}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"author: Natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"categories:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- ${3:Allgemein}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"tags:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"- Microblog"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">""</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"$0"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Blog Template Microblog"</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:#e6db74">"more"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-more"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"<!--more-->"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"$0"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"More anchor"</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:#e6db74">"codefence"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-codefence"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"```${1|apacheconf,awk,bash,c,c#,coffeescript,css,diff,go,html,ini,json,julia,markdown,plaintext,python,ruby,toml,xml,javascript|}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"${TM_SELECTED_TEXT}$0"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"```"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"More anchor"</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:#e6db74">"table"</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"md-table"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span><span style="color:#f92672">:</span> [
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"| ${1} | ${2} |"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"| ------|------ |"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"| ${3} | ${4} |"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"| | |"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> ],
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Table"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>}
|
|||
|
|
</span></span></code></pre></div>]]></content:encoded></item><item><title>Noch mehr Änderungen – im Blog, Wiki und anderswo</title><link>https://natenom.de/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/</link><pubDate>Fri, 14 Apr 2023 01:07:43 +0200</pubDate><guid>https://natenom.de/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/</guid><description><p>Es gab in den letzten Wochen wieder einige Änderungen in Bezug auf meine Websites und andere dinge, die ich für mich als Dokumentation hier aufliste.</p></description><content:encoded><![CDATA[<p>Es gab in den letzten Wochen wieder einige Änderungen in Bezug auf meine Websites und andere dinge, die ich für mich als Dokumentation hier aufliste.</p>
|
|||
|
|
<h2 id="blog" data-numberify>Blog<a class="anchor ms-1" href="#blog"></a></h2>
|
|||
|
|
<h3 id="serien-entfernt" data-numberify>“Serien” entfernt<a class="anchor ms-1" href="#serien-entfernt"></a></h3>
|
|||
|
|
<p>Es gibt in Hugo die Möglichkeit, sogenannte “<a href="/2022/07/aenderungen-im-blog/#serien">Serien</a>” zu erstellen, und Blogbeiträge diesen zuzuordnen. Das hatte ich z. B. für ältere Reiseberichte und für Dokumentation von Radwegen gemacht.</p>
|
|||
|
|
<p>Das habe ich wieder deaktiviert und nutze stattdessen wieder nur die Kategorien für diese Dinge.</p>
|
|||
|
|
<p>Der Vorteil ist, dass die kleine Box in der Seitenleiste jetzt wieder direkt die Kategorien anzeigt.</p>
|
|||
|
|
<p>Vorher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-box-mit-serien.webp" />
|
|||
|
|
<img alt="Screenshot der Seitenleiste, aktiviert ist das Tab &ldquo;Serien&rdquo;." src="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-box-mit-serien.webp" title="" width="439" height="169" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Nachher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-box-ohne-serien.webp" />
|
|||
|
|
<img alt="Screenshot der Seitenleiste, aktiviert ist das Tab &ldquo;Kategorien&rdquo;." src="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-box-ohne-serien.webp" title="" width="435" height="282" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h3 id="kategorie-musik-entfernt" data-numberify>Kategorie ‘Musik’ entfernt<a class="anchor ms-1" href="#kategorie-musik-entfernt"></a></h3>
|
|||
|
|
<p>Ich habe fast alle Beiträge der Kategorie ‘Musik’ entfernt und die wenigen verbliebenen mit Musik-Kontext der Kategorie Allgemein bzw. Linux zugeführt.</p>
|
|||
|
|
<p>Das waren durchweg nur sehr alte Beiträge, die nicht mehr von Interesse sein dürften. Insgesamt waren es um 180 Beiträge.</p>
|
|||
|
|
<p>Vielleicht werde ich in Zukunft noch Beiträge weiterer Kategorien oder Tags entfernen, die schon alt und nicht mehr relevant für den Blog sind.</p>
|
|||
|
|
<h3 id="urls-zu-kategorien-und-tags-angepasst" data-numberify>Urls zu Kategorien und Tags angepasst<a class="anchor ms-1" href="#urls-zu-kategorien-und-tags-angepasst"></a></h3>
|
|||
|
|
<p>Nach dem <a href="/2022/02/umzug-des-blogs-von-wordpress-zu-hugo-teil-1/">Umzug von WordPress nach Hugo</a> Anfang 2022 hatte ich Weiterleitungen eingerichtet für:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>/tag/…</code> nach <code>/tags/…</code></li>
|
|||
|
|
<li><code>/category/…</code> nach <code>/categories/…</code></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Bestehende Links auf meinen Websites habe ich entsprechend umgeschrieben.</p>
|
|||
|
|
<p>Irgendwann in der Zukunft werde ich diese Weiterleitungen deaktivieren, was einen potenziellen Umzug wieder einfacher machen wird. Ordentliche Suchmaschinen schauen da eh nicht mehr nach, weil das schon seit Anfang 2022 mit 301 (Moved Permanently) weitergeleitet wird.</p>
|
|||
|
|
<h3 id="relative-feed-über-das-feed-icon" data-numberify>Relative Feed über das Feed-Icon<a class="anchor ms-1" href="#relative-feed-über-das-feed-icon"></a></h3>
|
|||
|
|
<p>Bisher war es im Blog so, dass beim Feed-Icon immer der Hauptfeed angezeigt wurde. Das habe ich nun auf den Default-Wert des Themes eingestellt, sodass immer der aktuelle Feed angezeigt wird. Befindet man sich z. B. derzeit in der Übersicht der Kategorie <code>mobilität</code>, dann enthält das Feed-Icon die URL <code>https://natenom.de/categories/mobilit%C3%A4t/index.xml</code>. Dieser Feed enthält nur die Kategorie <code>Mobilität</code>.</p>
|
|||
|
|
<p>So hat man nun einfachen Zugriff auf die Feeds der verschiedenen Kategorien und Tags (siehe vorheriger Abschnitt).</p>
|
|||
|
|
<p>Das sind die Feeds, die es in meinem Blog gibt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>/pages/index.xml</code></li>
|
|||
|
|
<li><code>/categories/index.xml</code></li>
|
|||
|
|
<li><code>/categories/<kategoriename>/index.xml</code></li>
|
|||
|
|
<li><code>/tags/index.xml</code></li>
|
|||
|
|
<li><code>/tags/<tagname>/index.xml</code></li>
|
|||
|
|
<li><code>/posts/index.xml</code></li>
|
|||
|
|
<li><code>/archiv/index.xml</code></li>
|
|||
|
|
<li><code>/archiv/<jahr>/index.xml</code></li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="blogroll" data-numberify>Blogroll<a class="anchor ms-1" href="#blogroll"></a></h3>
|
|||
|
|
<p>Es gibt jetzt einen <a href="/blogroll/">Blogroll</a>, also eine Liste von anderen Blogs, die ich gut finde und/oder selbst lese. Da ist aktuell noch nicht viel drin, aber ich werde da mit der Zeit Dinge hinzufügen.</p>
|
|||
|
|
<p>Wenn jemand Vorschläge dafür hat, gerne melden.</p>
|
|||
|
|
<h2 id="fast-kein-github-mehr" data-numberify>Fast kein Github mehr<a class="anchor ms-1" href="#fast-kein-github-mehr"></a></h2>
|
|||
|
|
<p>Ich habe meine Repos von Github schon vor mehreren Wochen gelöscht und alle Verlinkungen darauf im Blog und im Wiki entfernt.</p>
|
|||
|
|
<p>Ich nutze Github nicht mehr für eigene Projekte und alles dort war veraltet und wurde nicht mehr gepflegt. Zum Erstellen von Issues für diverse Projekte werde ich den Account aber weiterhin behalten.</p>
|
|||
|
|
<p>Falls es jemanden gibt, der irgendwas von den alten Repos haben will, so könnte ich die Git-Archive irgendwann mal auf meinen eigenen Server hochladen. Das halte ich aber für sehr unwahrscheinlich und bisher gab es keine Anfragen.</p>
|
|||
|
|
<h2 id="zukünftige-abschaltung-des-archivierten-wikis" data-numberify>Zukünftige Abschaltung des archivierten Wikis<a class="anchor ms-1" href="#zukünftige-abschaltung-des-archivierten-wikis"></a></h2>
|
|||
|
|
<p>Da ich die <a href="/2023/02/natenom-name-domain-abgeschaltet/">alten Domains</a> abgeschaltet hatte, will ich auch das alte, archivierte Wiki auf <code>wikiarchiv.natenom.de</code> in ferner Zukunft abschalten. Ich habe keinen konkreten Zeitplan, aber irgendwann soll es mal weg.</p>
|
|||
|
|
<p>Dort liegt aktuell nur noch die mittlerweile in einigen Bereichen veraltete Mumble-Dokumentation, an der ich über viele Jahre geschrieben hatte und noch ein bisschen Dokumentation zu Minecraft und den Servern, die ich früher betrieben hatte.</p>
|
|||
|
|
<p>Falls irgend jemand glaubt, dass die veraltete Mumble-Dokumentation noch Relevanz haben könnte und das statische HTML hosten möchte, so kann ich das demjenigen Menschen überlassen.</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Screenshot vom alten Wiki mit der Unterseite zum Mumble-Hauptfenster." srcset="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/04/noch-mehr-%C3%A4nderungen-blog-wiki-github/2023-02-19-screenshot-altes-wiki_hu3a1ad004e1764653b6eac3576620ee48_137724_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="529" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>]]></content:encoded></item><item><title>Shortcode und Render Hook für Hugo verbessert – weniger Datenmüll und schnelleres Rendern (Update)</title><link>https://natenom.de/2023/04/shortcode-und-render-hook-fuer-hugo-verbessert-weniger-datenmuell-und-schnelleres-rendern/</link><pubDate>Tue, 04 Apr 2023 20:52:47 +0200</pubDate><guid>https://natenom.de/2023/04/shortcode-und-render-hook-fuer-hugo-verbessert-weniger-datenmuell-und-schnelleres-rendern/</guid><description><![CDATA[<p>Bisher hatte ich die Verarbeitung und Einbindung von Bilddateien im Blog und im Wiki so implementiert, dass WebP als Standardformat immer angeboten wurde (auch wenn das Originalfoto ein anderes Format hatte) und es zusätzlich als Fallback für ältere Browser von jeder Datei eine im JPG-Format gab. Einen Blogbeitrag dazu gibt es <a href="/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/">hier</a>.</p>
|
|||
|
|
<p>Dazu gab es Varianten der beiden Datei-Formate in unterschiedlichen Auflösungen, sodass ein Browser selbst entscheiden konnte, welches Format in welcher Auflösung er je nach Bildschirmgröße herunterlädt und verwendet.</p>]]></description><content:encoded><![CDATA[<p>Bisher hatte ich die Verarbeitung und Einbindung von Bilddateien im Blog und im Wiki so implementiert, dass WebP als Standardformat immer angeboten wurde (auch wenn das Originalfoto ein anderes Format hatte) und es zusätzlich als Fallback für ältere Browser von jeder Datei eine im JPG-Format gab. Einen Blogbeitrag dazu gibt es <a href="/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/">hier</a>.</p>
|
|||
|
|
<p>Dazu gab es Varianten der beiden Datei-Formate in unterschiedlichen Auflösungen, sodass ein Browser selbst entscheiden konnte, welches Format in welcher Auflösung er je nach Bildschirmgröße herunterlädt und verwendet.</p>
|
|||
|
|
<p>Für jedes in einem Blogbeitrag verwendete Foto gab es einen Mix aus diesen Dateien:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>Das Originalfoto (das jeweils andere Format wurde automatisch generiert)</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>foto1.webp</code> (960 KiB)</li>
|
|||
|
|
<li><code>foto1.jpg</code> ( 1100 KiB)</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>Und <strong>zusätzlich</strong> die Bildvarianten in verschiedenen Auflösungen (1933 KiB):</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>foto1-360px.webp</code> (43 KiB)</li>
|
|||
|
|
<li><code>foto1-360px.jpg</code> (48 KiB)</li>
|
|||
|
|
<li><code>foto1-500px.webp</code> (75 KiB)</li>
|
|||
|
|
<li><code>foto1-500px.jpg</code> (84 KiB)</li>
|
|||
|
|
<li><code>foto1-816px.webp</code> (159 KiB)</li>
|
|||
|
|
<li><code>foto1-816px.jpg</code> (195 KiB)</li>
|
|||
|
|
<li><code>foto1-1632px.webp</code> (617 KiB)</li>
|
|||
|
|
<li><code>foto1-1632px.jpg</code> (712 KiB)</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Da JPG bei gleicher Qualität deutlich größer ist als WebP, wurde die Datenmenge für jedes Foto durch die Bildvarianten mehr als verdoppelt.</p>
|
|||
|
|
<h2 id="wenig-nutzen-viel-speicherplatz-und-rechenleistung-fürs-rendern" data-numberify>Wenig Nutzen, viel Speicherplatz und Rechenleistung fürs Rendern<a class="anchor ms-1" href="#wenig-nutzen-viel-speicherplatz-und-rechenleistung-fürs-rendern"></a></h2>
|
|||
|
|
<p>Das war damals von der Idee gut und auch sicher, da es vielleicht noch veraltete Systeme und Browser gibt, die das WebP-Format nicht unterstützen. Aber der Nachteil war, dass dadurch sehr viele Dateien erzeugt wurden, die für die große Mehrheit der Clienten unnötig waren, die aber trotzdem Rechenpower und Speicherplatz beim Generieren benötigen.</p>
|
|||
|
|
<h2 id="neu--sparsam-fürs-rendern-und-arbeiten-mit-dem-was-da-ist" data-numberify>Neu – sparsam fürs Rendern und Arbeiten mit dem, was da ist<a class="anchor ms-1" href="#neu--sparsam-fürs-rendern-und-arbeiten-mit-dem-was-da-ist"></a></h2>
|
|||
|
|
<p>Nun habe ich die Implementierung geändert:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Hat das Originalfoto ein anderes Format als WebP, dann wird es nicht mehr in der selben Auflösung im WebP-Format generiert sondern es wird das Original genutzt.</li>
|
|||
|
|
<li>Das Fallback mit dem JPG-Format gibt es gar nicht mehr. Wer noch so einen alten Browser verwendet, muss damit leider leben.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Es werden jetzt nur noch die zusätzlichen Bildvarianten mit kleineren Auflösungen ausschließlich im WebP-Format generiert:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>foto1-360px.webp</code></li>
|
|||
|
|
<li><code>foto1-500px.webp</code></li>
|
|||
|
|
<li><code>foto1-816px.webp</code></li>
|
|||
|
|
<li><code>foto1-1632px.webp</code></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Das ergibt dann nur noch 894 KiB an zusätzlichen Bilddateien statt bisher 1933 KiB. Bei einem anderen Blogbeitrag mit vielen Fotografien werden nach der Neuerung nur noch 7 MiB an zusätzlichen Dateien erzeugt, zuvor waren es 17 MiB.</p>
|
|||
|
|
<p>Das Verzeichnis <code>resources/_gen</code> des Blogs war vor der Änderung 3300 MiB groß. Nach der Änderung sind es nur noch 1492 MiB.</p>
|
|||
|
|
<p>Das passt so erst einmal. 😊</p>
|
|||
|
|
<h2 id="render-hook-herunterladen" data-numberify>Render Hook herunterladen<a class="anchor ms-1" href="#render-hook-herunterladen"></a></h2>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">Update 2023-08-24: Möglichkeit, die benötigten Dateien herunterzuladen.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Hier kannst du beide Dateien des Render Hooks herunterladen:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="downloads/figure.html.txt">figure.html</a></li>
|
|||
|
|
<li><a href="downloads/render-image.html.txt">render-image.html</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Das .txt am Ende muss entfernt werden.</p>]]></content:encoded></item><item><title>Verbesserter Shortcode für die Einbindung von 360°-Fotos in meinem Blog (1 Update)</title><link>https://natenom.de/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/</link><pubDate>Mon, 27 Mar 2023 13:20:12 +0200</pubDate><guid>https://natenom.de/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/</guid><description><p>Da die Erstellung der 360°-Fotos relativ gut funktioniert und ich davon in Zukunft mehr erstellen werde, habe ich meinen Shortcode <code>sphere</code> erweitert.</p></description><content:encoded><![CDATA[<p>Da die Erstellung der 360°-Fotos relativ gut funktioniert und ich davon in Zukunft mehr erstellen werde, habe ich meinen Shortcode <code>sphere</code> erweitert.</p>
|
|||
|
|
<p>Der Shortcode sorgt dafür, dass ein zusammengefügtes 360°-Foto in einem virtuellen Raum angezeigt wird, <a href="/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/">Details hier</a>.</p>
|
|||
|
|
<p>Ich habe den Shortcode nun erweitert und zusätzlich zum Bildbetrachter gibt weitere Informationen:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ein Link zur Markierung auf einer Karte bei OpenStreetMap, an dem das “Foto” <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> entstanden ist.</li>
|
|||
|
|
<li>Ein Link zum Originalfoto mit der Angabe der Dateigröße. Im Gegenzug habe ich den Download-Button aus den Bedienelementen entfernt.</li>
|
|||
|
|
<li>Eine Karte kann unter dem Foto nachgeladen werden, jedoch erst nach einem Klick auf “Karte von OpenStreetMap nachladen …”, zuvor werden Infos zum Datenschutz angezeigt, da die Karte von einer externen Website nachgeladen wird.</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">Update 1 (2023-09-11): Es gibt eine neue Variante des Shortcodes, der auch mit mehreren Einbindungen pro Blogbeitrag umgehen kann (bis auf die Karte), <a href="/2023/09/mehrere-spheres-in-einem-blogbeitrag/">siehe hier</a>.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="iframe-via-webserver-erlauben" data-numberify>iframe via Webserver erlauben<a class="anchor ms-1" href="#iframe-via-webserver-erlauben"></a></h2>
|
|||
|
|
<p>Damit das neue iframe geladen wird, musste ich in meiner nginx-Konfiguration im Bereich <code>add_header Content-Security-Policy</code> hinzufü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-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">frame-src</span> <span style="color:#e6db74">https://www.openstreetmap.org/export/embed.html</span>
|
|||
|
|
</span></span></code></pre></div><h2 id="der-erweiterte-shortcode" data-numberify>Der erweiterte Shortcode<a class="anchor ms-1" href="#der-erweiterte-shortcode"></a></h2>
|
|||
|
|
<h3 id="hugo-shortcode" data-numberify>Hugo-Shortcode<a class="anchor ms-1" href="#hugo-shortcode"></a></h3>
|
|||
|
|
<p>Hier der Quelltext der erweiterten Shortcodes <code>sphere.html</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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$img</span> <span style="color:#f92672">:=</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Page.Resources.ByType</span> <span style="color:#e6db74">"image"</span><span style="color:#f92672">)</span><span style="color:#a6e22e">.GetMatch</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">printf</span> <span style="color:#e6db74">"*%s"</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Get</span> <span style="color:#e6db74">"src"</span><span style="color:#f92672">))</span> <span style="color:#75715e">-}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$caption</span> <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> <span style="color:#75715e">-}}{{</span> <span style="color:#66d9ef">if</span> <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">.Params</span> <span style="color:#e6db74">"caption"</span> <span style="color:#75715e">}}{{</span> <span style="color:#a6e22e">$caption</span> <span style="color:#f92672">=</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Get</span> <span style="color:#e6db74">"caption"</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">markdownify</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$osmurl</span> <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> <span style="color:#75715e">-}}{{</span> <span style="color:#66d9ef">if</span> <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">.Params</span> <span style="color:#e6db74">"osmurl"</span> <span style="color:#75715e">}}{{</span> <span style="color:#a6e22e">$osmurl</span> <span style="color:#f92672">=</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Get</span> <span style="color:#e6db74">"osmurl"</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$osmembedurl</span> <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> <span style="color:#75715e">-}}{{</span> <span style="color:#66d9ef">if</span> <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">.Params</span> <span style="color:#e6db74">"osmembedurl"</span> <span style="color:#75715e">}}{{</span> <span style="color:#a6e22e">$osmembedurl</span> <span style="color:#f92672">=</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Get</span> <span style="color:#e6db74">"osmembedurl"</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$imgsize</span> <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> <span style="color:#75715e">-}}{{</span> <span style="color:#66d9ef">if</span> <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">.Params</span> <span style="color:#e6db74">"imgsize"</span> <span style="color:#75715e">}}{{</span> <span style="color:#a6e22e">$imgsize</span> <span style="color:#f92672">=</span> <span style="color:#f92672">(</span><span style="color:#a6e22e">.Get</span> <span style="color:#e6db74">"imgsize"</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">head</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e"><!-- for optimal display on high DPI devices --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">"viewport"</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width=device-width, initial-scale=1.0"</span> />
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">"stylesheet"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_css/sphere/index.min.css"</span> />
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">head</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/sphere/three.min.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/sphere/index.min.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e"><!-- the viewer container must have a defined size --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"viewer"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 100%; height: 60vh;"</span>></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">viewer</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PhotoSphereViewer</span>.<span style="color:#a6e22e">Viewer</span>({
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span><span style="color:#f92672">:</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">'#viewer'</span>),
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">panorama</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'</span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$img</span> <span style="color:#75715e">-}}</span><span style="color:#e6db74">'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">caption</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'</span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$caption</span> <span style="color:#75715e">-}}</span><span style="color:#e6db74">'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fisheye</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoom</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Zoomen'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoomOut</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Heraus zommen'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoomIn</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Hinein zoomen'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">moveUp</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Nach oben'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">moveDown</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Nach unten'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">moveLeft</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Nach links'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">moveRight</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Nach rechts'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">download</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Herunterladen'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fullscreen</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Vollbild'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">menu</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Menü'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">close</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Schließen'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">twoFingers</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Benutze 2 Finger zum Navigieren.'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ctrlZoom</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Benutze Strg und das Mausrad, um im Bild zu zoomen.'</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">loadError</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'Das Panorama kann nicht geladen werden.'</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:#a6e22e">viewer</span>.<span style="color:#a6e22e">navbar</span>.<span style="color:#a6e22e">getButton</span>(<span style="color:#e6db74">'download'</span>).<span style="color:#a6e22e">hide</span>();
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shortcode-sphere"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"untertitel"</span>><span style="color:#75715e">{{-</span> <span style="color:#66d9ef">if</span> <span style="color:#f92672">(</span> <span style="color:#a6e22e">$osmurl</span> <span style="color:#f92672">)</span> <span style="color:#75715e">-}}</span><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">$osmurl</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span>>Standort</<span style="color:#f92672">a</span>> (bei OpenStreetMap), <span style="color:#75715e">{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">-}}</span><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{-</span> <span style="color:#a6e22e">$img</span> <span style="color:#75715e">-}}</span><span style="color:#e6db74">"</span>>Originalfoto</<span style="color:#f92672">a</span>><span style="color:#75715e">{{-</span> <span style="color:#66d9ef">if</span> <span style="color:#f92672">(</span> <span style="color:#a6e22e">$imgsize</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}</span> (<span style="color:#75715e">{{</span> <span style="color:#a6e22e">$imgsize</span> <span style="color:#75715e">}}</span> MiB)<span style="color:#75715e">{{-</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">-}}</span></<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e"><!-- Optional einfügen, dass das Bild erst mit nem Click geladen wird, weil groß. --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e"><!-- Optional einfügen hier im Shortcode, dass unter dem Bild auch eine Karte dargestellt wird, die auch Klick hin geladen wird mit Infos zum Datenschutz --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e"><!-- Von https://photo-sphere-viewer.js.org/guide/#your-first-viewer --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e"><!-- Konfiguration: https://photo-sphere-viewer.js.org/guide/config.html#standard-options --></span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#66d9ef">if</span> <span style="color:#f92672">(</span> <span style="color:#a6e22e">$osmembedurl</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"osmiframe"</span> <span style="color:#a6e22e">data-osmembedurl</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">$osmembedurl</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"iframe-content"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">p</span>>Es gibt die Möglichkeit, eine Karte von OpenStreetMap mit dem Standort, an dem das Foto entstanden ist, hier anzuzeigen. Dabei werden Daten an OpenStreetMap.org übertragen. Informationen zum Datenschutz des Anbieters siehe <<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://wiki.osmfoundation.org/wiki/Privacy_Policy"</span>>https://wiki.osmfoundation.org/wiki/Privacy_Policy</<span style="color:#f92672">a</span>>.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"load-iframe"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-primary"</span>>Karte von OpenStreetMap.org nachladen …</<span style="color:#f92672">button</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">noscript</span>><<span style="color:#f92672">p</span>>Du benötigst JavaScript, um das iframe mit der Karte nachzuladen.</<span style="color:#f92672">p</span>></<span style="color:#f92672">noscript</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/sphere/iframe.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{-</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">-}}</span>
|
|||
|
|
</span></span></code></pre></div><h3 id="javascript" data-numberify>JavaScript<a class="anchor ms-1" href="#javascript"></a></h3>
|
|||
|
|
<p>Das JavaScript habe ich per Copy&Paste von einem <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">anderen Script</a> umgemodelt und nach vielen Versuchen hat es dann funktioniert. Ich habe ja von solchen Dingen keine Ahnung.</p>
|
|||
|
|
<p>Hier das <code>iframe.js</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-js" data-lang="js"><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'load-iframe'</span>).<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'click'</span>, <span style="color:#a6e22e">init</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">init</span>() {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">iframeWrapper</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'osmiframe'</span>);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">osmembedurl</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">iframeWrapper</span>.<span style="color:#a6e22e">dataset</span>.<span style="color:#a6e22e">osmembedurl</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">loadComment</span>(<span style="color:#a6e22e">osmembedurl</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">loadComment</span>(<span style="color:#a6e22e">osmembedurl</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">iframe</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"<iframe width='100%' height='400' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='"</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">osmembedurl</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"' style='border: 1px solid black'></iframe>"</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'iframe-content'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">iframe</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>};
|
|||
|
|
</span></span></code></pre></div><h3 id="scss" data-numberify>SCSS<a class="anchor ms-1" href="#scss"></a></h3>
|
|||
|
|
<p>Und das zugehörige SCSS:</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-scss" data-lang="scss"><span style="display:flex;"><span><span style="color:#a6e22e">.shortcode-sphere</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> #iframe-content {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border-style</span><span style="color:#f92672">:</span> dotted;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span><span style="color:#ae81ff">.5</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span><span style="color:#ae81ff">.5</span><span style="color:#66d9ef">em</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">.untertitel</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin-top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span><span style="color:#ae81ff">.5</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin-bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin-right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span><span style="color:#ae81ff">.5</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text-align</span><span style="color:#f92672">:</span> right;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font-style</span><span style="color:#f92672">:</span> italic;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font-size</span><span style="color:#f92672">:</span> smaller;
|
|||
|
|
</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">.btn</span> <span style="color:#f92672">a</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> white;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span>}
|
|||
|
|
</span></span></code></pre></div><h2 id="beispiel" data-numberify>Beispiel<a class="anchor ms-1" href="#beispiel"></a></h2>
|
|||
|
|
<p>Im Blogbeitrag <a href="/2023/02/360-foto-bei-neuhausen/">360°-Foto: Neuhausen (Enzkreis)</a> wird z. B. dieser Shortcode verwendet:</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"><</span> <span style="color:#a6e22e">sphere</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"2023-02-24-neuhausen-1-small.webp"</span> <span style="color:#a6e22e">caption</span><span style="color:#f92672">=</span><span style="color:#e6db74">"Landschaft nördlich von Neuhausen (Enzkreis)"</span> <span style="color:#a6e22e">osmurl</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://www.openstreetmap.org/?mlat=48.80035&mlon=8.77323#map=15/48.8010/8.7731"</span> <span style="color:#a6e22e">imgsize</span><span style="color:#f92672">=</span><span style="color:#e6db74">"8,6"</span> <span style="color:#a6e22e">osmembedurl</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://www.openstreetmap.org/export/embed.html?bbox=8.755288124084474%2C48.79391687059584%2C8.79112243652344%2C48.8067645369292&amp;layer=mapnik&amp;marker=48.800341115118435%2C8.773205280303955"</span> <span style="color:#960050;background-color:#1e0010">></span><span style="color:#75715e">}}</span></span></span></code></pre></div>
|
|||
|
|
<p>Das Ergebnis sieht so aus (ohne geladene Karte):</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-03-27-screenshot-shortcode-ohne-karte.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-ohne-karte_hu0b89bfcb308401808b3fc93554c7f07c_189590_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="595" /></picture></a></figure>
|
|||
|
|
<p>Mit geladener Karte:</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-03-27-screenshot-shortcode-mit-geladener-karte-cover.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_633f017039a81c676a17c0793ce5dfb1.webp 360w,/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_e2604ba85641f6c1775d59badaa948c9.webp 500w,/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_7c41d422e853b2a15f4c0d7b774a2782.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_633f017039a81c676a17c0793ce5dfb1.webp 360w, /2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_e2604ba85641f6c1775d59badaa948c9.webp 500w, /2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_7c41d422e853b2a15f4c0d7b774a2782.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/_hu97bdcebec2696c867f03dee16b7e4b1f_179822_7c41d422e853b2a15f4c0d7b774a2782.webp" title="" loading="lazy" width="816" height="645" /></picture></a></figure>
|
|||
|
|
<div class="footnotes" role="doc-endnotes">
|
|||
|
|
<hr>
|
|||
|
|
<ol>
|
|||
|
|
<li id="fn:1">
|
|||
|
|
<p>Es sind ja eigentlich sehr viele Einzelfotos, gemeint ist hier aber das Ergebnis. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>]]></content:encoded><enclosure url="https://natenom.de/2023/03/verbesserter-shortcode-fuer-die-einbindung-von-360-grad-fotos-in-meinem-blog/2023-03-27-screenshot-shortcode-mit-geladener-karte-cover.webp" length="179822" type="image/webp"/></item><item><title>Subdomain fotos.natenom.com endgültig gelöscht</title><link>https://natenom.de/2023/03/fotos-natenom-com-geloescht/</link><pubDate>Tue, 07 Mar 2023 01:23:03 +0100</pubDate><guid>https://natenom.de/2023/03/fotos-natenom-com-geloescht/</guid><description>Ein Blick in die Serverlogs hat gezeigt, dass niemand mehr auf die Website fotos.natenom.com zugreift und so habe ich die Subdomain heute gelöscht, sodass es auch keine Weiterleitung mehr hier zum Blog gibt, wo meine Fotos seit Ende Februar doch wieder zu finden sind.
|
|||
|
|
Wieder etwas, das Dinge einfacher macht. 😊</description><content:encoded><![CDATA[<p>Ein Blick in die Serverlogs hat gezeigt, dass niemand mehr auf die Website <code>fotos.natenom.com</code> zugreift und so habe ich die Subdomain heute gelöscht, sodass es auch keine Weiterleitung mehr hier zum Blog gibt, wo meine <a href="/2023/02/meine-fotos-sind-jetzt-doch-wieder-im-blog-zu-finden/">Fotos seit Ende Februar</a> doch wieder zu finden sind.</p>
|
|||
|
|
<p>Wieder etwas, das Dinge einfacher macht. 😊</p>
|
|||
|
|
]]></content:encoded></item><item><title>Meine Fotos sind jetzt doch wieder im Blog zu finden</title><link>https://natenom.de/2023/02/meine-fotos-sind-jetzt-doch-wieder-im-blog-zu-finden/</link><pubDate>Thu, 23 Feb 2023 23:13:03 +0100</pubDate><guid>https://natenom.de/2023/02/meine-fotos-sind-jetzt-doch-wieder-im-blog-zu-finden/</guid><description>Man muss sich eingestehen können, dass man Fehler gemacht hat. So hatte ich meine Fotos Anfang Januar aus dem Blog heraus genommen und in eine eigene Website fotos.natenom.com ausgelagert, siehe hier.
|
|||
|
|
Das hat sich im Nachhinein als unnötig bzw. schlecht herausgestellt:
|
|||
|
|
Ich konnte Dinge nicht finden, musste dann auf der jeweils anderen Seite suchen. Teilweise war es nicht so ganz eindeutig, ob ein Blogbeitrag in den Blog oder zu den Fotos gehört oder auch zu beiden.</description><content:encoded><![CDATA[<p>Man muss sich eingestehen können, dass man Fehler gemacht hat. So hatte ich meine Fotos Anfang Januar aus dem Blog heraus genommen und in eine eigene Website <code>fotos.natenom.com</code> ausgelagert, <a href="/2023/01/neuer-foto-blog-fuer-fotos-und-fotografie/">siehe hier</a>.</p>
|
|||
|
|
<p>Das hat sich im Nachhinein als unnötig bzw. schlecht herausgestellt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ich konnte Dinge nicht finden, musste dann auf der jeweils anderen Seite suchen.</li>
|
|||
|
|
<li>Teilweise war es nicht so ganz eindeutig, ob ein Blogbeitrag in den Blog oder zu den Fotos gehört oder auch zu beiden.</li>
|
|||
|
|
<li>Die Pflege von zwei getrennten Websites mit eigentlich der selben Basis ist auf Dauer auch nicht schön.</li>
|
|||
|
|
<li>Der erhoffte Performancegewinn war auch nur relativ gering. 29 Sekunden für den Blog ohne Fotos statt 41 Sekunden mit Fotos für das Rendern mit Hugo.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Die Domain <code>fotos.natenom.com</code> leitet jetzt per 301 auf den Blog, sodass man bei alten Verlinkungen wieder im Blog landet. Die Domain werde ich demnächst wieder abschalten.</p>
|
|||
|
|
<p>Die Fotos findet man über die Kategorie <a href="/categories/fotografie/">Fotografie</a>.</p>
|
|||
|
|
]]></content:encoded></item><item><title>natenom.name-Domain(s) abgeschaltet</title><link>https://natenom.de/2023/02/natenom-name-domain-abgeschaltet/</link><pubDate>Sat, 18 Feb 2023 23:03:40 +0100</pubDate><guid>https://natenom.de/2023/02/natenom-name-domain-abgeschaltet/</guid><description>Wie im Januar angekündigt, habe ich nun die Domain(s) natenom.name und wiki.natenom.name komplett deaktiviert. Der Server bedient sie nicht mehr und sie werden auch nicht mehr via DNS aufgelöst.</description><content:encoded><![CDATA[<p>Wie im Januar <a href="/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/">angekündigt</a>, habe ich nun die Domain(s) <code>natenom.name</code> und <code>wiki.natenom.name</code> komplett deaktiviert. Der Server bedient sie nicht mehr und sie werden auch nicht mehr via DNS aufgelöst.</p>
|
|||
|
|
]]></content:encoded></item><item><title>Änderungen an meinen Websites</title><link>https://natenom.de/2023/01/aenderungen-an-meinen-websites/</link><pubDate>Fri, 27 Jan 2023 01:28:39 +0100</pubDate><guid>https://natenom.de/2023/01/aenderungen-an-meinen-websites/</guid><description><p>Ein paar Neuerungen und Änderungen an mehreren meiner Websites werden hier erläutert.</p></description><content:encoded><![CDATA[<p>Ein paar Neuerungen und Änderungen an mehreren meiner Websites werden hier erläutert.</p>
|
|||
|
|
<h2 id="farben" data-numberify>Farben<a class="anchor ms-1" href="#farben"></a></h2>
|
|||
|
|
<p>Da mittlerweile der Blog, mein <del>Foto-Blog</del> und auch der <a href="https://kagube.de/">Blog vom kleinen Elefanten Kagube</a> das selbe Theme verwenden, habe ich jeweils die Farben festgelegt, sodass man die Websites einfach unterscheiden kann.</p>
|
|||
|
|
<p>Der Blog ist weiterhin blau, der Foto-Blog grün und der vom kleinen Elefanten natürlich grau, bzw. blau-grau.</p>
|
|||
|
|
<p>Damit die Änderungen greifen, muss man einmalig die gespeicherten Einstellungen für den Blog im Browser löschen. Man kann jedoch weiterhin (im Blog bisher nicht) eigene Farben auswählen.</p>
|
|||
|
|
<p>Damit man auch in x Zeit noch sehen kann, wie die Websites mal ausgesehen haben, hier zur Erinnerung.</p>
|
|||
|
|
<figure class="image-caption float-left"><a href="2023-01-27-blog.webp"><picture><source type="webp" srcset="/2023/01/aenderungen-an-meinen-websites/2023-01-27-blog_hu105eb52567c87c4c46592676e95ecc04_139424_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot vom Blog." src="/2023/01/aenderungen-an-meinen-websites/2023-01-27-blog_hu105eb52567c87c4c46592676e95ecc04_139424_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="224" loading="lazy" /></picture></a><figcaption>Der Blog.</figcaption></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="2023-01-27-fotos-cover.webp"><picture><source type="webp" srcset="/2023/01/aenderungen-an-meinen-websites/2023-01-27-fotos-cover_hudb7b6ae4d77f4b67a7978e6a9a3b458c_114136_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot vom Foto-Blog." src="/2023/01/aenderungen-an-meinen-websites/2023-01-27-fotos-cover_hudb7b6ae4d77f4b67a7978e6a9a3b458c_114136_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="224" loading="lazy" /></picture></a><figcaption>Der Foto-Blog.</figcaption></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="2023-01-27-kagube.webp"><picture><source type="webp" srcset="/2023/01/aenderungen-an-meinen-websites/2023-01-27-kagube_hu5b44a98320618c977f67cfd7f810bd59_96612_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot von Kagubes Blog." src="/2023/01/aenderungen-an-meinen-websites/2023-01-27-kagube_hu5b44a98320618c977f67cfd7f810bd59_96612_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="224" loading="lazy" /></picture></a><figcaption>Der Blog von Kagube.</figcaption></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="2023-01-27-wiki.webp"><picture><source type="webp" srcset="/2023/01/aenderungen-an-meinen-websites/2023-01-27-wiki_hu2010c3442dd91010c02978cce293d161_122014_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot vom Wiki." src="/2023/01/aenderungen-an-meinen-websites/2023-01-27-wiki_hu2010c3442dd91010c02978cce293d161_122014_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="159" loading="lazy" /></picture></a><figcaption>Das Wiki.</figcaption></figure>
|
|||
|
|
<div style="clear: both;"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="pseudo-logo-und-infos-zum-autor" data-numberify>Pseudo-Logo und Infos zum Autor<a class="anchor ms-1" href="#pseudo-logo-und-infos-zum-autor"></a></h2>
|
|||
|
|
<p>Der <del>Foto-Blog</del> hat jetzt ein eigenes Pseudo-Logo und ein dazu passendes Favicon, damit man ihn besser vom Blog unterscheiden kann.</p>
|
|||
|
|
<p>Rechts oben gibt es jetzt, wie auch im Blog, die Info zum “Autor” der Website, die ich anfangs entfernt hatte.</p>
|
|||
|
|
<h2 id="theme-update" data-numberify>Theme-Update<a class="anchor ms-1" href="#theme-update"></a></h2>
|
|||
|
|
<p>Alle Websites nutzen jetzt die neuste Version des Themes (Link ganz unten im Blog) und auch Standardeinstellunger der Sidebar rechts. So sind Kategorien und Tags nicht mehr eigene Elemente in der Sidebar, sondern werden in einer gemeinsamen Kachel in Tabs dargestellt. Dadurch ist die Sidebar deutlich übersichtlicher und benötigt weniger Platz.</p>
|
|||
|
|
<h2 id="blogroll" data-numberify>Blogroll<a class="anchor ms-1" href="#blogroll"></a></h2>
|
|||
|
|
<p>Es gibt jetzt einen sogenannten Blogroll, also eine Liste verschiedener, zum Kontext passender Websites auf jeder meiner Websites.</p>
|
|||
|
|
<p><a href="/blogroll/">Hier der Blogroll des Blogs</a>.</p>
|
|||
|
|
<p>Mit der Zeit werde ich da noch ein paar andere Websites eintragen. Nehme Vorschläge gerne an.</p>
|
|||
|
|
<h2 id="kein-twitter-mehr" data-numberify>Kein Twitter mehr<a class="anchor ms-1" href="#kein-twitter-mehr"></a></h2>
|
|||
|
|
<p>Ich habe die Links zu meinem Twitter-Profil von allen meinen Websites entfernt. Ich nutze es noch gelegentlich, aber das wars dann auch.</p>
|
|||
|
|
<p>Mastodon ist die bessere Wahl, den Link dazu findest du oben rechts in der oberen Leiste.</p>
|
|||
|
|
<h2 id="themen-im-blog" data-numberify>Themen im Blog<a class="anchor ms-1" href="#themen-im-blog"></a></h2>
|
|||
|
|
<p>Die Themen, in denen es im Blog geht, sind jetzt nicht mehr als Liste in der oberen Leiste zu finden, sondern als eigene Seite mit Beschreibungen zu den einzelnen Themen, <a href="/ueber/themen/">siehe hier</a>.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/01/aenderungen-an-meinen-websites/2023-01-27-fotos-cover.webp" length="114136" type="image/webp"/></item><item><title>Weiterleitungen von meiner alten Domain natenom.name entfernt</title><link>https://natenom.de/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/</link><pubDate>Wed, 25 Jan 2023 02:53:32 +0100</pubDate><guid>https://natenom.de/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/</guid><description><![CDATA[<p>Es ist nun schon mindestens 10 Jahre her (eher deutlich länger), dass ich meine Websites von der Domain <code>natenom.name</code> auf andere Domains umgezogen hatte. Bis heute gab es trotzdem noch Weiterleitungen, sodass man im mittlerweile alten (und archivierten) Wiki und im Blog heraus kam, wenn man einen Link auf die alte Domain auf irgend einer Website angeklickt hat.</p>
|
|||
|
|
<p>Nun ist es aber irgendwann auch mal gut. Wer die Links bisher nicht angepasst hat, wird es vermutlich auch in Zukunft nicht mehr machen.</p>]]></description><content:encoded><![CDATA[<p>Es ist nun schon mindestens 10 Jahre her (eher deutlich länger), dass ich meine Websites von der Domain <code>natenom.name</code> auf andere Domains umgezogen hatte. Bis heute gab es trotzdem noch Weiterleitungen, sodass man im mittlerweile alten (und archivierten) Wiki und im Blog heraus kam, wenn man einen Link auf die alte Domain auf irgend einer Website angeklickt hat.</p>
|
|||
|
|
<p>Nun ist es aber irgendwann auch mal gut. Wer die Links bisher nicht angepasst hat, wird es vermutlich auch in Zukunft nicht mehr machen.</p>
|
|||
|
|
<p>Falls doch, sollte er/sie/es URLs zu <code>http(s)://natenom.name/</code> oder <code>http(s)://wiki.natenom.name/</code> nach <code>https://natenom.de/</code> respektive <code>https://wiki.natenom.de</code> ändern.</p>
|
|||
|
|
<p>Heute habe ich die beiden Weiterleitungen entfernt und auf der Domain und der Subdomain nur noch einen entsprechenden Hinweis hinterlegt. Die Weiterleitungen waren schon viele Jahre auf den HTTP-Status-Code 301 (permanent) eingestellt gewesen.</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-01-25-abschaltung-domain-cover.webp"><picture><source type="webp" srcset="/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/2023-01-25-abschaltung-domain-cover.webp" />
|
|||
|
|
<img alt="Screenshot vom Infotext bei Aufruf der alten Domain 'Da diese Domain seit mittlerweile über 10 Jahren nicht mehr verwendet wird, habe ich die Weiterleitung nach wiki.natenom.de deaktiviert und werde auch die alte Domain demnächst abschalten.'" src="/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/2023-01-25-abschaltung-domain-cover.webp" title="" width="583" height="125" loading="lazy" /></picture></a><figcaption>Hinweistext beim Aufruf der alten Domain.</figcaption></figure>
|
|||
|
|
<p>Ab dem 11. April 2022 wird dann auch diese Info entfallen und die Domain nicht mehr vom Webserver bedient werden und danach werde ich dann auch die Domain aus dem DNS entfernen und noch später dann auch mal kündigen.</p>
|
|||
|
|
<p>Auch die Weiterleitungen von <code>natenom.de</code> und <code>www.natenom.de</code> nach <code>natenom.com</code> und von <code>www.natenom.com</code> und <code>natenom.com</code> nach <code>natenom.de</code> habe ich entfernt, da es dort sowieso nie relevante Inhalte gab.</p>
|
|||
|
|
<p>Insgesamt wird somit das Setup deutlich einfacher, sollte ich mal mit den <a href="https://wiki.natenom.de/docs/sammelsurium/dynamisch/natenoms_dienste/">Websites woandershin umziehen</a> müssen.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/01/weiterleitungen-von-meiner-alten-domain-entfernt/2023-01-25-abschaltung-domain-cover.webp" length="22762" type="image/webp"/></item><item><title>Es gibt wieder 360°-Fotos in meinem Foto-Blog (Update)</title><link>https://natenom.de/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/</link><pubDate>Wed, 18 Jan 2023 03:51:14 +0100</pubDate><guid>https://natenom.de/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/</guid><description><![CDATA[<p>Früher hatte ich dank eines <a href="/2017/09/es-gibt-eine-neue-kategorie-in-meinem-blog-mit-360-foto-schnappschuessen/">WordPress-Plugins im Blog</a> die Möglichkeit, sogenannte 360°-Fotos anzeigen zu lassen. Doch irgendwann wurde das Plugin nicht mehr aktualisiert und so hatte ich es aus Sicherheitsgründen wieder entfernt.</p>
|
|||
|
|
<p>Als ich heute in meinem Foto-Blog gestöbert hatte, sah ich ein solches Foto. Ohne die entsprechende Formatierung sieht es natürlich total verzerrt aus.</p>
|
|||
|
|
<p>Und dann habe ich ein OpenSource-Projekt gefunden, das es ermöglicht, solche Fotos richtig anzeigen zu lassen. Implementiert in JavaScript, sodass ich das in Hugo sehr einfach selbst einbinden kann.</p>]]></description><content:encoded><![CDATA[<p>Früher hatte ich dank eines <a href="/2017/09/es-gibt-eine-neue-kategorie-in-meinem-blog-mit-360-foto-schnappschuessen/">WordPress-Plugins im Blog</a> die Möglichkeit, sogenannte 360°-Fotos anzeigen zu lassen. Doch irgendwann wurde das Plugin nicht mehr aktualisiert und so hatte ich es aus Sicherheitsgründen wieder entfernt.</p>
|
|||
|
|
<p>Als ich heute in meinem Foto-Blog gestöbert hatte, sah ich ein solches Foto. Ohne die entsprechende Formatierung sieht es natürlich total verzerrt aus.</p>
|
|||
|
|
<p>Und dann habe ich ein OpenSource-Projekt gefunden, das es ermöglicht, solche Fotos richtig anzeigen zu lassen. Implementiert in JavaScript, sodass ich das in Hugo sehr einfach selbst einbinden kann.</p>
|
|||
|
|
<p>Das Projekt heißt “Photo Sphere Viewer” und die Website ist <a class='urlextern' href="https://photo-sphere-viewer.js.org/">photo-sphere-viewer.js.org</a>. Die Installationsanleitung gibt es <a class='urlextern' href="https://photo-sphere-viewer.js.org/guide/#install-photo-sphere-viewer">hier</a>.</p>
|
|||
|
|
<h2 id="shortcode-für-hugo" data-numberify>Shortcode für Hugo<a class="anchor ms-1" href="#shortcode-für-hugo"></a></h2>
|
|||
|
|
<p>Für Hugo habe ich ganz Natenom-gemäß – es funktioniert, ist aber nicht schön gemacht – einen Shortcode erstellt. Dieser nutzt die angegebenen Shortcode-Parameter <code>src</code> und <code>caption</code>. Vri wird das dann später in schön implementieren. 😊</p>
|
|||
|
|
<p>Der Quelltext des Shortcodes entspricht hauptsächlich dem Beispiel in der oben genannten Installationsanleitung, enthält aber zustäzlich noch eine deutsche Übersetzung für die Steuerelemente. Und die benötigten JavaScript- und CSS-Dateien habe ich heruntergeladen und stelle sie direkt auf dem eigenen Server zur Verfügung.</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">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">:=</span> <span style="color:#f92672">(</span>.Page.Resources.ByType <span style="color:#e6db74">"image"</span><span style="color:#f92672">)</span>.GetMatch <span style="color:#f92672">(</span>printf <span style="color:#e6db74">"*%s"</span> <span style="color:#f92672">(</span>.Get <span style="color:#e6db74">"src"</span><span style="color:#f92672">))</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>caption <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> -<span style="color:#75715e">}}{{</span> <span style="color:#66d9ef">if</span> isset .Params <span style="color:#e6db74">"caption"</span> <span style="color:#75715e">}}{{</span> <span style="color:#960050;background-color:#1e0010">$</span>caption <span style="color:#f92672">=</span> <span style="color:#f92672">(</span>.Get <span style="color:#e6db74">"caption"</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">markdownify</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}{{</span> end <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><head>
|
|||
|
|
</span></span><span style="display:flex;"><span> <!-- for optimal display on high DPI devices -->
|
|||
|
|
</span></span><span style="display:flex;"><span> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <link rel="stylesheet" href="https://natenom.de/my_css/sphere/index.min.css" />
|
|||
|
|
</span></span><span style="display:flex;"><span></head>
|
|||
|
|
</span></span><span style="display:flex;"><span><script src="https://natenom.de/my_js/sphere/three.min.js"></script>
|
|||
|
|
</span></span><span style="display:flex;"><span><script src="https://natenom.de/my_js/sphere/index.min.js"></script>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><!-- the viewer container must have a defined size -->
|
|||
|
|
</span></span><span style="display:flex;"><span><div id="viewer" style="width: 100%; height: 60vh;"></div>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span><script>
|
|||
|
|
</span></span><span style="display:flex;"><span> const viewer = new PhotoSphereViewer.Viewer({
|
|||
|
|
</span></span><span style="display:flex;"><span> container: document.querySelector('#viewer'),
|
|||
|
|
</span></span><span style="display:flex;"><span> panorama: '<span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img -<span style="color:#75715e">}}</span>',
|
|||
|
|
</span></span><span style="display:flex;"><span> caption: '<span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>caption -<span style="color:#75715e">}}</span>',
|
|||
|
|
</span></span><span style="display:flex;"><span> fisheye: true,
|
|||
|
|
</span></span><span style="display:flex;"><span> lang: {
|
|||
|
|
</span></span><span style="display:flex;"><span> zoom: 'Zoomen',
|
|||
|
|
</span></span><span style="display:flex;"><span> zoomOut: 'Heraus zommen',
|
|||
|
|
</span></span><span style="display:flex;"><span> zoomIn: 'Hinein zoomen',
|
|||
|
|
</span></span><span style="display:flex;"><span> moveUp: 'Nach oben',
|
|||
|
|
</span></span><span style="display:flex;"><span> moveDown: 'Nach unten',
|
|||
|
|
</span></span><span style="display:flex;"><span> moveLeft: 'Nach links',
|
|||
|
|
</span></span><span style="display:flex;"><span> moveRight: 'Nach rechts',
|
|||
|
|
</span></span><span style="display:flex;"><span> download: 'Herunterladen',
|
|||
|
|
</span></span><span style="display:flex;"><span> fullscreen: 'Vollbild',
|
|||
|
|
</span></span><span style="display:flex;"><span> menu: 'Menü',
|
|||
|
|
</span></span><span style="display:flex;"><span> close: 'Schließen',
|
|||
|
|
</span></span><span style="display:flex;"><span> twoFingers: 'Benutze 2 Finger zum Navigieren.',
|
|||
|
|
</span></span><span style="display:flex;"><span> ctrlZoom: 'Benutze Strg und das Mausrad, um im Bild zu zoomen.',
|
|||
|
|
</span></span><span style="display:flex;"><span> loadError: 'Das Panorama kann nicht geladen werden.',
|
|||
|
|
</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></script>
|
|||
|
|
</span></span></code></pre></div><h2 id="einbindung-per-shortcode" data-numberify>Einbindung per Shortcode<a class="anchor ms-1" href="#einbindung-per-shortcode"></a></h2>
|
|||
|
|
<p>Und so sieht das im Ergebnis aus. Das verwendet Bild stammt von einem alten Blogbeitrag aus der Zeit, als das oben genannte WordPress-Plugin noch in meinem Blog verwendet wurde.</p>
|
|||
|
|
<p>Ich hatte das damals mit der Foto-App eines Smartphones erstellt.</p>
|
|||
|
|
<p>Die Einbindung in einem Blogbeitrag sieht so aus:</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"><</span> sphere src<span style="color:#f92672">=</span><span style="color:#e6db74">"20171019_360_baustelle_perouse_heimsheim.jpg"</span> caption<span style="color:#f92672">=</span><span style="color:#e6db74">"Eine Baustelle bei Perourse."</span> <span style="color:#f92672">></span><span style="color:#75715e">}}</span>
|
|||
|
|
</span></span></code></pre></div><p>Und das Ergebnis (Screenshot):</p>
|
|||
|
|
<figure class="image-caption"><a href="2023-01-18-360-grad-beispiel-cover.webp"><picture><source type="webp" srcset="/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/2023-01-18-360-grad-beispiel-cover.webp" />
|
|||
|
|
<img alt="Screenshot mit einem Foto einer Baustelle und unten den verschiedenen Bedienelementen wie links/rechts scrollen, Vollbild umschalten, einer Beschreibung und mehr." src="/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/2023-01-18-360-grad-beispiel-cover.webp" title="" width="790" height="491" loading="lazy" /></picture></a><figcaption>So sieht das Ergebnis aus.</figcaption></figure>
|
|||
|
|
<h2 id="konfiguration-von-nginx" data-numberify>Konfiguration von Nginx<a class="anchor ms-1" href="#konfiguration-von-nginx"></a></h2>
|
|||
|
|
<p>Da die <a class='urlextern' href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src">CSP-Header</a> im Webserver relativ strikt gesetzt sind, hat das Nachladen der Fotos nicht funktioniert. Dazu musste ich im entsprechenden Bereich <code>blob:</code> erlauben:</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-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">img-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">data:</span> <span style="color:#e6db74">blob:</span>;
|
|||
|
|
</span></span></code></pre></div><h2 id="beispiele" data-numberify>Beispiele<a class="anchor ms-1" href="#beispiele"></a></h2>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">2023-02-24: Es gibt jetzt ein neues Tag <a href="/tags/360/">360</a> für solche 360°-Fotos.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Und hier die Links zu allen alten 360°-Fotos, die mit dem neuen Photo Sphere Viewer wieder angesehen werden können:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="/2017/09/360-foto-schnappschuss-000-waldweg/">Waldweg</a></li>
|
|||
|
|
<li><a href="/2017/09/360-foto-schnappschuss-001-neuer-belforter-platz-und-rathaus-in-leonberg/">Belforter Platz in Leonberg</a></li>
|
|||
|
|
<li><a href="/2017/09/360-foto-schnappschuss-001-sonne-und-landschaft/">Sonne und Landschaft</a></li>
|
|||
|
|
<li><a href="/2017/09/360-foto-schnappschuss-003-dorfplatz-in-hausen/">Dorfplatz in Hausen an der Würm</a></li>
|
|||
|
|
<li><a href="/2017/10/360-foto-snapshot-004-pfarrgarten-in-neuhausen-enzkreis/">Pfarrgarten in Neuhausen (Enzkreis)</a></li>
|
|||
|
|
<li><a href="/2017/10/360-foto-snapshot-005-baustelle/">Baustelle zwischen Perouse und Heimsheim</a></li>
|
|||
|
|
<li><a href="/2017/12/360-foto-snapshot-006-schnee-im-wald/">Schnee im Wald</a></li>
|
|||
|
|
<li><a href="/2018/03/360-snapshot-007-pforzheim-wartberg-bei-sonnenschein/">Wartberg in Pforzheim bei Sonnenschein</a></li>
|
|||
|
|
<li><a href="/2018/04/360-schnappschuss-zwischen-althengstett-und-moettlingen/">Schnappschuss zwischen Althengstett und Möttlingen</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="in-zukunft-bessere-qualität" data-numberify>In Zukunft bessere Qualität<a class="anchor ms-1" href="#in-zukunft-bessere-qualität"></a></h2>
|
|||
|
|
<p>Früher hatte ich solche Fotos immer mit dem Smartphone und einer einfachen App gemacht. Da hatte man keinerlei Einfluss auf das Ergebnis. Dadurch ist die Qualität der Fotos sehr durchwachsen.</p>
|
|||
|
|
<p>Aktuell scheint es keine freie Android-App für so etwas zu geben und die Foto-App meines Smartphones kann das leider nicht.</p>
|
|||
|
|
<p>Daher habe ich mich entschieden, zukünftig die Fotos mit einem normalen Fotoapparat zu machen und diese mit der Software <a class='urlextern' href="https://hugin.sourceforge.io/">Hugin</a> zu einem 360°-Panorama zu verbinden.</p>
|
|||
|
|
<h2 id="was-mir-noch-fehlt" data-numberify>Was mir noch fehlt<a class="anchor ms-1" href="#was-mir-noch-fehlt"></a></h2>
|
|||
|
|
<h3 id="lagesensor" data-numberify>Lagesensor<a class="anchor ms-1" href="#lagesensor"></a></h3>
|
|||
|
|
<p>Ich erinnere mich daran, dass der Lagesensor des Smartphones bei dem alten Plugin in WordPress ausgewertet wurde. So konnte man das Smartphone vor sich halten und in alle Richtungen drehen und konnte entsprechend die Richtung im 360°-Foto im Smartphone sehen.</p>
|
|||
|
|
<p>Das wäre noch eine schöne Funktion. Vielleicht gibt es sie auch bereits und ich habe sie noch nicht gefunden.</p>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">Update (2023-10-17): Mit dem aktuellen 360-Grad-Viewer im Blog ist das möglich, es gibt dafür ein Plugin.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="link-zum-originalbild" data-numberify>Link zum Originalbild<a class="anchor ms-1" href="#link-zum-originalbild"></a></h3>
|
|||
|
|
<p>Es gibt zwar bereits einen Button, um das Panorama herunterzuladen, aber ich möchte irgendwo noch einen Link unter dem Betrachtungsfenster einfügen, sodass man das Originalbild im aktuellen Fenster öffnen kann, statt es herunterzuladen.</p>]]></content:encoded><enclosure url="https://natenom.de/2023/01/es-gibt-wieder-360-grad-fotos-in-meinem-foto-blog/2023-01-18-360-grad-beispiel-cover.webp" length="84472" type="image/webp"/></item><item><title>Weiterleitungen für den neuen Foto-Blog</title><link>https://natenom.de/2023/01/weiterleitungen-fuer-neuen-foto-blog/</link><pubDate>Thu, 12 Jan 2023 20:59:37 +0100</pubDate><guid>https://natenom.de/2023/01/weiterleitungen-fuer-neuen-foto-blog/</guid><description><![CDATA[<p>Habe heute für die über 300 Blogbeiträge, die ich nach <del>fotos.natenom.com</del> verschoben hatte, Weiterleitungen eingerichtet.</p>
|
|||
|
|
<p>Als Basis dafür habe ich die Sitemap des Foto-Blogs verwendet.</p>
|
|||
|
|
<p>Zu meinem Erstaunen habe ich dieses Mal nicht irgend ein Gefrickel aus <code>cat</code>, <code>sed</code>, <code>grep</code> und co verwendet, sondern nur kate, den KDE Advanced Editor.</p>]]></description><content:encoded><![CDATA[<p>Habe heute für die über 300 Blogbeiträge, die ich nach <del>fotos.natenom.com</del> verschoben hatte, Weiterleitungen eingerichtet.</p>
|
|||
|
|
<p>Als Basis dafür habe ich die Sitemap des Foto-Blogs verwendet.</p>
|
|||
|
|
<p>Zu meinem Erstaunen habe ich dieses Mal nicht irgend ein Gefrickel aus <code>cat</code>, <code>sed</code>, <code>grep</code> und co verwendet, sondern nur kate, den KDE Advanced Editor.</p>
|
|||
|
|
<p>Zuerst rief ich die sitemap.xml in Firefox auf, weil der Browser die Datei so anzeigt, dass nicht alles in einer Zeile ist.</p>
|
|||
|
|
<p>Das habe ich dann in ein neues Dokument in kate eingefügt. Dann ging es weiter mit:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Manuell alle Zeilen gelöscht, die nicht für einen Blogbeitrag standen, z. B. <code>.../categories/...</code></li>
|
|||
|
|
<li>Alle Vorkommen von <code><loc></code> und <code></loc></code> entfernt und das sah dann so aus:</li>
|
|||
|
|
</ul>
|
|||
|
|
<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>https://fotos.natenom.com/2022/05/der-tag-23-05-2022/
|
|||
|
|
</span></span><span style="display:flex;"><span>https://fotos.natenom.com/2022/05/flugtier-beim-abbremsen/
|
|||
|
|
</span></span><span style="display:flex;"><span>https://fotos.natenom.com/2022/05/fotos-der-letzten-tage-2/
|
|||
|
|
</span></span><span style="display:flex;"><span>https://fotos.natenom.com/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/
|
|||
|
|
</span></span><span style="display:flex;"><span>https://fotos.natenom.com/2022/05/fotos-der-letzten-tage/
|
|||
|
|
</span></span><span style="display:flex;"><span>…
|
|||
|
|
</span></span></code></pre></div><ul>
|
|||
|
|
<li>Mit “Suchen und Ersetzen” im Modus “Regular Expression” nach <code>^</code> gesucht (Anfang der Zeile) und durch ein Leerzeichen ersetzt, sodass am Anfang jeder Zeile ein Leerzeichen steht.</li>
|
|||
|
|
<li>Mit “Block selection mode” alles ab dem Ende der Domain bis zum Ende jeder Zeile markiert, z. B. <code>/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/</code>.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2023/01/weiterleitungen-fuer-neuen-foto-blog/2023-01-12-kate-block-selection-mode.webp" />
|
|||
|
|
<img alt="Screenshot vom Block selection mode in Kate." src="/2023/01/weiterleitungen-fuer-neuen-foto-blog/2023-01-12-kate-block-selection-mode.webp" title="" width="753" height="96" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Weiter im “Block selection mode” in die erste Zeile in die erste Spalte geklickt und die Auswahl eingefügt. Es wird automatisch jede Zeile passend eingefügt.</li>
|
|||
|
|
<li>Den “Block selection mode” wieder deaktiviert.</li>
|
|||
|
|
<li>Mit “Suchen und Ersetzen” im Modus “Regular Expression” nach <code>/$</code> gesucht und durch <code>/ redirect;</code> ersetzt.</li>
|
|||
|
|
<li>Um an den Anfang der Zeile noch das notwendige <code>rewrite</code> einzufügen, mit “Suchen und Ersetzen” nach <code>^/</code> im Modus “Regular Expression” suchen und mit <code>rewrite /</code> ersetzen.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Im Ergebnis sieht die Textdatei nun so aus:</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-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">…</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#e6db74">rewrite</span> <span style="color:#e6db74">/2022/05/der-tag-23-05-2022/</span> <span style="color:#e6db74">https://fotos.natenom.com/2022/05/der-tag-23-05-2022/</span> <span style="color:#e6db74">redirect</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">rewrite</span> <span style="color:#e6db74">/2022/05/flugtier-beim-abbremsen/</span> <span style="color:#e6db74">https://fotos.natenom.com/2022/05/flugtier-beim-abbremsen/</span> <span style="color:#e6db74">redirect</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">rewrite</span> <span style="color:#e6db74">/2022/05/fotos-der-letzten-tage-2/</span> <span style="color:#e6db74">https://fotos.natenom.com/2022/05/fotos-der-letzten-tage-2/</span> <span style="color:#e6db74">redirect</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">rewrite</span> <span style="color:#e6db74">/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/</span> <span style="color:#e6db74">https://fotos.natenom.com/2022/05/fotos-der-tour-am-14-05-2022-fotorahmen-und-selfie/</span> <span style="color:#e6db74">redirect</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">rewrite</span> <span style="color:#e6db74">/2022/05/fotos-der-letzten-tage/</span> <span style="color:#e6db74">https://fotos.natenom.com/2022/05/fotos-der-letzten-tage/</span> <span style="color:#e6db74">redirect</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">…</span>
|
|||
|
|
</span></span></code></pre></div><div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content">Ich habe erst einmal <code>redirect</code> verwendet, was dem HTTP Status Code 302 entspricht, da ich noch nicht sicher bin, ob alle verschobenen Beiträge auch dort bleiben. Sobald das fest steht, werde ich das durch <code>permanent</code> ersetzen, das dem Status Code 301 entspricht.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Insgesamt habe ich auf diese Weise 369 Weiterleitungen eingerichtet.</p>
|
|||
|
|
<p>Diese 369 Zeilen habe ich in eine eigene Datei eingefügt und mittels <code>include</code> an die passende Stelle in der Nginx-Konfiguration des Blogs eingefügt.</p>
|
|||
|
|
<p>Dann einmal kurz getestet, ob die Syntax passt mit:</p>
|
|||
|
|
<p><code>nginx -t</code></p>
|
|||
|
|
<p>Und den Webserver neugestartet, da alles okay war.</p>
|
|||
|
|
<p>Fertig. 😊</p>]]></content:encoded></item><item><title>Im Wiki aufgeräumt</title><link>https://natenom.de/2022/12/im-wiki-aufgeraeumt/</link><pubDate>Wed, 07 Dec 2022 03:32:31 +0100</pubDate><guid>https://natenom.de/2022/12/im-wiki-aufgeraeumt/</guid><description><p>Habe heute ein Vieles im neuen Wiki aufgeräumt.</p></description><content:encoded><![CDATA[<p>Habe heute ein Vieles im neuen Wiki aufgeräumt.</p>
|
|||
|
|
<p>Habe viele veraltete Bereiche komplett gelöscht, da die beschriebene Software zum Teil gar nicht mehr existiert.</p>
|
|||
|
|
<p>Auch habe ich ein paar Hauptbereiche der obersten Ebene nach Sammelsurium verschoben, da sie auch nach mehreren Jahren noch recht klein geblieben sind, z. B. Android. Dazu natürlich Aliase eingerichtet, damit die alten URLs weiterhin nutzbar bleiben.</p>
|
|||
|
|
<p>Und an ein paar anderen Stellen einige Verzeichnisstrukturen etwas entschlackt und Seiten zusammengefasst.</p>
|
|||
|
|
<p>Die verbliebenen Hauptbereiche im <a href="https://wiki.natenom.de/">neuen Wiki</a> sind nun:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ernährung</li>
|
|||
|
|
<li>Fahrrad</li>
|
|||
|
|
<li>Linux</li>
|
|||
|
|
<li>Minimalismus</li>
|
|||
|
|
<li>Mobilität</li>
|
|||
|
|
<li>Müll sammeln</li>
|
|||
|
|
<li>Mumble <em>(nur eine Weiterleitung auf das alte, archivierte Wiki)</em></li>
|
|||
|
|
<li>Sammelsurium</li>
|
|||
|
|
<li>Sauerbraten</li>
|
|||
|
|
</ul>
|
|||
|
|
<figure class="image-caption"><a href="2022-12-07-screenshot-wiki.natenom.com-cover.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_816x0_resize_q95_h2_catmullrom_2.webp 816w, /2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px" />
|
|||
|
|
<img alt="Screenshot des aktuellen Wikis. Links die Navigation mit den Hauptbereichen, wobei der Bereich 'Fahrrad' geöffnet ist. Rechts der offene Bereich 'Fahrrad', eine Beschreibung des Themas und ein Bild eines Fahrrads." srcset="/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_816x0_resize_q95_h2_catmullrom_2.webp 816w,/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"
|
|||
|
|
src="/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover_hub986614ae97630cd901b44f7ea91229b_231302_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="428" /></picture></a><figcaption>Das Wiki auf wiki.natenom.com, wie es aktuell aussieht.</figcaption></figure>]]></content:encoded><enclosure url="https://natenom.de/2022/12/im-wiki-aufgeraeumt/2022-12-07-screenshot-wiki.natenom.com-cover.webp" length="231302" type="image/webp"/></item><item><title>Neuerungen in Blog und Wiki</title><link>https://natenom.de/2022/12/neuerungen-in-blog-und-wiki/</link><pubDate>Thu, 01 Dec 2022 19:21:04 +0100</pubDate><guid>https://natenom.de/2022/12/neuerungen-in-blog-und-wiki/</guid><description><p>Es gibt mal wieder einige Änderungen in Blog und Wiki, die ich hier auflisten möchte. Ein paar kommen vom aktualisierten Theme (im Blog) und andere hat <a class='urlextern' href="https://vrifox.cc">Vri</a> umgesetzt. Vielen Dank dafür. ☺️</p></description><content:encoded><![CDATA[<p>Es gibt mal wieder einige Änderungen in Blog und Wiki, die ich hier auflisten möchte. Ein paar kommen vom aktualisierten Theme (im Blog) und andere hat <a class='urlextern' href="https://vrifox.cc">Vri</a> umgesetzt. Vielen Dank dafür. ☺️</p>
|
|||
|
|
<h2 id="blog" data-numberify>Blog<a class="anchor ms-1" href="#blog"></a></h2>
|
|||
|
|
<h3 id="datenschutzkonformes-iframe" data-numberify>Datenschutzkonformes iframe<a class="anchor ms-1" href="#datenschutzkonformes-iframe"></a></h3>
|
|||
|
|
<p>Der Entwickler des Themes, das ich hier verwende, hat einen neuen Shortcode <a class='urlextern' href="https://hbs.razonyang.com/v1/en/docs/shortcodes/iframe/">iframe</a> implementiert. Der externe Inhalt wird erst geladen, nachdem der Benutzer auf “Laden” geklickt hat.</p>
|
|||
|
|
<p>Es ist möglich, vorgegebene Texte für die Schaltfläche und auch für den Beschreibungstext anzupassen.</p>
|
|||
|
|
<p>Hier ein Beispiel:</p>
|
|||
|
|
<pre tabindex="0"><code class="language-hugo" data-lang="hugo">{{< iframe src="http://umap.openstreetmap.fr/en/map/natenoms-buros_642889#11/48.8503/8.9209" trigger="manual" loadButtonText="Externe Karte laden" loadInfo="Ein Klick hierdrauf lädt Daten von OpenStreetMap. Der Anbieter erhält dadurch deine IP-Adresse und weitere Daten von dir." >}}
|
|||
|
|
</code></pre><p>So sieht das dann aus:</p>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-12-01-iframe.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Screenshot vom noch nicht geladenen iframe mit den genannten Infotexten." srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe_hu225f2876a3388e707474404cfb1dc742_7564_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="469" /></picture></a><figcaption>Noch wurde nichts geladen.</figcaption></figure>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-12-01-iframe-geladen.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Screenshot vom geladenen iframe mit der OpenStreetMap-Karte." srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-iframe-geladen_hu115bc8ef8656f5f54c686cbf10514d87_110152_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="469" /></picture></a><figcaption>Der externe Inhalt wurde geladen. <a class='urlextern' href="https://www.openstreetmap.org/copyright">Copyright by OpenStreetMap Contributors</a></figcaption></figure>
|
|||
|
|
<h3 id="seiten-im-suchindex-verstecken" data-numberify>Seiten im Suchindex verstecken<a class="anchor ms-1" href="#seiten-im-suchindex-verstecken"></a></h3>
|
|||
|
|
<p>Setzt man im Front Matter eines Blogbeitrags den Parameter <code>index: false</code>, so wird diese Seite nicht in den Suchindex aufgenommen und kann somit auch nicht über die Suche des Blogs gefunden werden.</p>
|
|||
|
|
<p>Externe Suchmaschinen können die Seite natürlich trotzdem finden.</p>
|
|||
|
|
<h3 id="ähnliche-beiträge" data-numberify>Ähnliche Beiträge<a class="anchor ms-1" href="#ähnliche-beiträge"></a></h3>
|
|||
|
|
<p>Die Liste der ähnlichen Beitrag oberhalb von Blogbeiträgen ist jetzt ansehnlicher geworden, da ich das Datumsformat dort gekürzt habe.</p>
|
|||
|
|
<p>Oben vorher, unten nachher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-old_hu40d3a03acdbe2edd12b89de96afd6305_39948_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="281" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-10-21-related-posts-new_hu88ba997eef9ee589540ad010f98dd5ee_33702_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="299" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h3 id="unter-der-haube" data-numberify>Unter der Haube<a class="anchor ms-1" href="#unter-der-haube"></a></h3>
|
|||
|
|
<p>Vri hat eine zusätzliche Konfiguration zum Blog hinzugefügt, die nur greift, wenn man die Seite lokal mit <code>hugo server</code> baut. Dann werden nur die Blogbeiträge aus dem aktuellen Jahr gerendert, sodass das Rendern insgesamt nur noch 4 statt 20 Sekunden dauert.</p>
|
|||
|
|
<p>Wenn man neue Blogbeiträge schreibt oder einfach nur etwas am Stil im Blog anpassen möchte, dann kann man so viel Zeit sparen.</p>
|
|||
|
|
<h2 id="wiki" data-numberify>Wiki<a class="anchor ms-1" href="#wiki"></a></h2>
|
|||
|
|
<h3 id="navigationsleiste" data-numberify>Navigationsleiste<a class="anchor ms-1" href="#navigationsleiste"></a></h3>
|
|||
|
|
<p>Statt die aktuelle und hervorgehobene Seite in der Navigationsleiste komplett in Blau zu hinterlegen, hat Vri das jetzt mal ordentlich und schön gemacht. Das Blau hatte historische Gründe, denn die Navigation im alten Wiki sah genauso aus.</p>
|
|||
|
|
<p>Vorher und nachher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-sidebar-old.webp" />
|
|||
|
|
<img alt="Alte Sidebar" src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-sidebar-old.webp" title="" width="255" height="335" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-sidebar-new.webp" />
|
|||
|
|
<img alt="Neue Sidebar" src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-sidebar-new.webp" title="" width="255" height="335" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h3 id="interaktive-navigation" data-numberify>Interaktive Navigation<a class="anchor ms-1" href="#interaktive-navigation"></a></h3>
|
|||
|
|
<p>Zusätzlich habe ich den Navigationsbaum so umgestellt, dass er wieder dynamisch ist, d. h. man kann jederzeit alle Bereiche öffnen.</p>
|
|||
|
|
<p>Da das Wiki eine statische Website ist, muss deshalb jedoch der gesamte Navigationsbaum in jeder einzelnen Seite des Wikis enthalten sein und somit wird jede Seite im Wiki um circa 4,8 kB größer. Im Fall von <a href="/docs/muellsammeln/">Müllsammeln</a> z. B. 33,2 kB statt sonst 28,4 kB.</p>
|
|||
|
|
<p>Die Unterschiede von <a class='urlextern' href="https://pagespeed.web.dev/">Googles Pagespeed</a> zwischen dynamischem und statischem Navigationsbaum sind zudem marginal bis gar nicht vorhanden. Für die Desktop-Ansicht kann man keine Unterschiede feststellen, nur in der mobilen Ansicht gibt es leichte Unterschiede. Hier zwei Screenshots von der Auswertung der mobilen Ansicht:</p>
|
|||
|
|
<figure class="image-caption float-left"><a href="images/2022-11-29-wiki-statischer-navibaum-mobil.webp"><picture><source type="webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-11-29-wiki-statischer-navibaum-mobil_hud6d2c5350607372290eb1bb74e1cd2fa_155404_200x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot der Ergebnisse von Google Pagespeed." src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-11-29-wiki-statischer-navibaum-mobil_hud6d2c5350607372290eb1bb74e1cd2fa_155404_200x0_resize_q95_h2_catmullrom_2.webp" title="" width="200" height="545" loading="lazy" /></picture></a><figcaption>Ergebnisse für den statischen Navigationsbaum.</figcaption></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="images/2022-11-29-wiki-interaktiver-navibaum-mobil.webp"><picture><source type="webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-11-29-wiki-interaktiver-navibaum-mobil_hu182c3e936a829fd31a65c6bbde0b0fbd_177914_200x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="Screenshot der Ergebnisse von Google Pagespeed." src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-11-29-wiki-interaktiver-navibaum-mobil_hu182c3e936a829fd31a65c6bbde0b0fbd_177914_200x0_resize_q95_h2_catmullrom_2.webp" title="" width="200" height="594" loading="lazy" /></picture></a><figcaption>Ergebnisse für den interaktiven Navigationsbaum.</figcaption></figure>
|
|||
|
|
<div style="clear: both;"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Die Größe des DOM (Document Object Model) wird von Pagespeed im Wiki generell moniert. Mit statischem Navigationsbaum sind es 1982 Elemente und mit dynamischem Navigationsbaum sind es 3094 Elemente.</p>
|
|||
|
|
<p>Ein weiterer Nachteil des dynamischen Navigationsbaums ist, dass alle Seiten im Wiki nicht mehr so lange gecached werden können. Denn sobald sich irgendwo im Wiki der Titel einer Seite oder deren Anordnung ändert, muss jede Seite im Browser des Besuchers neu geladen werden, um den Navigationsbaum korrekt anzuzeigen.</p>
|
|||
|
|
<p>Ich denke, mit den kleinen Nachteilen kann man leben und der dynamische Navigationsbaum ist meiner Ansicht nach ein großer Zugewinn für die Nutzbarkeit des Wikis. Außerdem ändere ich ja nicht ständig Seiten im Wiki.</p>
|
|||
|
|
<h3 id="shortcodes" data-numberify>Shortcodes<a class="anchor ms-1" href="#shortcodes"></a></h3>
|
|||
|
|
<p>Vri hat das SCSS von Shortcodes umstrukturiert und konnte somit Shortcodes generell auf <code>max-width: 80%</code> einstellen, sodass sie nicht mehr breiter sind als der restliche Inhalt einer Seite.</p>
|
|||
|
|
<p>Zudem werden Überschriften von Hinweisboxen (Update, Tipp, Warnung, …) im Feed jetzt groß geschrieben, wie auch auf der Website.</p>
|
|||
|
|
<h3 id="suchfunktion" data-numberify>Suchfunktion<a class="anchor ms-1" href="#suchfunktion"></a></h3>
|
|||
|
|
<p>Auch hat Vri rechts oben im Wiki ein Formularfeld für die Suchfunktion des Wikis eingefügt, sodass man nicht mehr umständlich erst auf “Suche” klicken und dann den Suchbegriff auf der anschließend ladenden Seite eingeben muss.</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-suchleiste-wiki.webp" />
|
|||
|
|
<img alt="Screenshot der Suchleiste im Wiki" src="/2022/12/neuerungen-in-blog-und-wiki/images/2022-12-01-suchleiste-wiki.webp" title="" width="584" height="62" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h3 id="kein-html-quelltext-mehr" data-numberify>Kein HTML-Quelltext mehr<a class="anchor ms-1" href="#kein-html-quelltext-mehr"></a></h3>
|
|||
|
|
<p>Ich habe im Wiki <code>unsafe=false</code> eingestellt. Somit wird HTML-Quelltext innerhalb einer Seite generell nicht mehr gerendert, sondern nur entfernt. Im Zuge des Umzugs von Dokuwiki hatte ich das auf <code>true</code> gesetzt, damit erst einmal alle Inhalte sichtbar waren. Mittlerweile habe ich alle Inhalte ins Markdown-Format überführt, bis auf eine Liste mit (teils veralteter) Software. In der Hugo-Doku gibt es weitere Informationen zu den Einstellungen fürs <a class='urlextern' href="https://gohugo.io/getting-started/configuration-markup/">Rendern in Hugo</a> (nach <code>unsafe</code> suchen).</p>]]></content:encoded><enclosure url="https://natenom.de/2022/12/neuerungen-in-blog-und-wiki/cover.webp" length="7564" type="image/webp"/></item><item><title>JavaScript für Kommentarfunktion in eigene Datei ausgelagert</title><link>https://natenom.de/2022/11/javascript-fuer-kommentarfunktion-in-eigene-datei-ausgelagert/</link><pubDate>Sun, 06 Nov 2022 17:25:07 +0100</pubDate><guid>https://natenom.de/2022/11/javascript-fuer-kommentarfunktion-in-eigene-datei-ausgelagert/</guid><description><![CDATA[<p>Vri hat heute das System für <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">Kommentare hier im Blog</a> verbessert.</p>
|
|||
|
|
<p>Vielen Dank dafür. ☺️</p>]]></description><content:encoded><![CDATA[<p>Vri hat heute das System für <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">Kommentare hier im Blog</a> verbessert.</p>
|
|||
|
|
<p>Vielen Dank dafür. ☺️</p>
|
|||
|
|
<p>Sie hat das ganze JavaScript-Zeugs in eine eigene Datei ausgelagert und den Code angepasst. Dieser wird natürlich nur eingebunden, wenn im Front Matter die Kommentarfunktion aktiviert ist.</p>
|
|||
|
|
<h2 id="javascript" data-numberify>JavaScript<a class="anchor ms-1" href="#javascript"></a></h2>
|
|||
|
|
<p>Hier die Datei <a href="/my_js/mastodon-comments.js">mastodon-comments.js</a>.</p>
|
|||
|
|
<h2 id="hugo-template" data-numberify>Hugo-Template<a class="anchor ms-1" href="#hugo-template"></a></h2>
|
|||
|
|
<p>Das Template (<code>layouts/partials/post/comments/custom.html</code>) für Hugo sieht jetzt so aus:</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:#66d9ef">with</span> <span style="color:#a6e22e">.Params.comments</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"masto-comments datenschutz"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/ueber/datenschutz/#kommentare"</span>>(Datenschutzinformationen zu Kommentaren via Mastodon)</<span style="color:#f92672">a</span>></<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-wrapper"</span> <span style="color:#a6e22e">data-mastodon-host</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.host</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span> <span style="color:#a6e22e">data-mastodon-username</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.username</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span> <span style="color:#a6e22e">data-mastodon-id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.id</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-buttons"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-outline-primary"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.host</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">/interact/</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.id</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">?type=reply"</span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">"_blank"</span>>Kommentar schreiben</<span style="color:#f92672">a</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-outline-primary"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.host</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">/@</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.username</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">/</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">.id</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">"</span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">"_blank"</span>>Tröt öffnen</<span style="color:#f92672">a</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-list"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"load-comments"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-primary"</span>>Kommentare anzeigen (via Mastodon)</<span style="color:#f92672">button</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">noscript</span>><<span style="color:#f92672">p</span>>Du benötigst JavaScript, um die Kommentare hier anzeigen zu lassen.</<span style="color:#f92672">p</span>></<span style="color:#f92672">noscript</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/purify.min.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/mastodon-comments.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> <span style="color:#66d9ef">else</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments nocomment"</span>>Kommentare sind für diesen Blogbeitrag (noch) nicht aktiviert. Nach der Veröffentlichung eines Blogbeitrags dauert das in der Regel noch ein paar Minuten.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> <span style="color:#66d9ef">end</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>><<span style="color:#f92672">details</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments email"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">summary</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments email-summary"</span>>Alternative: Anmerkung per E-Mail</<span style="color:#f92672">summary</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments emailcontent"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">p</span>>Du kannst mir Anmerkungen zum Blogbeitrag per E-Mail schicken, <<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">'mailto:user@tld.org?subject=Anmerkung zum Blog&body=Hallo Natenom. Zum Blogbeitrag "</span><span style="color:#75715e">{{</span> <span style="color:#a6e22e">$.Page.Permalink</span> <span style="color:#75715e">}}</span><span style="color:#e6db74">" habe ich eine Anmerkung:'</span>>wenn du hier klickst</<span style="color:#f92672">a</span>>. Der Inhalt davon bleibt privat und wird nicht hier im Kommentarbereich veröffentlicht.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">details</span>></<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span></code></pre></div><h2 id="css" data-numberify>CSS<a class="anchor ms-1" href="#css"></a></h2>
|
|||
|
|
<p>Beim CSS hat sich nichts geändert und das <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/#css">gibt es hier</a>.</p>]]></content:encoded></item><item><title>Transparenz für Kommentare im Blog via Mastodon</title><link>https://natenom.de/2022/11/transparenz-fuer-kommentare-im-blog-via-mastodon/</link><pubDate>Fri, 04 Nov 2022 15:22:56 +0100</pubDate><guid>https://natenom.de/2022/11/transparenz-fuer-kommentare-im-blog-via-mastodon/</guid><description><![CDATA[<p>Erst vor ein paar Tagen hatte ich hier im Blog ermöglicht, <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">via Mastodon Kommentare</a> zu schreiben.</p>
|
|||
|
|
<p>Dabei werden hier im Blog alle Antworten auf einen bestimmten Tröt/Toot bei einem Klick auf einen Button von Mastodon nachgeladen.</p>
|
|||
|
|
<p>Es sind alle Tröts sichtbar, die bei Mastodon bzw. im Fediverse auf einen ganz bestimmten, ausgewählten Tröt/Toot als Antwort geschrieben werden.</p>
|
|||
|
|
<p>Sobald ich einen Blogbeitrag fertig und veröffentlicht habe, setze ich einen solchen Tröt ab und binde dann dessen Antworten für die Kommentarfunktion im Blogbeitrag ein.</p>]]></description><content:encoded><![CDATA[<p>Erst vor ein paar Tagen hatte ich hier im Blog ermöglicht, <a href="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/">via Mastodon Kommentare</a> zu schreiben.</p>
|
|||
|
|
<p>Dabei werden hier im Blog alle Antworten auf einen bestimmten Tröt/Toot bei einem Klick auf einen Button von Mastodon nachgeladen.</p>
|
|||
|
|
<p>Es sind alle Tröts sichtbar, die bei Mastodon bzw. im Fediverse auf einen ganz bestimmten, ausgewählten Tröt/Toot als Antwort geschrieben werden.</p>
|
|||
|
|
<p>Sobald ich einen Blogbeitrag fertig und veröffentlicht habe, setze ich einen solchen Tröt ab und binde dann dessen Antworten für die Kommentarfunktion im Blogbeitrag ein.</p>
|
|||
|
|
<h2 id="intransparent" data-numberify>Intransparent<a class="anchor ms-1" href="#intransparent"></a></h2>
|
|||
|
|
<p>Das Problem dabei: Kommentiert man ausgehend vom Blogbeitrag, dann ist klar ersichtlich, dass dabei Mastodon als Quelle dient. Doch Menschen, die nur auf Mastodon bzw. im Fediverse auf meinen Tröt zu einem Blogbeitrag reagieren, können nicht erkennen, dass ihre Antworten im Blog im Kommentarbereich zu sehen sein werden.</p>
|
|||
|
|
<p>Dass das nicht optimal ist, war mir schon klar, als ich das umgesetzt hatte. Ich war jedoch erstm einmal froh, dass es überhaupt so funktioniert hatte und verschob alles weitere auf später.</p>
|
|||
|
|
<p>Heute hat jemand diese Überlegungen auf meine heutige Todo-Liste gestellt, als er mir diesen <a class='urlextern' href="https://chaos.social/@larsreineke/109285139842734824">Tröt</a> schickte, der genau das Problem beschreibt. (Danke dafür.)</p>
|
|||
|
|
<p>Der Autor äußert bei einer solchen Vorgehensweise Bedenken bezüglich des Datenschutzes und empfindet es zumindest als unhöflich. Letzerem stimme ich zu.</p>
|
|||
|
|
<p>Wegen Datenschutz sehe ich keine Probleme, bin aber auch nur Laie. Das Fediverse besteht aus vielen verschiedenen Instanzen und sobald man dort etwas öffentlich schreibt, werden die Tröts auf unzählige Instanzen weitergeleitet und weiß letzlich nie, in welchem Kontext die eigenen Beiträge zu sehen sein werden.</p>
|
|||
|
|
<h2 id="transparent" data-numberify>Transparent<a class="anchor ms-1" href="#transparent"></a></h2>
|
|||
|
|
<p>Deshalb werde ich die Kommentarfunktion via Mastodon ab jetzt leicht abgeändert umsetzen.</p>
|
|||
|
|
<p>Es wird weiterhin für Blogbeiträge, die ich im Fediverse teilen möchte, einen eigenen Tröt geben. Als erste Antwort auf diesen Tröt werde ich einen weiteren Tröt schreiben, der erklärt, dass nur die Antworten auf diesen Tröt für die Kommentarfunktion des Blogs herangezogen werden.</p>
|
|||
|
|
<p>Beispiel:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Tröt 1</strong>: <code>Meine Fahrradstatistik für Oktober 2022</code>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Tröt 2</strong> (als Antwort auf Tröt 1): <code>Wenn du auf diesen Tröt hier antwortest, werden die Antworten im Kommentarbereich des oben verlinkten Blogbeitrags angezeigt. Antworten auf den Ursprungströt (der mit dem Link zum Blogbeitrag) sind nicht im Blog sichtbar. Es kann ein paar Minuten dauern, bis die Kommentarfunktion im Blog aktiviert ist. #blogcomments</code>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Tröt 3</strong> (als Antwort auf Tröt 2): <code>abc</code> -> erscheint im Kommentarbereich des Blogs.
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Tröt 6</strong> (als Antwort auf Tröt 3): <code>bar</code> -> erscheint im Kommentarbereich des Blogs.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><strong>Tröt 5</strong> (als Antwort auf Tröt 2): <code>foo</code> -> erscheint im Kommentarbereich des Blogs.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><strong>Tröt 4</strong> (als Antwort auf Tröt 1): <code>def</code> -> erscheint nicht im Kommentarbereich des Blogs.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="shortcode-notice tipp">
|
|||
|
|
<div class="shortcode-notice-title tipp">
|
|||
|
|
Tipp</div>
|
|||
|
|
<div class="notice-content"><p>Das Hashtag <code>#blogcomments</code> werde ich vorsorglich hinzufügen, da es z. B. mit <a href="/2021/03/alte-toots-eines-mastodon-accounts-automatisiert-loeschen/">Ephemetoot</a> möglich ist, Tröts mit bestimmten Tags von der Löschung auszuschließen. <a href="/2022/04/mastodon-kann-selbst-automatisch-loeschen/">Mastodon kann zwar auch selbst alte Tröts löschen</a>, bietet aber nur sehr wenige Möglichkeiten, bestimmte Tröts von der Löschung auszuschließen.</p>
|
|||
|
|
<p>In Zukunft könnte ich statt der in Mastodon eingebauten Funktion wieder Ephemetoot nutzen, um alte Tröts zu löschen und dabei Tröts behalten, die das Tag <code>#blogcomments</code> beinhalten.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="daten-sind-live-es-gibt-keine-kopien" data-numberify>Daten sind live, es gibt keine Kopien<a class="anchor ms-1" href="#daten-sind-live-es-gibt-keine-kopien"></a></h2>
|
|||
|
|
<p>Die Antworten auf den “Kommentar”-Tröt werden übrigens nicht in meinen Blog “hineinkopiert” sondern immer via JavaScript live über den Browser des Besuchers nachgeladen.</p>
|
|||
|
|
<p>Das bedeutet, dass jeder seinen “Kommentar” auch jederzeit löschen kann.</p>
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>Das hier ist der erste Blogbeitrag, bei dem transparent ist, dass Kommentare im Blog landen.</p>]]></content:encoded></item><item><title>Kommentare in meinem statischen Blog via Mastodon</title><link>https://natenom.de/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/</link><pubDate>Tue, 01 Nov 2022 20:01:42 +0100</pubDate><guid>https://natenom.de/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/</guid><description><![CDATA[<p>Seit dem Umzug meines Blogs <a href="/2022/02/umzug-des-blogs-von-wordpress-zu-hugo-teil-1/">von WordPress hin zu einer statischen Website</a> Anfang des Jahres hatte ich ganz leicht, aber wirklich nur ganz bisschen die Kommentarfunktion vermisst. Es gab hier sowieso nur selten Kommentare. Eine Interaktionsmöglichkeit ist aber trotzdem schön.</p>
|
|||
|
|
<p>Deshalb haben wir heute die Möglichkeit im Blog integriert, in dafür freigeschalteten Blogbeiträgen per Mastodon zu kommentieren.</p>]]></description><content:encoded><![CDATA[<p>Seit dem Umzug meines Blogs <a href="/2022/02/umzug-des-blogs-von-wordpress-zu-hugo-teil-1/">von WordPress hin zu einer statischen Website</a> Anfang des Jahres hatte ich ganz leicht, aber wirklich nur ganz bisschen die Kommentarfunktion vermisst. Es gab hier sowieso nur selten Kommentare. Eine Interaktionsmöglichkeit ist aber trotzdem schön.</p>
|
|||
|
|
<p>Deshalb haben wir heute die Möglichkeit im Blog integriert, in dafür freigeschalteten Blogbeiträgen per Mastodon zu kommentieren.</p>
|
|||
|
|
<p>Vielen Dank an die Menschen, die mir auf <a class='urlextern' href="https://social.anoxinon.de/@natenom/109263561189792179">Mastodon auf meine Frage hin</a> antworteten. Darüber konnte ich <a class='urlextern' href="https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/">diesen Blogbeitrag</a> finden, der das Vorgehen für Hugo erklärt.</p>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">2022-11-06: Die Einbindung von Kommentaren aus Mastodon erfolgt jetzt transparent, <a href="/2022/11/transparenz-fuer-kommentare-im-blog-via-mastodon/">siehe hier</a>.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="was-ist-mastodon" data-numberify>Was ist Mastodon?<a class="anchor ms-1" href="#was-ist-mastodon"></a></h2>
|
|||
|
|
<p><a class='urlextern' href="https://de.wikipedia.org/wiki/Mastodon_%28Software%29">Mastodon</a> ist ein Teil vom <a class='urlextern' href="https://de.wikipedia.org/wiki/Fediverse">Fediverse</a>. Jeder Mensch kann dort einen Account bei einem beliebigen Anbieter einer Instanz erstellen.</p>
|
|||
|
|
<p>Man kann sich das vorstellen wie bei E-Mails. Jeder Mensch hat einen anderen E-Mail-Anbieter und kann trotzdem mit jedem anderen Menschen auf der Welt kommunizieren.</p>
|
|||
|
|
<h2 id="vorab-wie-es-funktioniert" data-numberify>Vorab: Wie es funktioniert<a class="anchor ms-1" href="#vorab-wie-es-funktioniert"></a></h2>
|
|||
|
|
<h3 id="für-menschen-die-kommentieren" data-numberify>Für Menschen, die kommentieren<a class="anchor ms-1" href="#für-menschen-die-kommentieren"></a></h3>
|
|||
|
|
<p>Entweder nach unten scrollen oder rechts auf die Sprechblase (rechts oben im Blogbeitrag) klicken. Dann landet man hier:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-ungeladen_hu94308d496794c6ec792089d0ab8ba6d6_13760_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="258" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Dann “Kommentare anzeigen (via Mastodon)” anklicken:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/11/kommentare-in-meinem-statischen-blog-via-mastodon/2022-11-01-kommentare-geladen_hub77b13ab36b426318ae164eb0f25648e_17800_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="310" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Oder einen der oberen Links anklicken, um zu kommentieren oder den Tröt in einem neuen Tab zu öffnen.</p>
|
|||
|
|
<p>Um zu kommentieren, benötigt man entweder einen Mastodon-Account, einen Friendica-Account oder irgend einen anderen Account eines Dienstes des Fediverse.</p>
|
|||
|
|
<h3 id="für-mich-als-betreiber-des-blogs" data-numberify>Für mich als Betreiber des Blogs<a class="anchor ms-1" href="#für-mich-als-betreiber-des-blogs"></a></h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>Blogbeitrag veröffentlichen.</li>
|
|||
|
|
<li>Link zum Blogbeitrag auf Mastodon tröten.</li>
|
|||
|
|
<li>Im veröffentlichen Blogbeitrag im <code>Front Matter</code> einfügen:</li>
|
|||
|
|
</ol>
|
|||
|
|
<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">comments</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">host</span>: <span style="color:#ae81ff">social.anoxinon.de</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">username</span>: <span style="color:#ae81ff">natenom</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">id</span>: <span style="color:#ae81ff">123456789</span><span style="color:#ae81ff">…</span>
|
|||
|
|
</span></span></code></pre></div><ol start="4">
|
|||
|
|
<li>Blogbeitrag erneut veröffentlichen mit dem geänderten <code>Front Matter</code>.</li>
|
|||
|
|
</ol>
|
|||
|
|
<p>Die ID ist die lange Zahl am Ende des Links eines Tröts (Toots).</p>
|
|||
|
|
<p>Ich habe bewusst entschieden, den Host immer im Front Matter des Blogbeitrag zu hinterlegen, statt ihn global in der Konfiguration von Hugo zu hinterlegen. Denn es könnte sein, dass ich zukünftig eine andere Instanz verwenden werde und dann sollten bisherige Kommentare weiterhin zugreifbar bleiben.</p>
|
|||
|
|
<p>Der Nachteil dieser Lösung ist, dass es immer etwas dauert (da der Blog neu generiert wird), bis Kommentare im Blog eingebunden werden können, obwohl es bereits einen Tröt auf Mastodon gibt. Das macht aber nichts, da man trotzdem bereits auf Mastodon antworten kann und diese Antworten später auch über den Blog sichtbar sind.</p>
|
|||
|
|
<p><em>(Man könnte auch kurz vor dem Veröffentlichen des Beitrags bereits einen Mastodon-Tröt zum Blogbeitrag schreiben, müsste dann aber das Vorschaubild und den Titel manuell eintragen und würde nur wenig Zeit sparen.)</em></p>
|
|||
|
|
<h2 id="umsetzung-für-meinen-blog" data-numberify>Umsetzung für meinen Blog<a class="anchor ms-1" href="#umsetzung-für-meinen-blog"></a></h2>
|
|||
|
|
<p>Hier die Anleitung, wie wir das mit dem hier verwendeten Theme “<a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap">Hugo Theme Bootstrap</a>” umgesetzt haben.</p>
|
|||
|
|
<p>Wir haben den Quelltext des oben bereits genannten <a class='urlextern' href="https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/">Blogbeitrags</a> an den Blog angepasst.</p>
|
|||
|
|
<div class="shortcode-notice info">
|
|||
|
|
<div class="shortcode-notice-title info">
|
|||
|
|
Info</div>
|
|||
|
|
<div class="notice-content">Vielen Dank an Vri, die dafür gesorgt hat, dass das Ergebnis schön aussieht.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="template" data-numberify>Template<a class="anchor ms-1" href="#template"></a></h3>
|
|||
|
|
<p>Dieser Quelltext kommt in die Datei <code>layouts/partials/post/comments/custom.html</code>:</p>
|
|||
|
|
<div class="shortcode-details">
|
|||
|
|
<details>
|
|||
|
|
<summary>Quelltext der Datei</summary>
|
|||
|
|
<div class="shortcode-details content"><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>{{ with .Params.comments }}
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"masto-comments datenschutz"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/ueber/datenschutz/#kommentare"</span>>(Datenschutzinformationen zu Kommentaren via Mastodon)</<span style="color:#f92672">a</span>></<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-wrapper"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-buttons"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-outline-primary"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://{{ .host }}/interact/{{ .id }}?type=reply"</span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">"_blank"</span>>Kommentar schreiben</<span style="color:#f92672">a</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-outline-primary"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://{{ .host }}/@{{ .username }}/{{ .id }}"</span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">"_blank"</span>>Tröt öffnen</<span style="color:#f92672">a</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments-list"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"load-comments"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"btn btn-sm btn-primary"</span>>Kommentare anzeigen (via Mastodon)</<span style="color:#f92672">button</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">noscript</span>><<span style="color:#f92672">p</span>>Du benötigst JavaScript, um die Kommentare hier anzeigen zu lassen.</<span style="color:#f92672">p</span>></<span style="color:#f92672">noscript</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/my_js/purify.min.js"</span>></<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'load-comments'</span>).<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'click'</span>, <span style="color:#a6e22e">loadComment</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">escapeHtml</span>(<span style="color:#a6e22e">unsafe</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">unsafe</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/&/g</span>, <span style="color:#e6db74">'&amp;'</span>)
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/</g</span>, <span style="color:#e6db74">'&lt;'</span>)
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/>/g</span>, <span style="color:#e6db74">'&gt;'</span>)
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/"/g</span>, <span style="color:#e6db74">'&quot;'</span>)
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/'/g</span>, <span style="color:#e6db74">'&#039;'</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">loadComment</span>() {
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'load-comments'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'Lade …'</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fetch</span>(<span style="color:#e6db74">'https://{{ .host }}/api/v1/statuses/{{ .id }}/context'</span>)
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">then</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">response</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">json</span>();
|
|||
|
|
</span></span><span style="display:flex;"><span> })
|
|||
|
|
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">then</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">data</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">data</span>[<span style="color:#e6db74">'descendants'</span>] <span style="color:#f92672">&&</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> Array.<span style="color:#a6e22e">isArray</span>(<span style="color:#a6e22e">data</span>[<span style="color:#e6db74">'descendants'</span>]) <span style="color:#f92672">&&</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>[<span style="color:#e6db74">'descendants'</span>].<span style="color:#a6e22e">length</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'mastodon-comments-list'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">""</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>[<span style="color:#e6db74">'descendants'</span>].<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">reply</span>) {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">display_name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">escapeHtml</span>(<span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">display_name</span>);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">emojis</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">emoji</span> => {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">display_name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">display_name</span>.<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">`:</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">emoji</span>.<span style="color:#a6e22e">shortcode</span><span style="color:#e6db74">}</span><span style="color:#e6db74">:`</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">`<img src="</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">escapeHtml</span>(<span style="color:#a6e22e">emoji</span>.<span style="color:#a6e22e">static_url</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">" alt="Emoji </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">emoji</span>.<span style="color:#a6e22e">shortcode</span><span style="color:#e6db74">}</span><span style="color:#e6db74">" height="20" width="20" />`</span>);
|
|||
|
|
</span></span><span style="display:flex;"><span> });
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">replyCreationDate</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(<span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">created_at</span>).<span style="color:#a6e22e">toLocaleDateString</span>(<span style="color:#66d9ef">undefined</span>, { <span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>, <span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'short'</span>, <span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>, <span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span> });
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">replyCreationDateLong</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date(<span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">created_at</span>).<span style="color:#a6e22e">toLocaleDateString</span>(<span style="color:#66d9ef">undefined</span>, { <span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>, <span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'long'</span>, <span style="color:#a6e22e">year</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>, <span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>, <span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span> });
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mastodonComment</span> <span style="color:#f92672">=</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">`<div class="mastodon-comment">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <div class="avatar">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <img src="</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">escapeHtml</span>(<span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">avatar_static</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">" alt="">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </div>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <div class="content">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <div class="author-wrapper">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <a class="author" href="</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">url</span><span style="color:#e6db74">}</span><span style="color:#e6db74">" rel="nofollow">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <span class="author-name"></span><span style="color:#e6db74">${</span><span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">display_name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"></span>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <span class="author-handle"></span><span style="color:#e6db74">${</span><span style="color:#a6e22e">escapeHtml</span>(<span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">account</span>.<span style="color:#a6e22e">acct</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74"></span>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </a>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <a class="date" href="</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">uri</span><span style="color:#e6db74">}</span><span style="color:#e6db74">" rel="nofollow" title="</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">replyCreationDateLong</span><span style="color:#e6db74">}</span><span style="color:#e6db74">">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">replyCreationDate</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </a>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </div>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <div class="mastodon-comment-content"></span><span style="color:#e6db74">${</span><span style="color:#a6e22e">reply</span>.<span style="color:#a6e22e">content</span><span style="color:#e6db74">}</span><span style="color:#e6db74"></div>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </div>
|
|||
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> </div>`</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'mastodon-comments-list'</span>).<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">DOMPurify</span>.<span style="color:#a6e22e">sanitize</span>(<span style="color:#a6e22e">mastodonComment</span>, {<span style="color:#e6db74">'RETURN_DOM_FRAGMENT'</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>}));
|
|||
|
|
</span></span><span style="display:flex;"><span> });
|
|||
|
|
</span></span><span style="display:flex;"><span> } <span style="color:#66d9ef">else</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'mastodon-comments-list'</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"<p>Keine Kommentare gefunden</p>"</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:#f92672">script</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>{{ else }}
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments nocomment"</span>>Kommentare sind für diesen Blogbeitrag (noch) nicht aktiviert. Nach der Veröffentlichung eines Blogbeitrags dauert das in der Regel noch ein paar Minuten.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span>{{ end }}
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>><<span style="color:#f92672">details</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments email"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">summary</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments email-summary"</span>>Alternative: Anmerkung per E-Mail</<span style="color:#f92672">summary</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mastodon-comments emailcontent"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">p</span>>Du kannst mir Anmerkungen zum Blogbeitrag per E-Mail schicken, <<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">'mailto:user@tld.org?subject=Anmerkung zum Blog&body=Hallo Natenom. Zum Blogbeitrag "{{ $.Page.Permalink }}" habe ich eine Anmerkung:'</span>>wenn du hier klickst</<span style="color:#f92672">a</span>>. Der Inhalt davon bleibt privat und wird nicht hier im Kommentarbereich veröffentlicht.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">details</span>></<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span></code></pre></div></div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcode-notice info">
|
|||
|
|
<div class="shortcode-notice-title info">
|
|||
|
|
Info</div>
|
|||
|
|
<div class="notice-content">Der Inhalt des <a class='urlextern' href="https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/">Blogbeitrags</a>, von dem ich den oberen Quelltext entnommen habe, ist lizensiert unter Creative Commons BY-SA 4.0. Daher gehe ich davon aus, dass auch der dort gelistete Quelltext unter diese Lizenz fällt. Sollte dem nicht so sein, so bitte ich um eine Nachricht. Entsprechend steht der hier angepasste Quelltext unter der selben Lizenz zur Verfügung.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="css" data-numberify>CSS<a class="anchor ms-1" href="#css"></a></h3>
|
|||
|
|
<p>Das SCSS kommt in die Datei <code>assets/main/scss/_custom.scss</code>:</p>
|
|||
|
|
<div class="shortcode-details">
|
|||
|
|
<details>
|
|||
|
|
<summary>CSS für die Kommentarfunktion</summary>
|
|||
|
|
<div class="shortcode-details content"><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-scss" data-lang="scss"><span style="display:flex;"><span><span style="color:#75715e">/* Für Kommentar, die von Mastodon geladen werden. :) */</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>#mastodon-comments-wrapper {
|
|||
|
|
</span></span><span style="display:flex;"><span> #mastodon-comments-buttons {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin-bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span><span style="color:#ae81ff">.5</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span> #mastodon-comments-list {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">button</span>#load-comments {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border-radius</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span><span style="color:#e6db74">#{</span>$prefix<span style="color:#e6db74">}</span>border-radius);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background-color</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span><span style="color:#e6db74">#{</span>$prefix<span style="color:#e6db74">}</span>btn-border-color);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">margin</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span> auto;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.mastodon-comment</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">display</span><span style="color:#f92672">:</span> grid;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">grid-gap</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">em</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">grid-template-columns</span><span style="color:#f92672">:</span> auto <span style="color:#ae81ff">1</span><span style="color:#66d9ef">fr</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.avatar</span> <span style="color:#f92672">img</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">border-radius</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span><span style="color:#e6db74">#{</span>$prefix<span style="color:#e6db74">}</span>border-radius);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">position</span><span style="color:#f92672">:</span> relative;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">6</span><span style="color:#66d9ef">px</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">48</span><span style="color:#66d9ef">px</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.content</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.author-wrapper</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.author</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.author-name</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">font-weight</span><span style="color:#f92672">:</span> bold;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">&</span><span style="color:#a6e22e">:hover</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>hbs-link-color);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text-decoration</span><span style="color:#f92672">:</span> none;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">.author-name</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>hbs-link-hover-color);
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text-decoration</span><span style="color:#f92672">:</span> underline;
|
|||
|
|
</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:#a6e22e">.date</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">float</span><span style="color:#f92672">:</span> right;
|
|||
|
|
</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></span></code></pre></div></div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 id="javascript" data-numberify>JavaScript<a class="anchor ms-1" href="#javascript"></a></h3>
|
|||
|
|
<p>Es wird die Bibliothek <a class='urlextern' href="https://github.com/cure53/DOMPurify">DomPurify</a> benötigt. Die steht unter einer freien <a class='urlextern' href="https://github.com/cure53/DOMPurify/blob/main/LICENSE">Lizenz</a> zur Verfügung und kann somit verwendet werden.</p>
|
|||
|
|
<p>Die Datei habe ich heruntergeladen und nach <code>static/my_js/purify.min.js</code> abgelegt.</p>
|
|||
|
|
<h3 id="header-auf-dem-webserver" data-numberify>Header (auf dem Webserver)<a class="anchor ms-1" href="#header-auf-dem-webserver"></a></h3>
|
|||
|
|
<p>Auf meinem Server sind die Header für den Blog relativ streng eingestellt.</p>
|
|||
|
|
<p>Damit JavaScript Daten von extern laden darf, musste der Header in der Nginx-Konfiguration 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-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">Eadd_header</span> <span style="color:#e6db74">Content-Security-Policy</span> <span style="color:#e6db74">"default-src</span> <span style="color:#e6db74">'none'</span>; <span style="color:#66d9ef">font-src</span> <span style="color:#e6db74">'self'</span>; <span style="color:#66d9ef">connect-src</span> <span style="color:#e6db74">'self'</span>; <span style="color:#66d9ef">form-action</span> <span style="color:#e6db74">'self'</span>; <span style="color:#66d9ef">img-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">data:</span> <span style="color:#e6db74">https://*.natenom.com</span> <span style="color:#e6db74">https://*.natenom.de</span>; <span style="color:#66d9ef">media-src</span> <span style="color:#e6db74">https://*.natenom.com</span> <span style="color:#e6db74">https://*.natenom.de</span>; <span style="color:#66d9ef">script-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">'unsafe-inline'</span>; <span style="color:#66d9ef">style-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">'unsafe-inline'</span>; <span style="color:#66d9ef">frame-ancestors</span> <span style="color:#e6db74">'none'</span>;<span style="color:#66d9ef">"</span>;
|
|||
|
|
</span></span></code></pre></div><p>geändert werden nach:</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-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">Eadd_header</span> <span style="color:#e6db74">Content-Security-Policy</span> <span style="color:#e6db74">"default-src</span> <span style="color:#e6db74">'none'</span>; <span style="color:#66d9ef">font-src</span> <span style="color:#e6db74">'self'</span>; <span style="color:#66d9ef">connect-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">https://social.anoxinon.de</span>; <span style="color:#66d9ef">form-action</span> <span style="color:#e6db74">'self'</span>; <span style="color:#66d9ef">img-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">https://social.anoxinon.de</span> <span style="color:#e6db74">data:</span> <span style="color:#e6db74">https://*.natenom.com</span> <span style="color:#e6db74">https://*.natenom.de</span>; <span style="color:#66d9ef">media-src</span> <span style="color:#e6db74">https://*.natenom.com</span> <span style="color:#e6db74">https://*.natenom.de</span>; <span style="color:#66d9ef">script-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">'unsafe-inline'</span>; <span style="color:#66d9ef">style-src</span> <span style="color:#e6db74">'self'</span> <span style="color:#e6db74">'unsafe-inline'</span>; <span style="color:#66d9ef">frame-ancestors</span> <span style="color:#e6db74">'none'</span>;<span style="color:#66d9ef">"</span>;
|
|||
|
|
</span></span></code></pre></div><p>Sowohl im Bereich <code>connect-src</code> als auch bei <code>img-src</code> musste die Domain der Mastodon-Instanz eingetragen werden.</p>
|
|||
|
|
<h3 id="datenschutz" data-numberify>Datenschutz<a class="anchor ms-1" href="#datenschutz"></a></h3>
|
|||
|
|
<p>Die Informationen zum Datenschutz wurden um den Bereich “Kommentare” erweitert, <a href="/ueber/datenschutz/#kommentare">siehe hier</a>.</p>
|
|||
|
|
<h2 id="was-noch-fehlt" data-numberify>Was noch fehlt<a class="anchor ms-1" href="#was-noch-fehlt"></a></h2>
|
|||
|
|
<h3 id="tröts-für-kommentarfunktion-nicht-automatisch-löschen-lassen" data-numberify>Tröts für Kommentarfunktion nicht automatisch löschen lassen<a class="anchor ms-1" href="#tröts-für-kommentarfunktion-nicht-automatisch-löschen-lassen"></a></h3>
|
|||
|
|
<p>Meine Mastodon-Tröts werden bei mir derzeit nach einem Monat automatisch gelöscht. Kommentare würden so nach dieser Zeit nicht mehr angezeigt werden.</p>
|
|||
|
|
<p>Es ist jedoch in Mastodon einstellbar, dass bestimmte Tröts nicht gelöscht werden, z. B. solche, die man zu den Lesezeichen hinzugefügt hat. Dadurch könnte ich die Lesezeichen-Funktion aber nicht mehr für andere Inhalte benutzen.</p>
|
|||
|
|
<p>Eine Alternative wäre, die Automatisch-Löschen-Funktion von Mastodon nicht mehr zu verwenden und stattdessen ein externes Script (<a href="/2021/03/alte-toots-eines-mastodon-accounts-automatisiert-loeschen/">siehe hier</a>). Dieses Tool könnte man so konfigurieren, dass es keine Toots löscht, die ein bestimmtes Hashtag beinhalten.</p>
|
|||
|
|
<h3 id="eingerückt" data-numberify>Eingerückt<a class="anchor ms-1" href="#eingerückt"></a></h3>
|
|||
|
|
<p>Es wäre schön, wenn auch auf der Seite erkennbar wäre, auf welchen Mastodon-Tröt genau jemand geantwortet hat. Die Reihenfolge passt zwar schon, aber die Einrückungen fehlen noch.</p>]]></content:encoded></item><item><title>Altes, archiviertes wiki.natenom.de verbessert</title><link>https://natenom.de/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/</link><pubDate>Thu, 27 Oct 2022 18:00:45 +0200</pubDate><guid>https://natenom.de/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/</guid><description><![CDATA[<p>Ich habe Anfang des Jahres mein <a href="https://wikiarchiv.natenom.de/">altes Wiki (wikiarchiv.natenom.de)</a>, das mit DokuWiki betrieben wurde, in eine statische Website umgewandelt und somit archiviert. Die meisten Bereiche habe ich in mein <a href="https://wiki.natenom.de/">neues Wiki (wiki.natenom.de)</a> migriert.</p>
|
|||
|
|
<p>Jedoch waren der Einfachheit halber bis heute auch die migrierten Bereiche weiterhin im alten Wiki auf Dateiebene hinterlegt, aber wegen der Weiterleitungen nicht abrufbar.</p>
|
|||
|
|
<p>Die Weiterleitungen führten für migrierte Inhalte via HTTP Status Code 301 zum neuen Wiki.</p>
|
|||
|
|
<p>Heute war es endlich an der Zeit, die alten Inhalte aus dem archivierten, alten Wiki restlos zu löschen.</p>
|
|||
|
|
<p>Damit ich auch in Zukunft noch nachlesen kann, wie ich das gemacht hatte oder falls jemand das selbst für ein eigenes Wiki machen möchte, habe ich hier die Anleitung dazu bereit gestellt.</p>]]></description><content:encoded><![CDATA[<p>Ich habe Anfang des Jahres mein <a href="https://wikiarchiv.natenom.de/">altes Wiki (wikiarchiv.natenom.de)</a>, das mit DokuWiki betrieben wurde, in eine statische Website umgewandelt und somit archiviert. Die meisten Bereiche habe ich in mein <a href="https://wiki.natenom.de/">neues Wiki (wiki.natenom.de)</a> migriert.</p>
|
|||
|
|
<p>Jedoch waren der Einfachheit halber bis heute auch die migrierten Bereiche weiterhin im alten Wiki auf Dateiebene hinterlegt, aber wegen der Weiterleitungen nicht abrufbar.</p>
|
|||
|
|
<p>Die Weiterleitungen führten für migrierte Inhalte via HTTP Status Code 301 zum neuen Wiki.</p>
|
|||
|
|
<p>Heute war es endlich an der Zeit, die alten Inhalte aus dem archivierten, alten Wiki restlos zu löschen.</p>
|
|||
|
|
<p>Damit ich auch in Zukunft noch nachlesen kann, wie ich das gemacht hatte oder falls jemand das selbst für ein eigenes Wiki machen möchte, habe ich hier die Anleitung dazu bereit gestellt.</p>
|
|||
|
|
<h2 id="überlegungen-zum-entfernen-der-migrierten-bereiche-aus-dem-archivierten-wiki" data-numberify>Überlegungen zum Entfernen der migrierten Bereiche aus dem archivierten Wiki<a class="anchor ms-1" href="#überlegungen-zum-entfernen-der-migrierten-bereiche-aus-dem-archivierten-wiki"></a></h2>
|
|||
|
|
<p>Ein paar Gedanken dazu, ob es sinnvoll ist, die migrierten Bereiche zu entfernen:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Im <a href="https://wikiarchiv.natenom.de/ueber/seitenindex">Seitenindex</a> im Wiki und in der Sitemap fehlen die migrierten URLs. Diese wurden aber sowieso schon seit Monaten mit 301 weitergeleitet aufs neue Wiki und bleiben weiterhin via nginx-Konfiguration im Webserver, sodass auch alte Verlinkungen auf migrierte Inhalte weiterhin richtig zum neuen Wiki auflösen.</li>
|
|||
|
|
<li>Man kann jetzt nur nicht mehr im alten Wiki stöbern sondern muss dazu ins neue Wiki.</li>
|
|||
|
|
<li>Für Suchmaschinen ist es vermutlich besser, weil die meisten migrierten Inhalte nicht mehr nur aus Weiterleitungen bestehen. Zudem gucken Suchmaschinen dank 301 sowieso seit Langem nur noch im neuen Wiki.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Wenn jemand hierzu Gedanken hat, bitte anschreiben. 😊</p>
|
|||
|
|
<h2 id="was-wird-in-dieser-anleitung-gemacht" data-numberify>Was wird in dieser Anleitung gemacht?<a class="anchor ms-1" href="#was-wird-in-dieser-anleitung-gemacht"></a></h2>
|
|||
|
|
<p>Auf dem lokalen Rechner wird:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>der Webserver Nginx installiert.</li>
|
|||
|
|
<li>eine temporäre lokale Domain eingerichtet und verwendet.</li>
|
|||
|
|
<li>das Wiki konfiguriert.</li>
|
|||
|
|
<li>das Wiki via wget heruntergeladen und das Ergebnis modifiziert.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Schließlich wird das Ergebnis auf den öffentlichen Webserver (wiki.natenom.de) hochgeladen und bleibt dort auf ewig liegen und wird nie wieder angetastet.</p>
|
|||
|
|
<h2 id="vorbereitungen" data-numberify>Vorbereitungen<a class="anchor ms-1" href="#vorbereitungen"></a></h2>
|
|||
|
|
<p>Als Basis habe ich meine damalige Dokumentation verwendet, die beschreibt, wie man ein DokuWiki in eine statische Website umwandelt, siehe <a href="https://natenom.de/2022/03/dokuwiki-in-statische-website-umwandeln/">hier</a>.</p>
|
|||
|
|
<h3 id="installation-der-benötigen-debian-pakete" data-numberify>Installation der benötigen Debian-Pakete<a class="anchor ms-1" href="#installation-der-benötigen-debian-pakete"></a></h3>
|
|||
|
|
<pre><code>apt install nginx php8.1 php-fpm php8.1-xml
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="lokale-domain-fürs-wiki" data-numberify>Lokale Domain fürs Wiki<a class="anchor ms-1" href="#lokale-domain-fürs-wiki"></a></h3>
|
|||
|
|
<p>Man kann zwar auch die richtige Domain verwenden und diese auf den lokal Rechner verweisen lassen aber das birgt Probleme, falls man z. B. <a class='urlextern' href="https://de.wikipedia.org/wiki/HTTP_Strict_Transport_Security">HSTS</a> verwendet. Dann wird man jedes Mal auf https weitergeleitet, was hier in dieser Anleitung aber nicht eingerichtet wird.</p>
|
|||
|
|
<p>Die lokale Domain habe ich einfach mal auf wiki.natenom.me festgelegt und verwende sie hier in allen Shell-Kommandos entsprechend.</p>
|
|||
|
|
<p>In die Datei <code>/etc/hosts</code> trägt man dazu ein:</p>
|
|||
|
|
<pre><code>127.0.0.1 wiki.natenom.me
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="lokalen-webserver-konfigurieren" data-numberify>Lokalen Webserver konfigurieren<a class="anchor ms-1" href="#lokalen-webserver-konfigurieren"></a></h3>
|
|||
|
|
<p>Hier die Konfiguration für den lokalen Nginx-Server:</p>
|
|||
|
|
<div class="shortcode-details">
|
|||
|
|
<details>
|
|||
|
|
<summary>Datei /etc/nginx/sites-enabled/default</summary>
|
|||
|
|
<div class="shortcode-details content"><div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
|
|||
|
|
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
|
|||
|
|
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">27
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">28
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">29
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">30
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">31
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">32
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">33
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">34
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">35
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">36
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">37
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">38
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">39
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">40
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">41
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">42
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">43
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">44
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">45
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">46
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">47
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">48
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">49
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">50
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">51
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">52
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">53
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">54
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">55
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">56
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">57
|
|||
|
|
</span></code></pre></td>
|
|||
|
|
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
|
|||
|
|
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-nginx" data-lang="nginx"><span style="display:flex;"><span><span style="color:#66d9ef">server</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">listen</span> <span style="color:#ae81ff">80</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">server_name</span> <span style="color:#e6db74">wiki.natenom.me</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">autoindex</span> <span style="color:#66d9ef">off</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">index</span> <span style="color:#e6db74">index.html</span> <span style="color:#e6db74">index.htm</span> <span style="color:#e6db74">index.php</span> <span style="color:#e6db74">doku.php</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">root</span> <span style="color:#e6db74">/home/wiki.natenom.de/htdocs/</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/_media/favicon.ico</span>$ <span style="color:#e6db74">/_cdn/images/natenom_favicon_16x16.ico</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/_media/wiki/apple-touch-icon.png</span>$ <span style="color:#e6db74">/_cdn/images/natenom_favicon_512x512.png</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/favicon.png</span>$ <span style="color:#e6db74">/_cdn/images/natenom_favicon_16x16.png</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">location</span> <span style="color:#e6db74">/</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">try_files</span> $uri $uri/ <span style="color:#e6db74">@dokuwiki</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:#f92672">location</span> ~ <span style="color:#e6db74">^/lib.*\.(gif|png|ico|jpg)$</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">expires</span> <span style="color:#e6db74">96h</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:#f92672">location</span> = <span style="color:#e6db74">/robots.txt</span> { <span style="color:#f92672">access_log</span> <span style="color:#66d9ef">off</span>; <span style="color:#f92672">log_not_found</span> <span style="color:#66d9ef">off</span>; }
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">location</span> ~ <span style="color:#e6db74">/\.</span> { <span style="color:#f92672">access_log</span> <span style="color:#66d9ef">off</span>; <span style="color:#f92672">log_not_found</span> <span style="color:#66d9ef">off</span>; <span style="color:#f92672">deny</span> <span style="color:#e6db74">all</span>; }
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">location</span> ~ <span style="color:#e6db74">~$</span> { <span style="color:#f92672">access_log</span> <span style="color:#66d9ef">off</span>; <span style="color:#f92672">log_not_found</span> <span style="color:#66d9ef">off</span>; <span style="color:#f92672">deny</span> <span style="color:#e6db74">all</span>; }
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">location</span> <span style="color:#e6db74">@dokuwiki</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/sitemap.xml.gz</span> <span style="color:#e6db74">/?do=sitemap</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/_media/(.*)</span> <span style="color:#e6db74">/lib/exe/fetch.php?media=</span>$1 <span style="color:#e6db74">last</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/_detail/(.*)</span> <span style="color:#e6db74">/lib/exe/detail.php?media=</span>$1 <span style="color:#e6db74">last</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/_export/([^/]+)/(.*)</span> <span style="color:#e6db74">/doku.php?do=export_</span>$1&id=$2 <span style="color:#e6db74">last</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">rewrite</span> <span style="color:#e6db74">^/(.*)</span> <span style="color:#e6db74">/doku.php?id=</span>$1 <span style="color:#e6db74">last</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:#f92672">location</span> ~ <span style="color:#e6db74">\.php$</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">try_files</span> $uri =<span style="color:#ae81ff">404</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_pass</span> <span style="color:#e6db74">unix:/var/run/php/php8.1-fpm.sock</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_index</span> <span style="color:#e6db74">index.php</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_param</span> <span style="color:#e6db74">SCRIPT_FILENAME</span> $document_root$fastcgi_script_name;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">include</span> <span style="color:#e6db74">/etc/nginx/fastcgi_params</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_param</span> <span style="color:#e6db74">QUERY_STRING</span> $query_string;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_param</span> <span style="color:#e6db74">REQUEST_METHOD</span> $request_method;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_param</span> <span style="color:#e6db74">CONTENT_TYPE</span> $content_type;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_param</span> <span style="color:#e6db74">CONTENT_LENGTH</span> $content_length;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_intercept_errors</span> <span style="color:#66d9ef">on</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_ignore_client_abort</span> <span style="color:#66d9ef">off</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_connect_timeout</span> <span style="color:#ae81ff">60</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_send_timeout</span> <span style="color:#ae81ff">180</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_read_timeout</span> <span style="color:#ae81ff">180</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_buffer_size</span> <span style="color:#ae81ff">128k</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_buffers</span> <span style="color:#ae81ff">4</span> <span style="color:#ae81ff">256k</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_busy_buffers_size</span> <span style="color:#ae81ff">256k</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">fastcgi_temp_file_write_size</span> <span style="color:#ae81ff">256k</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:#f92672">location</span> ~ <span style="color:#e6db74">/(data|conf|bin|inc)/</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">deny</span> <span style="color:#e6db74">all</span>;
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span>}
|
|||
|
|
</span></span></code></pre></td></tr></table>
|
|||
|
|
</div>
|
|||
|
|
</div></div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcode-notice warnung">
|
|||
|
|
<div class="shortcode-notice-title warnung">
|
|||
|
|
Warnung</div>
|
|||
|
|
<div class="notice-content">In Zeile 35 muss man den genauen Pfad zum php-fpm anpassen, falls man eine andere Version verwendet.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="altes-backup-des-wikis-ins-lokale-webserver-verzeichnis-kopieren" data-numberify>Altes Backup des Wikis ins lokale Webserver-Verzeichnis kopieren<a class="anchor ms-1" href="#altes-backup-des-wikis-ins-lokale-webserver-verzeichnis-kopieren"></a></h3>
|
|||
|
|
<p>Ich habe natürlich noch ein Backup des gesamten htdocs-Verzeichnisses meines alten Wikis. Dieses habe ich nach <code>/home/wiki.natenom.me/htdocs/</code> kopiert und anschließend dem Benutzer <code>www-data</code> und der zugehörigen Gruppe zugänglich gemacht.</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>chown -R www-data: /home/wiki.natenom.de/htdocs/
|
|||
|
|
</span></span></code></pre></div><p>Das Wiki sollte jetzt per Browser benutzbar sein via <code>http://wiki.natenom.me/</code>.</p>
|
|||
|
|
<h2 id="lokales-wiki-konfigurieren" data-numberify>Lokales Wiki konfigurieren<a class="anchor ms-1" href="#lokales-wiki-konfigurieren"></a></h2>
|
|||
|
|
<h3 id="topbar" data-numberify>TopBar<a class="anchor ms-1" href="#topbar"></a></h3>
|
|||
|
|
<p>Um deutlich zu zeigen, dass dieses Wiki archiviert wurde, habe ich die <a class='urlextern' href="https://www.dokuwiki.org/tips:topbar">TopBar-Funktion</a> von DokuWiki genutzt, sodass oben am Rand auf jeder Seite dieser Text angezeigt wird:</p>
|
|||
|
|
<p><a href="2022-10-27-screenshot-wiki-topbar.webp"></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-topbar.webp" />
|
|||
|
|
<img alt="" src="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-topbar.webp" title="" width="663" height="19" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<p>Der Quelltext der Seite <code>/topbar</code> ist:</p>
|
|||
|
|
<pre tabindex="0"><code class="language-dokuwiki" data-lang="dokuwiki">//Dieses Wiki wurde archiviert und wird nicht mehr gepflegt. Mein neues Wiki gibt es auf [[natwikic>|wiki.natenom.com]]. Details auf der [[:|Startseite]].//
|
|||
|
|
</code></pre><h3 id="feeds" data-numberify>Feeds<a class="anchor ms-1" href="#feeds"></a></h3>
|
|||
|
|
<p>Ich habe dieses Mal die Feeds des Wikis deaktiviert.</p>
|
|||
|
|
<h3 id="indexmenu" data-numberify>Indexmenu<a class="anchor ms-1" href="#indexmenu"></a></h3>
|
|||
|
|
<p>Das Indexmenü habe ich dieses Mal so eingestellt, dass weiterhin JavaScript genutzt wird. Der Quelltext von <code>/wiki/sidebar</code> dazu ist:</p>
|
|||
|
|
<pre tabindex="0"><code class="language-dokuwiki" data-lang="dokuwiki">**Navigation**
|
|||
|
|
{{indexmenu>..#2|js#indextheme useheading navbar tsort noscroll nsort notoc nomenu }}
|
|||
|
|
\\
|
|||
|
|
----
|
|||
|
|
* [[:datenschutz|Datenschutz]]
|
|||
|
|
* [[nblog>impressum/|Impressum]]
|
|||
|
|
* [[:lizenz|Lizenz]]
|
|||
|
|
* [[:ueber|Über]]
|
|||
|
|
</code></pre><p>Parameter erklärt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Die <code>#2</code> bewirkt, dass alle Seiten bis zur zweiten Ebene immer geöffnet sind. So sieht man auch mit deaktiviertem JavaScript noch die großen beiden Bereiche Minecraft und Mumble des Wikis in der Navigation.</li>
|
|||
|
|
<li><code>nomenu</code> deaktiviert das Rechtsklick-Menü im Indexmenüs.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Da die Grafiken für das Indexmenü später nicht mit wget heruntergeladen werden, muss man sie manuell in <code>/lib/plugins/indexmenu/images/</code> des heruntergeladenen Wikis platzieren. Die passenden Bilder gibt es in <code>/lib/plugins/indexmenu/images/</code> des Webservers. Da ich das Default-Theme verwende, werden nur die im Hauptverzeichnis benötigt und dazu das Verzeichnis <code>indextheme/</code>.</p>
|
|||
|
|
<div class="shortcode-details">
|
|||
|
|
<details>
|
|||
|
|
<summary>Verzeichnisauflistung der benötigten Dateien:</summary>
|
|||
|
|
<div class="shortcode-details content"><pre tabindex="0"><code> .
|
|||
|
|
├── close.gif
|
|||
|
|
├── empty.gif
|
|||
|
|
├── indexmenu_toolbar.png
|
|||
|
|
├── indextheme
|
|||
|
|
│ ├── base.gif
|
|||
|
|
│ ├── empty.gif
|
|||
|
|
│ ├── folder.gif
|
|||
|
|
│ ├── folderh.gif
|
|||
|
|
│ ├── folderhopen.gif
|
|||
|
|
│ ├── folderopen.gif
|
|||
|
|
│ ├── info.txt
|
|||
|
|
│ ├── joinbottom.gif
|
|||
|
|
│ ├── join.gif
|
|||
|
|
│ ├── line.gif
|
|||
|
|
│ ├── minusbottom.gif
|
|||
|
|
│ ├── minus.gif
|
|||
|
|
│ ├── page.gif
|
|||
|
|
│ ├── plusbottom.gif
|
|||
|
|
│ └── plus.gif
|
|||
|
|
├── larrow.gif
|
|||
|
|
├── msort.gif
|
|||
|
|
├── rarrow.gif
|
|||
|
|
└── toc_bullet.gif
|
|||
|
|
</code></pre></div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcode-notice warnung">
|
|||
|
|
<div class="shortcode-notice-title warnung">
|
|||
|
|
Warnung</div>
|
|||
|
|
<div class="notice-content">Damit das Indexmenü mit JavaScript funktioniert, darf solch ein Header nicht im Webserver gesetzt sein: <code>add_header X-Content-Type-Options nosniff</code>.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="bereiche-entfernen" data-numberify>Bereiche entfernen<a class="anchor ms-1" href="#bereiche-entfernen"></a></h3>
|
|||
|
|
<p>Jetzt werden die bereits migrierten Themenbereiche bzw. Namensräume aus dem Wiki entfernt.</p>
|
|||
|
|
<p>In meinem Fall ist das alles innerhalb von <code>/data/</code>, das nicht zu Mumble, Minecraft oder dem Wiki selbst gehört.</p>
|
|||
|
|
<p>Dazu löscht man die Namensräume (Verzeichnisse) und Dateien in diesen Bereichen:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>/data/cache/</code></li>
|
|||
|
|
<li><code>/data/media/</code></li>
|
|||
|
|
<li><code>/data/media_attic/</code></li>
|
|||
|
|
<li><code>/data/media_meta/</code></li>
|
|||
|
|
<li><code>/data/meta/</code></li>
|
|||
|
|
<li><code>/data/pages/</code></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Danach könnte man sich im Wiki anmelden und den Suchindex neu erstellen lassen, falls man die Suche noch testweise verwenden möchte. Für die archivierte Seite ist der Suchindex jedoch irrelevant, da die Suche PHP benötigt und abgeschaltet sein wird.</p>
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content">Da ich auch später noch in der Lage sein möchte, lokal im Webserver sowohl auf das komplette Wiki als auch auf das reduzierte Wiki (nur noch die im alten Wiki verbliebenen Themenbereiche <code>Mumble</code>, <code>Minecraft</code>, <code>Wiki</code> und <code>Über</code>) zugreifen und Änderungen vornehmen zu können, habe ich das wie folgt gelöst: Es gibt zwei Varianten des Verzeichnisses <code>/data/</code>. Das passende binde ich dann auf dem lokalen Webserver per Symlink ein.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="optional-history-entfernen" data-numberify>Optional History entfernen<a class="anchor ms-1" href="#optional-history-entfernen"></a></h3>
|
|||
|
|
<p>Da mit dieser Anleitung hier immer nur der aktuelle Status einer Seite heruntergeladen wird und die History deaktiviert ist, kann man diese komplett aus dem Wiki entfernen. Oder es einfach sein lassen, weil es darauf keinen Zugriff geben wird.</p>
|
|||
|
|
<p>Ich will es trotzdem hier erwähnt lassen, weil man so Daten löschen kann, die sowieso keinen Zweck mehr haben auf einer statischen Website.</p>
|
|||
|
|
<p>Dazu das Verzeichnis <code>/data/attic/</code> leeren, aber nicht löschen. Genauso kann man mit <code>/data/media_attic/</code>, mit <code>/data/media_meta/</code> und mit <code>/data/meta/</code> verfahren.</p>
|
|||
|
|
<h2 id="wiki-vom-lokalen-webserver-herunterladen" data-numberify>Wiki vom lokalen Webserver herunterladen<a class="anchor ms-1" href="#wiki-vom-lokalen-webserver-herunterladen"></a></h2>
|
|||
|
|
<p>Nun wird das Wiki vom lokalen Webserver heruntergeladen, die Startseite verfügbar gemacht, die sonst fehlt und die Sitemap heruntergeladen.</p>
|
|||
|
|
<div class="shortcode-codewarning">
|
|||
|
|
<details>
|
|||
|
|
<summary class="shortcode-codewarning summary">Vorsicht beim Ausführen von Shellkommandos via Copy & Paste</summary>
|
|||
|
|
<div class="shortcode-codewarning content"><p>
|
|||
|
|
Man sollte Shellkommandos aus Anleitungen, die in einem Browser angezeigt werden, grundsätzlich nicht einfach ungeprüft in die Shell einfügen und ausführen.</p>
|
|||
|
|
<p>Denn es ist möglich, Teile des Codes z. B. via CSS zu verstecken. Diese Teile werden aber trotzdem kopiert und landen auch in der Shell, wo sie ausgeführt werden.</p>
|
|||
|
|
<p>Besser ist es, die Kommandos erst in einen lokalen Texteditor einzufügen und dort zu prüfen, bevor man die ausführt.<p>
|
|||
|
|
<p>Kopiere doch mal dieses Beispiel und füge es – in die Shell (!NEIN) – in einen Editor ein:</p>
|
|||
|
|
<p><code>echo "Befehl 1"; <span class="shortcode-codewarning hidden">echo "Befehl 2. Im Browser unsichtbar, da font-size per CSS auf 0 gestellt wurde. Hier könnte z. B. die Festplatte gelöscht oder andere Dummheiten gemacht werden."; </span>echo "Befehl 3"</code></p></div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
<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>mkdir wiki_download
|
|||
|
|
</span></span><span style="display:flex;"><span>cd wiki_download
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>wget --recursive --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names<span style="color:#f92672">=</span>unix --no-parent --reject-regex <span style="color:#e6db74">'do='</span> -erobots<span style="color:#f92672">=</span>off --domains wiki.natenom.me http://wiki.natenom.me
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>cd wiki.natenom.me
|
|||
|
|
</span></span><span style="display:flex;"><span>cp index.html start.html
|
|||
|
|
</span></span><span style="display:flex;"><span>wget http://wiki.natenom.me/sitemap.xml.gz
|
|||
|
|
</span></span></code></pre></div><h2 id="nachbearbeitung" data-numberify>Nachbearbeitung<a class="anchor ms-1" href="#nachbearbeitung"></a></h2>
|
|||
|
|
<h3 id="lokal-verwendete-domain-durch-die-spätere-richtige-domain-ersetzen" data-numberify>Lokal verwendete Domain durch die spätere, richtige Domain ersetzen<a class="anchor ms-1" href="#lokal-verwendete-domain-durch-die-spätere-richtige-domain-ersetzen"></a></h3>
|
|||
|
|
<p>Jetzt ersetzt man die massenhaft im heruntergeladenen Wiki hinterlegte lokal Domain durch die spätere, richtige Domain, die online verwendet wird.</p>
|
|||
|
|
<p>Zuerst rekursiv in allen Dateien via <code>sed</code> und dann explizit in der <code>sitemap.xml.gz</code> und auch noch in <code>lib/exe/manifest.php</code>, wo aus irgendwelchen Gründen nur <code>localhost</code> steht.</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 wiki_download
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>shopt -s globstar ; <span style="color:#66d9ef">for</span> file in **/*; <span style="color:#66d9ef">do</span> test -f <span style="color:#e6db74">"</span><span style="color:#e6db74">${</span>file<span style="color:#e6db74">}</span><span style="color:#e6db74">"</span> <span style="color:#f92672">&&</span> sed -i -e <span style="color:#e6db74">'s#http://wiki.natenom.me/#https://wiki.natenom.de/#g'</span> <span style="color:#e6db74">"</span><span style="color:#e6db74">${</span>file<span style="color:#e6db74">}</span><span style="color:#e6db74">"</span>; <span style="color:#66d9ef">done</span>
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>gunzip sitemap.xml.gz
|
|||
|
|
</span></span><span style="display:flex;"><span>sed -i -e <span style="color:#e6db74">'s#http://localhost/./#https://wiki.natenom.de/#g'</span> sitemap.xml
|
|||
|
|
</span></span><span style="display:flex;"><span>gzip sitemap.xml
|
|||
|
|
</span></span><span style="display:flex;"><span>
|
|||
|
|
</span></span><span style="display:flex;"><span>sed -i -e <span style="color:#e6db74">'s#http:\\/\\/wiki.natenom.me\\/#https:\\/\\/wiki.natenom.de\\/#g'</span> lib/exe/manifest.php
|
|||
|
|
</span></span></code></pre></div><h3 id="eine-404-seite" data-numberify>Eine 404-Seite<a class="anchor ms-1" href="#eine-404-seite"></a></h3>
|
|||
|
|
<p>Zusätzlich habe ich noch eine 404-Seite hinzugefügt, die erwähnt, dass das Wiki archiviert wurde. Diese legt man im Hauptverzeichnis des heruntergeladenen Wikis als Datei <code>404.html</code> ab und verweist in der Nginx-Konfiguration auf diese via <code>error_page 404 /404.html;</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-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">html</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">body</span>><<span style="color:#f92672">h1</span>>404 - File not found</<span style="color:#f92672">h1</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>>Das Wiki auf wiki.natenom.de wurde archiviert und in eine <<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://natenom.de/2022/03/dokuwiki-in-statische-website-umwandeln/"</span>>statische Website umgewandelt</<span style="color:#f92672">a</span>>.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>>Daher gibt es an vielen Stellen, f&uuml;r die PHP notwendig w&auml;re, eine 404 (File not found) Fehlermeldung.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span><<span style="color:#f92672">p</span>>Du kannst eine externe Suchmaschine benutzen, um Inhalte zu finden.</<span style="color:#f92672">p</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">body</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>>
|
|||
|
|
</span></span></code></pre></div><h2 id="packen-und-hochladen" data-numberify>Packen und hochladen<a class="anchor ms-1" href="#packen-und-hochladen"></a></h2>
|
|||
|
|
<p>Das lokal heruntergeladene Wiki kann jetzt gepackt und hochgeladen werden.</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 wiki_download
|
|||
|
|
</span></span><span style="display:flex;"><span>zip -r wiki.natenom.me.zip wiki.natenom.me/
|
|||
|
|
</span></span></code></pre></div><p>Dann lädt man es, wie auch immer, auf den Webserver hoch und entpackt es in das entsprechende htdocs-Verzeichnis, setzt die Berechtigungen passend und startet den Webserver neu.</p>
|
|||
|
|
<h2 id="ergebnis" data-numberify>Ergebnis<a class="anchor ms-1" href="#ergebnis"></a></h2>
|
|||
|
|
<p>So sah die Startseite des archivierten Wikis bisher aus:</p>
|
|||
|
|
<p><a href="2022-10-27-screenshot-wiki-alt.webp"></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-alt_huc5aeacd14e81d54f7e5512bd79803b64_146634_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="521" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<p>Und so sieht sie jetzt aus:</p>
|
|||
|
|
<p><a href="2022-10-27-screenshot-wiki-neu-cover.webp"></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover_hu8bfc3922ee848a2232e2385a2c190180_175540_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="506" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<p>Und so sieht es ohne JavaScript aus:</p>
|
|||
|
|
<p><a href="2022-10-27-screenshot-wiki-neu-ohne-js.webp"></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-ohne-js_hu26fdafb3cc1953cfb6275eef5a30d42c_182906_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="506" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<p>Und so, falls der Browser so eingestellt ist, dass das Dark-Theme bevorzugt wird:</p>
|
|||
|
|
<p><a href="2022-10-27-screenshot-wiki-neu-dark.webp"></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-dark_hu79fcf02a4da2f92f4b8e4bdc665d38f1_183448_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="506" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<h2 id="anmerkungen-für-mich" data-numberify>Anmerkungen für mich<a class="anchor ms-1" href="#anmerkungen-für-mich"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Im Gegensatz zu früher heißt <code>/.cdn/</code> jetzt <code>/_cdn/</code> und wurde entsprechend in den Konfigurationen angepasst.</li>
|
|||
|
|
</ul>]]></content:encoded><enclosure url="https://natenom.de/2022/10/altes-archiviertes-wiki.natenom.de-verbessert/2022-10-27-screenshot-wiki-neu-cover.webp" length="175540" type="image/webp"/></item><item><title>Verbesserte Suchfunktion im Blog</title><link>https://natenom.de/2022/09/verbesserte-suchfunktion-im-blog/</link><pubDate>Tue, 27 Sep 2022 20:56:56 +0200</pubDate><guid>https://natenom.de/2022/09/verbesserte-suchfunktion-im-blog/</guid><description><p>Es gab wieder ein Update für das hier verwendete <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap">Hugo-Theme Bootstrap</a>, das die Suchfunktion verbessert hat.</p></description><content:encoded><![CDATA[<p>Es gab wieder ein Update für das hier verwendete <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap">Hugo-Theme Bootstrap</a>, das die Suchfunktion verbessert hat.</p>
|
|||
|
|
<h2 id="optionen" data-numberify>Optionen<a class="anchor ms-1" href="#optionen"></a></h2>
|
|||
|
|
<p>Es gibt ein paar neue Optionen für die Suche. Die vollständige Liste gibt es <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap/blob/master/exampleSite/config/_default/params.toml#L170">hier</a>.</p>
|
|||
|
|
<p>Die Beschreibung der Optionen gibt es auf der <a class='urlextern' href="https://fusejs.io/api/options.html">Website von fuse.js</a>.</p>
|
|||
|
|
<h3 id="index-und-meta" data-numberify>Index und Meta<a class="anchor ms-1" href="#index-und-meta"></a></h3>
|
|||
|
|
<p>Statt einer großen Indexdatei mit allen Blogbeiträgen (hier immerhin um 2500) gibt es jetzt mehrere davon. Jede enthält per Voreinstellung 1000 Blogbeiträge, es sind als insgesamt 3 Dateien (<a href="/search/index.1.json">index1.json</a>, <a href="/search/index.2.json">index2.json</a>, …).</p>
|
|||
|
|
<p>Die Option dazu ist <code>search.indexPaginate</code>.</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Screenshot aus Firefox. Zeigt das Laden der Dateien index1.json bis index5.json und meta.json." srcset="/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-index.json-loading_hu75864effccbc2559933d4fa75efdf32f_31012_816x0_resize_q95_h2_catmullrom_3.webp" title="" loading="lazy" width="816" height="125" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Dazu gibt es eine weitere Datei <a href="/search/meta.json">meta.json</a>, die alle Kategorien und alle Tags enthält, die im Blog verwendet werden.</p>
|
|||
|
|
<h3 id="preload" data-numberify>Preload<a class="anchor ms-1" href="#preload"></a></h3>
|
|||
|
|
<p>Neu ist z. B. <code>search.indexPreload</code>, das per Voreinstellung auf <code>true</code> gesetzt ist. Ich habe das auf <code>false</code> gesetzt. Nach meinem Verständnis werden die Indexdateien dann nicht geladen, wenn JavaScript nicht ausgeführt wird und man die Suchseite aufruft.</p>
|
|||
|
|
<p>Auf <code>true</code> gesetzt werden die Indexdateien direkt in der Suchseite eingebunden und auch ohne JavaScript vorgeladen. Das sind insgesamt aber stattliche 1,6 MiB. Bei einer langsamen Internetverbindung ist das viel.</p>
|
|||
|
|
<h2 id="erst-buggy-und-jetzt-schneller" data-numberify>Erst buggy und jetzt schneller<a class="anchor ms-1" href="#erst-buggy-und-jetzt-schneller"></a></h2>
|
|||
|
|
<p>Nachdem der Theme-Entwickler die neue Suchfunktion implementiert hatte und ich das Theme meines Blogs aktualisiert hatte, bemerkte ich, dass die Suche in Firefox sehr viel CPU-Last verursachte und Firefox anbot, das Script im Tab zu beenden. Die Suchseite war gar nicht mehr benutzbar.</p>
|
|||
|
|
<p>Ich stellte dem Entwickler mein Repo des Blogs zur Verfügung und so konnte er schließlich das Problem reproduzieren.</p>
|
|||
|
|
<p>Er deaktivierte daraufhin im Theme etwas für Font Awesome (<a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap/commit/ed3c670652a24a7c914c235f91ee02826cec36e1">siehe hier</a>), das ich eh nicht verstehe und danach war die Suchfunktion auch in Firefox genauso schnell wie zuvor nur in Chromium.</p>
|
|||
|
|
<p>Vor der Neuerung der Suche war diese in Firefox immer einige Sekunden langsamer als in Chromium.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/09/verbesserte-suchfunktion-im-blog/2022-09-27-screenshot-suche-blog-cover.webp" length="89608" type="image/webp"/></item><item><title>Wie man im Blog (Hugo) ein eigenes Bild für die Suchseite einstellt</title><link>https://natenom.de/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/</link><pubDate>Tue, 27 Sep 2022 02:50:03 +0200</pubDate><guid>https://natenom.de/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/</guid><description><![CDATA[<p>Wenn man früher einen Link zur Suchseite hier im Blog auf Social Media geteilt hatte, wurde immer nur das Natenom-Logo im <a href="/tags/twitter/">Twitter-Card</a> angezeigt, denn das war der Default fürs “Beitragsbild”.</p>
|
|||
|
|
<p>Ich wollt jedoch nur für die Suche ein eigenes Bild haben. Einen kleinen Elefanten, der so aussieht, als ob er was suchen würde.</p>]]></description><content:encoded><![CDATA[<p>Wenn man früher einen Link zur Suchseite hier im Blog auf Social Media geteilt hatte, wurde immer nur das Natenom-Logo im <a href="/tags/twitter/">Twitter-Card</a> angezeigt, denn das war der Default fürs “Beitragsbild”.</p>
|
|||
|
|
<p>Ich wollt jedoch nur für die Suche ein eigenes Bild haben. Einen kleinen Elefanten, der so aussieht, als ob er was suchen würde.</p>
|
|||
|
|
<p>Ich fragte den Entwickler und er <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap/discussions/744#discussioncomment-3738425">erklärte</a>, dass die Suchseite letztlich eine normale Seite ist und man dort im <code>Front Matter</code> Dinge angeben kann, so wie z. B. das Beitragsbild.</p>
|
|||
|
|
<p>Der Quelltext der Suchseite <code>blog/content/search/_index.md</code> sieht jetzt so aus:</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">---</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">title</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">"Suche"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">layout</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">"search"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">images</span><span style="color:#960050;background-color:#1e0010">:</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">-</span> <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">images</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">search</span>.<span style="color:#a6e22e">webp</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">---</span>
|
|||
|
|
</span></span></code></pre></div><p>Und das Bild liegt in <code>blog/static/images/</code>.</p>
|
|||
|
|
<p>Teilt man nun einen Link zur Suchseite mit einem beliebigen Suchbegriff, dann wird nicht mehr das Natenom-Logo verwendet sondern dieses schöne Bild vom kleinen Elefanten (später dann eines mit einer Lupe, das ich noch machen muss):</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="jpeg" srcset="/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/2022-09-27-eigenes-bild-fuer-suchseite-im-blog-cover.jpg" />
|
|||
|
|
<img alt="" src="/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/2022-09-27-eigenes-bild-fuer-suchseite-im-blog-cover.jpg" title="" width="492" height="479" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Jetzt steht unter dem Bild aber noch der Standardtext über den Blog. Mit <code>description: </code> im Front Matter kann man hier einen anderen Text hinterlegen:</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">description</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">'Der kleine Elefant ist so nett und durchsucht den Blog für dich nach verschiedenen Begriffen…'</span>
|
|||
|
|
</span></span></code></pre></div><p>Ergebnis:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="jpeg" srcset="/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/2022-09-27-eigenes-bild-fuer-suchseite-im-blog-2.jpg" />
|
|||
|
|
<img alt="" src="/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/2022-09-27-eigenes-bild-fuer-suchseite-im-blog-2.jpg" title="" width="492" height="439" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>]]></content:encoded><enclosure url="https://natenom.de/2022/09/wie-man-im-blog-hugo-ein-eigenes-bild-fuer-die-suchseite-einstellt/2022-09-27-eigenes-bild-fuer-suchseite-im-blog-cover.jpg" length="50398" type="image/jpeg"/></item><item><title>Falsch gedrehte Bilder in Hugo durch Verwendung von Funktionen zur Bildbearbeitung</title><link>https://natenom.de/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/</link><pubDate>Sun, 11 Sep 2022 20:11:13 +0200</pubDate><guid>https://natenom.de/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/</guid><description><p>Mir ist er vor ein paar Tagen aufgefallen, dass die im Blog generierten kleinen Varianten der Bilder manchmal liegend dargestellt werden, obwohl sie hochkant dargestellt werden müssten, wohingegen die Originalbilder richtig dargestellt werden. So wie in diesem Screenshot im zweiten Bild der Galerie zu sehen ist:</p></description><content:encoded><![CDATA[<p>Mir ist er vor ein paar Tagen aufgefallen, dass die im Blog generierten kleinen Varianten der Bilder manchmal liegend dargestellt werden, obwohl sie hochkant dargestellt werden müssten, wohingegen die Originalbilder richtig dargestellt werden. So wie in diesem Screenshot im zweiten Bild der Galerie zu sehen ist:</p>
|
|||
|
|
<figure class="image-caption"><a href="2022-09-11-screenshot-blog-mit-falsch-gedrehtem-bild-cover.webp"><picture><source type="webp" srcset="/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/_hu47beb127d72f88a20168161fa192f622_160470_ec904d8d615b29188206bd6e54937bf7.webp" />
|
|||
|
|
<img alt="Screenshot eines Blogbeitrags mit einer Galerie, in der ein Bild auf der Seite liegt statt hochkant dargestellt zu werden." src="/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/_hu47beb127d72f88a20168161fa192f622_160470_ec904d8d615b29188206bd6e54937bf7.webp" title="" width="350" height="435" loading="lazy" /></picture></a><figcaption>Blogbeitrag mit falsch gedrehtem Bild. <a href="/2022/04/fotos-fahrradtour-28-04-2022/">Hier der Blogbeitrag</a>.</figcaption></figure>
|
|||
|
|
<p>Das liegt scheinbar daran, dass in den Metadaten (<a href="/tags/exif/">Exif</a>) mancher Fotos die Rotation hinterlegt ist, das Bild selbst jedoch nicht “richtig” ausgerichtet gespeichert wurde.</p>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content">2022-09-30: Ich habe ein Script geschrieben, das solche Dateien findet und die Ausrichtung korrigiert, <a href="/2022/09/bilder-fuer-hugo-automatisch-korrekt-ausrichten/">siehe hier</a>.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="hintergrund" data-numberify>Hintergrund<a class="anchor ms-1" href="#hintergrund"></a></h2>
|
|||
|
|
<p>Hugo beachtet vorhandene Exif-Daten nicht und erstellt deshalb mit z. B. der <code>.Resize</code>-Funktion Bilder mit falscher Ausrichtung. Diese Funktion wird in meinem Blog und auch in meinem Wiki genutzt, um automatisch kleine Varianten großer Bilder zu erstellen, <a href="/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/">siehe hier</a>. Vermutlich passiert das selbe auch bei Verwendung von <code>Fit</code>, <code>Fill</code>, <code>Crop</code> und <code>Filter</code>. (<a class='urlextern' href="https://gohugo.io/content-management/image-processing/#resize">Hier die Dokumentation dieser Funktionen</a>.)</p>
|
|||
|
|
<p>Das ist ein bekanntes “Problem” in Hugo. Details <a class='urlextern' href="https://discourse.gohugo.io/t/image-resize-rotates-image/28438/2">siehe hier</a>.</p>
|
|||
|
|
<p>Einen offenen Issue <a class='urlextern' href="https://github.com/gohugoio/hugo/issues/5181">gibt es hier</a>.</p>
|
|||
|
|
<p>Nicht alle Bilder im Blog sind davon betroffen. Kommt vermutlich auf die verarbeitende Software oder auf das Kameramodell usw. an.</p>
|
|||
|
|
<h2 id="zwei-lösungen" data-numberify>Zwei Lösungen<a class="anchor ms-1" href="#zwei-lösungen"></a></h2>
|
|||
|
|
<h3 id="lösung-1--anpassung-in-hugo" data-numberify>Lösung 1 – Anpassung in Hugo<a class="anchor ms-1" href="#lösung-1--anpassung-in-hugo"></a></h3>
|
|||
|
|
<p>Eine Lösung ist, viel Arbeit in meinen <code>render-image</code>-Hook als auch in den <code>figure</code>-Shortcode zu stecken, sodass dort die Rotation ausgewertet und beachtet wird. Für beides verwende ich nicht die Originale sondern eigenen Varianten.</p>
|
|||
|
|
<p>In hugo-shortcode-gallery wird das z. B. so gemacht, <a class='urlextern' href="https://github.com/mfg92/hugo-shortcode-gallery/blob/master/layouts/shortcodes/gallery.html#L110">siehe hier</a>.</p>
|
|||
|
|
<h3 id="lösung-2--bilddateien-entsprechend-rotieren" data-numberify>Lösung 2 – Bilddateien entsprechend rotieren<a class="anchor ms-1" href="#lösung-2--bilddateien-entsprechend-rotieren"></a></h3>
|
|||
|
|
<p>Eine weit einfachere Lösung ist, die Dateien direkt entsprechend der enthaltenen Metadaten zu rotieren und so abzuspeichern.</p>
|
|||
|
|
<p>Das kann man z. B. mit <code>mogrify</code> (<a class='urlextern' href="https://imagemagick.org/script/mogrify.php">ImageMagick</a>) machen.</p>
|
|||
|
|
<p>Für entsprechende Dateien führe ich also das hier aus, wobei die Originaldatei überschrieben wird:</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>mogrify -auto-orient pausenbaum.jpg
|
|||
|
|
</span></span></code></pre></div><p>Damit wird die Info zur Rotation aus den Metadaten entfernt und das Bild “richtig” gedreht abgespeichert. Die Dokumentation dazu findet sich <a class='urlextern' href="https://imagemagick.org/script/command-line-options.php#auto-orient">hier</a>.</p>
|
|||
|
|
<p>Man könnte noch ein Script schreiben, das alle Bilder findet, die Infos zur Rotation enthalten und diese dann in einem Schritt entsprechend drehen. Das spare ich mir, da ich das manuell mache, wenn ich mal wieder solche Fotos im Blog sehe.</p>
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>Und dann ist das Foto im Blog wieder richtig gedreht:</p>
|
|||
|
|
<figure class="image-caption"><a href="2022-09-11-screenshot-blog-mit-richtig-gedrehtem-bild-cover.webp"><picture><source type="webp" srcset="/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/2022-09-11-screenshot-blog-mit-richtig-gedrehtem-bild-cover.webp" />
|
|||
|
|
<img alt="Screenshot eines Blogbeitrags mit einer Galerie, in der ein Bild auf der Seite liegt statt hochkant dargestellt zu werden." src="/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/2022-09-11-screenshot-blog-mit-richtig-gedrehtem-bild-cover.webp" title="" width="799" height="993" loading="lazy" /></picture></a><figcaption>Blogbeitrag mit richtig gedrehtem Bild. <a href="/2022/04/fotos-fahrradtour-28-04-2022/">Hier der Blogbeitrag</a>.</figcaption></figure>
|
|||
|
|
<p>Falls jemand einen Blogbeitrag mit falsch gedrehten Bildern findet, würde ich mich über einen Hinweis darauf freuen. Danke.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/09/falsch-gedrehte-bilder-in-hugo-durch-verwendung-von-funktionen-zur-bildbearbeitung/2022-09-11-screenshot-blog-mit-falsch-gedrehtem-bild-cover.webp" length="160470" type="image/webp"/></item><item><title>Wechsel von Kate zu VSCodium für Markdown</title><link>https://natenom.de/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/</link><pubDate>Sun, 11 Sep 2022 17:01:07 +0200</pubDate><guid>https://natenom.de/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/</guid><description><![CDATA[<p>In dem Zeitraum, als ich meinen Blog und mein Wiki auf Hugo umgestellt hatte, suchte ich lange nach einem guten Editor für Markdown und <a href="/2022/02/suche-nach-editor-fuers-schreiben-markdown/">probierte viele Editoren aus</a> und bin letztlich beim bis dahin sonst immer verwendeten <a href="/2022/02/workflow-zum-schreiben-von-blogbeitraegen-hugo/">Editor Kate</a> geblieben. Denn die meisten getesteten Editoren hatten keine Snippets-Funktion und andere Editoren waren mir zu überladen (z. B. solche, die auf <a class='urlextern' href="https://www.electronjs.org/">Electron</a> basieren).</p>
|
|||
|
|
<p>Doch nach mehreren Monaten und vielen geschriebenen Blogbeiträgen fehlen mir ein paar Funktionen in Kate, die Zeit und Nerven fressen oder umständliche “Lösungen” brauchen.</p>
|
|||
|
|
<p>Was mir in Kate besonders fehlt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Live-Vorschau (wenn auch nicht alle Shortcodes gerendert werden können).</li>
|
|||
|
|
<li>Ordentlich funktionierende Snippets mit Zusatzfunktionen (die in Kate sind nur rudimentär und zudem buggy).</li>
|
|||
|
|
<li>Inhaltsverzeichnis mit der Möglichkeit, zu einem Eintrag zu springen.</li>
|
|||
|
|
<li>Distraction free writing (oder zumindest einigermaßen ordentliche Vorschau). Hierfür habe ich in VSCodium noch keine Lösung gefunden.</li>
|
|||
|
|
</ul>]]></description><content:encoded><![CDATA[<p>In dem Zeitraum, als ich meinen Blog und mein Wiki auf Hugo umgestellt hatte, suchte ich lange nach einem guten Editor für Markdown und <a href="/2022/02/suche-nach-editor-fuers-schreiben-markdown/">probierte viele Editoren aus</a> und bin letztlich beim bis dahin sonst immer verwendeten <a href="/2022/02/workflow-zum-schreiben-von-blogbeitraegen-hugo/">Editor Kate</a> geblieben. Denn die meisten getesteten Editoren hatten keine Snippets-Funktion und andere Editoren waren mir zu überladen (z. B. solche, die auf <a class='urlextern' href="https://www.electronjs.org/">Electron</a> basieren).</p>
|
|||
|
|
<p>Doch nach mehreren Monaten und vielen geschriebenen Blogbeiträgen fehlen mir ein paar Funktionen in Kate, die Zeit und Nerven fressen oder umständliche “Lösungen” brauchen.</p>
|
|||
|
|
<p>Was mir in Kate besonders fehlt:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Live-Vorschau (wenn auch nicht alle Shortcodes gerendert werden können).</li>
|
|||
|
|
<li>Ordentlich funktionierende Snippets mit Zusatzfunktionen (die in Kate sind nur rudimentär und zudem buggy).</li>
|
|||
|
|
<li>Inhaltsverzeichnis mit der Möglichkeit, zu einem Eintrag zu springen.</li>
|
|||
|
|
<li>Distraction free writing (oder zumindest einigermaßen ordentliche Vorschau). Hierfür habe ich in VSCodium noch keine Lösung gefunden.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Ich probierte einige der bereits getesteten Editoren noch einmal aus und am besten gefiel mir MarkText, doch das kann leider keine Snippets.</p>
|
|||
|
|
<p>Deshalb habe ich mich für <a class='urlextern' href="https://vscodium.com/">VSCodium</a> entschieden, einer etwas freieren Variante von <a class='urlextern' href="https://code.visualstudio.com/">Visual Studio Code</a>. Die basiert zwar auf Electron, aber ich jetzt bereit, diesen Kompromiss einzugehen, um dafür viele schöne Funktionen zu bekommen.</p>
|
|||
|
|
<p>In VSCodium gibt es – im Unterschied zu Kate – einige Funktionen, die ich folgend beschreibe.</p>
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content"><p>Eine ältere Liste nützlicher Erweiterungen speziell für Hugo <a class='urlextern' href="https://gohugo.io/tools/editors/#visual-studio-code">gibt es auf der Hugo-Projektseite</a>.</p>
|
|||
|
|
<p>Und <a class='urlextern' href="https://code.visualstudio.com/docs/languages/markdown">hier</a> ist die Dokumentation für VSCodium für den Umgang mit Markdown.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="erweiterungen" data-numberify>Erweiterungen<a class="anchor ms-1" href="#erweiterungen"></a></h2>
|
|||
|
|
<p>Für VSCodium gibt es extrem viele Erweiterungen (die ich bisher nicht benötige, aber vielleicht finde ich doch noch hilfreiche Dinge).</p>
|
|||
|
|
<p>Für Kate gibt es Plugins, aber nicht annähernd so viele.</p>
|
|||
|
|
<h2 id="live-vorschau" data-numberify>Live-Vorschau<a class="anchor ms-1" href="#live-vorschau"></a></h2>
|
|||
|
|
<p>An der Live-Vorschau gefällt mir besonders, dass</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>sie automatisch mit scrollt.</li>
|
|||
|
|
<li>es links immer einen Indikator gibt, der anzeige, in welcher Zeile der Cursor gerade ist.</li>
|
|||
|
|
<li>man optional trotzdem unabhängig vom Code in der Vorschau scrollen kann, diese aber wieder synchron läuft, sobald man im Quelltext scrollt.</li>
|
|||
|
|
<li>der Cursor bei einem Doppelklick auf einen Bereich in der Vorschau automatisch auf diese Zeile im Quelltext gesetzt wird.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Die Vorschaufunktion gibt zwar nicht genau wieder, wie es später im Blog oder im Wiki aussehen wird, aber es ist ausreichend, sodass ich während des Schreibens den Hugo-Server gar nicht erst anwerfen muss, außer zum Schluss mal wegen Shortcodes, die nicht dargestellt werden, wie <code>figure</code>.</p>
|
|||
|
|
<p>Die Vorschau öffent man mit der Tastenkombination <code>Ctrl + k</code> gefolgt von <code>v</code>.</p>
|
|||
|
|
<h2 id="inhaltsverzeichnis" data-numberify>Inhaltsverzeichnis<a class="anchor ms-1" href="#inhaltsverzeichnis"></a></h2>
|
|||
|
|
<p>Es gibt drei Möglichkeiten, ein Inhaltsverzeichnis des aktuellen Dokuments zu sehen:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Mit der Tastenkombination <code>Strg + Shift + o</code> öffnet man das Inhaltsverzeichnis und kann zu einer bestimmten Überschrift springen.</li>
|
|||
|
|
<li>Die aktuelle Überschrift wird auch immer oben in den <code>Breadcrumbs</code> angezeigt. Dort kann man drauf klicken und kann auch wieder zu den Bereichen springen.</li>
|
|||
|
|
<li>In der Leiste links öffnet man den <code>Explorer</code> oder drück die Tastenkombination <code>Ctrl + Shift + e</code> und öffnet unten den Bereich <code>OUTLINE</code>. </p><figure class="image-caption"><picture><source type="webp" srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-strg-shift-o.webp" />
|
|||
|
|
<img alt="Screenshot mit dem Inhaltsverzeichnis" src="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-strg-shift-o.webp" title="" width="595" height="236" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="snippets" data-numberify>Snippets<a class="anchor ms-1" href="#snippets"></a></h2>
|
|||
|
|
<p>In VSCodium kann man tolle Dinge mit Snippets machen, die ich teilweise auch schon vom Editor <a class='urlextern' href="https://micro-editor.github.io/">Micro</a> kenne.</p>
|
|||
|
|
<p>Die Dokumentation für Snippets in VSCodium <a class='urlextern' href="https://code.visualstudio.com/docs/editor/userdefinedsnippets">gibt es hier</a>.</p>
|
|||
|
|
<p>Hier einige der Möglichkeiten.</p>
|
|||
|
|
<p>Eigene Snippets trägt man in eine selbst gewählte Datei ein, die man über <code>Ctrl + Shift + p</code> gefolgt von <code>Snippets: Configure User Snippets</code> definieren und öffnen kann.</p>
|
|||
|
|
<h3 id="tabstops" data-numberify>Tabstops<a class="anchor ms-1" href="#tabstops"></a></h3>
|
|||
|
|
<p>In Snippet kann man Positionen definieren, zu denen man nach dem Einfügen mit der <code>Tab</code>-Taste springen kann, sodass man notwendige Eingaben schneller erledigen kann, also mit den Cursor-Tasten zu navigieren. Das nutze ich z. B. in meinem <code>Front Matter</code>-Snippet.</p>
|
|||
|
|
<h3 id="vorauswahl" data-numberify>Vorauswahl<a class="anchor ms-1" href="#vorauswahl"></a></h3>
|
|||
|
|
<p>Hier bekommt man ein kleines Popup-Fenster und kann einen der Einträge auswählen:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-snippet-auswahl.webp" />
|
|||
|
|
<img alt="Screenshot des Popup-Fensters zur Auswahl der Einträge beim Einfügen eines Snippets." src="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-snippet-auswahl.webp" title="" width="602" height="129" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Das Snippet dazu sieht so aus:</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><span style="color:#e6db74">"notice"</span>: <span style="color:#f92672">{</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span>: <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span>: <span style="color:#e6db74">"md-notice"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span>: <span style="color:#f92672">[</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< notice </span><span style="color:#e6db74">${</span>1|hinweis,tipp,info,warnung,update|<span style="color:#e6db74">}</span><span style="color:#e6db74"> >}}"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"</span>$0<span style="color:#e6db74">"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"{{< /notice >}}"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">]</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span>: <span style="color:#e6db74">"Notice, tip, info, …"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">}</span>
|
|||
|
|
</span></span></code></pre></div><h3 id="snippets-auf-markierte-bereiche-anwenden" data-numberify>Snippets auf markierte Bereiche anwenden<a class="anchor ms-1" href="#snippets-auf-markierte-bereiche-anwenden"></a></h3>
|
|||
|
|
<p>Um einen aktuell im Editor markieren Bereich innerhalb eines Snippets nutzen zu können, gibt es die Variable <code>${TM_SELECTED_TEXT}</code> und weitere (<a class='urlextern' href="https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables">siehe hier</a>). Diese Möglichkeit bietet sich an, wenn man z. B. nachträglich einen Bereich als Codeblock oder Zitat formatieren will.</p>
|
|||
|
|
<p>Hat man so ein Snippet geschrieben, markiert man zuerst den benötigen Bereich, drückt <code>Alt + Leertaste</code>, und wählt anschließend das Snippet mit den Cursor-Tasten aus.</p>
|
|||
|
|
<p>Seltsam wird es, wenn man den Eintrag nicht per Cursor-Taste auswählt, sondern, wie sonst auch, den Namen des Snippets tippt. Dann überschreibt man nämlich den markieren Bereich. Doch das macht nichts. Sobald man den passenden Eintrag ausgewählt hat und sofern das Snippet die genannte Variable nutzt, wird beim Bestätigen mit <code>Enter</code> das komplette Snippet inklusive dem überschrieben geglaubten Bereich eingefügt.</p>
|
|||
|
|
<h2 id="datum-fürs-front-matter-direkt-statt-über-shell" data-numberify>Datum fürs Front Matter direkt statt über Shell<a class="anchor ms-1" href="#datum-fürs-front-matter-direkt-statt-über-shell"></a></h2>
|
|||
|
|
<p>Beim Einfügen meines eigenen Snippets <code>frontmatter</code> ist jetzt direkt das aktuelle Datum enthalten. Bisher musste ich das immer erst über ein Shellkommando machen und dann ins <code>Front Matter</code> einfügen. Theoretisch ginge das auch mit Kate und JavaScript, aber das habe ich bisher nicht geschafft.</p>
|
|||
|
|
<p>So sieht dann das <code>Front Matter</code> nach dem Einfügen aus:</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></span><span style="display:flex;"><span><span style="color:#f92672">title</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">slug</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">date</span>: <span style="color:#e6db74">2022-09-11T12:40:57</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">Natenom</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">#description:</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">categories</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span> -
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">tags</span>:
|
|||
|
|
</span></span><span style="display:flex;"><span> -
|
|||
|
|
</span></span><span style="display:flex;"><span>---
|
|||
|
|
</span></span></code></pre></div><p>Und das ist das zugehörige Snippet:</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><span style="color:#e6db74">"md-frontmatter"</span>: <span style="color:#f92672">{</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"scope"</span>: <span style="color:#e6db74">"markdown"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"prefix"</span>: <span style="color:#e6db74">"md"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"body"</span>: <span style="color:#f92672">[</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"title: </span>$1<span style="color:#e6db74">"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"slug: </span>$2<span style="color:#e6db74">"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"date: </span>$CURRENT_YEAR<span style="color:#e6db74">-</span>$CURRENT_MONTH<span style="color:#e6db74">-</span><span style="color:#e6db74">${</span>CURRENT_DATE<span style="color:#e6db74">}</span><span style="color:#e6db74">T</span><span style="color:#e6db74">${</span>CURRENT_HOUR<span style="color:#e6db74">}</span><span style="color:#e6db74">:</span>$CURRENT_MINUTE<span style="color:#e6db74">:</span>$CURRENT_SECOND<span style="color:#e6db74">+02:00"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"draft: false"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"author: Natenom"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"#description: "</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"categories:"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" - </span>$3<span style="color:#e6db74">"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"tags:"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" - </span>$4<span style="color:#e6db74">"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"---"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">]</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"description"</span>: <span style="color:#e6db74">"Front Matter Blog"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672">}</span>
|
|||
|
|
</span></span></code></pre></div><h2 id="tastenkombinationen" data-numberify>Tastenkombinationen<a class="anchor ms-1" href="#tastenkombinationen"></a></h2>
|
|||
|
|
<p>Eine <a class='urlextern' href="https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing">Liste der Tastenkombinationen</a> für VSCodium.</p>
|
|||
|
|
<h2 id="merk-dir-was" data-numberify>Merk dir was<a class="anchor ms-1" href="#merk-dir-was"></a></h2>
|
|||
|
|
<p>Besonders gut gefällt mir, dass man ein “Verzeichnis” mit <code>Ctrl + k</code> gefolgt von <code>Ctrl + o</code> öffnen kann und der Editor sich dafür dann die geöffneten Dateien und Ansichten merkt.</p>
|
|||
|
|
<p>So kann ich zwischen Blog und Wiki sehr einfach wechseln und die bearbeiteten Dateien sind weiterhin geföffnet. Das erleichtert die Arbeit.</p>
|
|||
|
|
<p>Alternativ nutzt man die Tastenkombination <code>Ctrl + r</code> und kann dann bisher geöffnete Dateien und oben genannte Verzeichnisse wieder öffnen. Hält man <code>Ctrl</code> dabei gedrückt, werden diese in einem neuen Fenster geöffnet.</p>
|
|||
|
|
<p>Hier z. B. die Ansicht für die Arbeit im Wiki, wo gerade die Selfies vom kleinen Elefanten geöffnet sind:</p>
|
|||
|
|
<p><a href="2022-09-11-vscodium-mit-meinem-wiki-cover.webp"></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_816x0_resize_q95_h2_catmullrom_2.webp 816w, /2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px" />
|
|||
|
|
<img alt="Screenshot von VSCodium mit Navigationsbaum links, dem Quelltext der Selfie-Seite des kleinen Elefanten in der Mitte und der Live-Vorschau rechts." srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_816x0_resize_q95_h2_catmullrom_2.webp 816w,/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_1632x0_resize_q95_h2_catmullrom_2.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"
|
|||
|
|
src="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover_hu3887bf5f54664a8d95251105ebf05eb0_205538_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="459" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</a></p>
|
|||
|
|
<h2 id="meine-anpassungen-und-installierte-erweiterungen" data-numberify>Meine Anpassungen und installierte Erweiterungen<a class="anchor ms-1" href="#meine-anpassungen-und-installierte-erweiterungen"></a></h2>
|
|||
|
|
<p>Ich habe ein paar kleine Anpassungen für VSCode, die ich hier aufliste, falls ich das irgendwann mal wieder brauche.</p>
|
|||
|
|
<h3 id="weniger-ist-mehr" data-numberify>Weniger ist mehr<a class="anchor ms-1" href="#weniger-ist-mehr"></a></h3>
|
|||
|
|
<p>Ich habe die “Status bar” (<code>View -> Appearence -> Status bar</code>) unten und die “Menu bar” (<code>View -> Appearence -> Menu bar</code>) oben ausgeblendet.</p>
|
|||
|
|
<p>Falls man die “Status Bar” wieder benötigt, kann man sie mit <code>Ctrl + Shift + p</code> und der Eingabe von <code>View: Toggle Status Bar Visibility</code> oder Teilen davon wieder aktivieren.</p>
|
|||
|
|
<p>Für die “Menu bar” gibt man <code>View: Toggle Menu bar</code> ein. Oder man drückt die <code>Alt</code>-Taste, dann erscheint die Menübar, wird direkt fokusiert, und verschwindet dann wieder, sobald man einen Eintrag gewählt hat oder erneut die <code>Alt</code>-Taste drückt.</p>
|
|||
|
|
<h3 id="hervorhebung-der-aktuellen-zeile" data-numberify>Hervorhebung der aktuellen Zeile<a class="anchor ms-1" href="#hervorhebung-der-aktuellen-zeile"></a></h3>
|
|||
|
|
<p>Die Hervorhebung der aktuellen Zeile gefällt mir bei VSCodium gar nicht, deshalb habe ich das so angepasst, wie ich es von Kate gewohnt bin.</p>
|
|||
|
|
<p>Dazu öffnet man die Datei <code>settings.json</code> via <code>Strg + Shift + p</code> und der Eingabe von <code>Preferences: Open User Settings (JSON)</code> und trägt 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-json" data-lang="json"><span style="display:flex;"><span><span style="color:#e6db74">"workbench.colorCustomizations"</span><span style="color:#960050;background-color:#1e0010">:</span> {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"[Default Dark+]"</span>: {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"editor.lineHighlightBackground"</span>: <span style="color:#e6db74">"#4587de2a"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"editor.lineHighlightBorder"</span>: <span style="color:#e6db74">"#4587de2a"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> },
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"[Default Light+]"</span>: {
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"editor.lineHighlightBackground"</span>: <span style="color:#e6db74">"#4587de2a"</span>,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">"editor.lineHighlightBorder"</span>: <span style="color:#e6db74">"#4587de2a"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> }
|
|||
|
|
</span></span><span style="display:flex;"><span>}
|
|||
|
|
</span></span></code></pre></div><p>Zeilenhervorhebung ohne Anpassung im Dark Theme mit kaum sichtbarer Umrandung:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-zeilenhervorhebung-ohne-anpassung.webp" />
|
|||
|
|
<img alt="Screenshot. Kaum sichtbare Umrandung der aktuellen Zeile." src="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-zeilenhervorhebung-ohne-anpassung.webp" title="" width="493" height="21" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Und mit Anpassung:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-zeilenhervorhebung-mit-anpassung.webp" />
|
|||
|
|
<img alt="Screenshot. Blauer Hintergrund in der Zeile." src="/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-zeilenhervorhebung-mit-anpassung.webp" title="" width="493" height="21" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Damit zusätzlich auch noch die Zeilennummer hervorgehoben wird, fügt man hinzu:</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-json" data-lang="json"><span style="display:flex;"><span><span style="color:#e6db74">"editor.renderLineHighlight"</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">"all"</span><span style="color:#960050;background-color:#1e0010">,</span>
|
|||
|
|
</span></span></code></pre></div><h3 id="installierte-erweiterungen" data-numberify>Installierte Erweiterungen<a class="anchor ms-1" href="#installierte-erweiterungen"></a></h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>streetsidesoftware.code-spell-checker-german</code> für Rechtschreibüberprüfung</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="fazit" data-numberify>Fazit<a class="anchor ms-1" href="#fazit"></a></h2>
|
|||
|
|
<p>Ich habe diesen Blogbeitrag schon mit VSCodium geschrieben und währenddessen hier dokumentiert und ausprobiert.</p>
|
|||
|
|
<p>Mein Fazit bisher ist, dass ich mich mit diesem Editor besser auf Inhalte fokussieren kann, da ich nicht ständig andere Tools benutzen muss. Wie z. B. eine Konsole für das aktuelle Datum und die Uhrzeit fürs Front-Matter, weil man auch Bilder (zumindest in der Markdown-Standard-Syntax) über den Dateiexplorer von VSCodium direkt einfügen kann.</p>
|
|||
|
|
<p>Desweiteren brauche ich kein laufendes Hugo und keinen Browser, in dem die Vorschau angezeigt wird. Diese zeigt zwar genau das Ergebnis, wie es auch später online aussehen wird, aber das ist für meine Sachen meist nur zur Endkontrolle vor dem Veröffentlichen notwendig.</p>
|
|||
|
|
<p>Ich kann mir vorstellen, dass man das Bauen mit Hugo auch noch in VSCodium einrichten könnte, aber ich mache das lieber extern. Ich brauche einen guten Editor zum Bearbeiten, aber keine eierlegende Wollmilchsau für alles zusammen.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/09/wechsel-von-kate-zu-vscodium-fuer-markdown/2022-09-11-vscodium-mit-meinem-wiki-cover.webp" length="205538" type="image/webp"/></item><item><title>Updates für Bootstrap Theme für Hugo</title><link>https://natenom.de/2022/09/updates-fuer-bootstrap-theme-fuer-hugo/</link><pubDate>Thu, 08 Sep 2022 18:12:02 +0200</pubDate><guid>https://natenom.de/2022/09/updates-fuer-bootstrap-theme-fuer-hugo/</guid><description><p>Es gab wieder ein paar Neuerungen für das hier verwendete <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap">Theme Bootstrap</a>, das hier im Blog verwendet wird.</p></description><content:encoded><![CDATA[<p>Es gab wieder ein paar Neuerungen für das hier verwendete <a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap">Theme Bootstrap</a>, das hier im Blog verwendet wird.</p>
|
|||
|
|
<h2 id="allgemein" data-numberify>Allgemein<a class="anchor ms-1" href="#allgemein"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Der DarkMode funktioniert wieder richtig und der Hintergrund dabei ist wieder dunkel.</li>
|
|||
|
|
<li>Per Voreinstellung gibt es jetzt eine Umrandung für Tabellen und einen Hover-Effekt. Details <a class='urlextern' href="https://hbs.razonyang.com/v1/en/docs/advanced/scss-variables/#options">siehe hier</a>.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="weiterlesen" data-numberify>Weiterlesen<a class="anchor ms-1" href="#weiterlesen"></a></h2>
|
|||
|
|
<p>Auf meine Anfrage hin hat der Theme-Entwickler implementiert, dass der Link hinter dem Button “Weiterlesen” nicht mehr an den Anfang des Beitrags zeigt, sondern auf den Anker, den man manuell mit <code><!--more--></code> an beliebiger Stelle im Blogbeitrag setzen kann.</p>
|
|||
|
|
<p>Das hat den Vorteil, dass man bei längeren Auszügen diese nicht nochmal lesen muss, sondern im Lesefluss bleibt. Ich kenne das so noch von WordPress und fand es immer angenehm.</p>
|
|||
|
|
<p>Der Titel des Blogbeitrags in der Liste der Beiträge verlinkt weiterhin auf den Anfang.</p>
|
|||
|
|
<p>Die Funktion ist per Voreinstellung deaktiviert. Zum Aktivieren fügt man in der <code>config.toml</code> im Bereich <code>[params]</code> hinzu:</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">post</span>.<span style="color:#a6e22e">readMoreFromContent</span> = <span style="color:#66d9ef">true</span>
|
|||
|
|
</span></span></code></pre></div><h2 id="neuer-feed" data-numberify>Neuer Feed<a class="anchor ms-1" href="#neuer-feed"></a></h2>
|
|||
|
|
<p>Es ist nun einstellbar, ob im Feed nur die Auszüge des Blogbeiträge enthalten sind oder der gesamte Blogbeitrag.</p>
|
|||
|
|
<p>Zudem wurde die Struktur des Feeds verbessert.</p>
|
|||
|
|
<p>D. h. in der neuen Variante sind jetzt die Beitragsbeschreibung/Auszug/Excerpt getrennt vom Inhalt angegeben und der Inhalt wird innerhalb <code>CDATA</code> angegeben.</p>
|
|||
|
|
<p><a class='urlextern' href="https://github.com/razonyang/hugo-theme-bootstrap/discussions/694#discussioncomment-3587569">Hier der Hintergrund</a> der Änderung.</p>
|
|||
|
|
<p>Möchte man einstellen, dass die ganzen Blogbeiträge im Feed enthalten sind, statt nur der Auszüge, dann muss man in der <code>config.toml</code> im Bereich <code>[params]</code> hinzufü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-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#a6e22e">feeds</span>.<span style="color:#a6e22e">content</span> = <span style="color:#66d9ef">true</span>
|
|||
|
|
</span></span></code></pre></div><p>So sah der <a href="/index.xml">Feed</a> bisher aus:</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-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672"><item></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><title></span>Ein Titel<span style="color:#f92672"></title></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><link></span>url zum Blogbeitrag<span style="color:#f92672"></link></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><pubDate></span>Tue, 06 Sep 2022 03:42:05 +0200<span style="color:#f92672"></pubDate></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><guid></span>eine guid<span style="color:#f92672"></guid></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><description><p></span>Kompletter Blogbeitrag stand hier drin<span style="color:#f92672"></p></description></span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672"></item></span>
|
|||
|
|
</span></span></code></pre></div><p>Und so sieht der Feed jetzt aus:</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-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672"><item></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><title></span>Ein Titel<span style="color:#f92672"></title></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><link></span>url zum Blogbeitrag<span style="color:#f92672"></link></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><pubDate></span>Tue, 06 Sep 2022 03:42:05 +0200<span style="color:#f92672"></pubDate></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><guid></span>eine guid<span style="color:#f92672"></guid></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><description><p></span>Auszug/Beschreibung des Blogbeitrags<span style="color:#f92672"></p></description></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><content:encoded></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e"><![CDATA[ HTML Code ]]></span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672"></content:encoded></span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#f92672"></item></span>
|
|||
|
|
</span></span></code></pre></div>]]></content:encoded></item><item><title>Eigene Pseudo-Galerie für Hugo als Ersatz für Hugo-Shortcode-Gallery</title><link>https://natenom.de/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/</link><pubDate>Tue, 06 Sep 2022 03:42:05 +0200</pubDate><guid>https://natenom.de/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/</guid><description><p>Als ich Anfang des Jahres diesen Blog hier von <a href="/2022/03/umzug-dokuwiki-hugo-1-vorarbeiten/">WordPress zu Hugo umzog</a>, war mir die Funktion einer Bildergalerie sehr wichtig. Schließlich gab es in meinem Blog sehr viele Bildergalerien.</p></description><content:encoded><![CDATA[<p>Als ich Anfang des Jahres diesen Blog hier von <a href="/2022/03/umzug-dokuwiki-hugo-1-vorarbeiten/">WordPress zu Hugo umzog</a>, war mir die Funktion einer Bildergalerie sehr wichtig. Schließlich gab es in meinem Blog sehr viele Bildergalerien.</p>
|
|||
|
|
<h2 id="hugo-shortcode-gallery" data-numberify>Hugo-Shortcode-Gallery<a class="anchor ms-1" href="#hugo-shortcode-gallery"></a></h2>
|
|||
|
|
<p>Dafür verwendete ich <a class='urlextern' href="https://github.com/mfg92/hugo-shortcode-gallery">hugo-shortcode-gallery</a>. Hierbei werden die von Hugo generierten Vorschaubilder per JavaScript geladen und bei einem Klick darauf werden in einer Lightbox die Originale angezeigt. Letzteres war zuletzt in Firefox ziemlich lahm.</p>
|
|||
|
|
<p>Eine Galerie fügt man mit diesem Shortcode ein:</p>
|
|||
|
|
<pre><code>{{< gallery match="images/*" >}}
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Damit werden alle Bilder im Unterverzeichnis <code>images/</code> des <code>Page Bundle</code> zur Galerie hinzugefügt. So kann man auch mehrere Galerien in einem Blogbeitrag mittels verschiedenen Unterverzeichnissen erstellen lassen.</p>
|
|||
|
|
<h2 id="einzelbilder-statt-galerie" data-numberify>Einzelbilder statt Galerie<a class="anchor ms-1" href="#einzelbilder-statt-galerie"></a></h2>
|
|||
|
|
<p>Über die Zeit hat sich jedoch für mich herauskristallisiert, dass ich Galerien gar nicht benötige. Stattdessen finde ich es jetzt besser, Bilder einzeln einzubinden, sodass man auch zu jedem Bild eine Beschreibung und einen Alt-Text hinterlegen kann. Und auch eine Lightbox will ich nicht mehr haben, Bilder werden per Klick direkt geöffnet.</p>
|
|||
|
|
<p>Schon seit längerem nutze ich daher gar keine Galerien mehr.</p>
|
|||
|
|
<p>Da aber in circa 90 Blogbeiträgen bereits die anfangs genutzten Galerien enthalten sind, wollte ich mir die Arbeit ersparen, diese manuell umschreiben zu müssen.</p>
|
|||
|
|
<h2 id="eigene-pseudogalerie-statt-hugo-shortcode-gallery" data-numberify>Eigene Pseudogalerie statt Hugo-Shortcode-Gallery<a class="anchor ms-1" href="#eigene-pseudogalerie-statt-hugo-shortcode-gallery"></a></h2>
|
|||
|
|
<p>Deshalb habe ich die Hugo-Shortcode-Gallery aus dem Projekt entfernt und einen gleichnamigen eigenen Shortcode erstellt, der die Bilder per Markdown einfügt und mit dem Original verlinkt, so <a href="/ueber/mitmachen/#einzelbilder-per-markdown-syntax">wie hier beschrieben</a>.</p>
|
|||
|
|
<p>Man kann somit die alte Form weiterverwenden und für</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-c" data-lang="c"><span style="display:flex;"><span>{{<span style="color:#f92672"><</span> gallery match<span style="color:#f92672">=</span><span style="color:#e6db74">"images/*"</span> <span style="color:#f92672">></span>}}
|
|||
|
|
</span></span></code></pre></div><p>wird durch alle passenden Bilder iteriert und dann wird das hier eingefügt:</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">images/bild1.jpg</span>)](images/bild1.jpg)
|
|||
|
|
</span></span><span style="display:flex;"><span>[<span style="color:#f92672">![</span>](<span style="color:#a6e22e">images/bild2.jpg</span>)](images/bild2.jpg)
|
|||
|
|
</span></span><span style="display:flex;"><span>…
|
|||
|
|
</span></span></code></pre></div><p>Das nächste Rendern des Blogs dauerte nach der Änderung sehr lange, schließlich mussten für hunderte Bilder in insgesamt 90 Galerien verschiedene Bildgrößen generiert werden. Für meinen Blog waren das so zusätzlich 1,6 GB an neuen Bildateien.</p>
|
|||
|
|
<p>Diese Änderung ist jetzt im Blog und auch im Wiki implementiert. Ich musste in der <code>config.toml</code> des Wikis den <code>timeout</code> etwas erhöhen, da es dort Galerien mit extrem vielen Bildern gibt.</p>
|
|||
|
|
<h2 id="alt-und-neu-im-vergleich" data-numberify>Alt und neu im Vergleich<a class="anchor ms-1" href="#alt-und-neu-im-vergleich"></a></h2>
|
|||
|
|
<p>Links die alte Galerie und rechts die neue.</p>
|
|||
|
|
<figure class="image-caption float-left"><a href="2022-09-06-blog-alte-galerie.png"><picture><source type="webp" srcset="/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/2022-09-06-blog-alte-galerie_hub50ef4cb36e35f912a3e960b4f2e72a6_522831_350x0_resize_q95_h2_catmullrom_3.webp" />
|
|||
|
|
<img alt="Screenshot der alten Galerie mit kleinen Vorschaubildern." src="/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/2022-09-06-blog-alte-galerie_hub50ef4cb36e35f912a3e960b4f2e72a6_522831_350x0_resize_q95_h2_catmullrom_3.webp" title="" width="350" height="661" loading="lazy" /></picture></a><figcaption>Alte Galerie.</figcaption></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="2022-09-06-blog-neue-pseudo-galerie-cover.png"><picture><source type="webp" srcset="/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/2022-09-06-blog-neue-pseudo-galerie-cover_hued90b20beeb03bfd7de479d9f64597de_427108_350x0_resize_q95_h2_catmullrom_3.webp" />
|
|||
|
|
<img alt="Screenshot der alten Galerie mit normalgroßen Vorschaubildern." src="/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/2022-09-06-blog-neue-pseudo-galerie-cover_hued90b20beeb03bfd7de479d9f64597de_427108_350x0_resize_q95_h2_catmullrom_3.webp" title="" width="350" height="661" loading="lazy" /></picture></a><figcaption>Neue Pseudo-Galerie.</figcaption></figure>
|
|||
|
|
<div style="clear: both;"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>Hier der <a href="/2015/07/ein-paar-bilder-von-den-schoenen-bauten-unseres-minecraft-servers/">Link zum Blogbeitrag mit den schönen Minecraft-Bauten</a>.</p>
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>Das passt so für mich. Es gibt eine Abhängigkeit weniger, um die man sich ganz selten mal kümmern muss und die eigene Lösung benötigt auch kein JavaScript mehr.</p>
|
|||
|
|
<p>Und falls ich mal in einen Blogbeitrag ganz viele Bilder als reinen Bilddump werfen möchte, dann kann ich das weiterhin mit dem entsprechenden Shortcode machen. Bevorzugt sind aber weiterhin Bilder mit Bildbeschreibung im Alt-Text.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/09/eigene-pseudo-galerie-fuer-hugo-als-ersatz-fuer-hugo-shortcode-gallery/2022-09-06-blog-neue-pseudo-galerie-cover.png" length="427108" type="image/png"/></item><item><title>Änderungen im Blog</title><link>https://natenom.de/2022/07/aenderungen-im-blog/</link><pubDate>Thu, 28 Jul 2022 10:33:26 +0200</pubDate><guid>https://natenom.de/2022/07/aenderungen-im-blog/</guid><description><p>Wegen einiger Updates des verwendeten Themes HBS (Hugo Bootstrap) habe ich auch gleich ein paar weitere Änderungen im Blog vorgenommen.</p></description><content:encoded><![CDATA[<p>Wegen einiger Updates des verwendeten Themes HBS (Hugo Bootstrap) habe ich auch gleich ein paar weitere Änderungen im Blog vorgenommen.</p>
|
|||
|
|
<h2 id="kopfbereich-von-blogbeiträgen" data-numberify>Kopfbereich von Blogbeiträgen<a class="anchor ms-1" href="#kopfbereich-von-blogbeiträgen"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Der Entwickler des Themes hat zur Unterscheidbarkeit von Kategorien und Tags im Header des Beitrags den Kategorien ein Verzeichnis-Icon vorangestellt. Daher habe ich die Hashtags vor den Tags entfernt.</li>
|
|||
|
|
<li>Die Schriftgröße der Beitragsüberschriften ist jetzt immer gleich groß. Vorher war sie in der Liste der Blogbeiträge immer deutlich kleiner als im geöffneten Beitrag.</li>
|
|||
|
|
</ul>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-07-28-beitragsliste-eintrag-vorher.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-vorher_hucd50b12d08301a0d8affb819a9efbf55_27912_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="223" /></picture></a><figcaption>Alt: Kopfbereich eines Blogbeitrags.</figcaption></figure>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-07-28-beitragsliste-eintrag-nachher.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/07/aenderungen-im-blog/images/2022-07-28-beitragsliste-eintrag-nachher_huf86e52f9730a43143e6b86a5a2d20d69_34738_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="245" /></picture></a><figcaption>Neu: Kopfbereich eines Blogbeitrags.</figcaption></figure>
|
|||
|
|
<h2 id="widgets-in-der-sidebar" data-numberify>Widgets in der Sidebar<a class="anchor ms-1" href="#widgets-in-der-sidebar"></a></h2>
|
|||
|
|
<p>In der Sidebar rechts gibt es jetzt ein neues Widget “Empfohlene Beiträge”. Um dort einen Beitrag hinzuzufügen, muss man im <code>Front Matter</code> hinzufügen:</p>
|
|||
|
|
<pre><code> featured: true
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Auch die Überschriften der Widgets sind nun deutlich größer.</p>
|
|||
|
|
<h2 id="font-awesome-statt-octicons" data-numberify>Font-Awesome statt Octicons<a class="anchor ms-1" href="#font-awesome-statt-octicons"></a></h2>
|
|||
|
|
<p>Ich hatte irgendwann einmal einige der Font-Awesome-Icons durch welche von Octicons ersetzt. Das habe ich jetzt sein lassen, da es nur deshalb schon 7 Dateien in <code>layouts/partials/</code> gab, die ich bei jedem Update im Theme überprüfen musste. Und es gab trotzdem noch viele Font-Awesome-Icons an diversen Stellen, die ich nöch hätte ersetzen müssen. Das ist mir auf Dauer zu viel Aufwand.</p>
|
|||
|
|
<p>Deshalb habe ich die Octicons überall entfernt und werden die voreingestellten Font-Awesome-Icons des Themes verwendet.</p>
|
|||
|
|
<h2 id="serien" data-numberify>Serien<a class="anchor ms-1" href="#serien"></a></h2>
|
|||
|
|
<p>Dank der Hilfe des Theme-Entwicklers habe ich es geschafft, endlich sogenannte Serien (engl. “series”) im Blog einzufügen. Statt der “normalen” Seite <code>/reiseberichte</code> gibt es jetzt “<a href="/tags/reiseberichte/">Reiseberichte</a>” als Serie.</p>
|
|||
|
|
<p>Um einen Blogbeitrag in eine Serie aufzunehmen, die dann automatisch darin gelistet wird, fügt man im <code>Front Matter</code> ein:</p>
|
|||
|
|
<pre><code> series:
|
|||
|
|
- Reiseberichte
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Mit einem Alias habe ich auch gleich eine Weiterleitung eingerichtet:</p>
|
|||
|
|
<pre><code> aliases: /reiseberichte/
|
|||
|
|
</code></pre>
|
|||
|
|
<h2 id="topbar" data-numberify>TopBar<a class="anchor ms-1" href="#topbar"></a></h2>
|
|||
|
|
<p>In der oberen Leiste gibt es jetzt deutlich mehr Icons, die es biser nur auf der “<a href="/natenom/">Über Natenom</a>” Seite gab. Hier sind jetzt E-Mail, Github, Mastodon, Reddit, Twitter und ein Videokanal verlinkt.</p>
|
|||
|
|
<p>Auch die Serien sind dort verlinkt.</p>
|
|||
|
|
<h2 id="alt-und-neu-im-vergleich" data-numberify>Alt und neu im Vergleich<a class="anchor ms-1" href="#alt-und-neu-im-vergleich"></a></h2>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-07-28-gesamt-vorher.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-vorher_hu535fba7f87763b2e7f0e743dfe5f0580_112106_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="607" /></picture></a><figcaption>Alt: Ganzer Blog.</figcaption></figure>
|
|||
|
|
<figure class="image-caption"><a href="images/2022-07-28-gesamt-nachher.webp"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/07/aenderungen-im-blog/images/2022-07-28-gesamt-nachher_hu2c91f2ea1efd6f8b0ab2297f63eb24b2_132274_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="611" /></picture></a><figcaption>Neu: Ganzer Blog.</figcaption></figure>
|
|||
|
|
<h2 id="farben" data-numberify>Farben<a class="anchor ms-1" href="#farben"></a></h2>
|
|||
|
|
<p>Bisher konnte man oben rechts verschiedene Farbpaletten auswählen. Jetzt ist immer mein Blau aktiv und die Farbe nicht mehr umschaltbar.</p>
|
|||
|
|
<h2 id="mobile-ansicht" data-numberify>Mobile Ansicht<a class="anchor ms-1" href="#mobile-ansicht"></a></h2>
|
|||
|
|
<p>In der mobilen Ansicht werden jetzt die Widgets angezeigt, jedoch sind diese immer eingeklappt. Das sieht interessant aus und könnte sogar gut sein, ist aber auch irgendwie seltsam. Der zweite Screenshot zeigt das Menü auf mobilen Geräten und das sieht schon etwas länger so aus.</p>
|
|||
|
|
<figure class="image-caption float-left"><a href="images/2022-07-28-blog-mobil.webp"><picture><source type="webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-blog-mobil_hu3e5691b67af4fb682463bf6c2e604c1b_79498_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="" src="/2022/07/aenderungen-im-blog/images/2022-07-28-blog-mobil_hu3e5691b67af4fb682463bf6c2e604c1b_79498_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="633" loading="lazy" /></picture></a></figure>
|
|||
|
|
<figure class="image-caption float-left"><a href="images/2022-07-28-blog-mobil-menu.webp"><picture><source type="webp" srcset="/2022/07/aenderungen-im-blog/images/2022-07-28-blog-mobil-menu_hua6d5ae299f7f5f4f7cc2fce7518ec153_49126_300x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="" src="/2022/07/aenderungen-im-blog/images/2022-07-28-blog-mobil-menu_hua6d5ae299f7f5f4f7cc2fce7518ec153_49126_300x0_resize_q95_h2_catmullrom_2.webp" title="" width="300" height="633" loading="lazy" /></picture></a></figure>
|
|||
|
|
<div style="clear: both;"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>Mir gefällt, was der Entwickler des Themes seit langem so macht. Ein schönes Theme für meinen Blog. Danke. 😊</p>]]></content:encoded><enclosure url="https://natenom.de/2022/07/aenderungen-im-blog/cover.webp" length="132274" type="image/webp"/></item><item><title>Änderungen im Blog und im Wiki</title><link>https://natenom.de/2022/05/aenderungen-im-blog-und-im-wiki/</link><pubDate>Tue, 24 May 2022 02:56:03 +0200</pubDate><guid>https://natenom.de/2022/05/aenderungen-im-blog-und-im-wiki/</guid><description><p>Es haben sich wieder ein paar Änderungen angesammelt.</p></description><content:encoded><![CDATA[<p>Es haben sich wieder ein paar Änderungen angesammelt.</p>
|
|||
|
|
<h2 id="blog" data-numberify>Blog<a class="anchor ms-1" href="#blog"></a></h2>
|
|||
|
|
<h3 id="untermenü-in-der-oberen-leiste" data-numberify>Untermenü in der oberen Leiste<a class="anchor ms-1" href="#untermenü-in-der-oberen-leiste"></a></h3>
|
|||
|
|
<p>Da das Untermenü für “Themen” in der oberen Leiste ohne JavaScript nicht erreichbar war, habe ich das zu einem Link verändert, der auf die Seite “Themen im Blog” verweist.</p>
|
|||
|
|
<p>In der mobilen Ansicht funktioniert es leider trotzdem nicht, da dort das gesamte obere Menü nur per JavaScript geladen wird.</p>
|
|||
|
|
<h2 id="wiki" data-numberify>Wiki<a class="anchor ms-1" href="#wiki"></a></h2>
|
|||
|
|
<h3 id="seitenhervorhebung" data-numberify>Seitenhervorhebung<a class="anchor ms-1" href="#seitenhervorhebung"></a></h3>
|
|||
|
|
<p>Dank Vri wird die aktuelle Seite im Wiki schöner hervorgehoben:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-neu.webp" />
|
|||
|
|
<img alt="" src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-neu.webp" title="" width="315" height="418" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Den selben Effekt sieht man beim Hovern.</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-neu-mit-hover.webp" />
|
|||
|
|
<img alt="" src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-neu-mit-hover.webp" title="" width="315" height="418" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Vorher hatte ich das selbst gemacht und entsprechend sah das auch aus:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-vorher.webp" />
|
|||
|
|
<img alt="" src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-12-hervorhebung-in-der-navigation-vorher.webp" title="" width="315" height="418" loading="lazy" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h2 id="inhaltsverzeichnis" data-numberify>Inhaltsverzeichnis<a class="anchor ms-1" href="#inhaltsverzeichnis"></a></h2>
|
|||
|
|
<p>Das Inhaltsverzeichnis wird jetzt immer angezeigt, nicht erst, wie per Voreinstellung, wenn der Blogbeitrag mindestens 280 Wörter hat.</p>
|
|||
|
|
<p>Der zu ändernde Parameter hierfür ist <code>tocWordCount</code> im Bereich <code>[params]</code> in der <code>config.toml</code>. Ich habe den Wert auf 10 (Wörter) eingestellt, sodass man auch in relativ kurzen Blogbeiträgen eine Navigationsmöglichkeit per Inhaltsverzeichnis hat.</p>
|
|||
|
|
<p>Vorher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Blogbeitrag ohne Inhaltsverzeichnis, da weniger als 280 Wörter enthalten sind." srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_280_hu833e6809d8d2f96c55a182d903638bcf_102094_816x0_resize_q95_h2_catmullrom_2.webp" title="Ohne Inhaltsverzeichnis" loading="lazy" width="816" height="607" /></picture><figcaption>Ohne Inhaltsverzeichnis</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Nachher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Der selbe Blogbeitrag mit Inhaltsverzeichnis, da tocwordcount auf 10 umgestellt wurde." srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-tocwordcount_10_hu16b20479d3d7361b4bdd922cfa3bf056_107282_816x0_resize_q95_h2_catmullrom_2.webp" title="Mit Inhaltsverzeichnis" loading="lazy" width="816" height="607" /></picture><figcaption>Mit Inhaltsverzeichnis</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h2 id="blog-und-wiki" data-numberify>Blog und Wiki<a class="anchor ms-1" href="#blog-und-wiki"></a></h2>
|
|||
|
|
<h3 id="externe-links" data-numberify>Externe Links<a class="anchor ms-1" href="#externe-links"></a></h3>
|
|||
|
|
<p>Das zusätzliche Icon, das bei externen Links angezeigt wird, ist jetzt nur dann sichtbar, wenn ein Link auf andere Websites als meine eigenen zeigt.</p>
|
|||
|
|
<p>D. h. ein Link vom Blog zu meinem neuen Wiki wird nicht als extern markiert. Ein Link vom Blog zu Wikipedia schon.</p>
|
|||
|
|
<h3 id="video-shortcode" data-numberify>Video Shortcode<a class="anchor ms-1" href="#video-shortcode"></a></h3>
|
|||
|
|
<p>Ich habe den Shortcode für die Einbindung von Videos verbessert:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Man kann jetzt ein Vorschaubild selbst definieren.</li>
|
|||
|
|
<li>Man kann Markdown innherhalb von <code>caption</code> verwenden. </p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Screenshot, in dem ein Teil des Untertitels eines Videos mittels Markdown formatiert ist." srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-markdown-caption_hud532cde31654c11feda1d89de5222c4b_6640_816x0_resize_q95_h2_catmullrom_2.webp" title="" loading="lazy" width="816" height="91" /></picture><figcaption></figcaption></figure><p>
|
|||
|
|
</li>
|
|||
|
|
<li>Der Vorgabetext <code>Link to Video</code> ist via <code>linktext=</code> änderbar oder in der <code>config.toml</code> via <code>shortcode_video_linktext</code>.</li>
|
|||
|
|
<li>Enthält der Pfad zum Video einen bestimmten Teilstring, dann wird das Video nicht eingebunden und stattdessen ein Infotext angezeigt. </p><figure class="image-caption"><picture><source type="webp" srcset="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-entferntem-video.webp" />
|
|||
|
|
<img alt="Statt eines Videos wird ein Infotext angezeigt, der informiert, dass das Video aus Gründen nicht eingebunden wurde." src="/2022/05/aenderungen-im-blog-und-im-wiki/images/2022-05-24-video-shortcode-mit-entferntem-video.webp" title="Statt das Video einzubinden, wird eine Meldung angezeigt." width="548" height="104" loading="lazy" /></picture><figcaption>Statt das Video einzubinden, wird eine Meldung angezeigt.</figcaption></figure><p>
|
|||
|
|
</li>
|
|||
|
|
<li>Man kann <code>type=</code> selbst angeben für den MIME-Typ der eingebundenen Datei oder sich darauf verlassen, dass der Shortcode diesen selbst anhand der Dateiendung erkennt und ausgibt.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Prinzipiell kann man mit dem Shortcode Video auch reine Audiodateien einbinden. Das ist zwar vermutlich nicht so gut für irgendwas, aber es funktioniert trotzdem.</p>
|
|||
|
|
<p>Alle Möglichkeiten werden auch in der Dokumentation zum “Mitmachen” aufgelistet, <a href="/ueber/mitmachen/#audiovideo">siehe hier</a>.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/05/aenderungen-im-blog-und-im-wiki/cover.webp" length="23400" type="image/webp"/></item><item><title>Hugo sortiert jetzt richtig</title><link>https://natenom.de/2022/05/hugo-sortiert-jetzt-richtig/</link><pubDate>Sat, 14 May 2022 09:30:18 +0200</pubDate><guid>https://natenom.de/2022/05/hugo-sortiert-jetzt-richtig/</guid><description><p>Seit der <a class='urlextern' href="https://github.com/gohugoio/hugo/releases/tag/v0.97.0">Version 0.97.0</a> (vom 14. April 2022) sortiert Hugo auch bei Umlauten und Akzent-Zeichen richtig.</p></description><content:encoded><![CDATA[<p>Seit der <a class='urlextern' href="https://github.com/gohugoio/hugo/releases/tag/v0.97.0">Version 0.97.0</a> (vom 14. April 2022) sortiert Hugo auch bei Umlauten und Akzent-Zeichen richtig.</p>
|
|||
|
|
<p>Bisher war die Sortierung für Umlaute kaputt, sodass z. B. die folgende Reihenfolge entstand:</p>
|
|||
|
|
<pre><code>Allgemein, Autos, Unfall, Zeit, ÖRR, Überholabstand
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Seit Version 0.97 wurde das richtig gestellt, sodass entsteht:</p>
|
|||
|
|
<pre><code>Allgemein, Autos, ÖRR, Überholabstand, Unfall, Zeit
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Kann man z. B. <a href="/tags/page/91/">hier sehen</a>, wo in der alten Version am Ende die ganzen Tags mit <code>Ü</code> am Anfang gelistet waren.</p>
|
|||
|
|
<p>Für Debian gibt es <code>.deb</code>-Pakete für die normale und erweiterte Hugo-Variante auf der oben verlinkten Release-Seite.</p>]]></content:encoded></item><item><title>Mal wieder Änderungen im Blog und im Wiki</title><link>https://natenom.de/2022/05/wieder-aenderungen-blog-und-wiki/</link><pubDate>Tue, 03 May 2022 22:19:53 +0200</pubDate><guid>https://natenom.de/2022/05/wieder-aenderungen-blog-und-wiki/</guid><description>Es haben sich wieder ein paar Änderungen im Blog und im Wiki angesammelt, die ich hier dokumentiere.
|
|||
|
|
Suche beschleunigt Die schönste Änderung ist die Suche, die jetzt sehr schnell Ergebnisse liefert. Zuvor dauerte die Suche je nach Stärke der Client-CPU von vielen Sekunden bis &ldquo;Browser will Tab schließen&rdquo; und die Suchergebnisse ließen auch zu Wünschen übrig.
|
|||
|
|
Jetzt dauert es nur noch eine bis wenige Sekunden.
|
|||
|
|
Ich habe dazu einen eigenen Blogbeitrag geschrieben, siehe hier.</description><content:encoded><![CDATA[<p>Es haben sich wieder ein paar Änderungen im Blog und im Wiki angesammelt, die ich hier dokumentiere.</p>
|
|||
|
|
<h2 id="suche-beschleunigt" data-numberify>Suche beschleunigt<a class="anchor ms-1" href="#suche-beschleunigt"></a></h2>
|
|||
|
|
<p>Die schönste Änderung ist die Suche, die jetzt sehr schnell Ergebnisse liefert. Zuvor dauerte die Suche je nach Stärke der Client-CPU von vielen Sekunden bis “Browser will Tab schließen” und die Suchergebnisse ließen auch zu Wünschen übrig.</p>
|
|||
|
|
<p>Jetzt dauert es nur noch eine bis wenige Sekunden.</p>
|
|||
|
|
<p>Ich habe dazu einen eigenen Blogbeitrag geschrieben, <a href="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/">siehe hier</a>.</p>
|
|||
|
|
<h2 id="sortierte-tags-und-kategorien" data-numberify>Sortierte Tags und Kategorien<a class="anchor ms-1" href="#sortierte-tags-und-kategorien"></a></h2>
|
|||
|
|
<p>Die Listen der Kategorien und Tags in Blogbeiträgen ist jetzt alphabetisch sortiert. Das hat der Entwickler nach meiner Anfrage in sein Theme implementiert, da es ursprünglich unsortiert war bzw. in der selben Reihenfolge angezeigt wurde, wie es auch im Front Matter eingetragen war.</p>
|
|||
|
|
<p>Alphabetisch sortiert ist jetzt die Voreinstellung. Man kann aber auch auch in der <code>config.toml</code> im Bereich <code>[params]</code> einstellen, sodass nach Häufigkeit sortiert wird:</p>
|
|||
|
|
<pre><code>taxonomySortingMethod = "popularity"
|
|||
|
|
</code></pre>
|
|||
|
|
<p>So sieht es jetzt aus (früher war es “unsortiert”):
|
|||
|
|
</p><figure class="image-caption"><picture><source type="webp" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-sortierte-taxonomie.webp" />
|
|||
|
|
<img alt="Sortierte Taxonomie (Kategorien und Tags) aus diesem Beitrag" src="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-sortierte-taxonomie.webp" title="Sortierte Taxonomie" width="806" height="44" loading="lazy" /></picture><figcaption>Sortierte Taxonomie</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h2 id="webp-als-standard" data-numberify>WebP als Standard<a class="anchor ms-1" href="#webp-als-standard"></a></h2>
|
|||
|
|
<p>Da jetzt immer automatisch Bildvarianten auch in JPG erstellt werden, habe ich meine Programme so eingestellt, dass Bilddateien immer im WebP-Format abgespeichert werden. Das betrifft Screenshots, ImagePipe auf Android und mein Script, das automatisch Bilder für den Blog aufbereitet.</p>
|
|||
|
|
<h2 id="rand-um-bilder" data-numberify>Rand um Bilder<a class="anchor ms-1" href="#rand-um-bilder"></a></h2>
|
|||
|
|
<p>Vri hat den Rand um Bilder herum verschönert.</p>
|
|||
|
|
<p>Früher:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="png" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-01-alte-bildumrandung.png" />
|
|||
|
|
<img alt="Frühere Umrandung für Bilder war eine Art nach außen verlaufender Schatten in der Akzentfarbe der aktuell ausgewählten Palette." src="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-01-alte-bildumrandung.png" title="Alter Rand für Bilder" width="238" height="183" loading="lazy" /></picture><figcaption>Alter Rand für Bilder</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Jetzt:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="png" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-01-neue-bildumrandung.png" />
|
|||
|
|
<img alt="Neue Umrandung für Bilder ist eine feste Linie in der Akzentfarbe der aktuell ausgewählten Palette mit abgerundeten Ecken." src="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-01-neue-bildumrandung.png" title="Neuer Rand für Bilder" width="238" height="183" loading="lazy" /></picture><figcaption>Neuer Rand für Bilder</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h2 id="inhaltsverzeichnis-inline" data-numberify>Inhaltsverzeichnis inline<a class="anchor ms-1" href="#inhaltsverzeichnis-inline"></a></h2>
|
|||
|
|
<p>Das Inhaltsverzeichnis befindet sich nicht mehr rechts in der Sidebar sondern immer ganz oben im Blogbeitrag. Es wird ein <code>details</code>-Element verwendet, da aber per Voreinstellung offen ist. Hintergrund ist die Darstellung auf mobilen Geräten, da dort das Inhaltsverzeichnis innerhalb der Sidebar erst ganz am Ende der Seite dargestellt wird. Mit der Änderung hat man auch auf Mobilteräten einfachen Zugriff auf das Inhaltsverzeichnis.</p>
|
|||
|
|
<p>Seit der Umstellung finde ich es auch angenehmer, dass man direkt am Anfang des Blogbeitrags kurz überblicken kann, um was es geht. Selbst auf einem großen Bildschirm auf dem Desktop war das bisher nicht gegeben, weil man eher nicht nach rechts in die Sidebar geschaut hat.</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Inhaltsverzeichnis Inline eines anderen Beitrags" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_816x0_resize_q95_h2_catmullrom_2.webp" title="Inhaltsverzeichnis ist jetzt inline, hier am Beispiel eines anderen Beitrags." loading="lazy" width="816" height="392" /></picture><figcaption>Inhaltsverzeichnis ist jetzt inline, hier am Beispiel eines anderen Beitrags.</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<h2 id="render-hook-für-bilder-angepasst" data-numberify>Render Hook für Bilder angepasst<a class="anchor ms-1" href="#render-hook-für-bilder-angepasst"></a></h2>
|
|||
|
|
<h3 id="a_renderhook-verlinkung" data-numberify>Keine automatische Verlinkung des Originals<a class="anchor ms-1" href="#a_renderhook-verlinkung"></a></h3>
|
|||
|
|
<p>Mein Render Hook für Bilder verlinkt nicht mehr automatisch zum Originalbild, falls dieses breiter ist als 1000 Pixel. Das war sowieso nie intuitiv und weit weg von dem, was Markdown normalerweise macht. Man will schließlich selbst entscheiden, ob etwas verlinkt werden soll und wohin.</p>
|
|||
|
|
<p>Für eine einzelne Seite bekommt man das alte Verhalten zurück, indem man im Front Matter <code>imageAutoLink: true</code> einfügt. Das mache ich bei Blogbeiträgen, bei denen ich hoch aufgelöste Bilder eingefügt hatte und von diesem Verhalten ausging. Erst ab heute werde ich solche Bilder manuell verlinken.</p>
|
|||
|
|
<p>Zudem es jetzt auch wieder möglich, mit der Markdown-Syntax ein Bild selbst irgendwohin zu verlinken, optional auch auf das hochaufgelöste Originalbild. Soll so Link auf das Originalbild eingefügt werden, so kann man diese Syntax verwenden:</p>
|
|||
|
|
<pre><code>[](bild.jpg)
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Das ist aber nur sinnvoll für Bilder ohne Beschreibungstext drunter, da dieser sonst auch als Link gerendert wird.</p>
|
|||
|
|
<p><em>So langsam erschließt sich mir, weshalb die Leute von Hugo das so implementiert haben, dass alles, was mehr benötigt, als nur Bilder ganz einfach einzubinden, per <code>figure</code>-Shortcode gemacht wird.</em></p>
|
|||
|
|
<p>Oder ein Bild mit Verlinkung auf eine URL</p>
|
|||
|
|
<pre><code>[](/lala)
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="angabe-von-breite-und-höhe" data-numberify>Angabe von Breite und Höhe<a class="anchor ms-1" href="#angabe-von-breite-und-höhe"></a></h3>
|
|||
|
|
<p>Mit dem Render Hook eingebundene erhalten jetzt auch eine passende Breiten- und Höhenangabe im HTML-Code, damit der Text dahinter beim Laden von Bildern mit einer langsamen Internetanbindung nicht mehr nach unten springt, sobald das Bild geladen wurde.</p>
|
|||
|
|
<p><em>Bei Galerien passiert das aber noch immer, weil dafür ein Shortcode verwendet wird, der von einem größeren Projekt stammt und den ich nicht so einfach mal anpassen möchte.</em></p>
|
|||
|
|
<h2 id="neuer-figure-shortcode" data-numberify>Neuer figure Shortcode<a class="anchor ms-1" href="#neuer-figure-shortcode"></a></h2>
|
|||
|
|
<p>Ich habe einen neuen Shortcode <code>figure</code> erstellt, der auf dem aktuellen Render Hook basiert (<a href="#a_renderhook-verlinkung">siehe oben</a>).</p>
|
|||
|
|
<p>Dadurch werden, wie auch im Render Hook, nur dann kleine Bildvarianten erstellt, wenn das Originalbild größer als 816 Pixel ist. So gibt es keine vermatschten Bilder mehr, die dadurch entstehen, dass ein kleines Bild vergrößert wird.</p>
|
|||
|
|
<p>Zusätzlich erlaubt der Shortcode die Verwendung von Markdown für den Parameter <code>caption</code> (wie auch beim builtin Shortcode <code>figure</code>), sodass es z. B. möglich wird, einen Link auf eine Lizenz zu setzen, wie das von OpenStreetMap bei Einbindung deren Karten gefordert wird.</p>
|
|||
|
|
<p>Beispiel mit einem Link in der Beschreibung (“caption”):</p>
|
|||
|
|
<pre><code>{{< figure src="2022-05-03-inline-inhaltsverzeichnis.webp" link=""
|
|||
|
|
alt="" title="Ein Titel" width="350"
|
|||
|
|
caption="Eine Caption mit URL wegen Copyright by [Natenom](/)" >}}
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Ergebnis:</p>
|
|||
|
|
<figure class="image-caption"><picture><source type="webp" srcset="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_350x0_resize_q95_h2_catmullrom_2.webp" />
|
|||
|
|
<img alt="" src="/2022/05/wieder-aenderungen-blog-und-wiki/2022-05-03-inline-inhaltsverzeichnis_hu8037093d0769ccab6dfd6ca158f5279d_18854_350x0_resize_q95_h2_catmullrom_2.webp" title="Ein Titel" width="350" height="168" loading="lazy" /></picture><figcaption>Eine Caption mit URL wegen Copyright by <a href="/">Natenom</a></figcaption></figure>
|
|||
|
|
<p>Ich werde die anderen <a class='urlextern' href="https://gohugo.io/content-management/shortcodes/#figure">Parameter, die im builtin-Shortcode <code>figure</code> von Hugo möglich sind</a>, in Zukunft auch noch implementieren, wenn ich sie benötige.</p>
|
|||
|
|
]]></content:encoded></item><item><title>Auswirkungen der Dezentralität von Mastodon und Fediverse – Traffic und Last für Webserver</title><link>https://natenom.de/2022/05/auswirkungen-von-dezentralitaet-mastodon-fediverse-traffic-und-last-fuer-webserver/</link><pubDate>Tue, 03 May 2022 12:28:47 +0200</pubDate><guid>https://natenom.de/2022/05/auswirkungen-von-dezentralitaet-mastodon-fediverse-traffic-und-last-fuer-webserver/</guid><description><![CDATA[<p>Wenn man z. B. auf Twitter einen Blogbeitrag teilt, dann prüft der Twitter-Bot, ob es Meta-Angaben wie <code>twitter:image</code> und <code>twitter:description</code> im HTML-Quelltext des Blogbeitrags gibt, um anhand dieser Information das genannte Coverbild vom Server abzurufen und auf der eigenen Plattform mit Vorschaubild und Textauszug darzustellen.</p>
|
|||
|
|
<p><a class='urlextern' href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter Cards</a> nennt sich dieser Standard. Daneben gibt es noch den Standard “<a class='urlextern' href="https://ogp.me/">Open Graph</a>” (<code>og:image</code> und <code>og:description</code>), den Facebook verwendet, aber auch Mastodon und Friendica.</p>]]></description><content:encoded><![CDATA[<p>Wenn man z. B. auf Twitter einen Blogbeitrag teilt, dann prüft der Twitter-Bot, ob es Meta-Angaben wie <code>twitter:image</code> und <code>twitter:description</code> im HTML-Quelltext des Blogbeitrags gibt, um anhand dieser Information das genannte Coverbild vom Server abzurufen und auf der eigenen Plattform mit Vorschaubild und Textauszug darzustellen.</p>
|
|||
|
|
<p><a class='urlextern' href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter Cards</a> nennt sich dieser Standard. Daneben gibt es noch den Standard “<a class='urlextern' href="https://ogp.me/">Open Graph</a>” (<code>og:image</code> und <code>og:description</code>), den Facebook verwendet, aber auch Mastodon und Friendica.</p>
|
|||
|
|
<p>Im Fall von Facebook und Twitter holt sich deren Bot das einmalig vom Webserver ab, auf dem der Blog ausgeliefert wird.</p>
|
|||
|
|
<p>Und was passiert in einem Netzwerk aus hunderten und möglicherweise tausenden von Instanzen? Richtig, jede Instanz macht das selbe wie Twitter und Facebook.</p>
|
|||
|
|
<h2 id="last-für-den-webserver" data-numberify>Last für den Webserver<a class="anchor ms-1" href="#last-für-den-webserver"></a></h2>
|
|||
|
|
<p>Nachdem ich heute einen Blogbeitrag auf Mastodon verlinkt hatte, habe ich danach die Logs des Webservers ausgewertet mit dem Befehl:</p>
|
|||
|
|
<pre><code>cat blog.log | cut -d'"' -f 6 | grep -E -i "friendica|mastodon" | grep -v Bot | sort | uniq
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Ergebnis:</p>
|
|||
|
|
<pre><code>[…]
|
|||
|
|
http.rb/5.0.4 (Mastodon/3.5.1; +https://floss.social/)
|
|||
|
|
[…]
|
|||
|
|
http.rb/5.0.4 (Mastodon/3.5.1; +https://freiburg.social/)
|
|||
|
|
http.rb/5.0.4 (Mastodon/3.5.1; +https://graz.social/)
|
|||
|
|
http.rb/5.0.4 (Mastodon/3.5.1; +https://hannover.social/)
|
|||
|
|
[…]
|
|||
|
|
http.rb/5.0.4 (Mastodon/3.5.1; +https://hessen.social/)
|
|||
|
|
[…]
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Insgesamt waren es 110 verschiedene Instanzen. Das bedeutet, dass 110 mal der Quelltext des Blogbeitrags und das Coverbild heruntergeladen wurden. Man sollte daher gut wählen, wie groß das Coverbild ist.</p>
|
|||
|
|
<h2 id="skaliert-nicht-gut" data-numberify>Skaliert nicht gut<a class="anchor ms-1" href="#skaliert-nicht-gut"></a></h2>
|
|||
|
|
<p>Ich habe einen relativ kleinen Account auf Mastodon mit um 680 Followern. Was aber, wenn jemand viele Tausend oder gar Millionen Follower hat, die auf tausenden verschiedenen Instanzen sind? Das skaliert dann vermutlich irgendwann nicht mehr sehr gut.</p>
|
|||
|
|
<p>Angenommen, ein Coverbild wäre 1 MB groß und es würden 3000 Instanzen abrufen, dann hätte man nur für das Verlinken eines Blogbeitrags schon 3 GB Traffic verursacht. Dazu kommt, dass die Bots der Instanzen ziemlich zur selben Zeit alles abrufen. Ich habe das live im Log des Webservers verfolgt und das ballert da ordentlich durch.</p>
|
|||
|
|
<h2 id="lösung" data-numberify>Lösung?<a class="anchor ms-1" href="#lösung"></a></h2>
|
|||
|
|
<p>Eine Idee von jemandem auf Mastodon war, dass die Mastodon Instanz, auf dem man den Blogbeitrag zuerst teilt, selbst eine Vorschau und den Text dazu erstellt und die anderen Instanzen das dort abholen. Das würde die Last aber nur vom Webserver weg und hin zu der Instanz des Benutzers verschieben. Besser wäre es, wenn man das auf verschiedene Server verteilen könnte.</p>]]></content:encoded></item><item><title>Suchfunktion im Blog massiv beschleunigt (und wie man Beiträge von der Suche ausschließen kann)</title><link>https://natenom.de/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/</link><pubDate>Sun, 01 May 2022 15:11:04 +0200</pubDate><guid>https://natenom.de/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/</guid><description><![CDATA[<p>Obwohl im Blog als auch im <a href="https://wiki.natenom.de/">Wiki</a> dieselbe Suche (FuseJS) verwendet wird, dauert es im Blog deutlich länger bis die Ergebnisse angezeigt werden, als im Wiki, wo die Ergebnisse fast sofort zu sehen sind.</p>
|
|||
|
|
<p>Meine erst Vermutung war, dass es unter anderem daran liegt, dass es im Blog um die 2600 Beiträge gibt, während es im Wiki “nur” 578 Seiten sind. Daraus ergibt sich für den Blog eine Dateigröße für die <code>index.json</code>-Datei von über 3,8 MiB, während es im Wiki 0,87 MiB sind.</p>
|
|||
|
|
<p>Die genannte json-Datei muss der Client-Browser herunterladen, um darin dann per JavaScript lokal die Suche anzuwenden. Und bei einer Datei um 3,8 MiB dauert das dann sehr lange.</p>
|
|||
|
|
<p>Erst später stellte ich fest, dass es weit mehr Optimierungspotential durch die Konfiguration der Suche via FuseJS gibt.</p>]]></description><content:encoded><![CDATA[<p>Obwohl im Blog als auch im <a href="https://wiki.natenom.de/">Wiki</a> dieselbe Suche (FuseJS) verwendet wird, dauert es im Blog deutlich länger bis die Ergebnisse angezeigt werden, als im Wiki, wo die Ergebnisse fast sofort zu sehen sind.</p>
|
|||
|
|
<p>Meine erst Vermutung war, dass es unter anderem daran liegt, dass es im Blog um die 2600 Beiträge gibt, während es im Wiki “nur” 578 Seiten sind. Daraus ergibt sich für den Blog eine Dateigröße für die <code>index.json</code>-Datei von über 3,8 MiB, während es im Wiki 0,87 MiB sind.</p>
|
|||
|
|
<p>Die genannte json-Datei muss der Client-Browser herunterladen, um darin dann per JavaScript lokal die Suche anzuwenden. Und bei einer Datei um 3,8 MiB dauert das dann sehr lange.</p>
|
|||
|
|
<p>Erst später stellte ich fest, dass es weit mehr Optimierungspotential durch die Konfiguration der Suche via FuseJS gibt.</p>
|
|||
|
|
<p>Es gibt also zwei Ansätze für die Optimierung der Suchfunktion im Blog.</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#a_fusejs-optimieren">FuseJS Einstellungen optimieren</a></li>
|
|||
|
|
<li><a href="#a_beitraege-ausschliessen">Suchindex verkleinern durch Auschließen von Beiträgen</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Letzteres kann man auch umsetzen, wenn man bestimmte Inhalte generell aus der Suche ausschließen möchte.</p>
|
|||
|
|
<h2 id="a_fusejs-optimieren" data-numberify>FuseJS optimieren (das größte Potential)<a class="anchor ms-1" href="#a_fusejs-optimieren"></a></h2>
|
|||
|
|
<p>Es gibt viele Einstellungen für FuseJS. Die Wirkung der meisten Einstellungen verstehe ich nicht wirklich. Ich habe also erst einmal im Blog das selbe eingestellt wie auch in der Suche im Wiki:</p>
|
|||
|
|
<pre><code>shouldSort: true,
|
|||
|
|
includeMatches: true,
|
|||
|
|
threshold: 0.0,
|
|||
|
|
tokenize:true,
|
|||
|
|
location: 0,
|
|||
|
|
distance: 100,
|
|||
|
|
maxPatternLength: 32,
|
|||
|
|
minMatchCharLength: 3,
|
|||
|
|
</code></pre>
|
|||
|
|
<p><em>(Die Syntax für die Einstellungen im Wiki ist eine andere als im Blog. Denn dort sind die Einstellunen nicht im Front Matter hinterlegt, sondern direkt im JavaScript, da ich die <a href="/2022/03/mein-neues-wiki-mit-hugo-neue-suche-und-andere-optimierungen/">Originalsuchfunktion im Wiki selbst durch FuseJS ersetzt hatte</a>)</em></p>
|
|||
|
|
<p>Im Blog wird daraus in der Datein <code>config.toml</code> im Bereich <code>params</code>:</p>
|
|||
|
|
<pre><code>search.fuse.threshold = 0.0
|
|||
|
|
search.fuse.location = 0
|
|||
|
|
search.fuse.distance = 100
|
|||
|
|
search.fuse.minMatchCharLength = 3
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Hier die <a class='urlextern' href="https://hbs.razonyang.com/en/docs/layouts/search/">Hilfeseite zu FuseJS, wie es im Blog verwendet wird</a>.</p>
|
|||
|
|
<p>Hier die vollständige Liste der Einstellungen für FuseJS <a class='urlextern' href="https://fusejs.io/api/options.html">gibt es hier</a>.</p>
|
|||
|
|
<h3 id="ergebnis-der-vom-wiki-übernommenen-einstellungen" data-numberify>Ergebnis der vom Wiki übernommenen Einstellungen<a class="anchor ms-1" href="#ergebnis-der-vom-wiki-übernommenen-einstellungen"></a></h3>
|
|||
|
|
<p>Vor den Änderungen hatte eine Suche nach z. B. <a href="/search/?q=ettlingen%20und%20zur%c3%bcck">“ettlingen und zurück”</a> im Chromium-Browser 20 Sekunden gedauert und es wurden 1741 Ergebnisse gefunden, von denen nur das erste Ergebnis alle Begriffe beinhaltete.</p>
|
|||
|
|
<p>Die vielen weiteren Ergebnise sind vermutlich dem Fuzzy-Search geschuldet. Aber damit kann ich persönlich eh nichts anfangen, das konnte also eh weg.</p>
|
|||
|
|
<p></p><figure class="image-caption"><a href="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog.png"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Suchergebnisse im Blog nach den Begriffen &rsquo;ettlingen und zurück&rsquo;. Das erste Ergebnis passt, der Rest beinhaltet nicht alle Begriffe." srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-alte-suche-blog_hu96fb3dbd42b5654a9bcde5e47dda7aec_174593_816x0_resize_q95_h2_catmullrom_3.webp" title="Suche im Blog mit alten Einstellungen." loading="lazy" width="816" height="567" /></picture></a><figcaption>Suche im Blog mit alten Einstellungen.</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Nach der Änderung der Sucheinstellungen dauert die Suche weniger als 1 Sekunde und es wird nur das einzig passende Ergebnis angezeigt:</p>
|
|||
|
|
<p></p><figure class="image-caption"><a href="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog.png"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Suchergebnisse im Blog nach den Begriffen &rsquo;ettlingen und zurück&rsquo;. Das einzigen beiden Ergebnisse passen." srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog_huea1de37256a471ce19793b95172bd4dd_145748_816x0_resize_q95_h2_catmullrom_3.webp" title="Suche im Blog mit neuen Einstellungen." loading="lazy" width="816" height="389" /></picture></a><figcaption>Suche im Blog mit neuen Einstellungen.</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Bei anderen Suchbegriffen, wie z. B. “Staatsanwaltschaft”, wurden wegen Fuzzy-Search Ergebnisse gefunden, die den Begriff “Staatsanwaltschaft” gar nicht beinhalteten sondern nur eine Teilmenge der selben Buchstaben in anderen Konstellationen und Wörtern. So war ein Ergebnis z. B. der Blogbeitrag mit dem Titel “<a href="/2016/12/fotografie-landschaft/">Fotografie: Landschaft</a>”, der nur Fotos und gar keinen Text beinhaltete.</p>
|
|||
|
|
<h3 id="a_erweiterte-suche" data-numberify>Erweiterte Suche aktiviert<a class="anchor ms-1" href="#a_erweiterte-suche"></a></h3>
|
|||
|
|
<p>Ich habe im Blog für FuseJS auch gleich die erweiterte Suche aktiviert, denn damit kann man tolle Dinge machen, wie man <a class='urlextern' href="https://fusejs.io/examples.html#extended-search">hier nachlesen kann</a>.</p>
|
|||
|
|
<p>So findet man z. B. alle Blogbeiträge, die mit dem String “Fotos” beginnen:</p>
|
|||
|
|
<pre><code>^Fotos
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Oder mit dem String “werfen” enden:</p>
|
|||
|
|
<pre><code>werfen$
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Mit den alten Einstellungen für die Suche findet diese für “werfen” 2216 Ergebnisse und die meisten beinhalten den Begriff nicht einmal.</p>
|
|||
|
|
<p>Leerzeichen werden als <code>AND</code> verwendet und für <code>OR</code> nutzt man Pipe-Zeichen (<code>|</code>).</p>
|
|||
|
|
<p>Zur Aktivierung der erweiterten Suche fügt man in die Datei <code>config.toml</code> im Bereich <code>[params]</code> ein:</p>
|
|||
|
|
<pre><code>search.fuse.useExtendedSearch = true
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Man findet zusätzlich noch ein paar mehr relevante Ergebnisse auch ohne explizite Verwendung der erweiterten Möglichkeiten.</p>
|
|||
|
|
<h3 id="ergebnis-der-optimierung-der-fusejs-einstellungen" data-numberify>Ergebnis der Optimierung der FuseJS-Einstellungen<a class="anchor ms-1" href="#ergebnis-der-optimierung-der-fusejs-einstellungen"></a></h3>
|
|||
|
|
<p>Jetzt bin ich auch im Blog mit der Suchfunktion sehr zufrieden. Ich habe bisher alles gefunden, wonach ich testweise gesucht habe, und das ohne viele, viele weitere unnötige Suchergebnisse.</p>
|
|||
|
|
<p>Dazu gibt es jetzt noch erweiterte Suchfunktionen, wie oben beschrieben. Damit muss ich mich nur erinnern, welche Begriffe ich in einem Beitrag verwendet haben könnte.</p>
|
|||
|
|
<p>Zum Beispiel hatte ich mal den Spruch “rechter Reifen Mittelstreifen” verwendet, den ich jetzt so auch finde. Zusätzlich kann ich Beiträge finden, die genau diesen String enthalten ODER mit dem String “bußgeldstelle” beginnen mit <code>"rechter reifen mittelstreifen"|^bußgeldstelle</code> und <a href="/search/?q=%22rechter%20reifen%20mittelstreifen%22%7C%5Ebu%C3%9Fgeldstelle">das Ergebnis beinhaltet 17 Blogbeiträge</a>:</p>
|
|||
|
|
<p></p><figure class="image-caption"><a href="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2.png"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_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/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-2_huc3fccf615613d0c1192e671f097a39d3_224448_816x0_resize_q95_h2_catmullrom_3.webp" title="" loading="lazy" width="816" height="543" /></picture></a><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Sucht man nur nach “bußgeldstelle”, dann werden 26 Blogbeiträge gefunden.</p>
|
|||
|
|
<p>Und die Suche ist jetzt schnell, die Ergebnisse sind immer nach circa einer Sekunde da (in Chromium, in Firefox aus dem selben Rechner nach ca. 3 bis 4 Sekunden..</p>
|
|||
|
|
<p>Und als mir dann noch einfiel, dass die Bußgeldstelle mir gegenüber mal die Kombination “scharf rechts” verwendete, kann ich auch danach noch suchen mit dem Suchbegriff <code>bußgeldstelle "scharf rechts"</code> und <a href="/search/?q=bu%C3%9Fgeldstelle%20%22scharf%20rechts%22">das Ergebnis ist</a>:</p>
|
|||
|
|
<p></p><figure class="image-caption"><a href="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts.png"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_360x0_resize_q95_h2_catmullrom_3.webp 360w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_500x0_resize_q95_h2_catmullrom_3.webp 500w,/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_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/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_360x0_resize_q95_h2_catmullrom_3.webp 360w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_500x0_resize_q95_h2_catmullrom_3.webp 500w, /2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_816x0_resize_q95_h2_catmullrom_3.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/images/2022-05-01-neue-suche-blog-scharf-rechts_hu0a35505a144d92ce3c9f8bef6a0934c1_96275_816x0_resize_q95_h2_catmullrom_3.webp" title="" loading="lazy" width="816" height="272" /></picture></a><figcaption></figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Kurz: Die neue Suche rockt 👍 😄</p>
|
|||
|
|
<h2 id="a_beitraege-ausschliessen" data-numberify>Bestimmte Dinge aus der Suche ausschließen (wenig Potenzial)<a class="anchor ms-1" href="#a_beitraege-ausschliessen"></a></h2>
|
|||
|
|
<p>Mein erster Ansatz war es, bestimmte Dinge aus dem Suchindex auszuschließen. Erst danach probierte ich die <a href="#a_fusejs-optimieren">Optimierung der Einstellungen von FuseJS</a> aus, das letzlich zum erhofften Performanceschub führte.</p>
|
|||
|
|
<p>Ich will das hier aber trotzdem stehen lassen, da es vielleicht je nach Website nützlich sein kann, bestimmte Kategorien oder alte Blogbeiträge vom Suchindex auszuschließen.</p>
|
|||
|
|
<h3 id="kategorien-ausschließen" data-numberify>Kategorien ausschließen<a class="anchor ms-1" href="#kategorien-ausschließen"></a></h3>
|
|||
|
|
<p>Man kann Kategorien ausschließen, die sowieso wenig gesucht werden, weil sie z. B. fast nur Fotos enthalten oder auch Kategorien, zu denen es schon lange keine Inhalte mehr gab, wie hier im Blog z. B. “Spiele”.</p>
|
|||
|
|
<h3 id="alte-beiträge-ausschließen" data-numberify>Alte Beiträge ausschließen<a class="anchor ms-1" href="#alte-beiträge-ausschließen"></a></h3>
|
|||
|
|
<p>Genau. Siehe unten. 😊</p>
|
|||
|
|
<h3 id="inhalt-teilweise-aus-der-suche-entfernen" data-numberify>Inhalt (teilweise) aus der Suche entfernen<a class="anchor ms-1" href="#inhalt-teilweise-aus-der-suche-entfernen"></a></h3>
|
|||
|
|
<p>Derzeit beinhaltet die json-Datei noch den kompletten Inhalt eines Blogbeitrags. Das könnte man ändern und nur noch z. B. Tags, Kategorien, Daten aus dem Front Matter und vielleicht noch die ersten 250 Zeichen des Inhalts jedes Blogbeitrags in die json-Datei einfügen.</p>
|
|||
|
|
<p>Das gefällt mir aber nicht, da man dann auch nur Dinge findet, die in diesen ersten 250 Zeichen enthalten sind.</p>
|
|||
|
|
<h3 id="umsetzung-an-einem-beispiel" data-numberify>Umsetzung an einem Beispiel<a class="anchor ms-1" href="#umsetzung-an-einem-beispiel"></a></h3>
|
|||
|
|
<p>Hier beispielhaft eine Erläuterung, wie man Blogbeiträge von der Suche (bzw. von der Eintragung in die <code>index.json</code>) ausschließt, die die folgenden Bedingungen erfüllen.</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Beiträge, die älter sind als 5 Jahre.</li>
|
|||
|
|
<li>Beiträge, die zu den folgenden Kategorien gehören:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="/categories/fotografie/">Fotografie</a></li>
|
|||
|
|
<li><a href="/categories/mumble/">Mumble</a></li>
|
|||
|
|
<li><a href="/categories/mumble/">Musik</a></li>
|
|||
|
|
<li><a href="/categories/spiele/">Spiele</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Zur Umsetzung muss man die Datei <code>themes/hugo-theme-bootstrap/layouts/index.json</code> nach <code>layouts/index.json</code> kopieren und wie folgt anpassen:</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">-</span> <span style="color:#960050;background-color:#1e0010">$</span>.Scratch.Add <span style="color:#e6db74">"index"</span> slice -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> range .Site.RegularPages -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">if</span> ge <span style="color:#f92672">(</span>sub now.Year .Date.Year<span style="color:#f92672">)</span> <span style="color:#ae81ff">4</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> <span style="color:#66d9ef">or</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">in</span> .Params.categories <span style="color:#e6db74">"Musik"</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">in</span> .Params.categories <span style="color:#e6db74">"Fotografie"</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">in</span> .Params.categories <span style="color:#e6db74">"Mumble"</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">in</span> .Params.categories <span style="color:#e6db74">"Spiele"</span><span style="color:#f92672">)</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">else</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>date <span style="color:#f92672">:=</span> .Date.Format <span style="color:#960050;background-color:#1e0010">$</span>.Site.Params.dateFormat -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>title <span style="color:#f92672">:=</span> .Title <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">if</span> <span style="color:#960050;background-color:#1e0010">$</span>.Site.Params.titleCase -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>title <span style="color:#f92672">=</span> title <span style="color:#960050;background-color:#1e0010">$</span>title -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">:=</span> <span style="color:#e6db74">""</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">if</span> .Params.Images -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">=</span> index .Params.Images <span style="color:#ae81ff">0</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">absURL</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">else</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>images <span style="color:#f92672">:=</span> .Resources.ByType <span style="color:#e6db74">"image"</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>featured <span style="color:#f92672">:=</span> <span style="color:#960050;background-color:#1e0010">$</span>images.GetMatch <span style="color:#e6db74">"*feature*"</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">if</span> <span style="color:#66d9ef">not</span> <span style="color:#960050;background-color:#1e0010">$</span>featured <span style="color:#75715e">}}{{</span> <span style="color:#960050;background-color:#1e0010">$</span>featured <span style="color:#f92672">=</span> <span style="color:#960050;background-color:#1e0010">$</span>images.GetMatch <span style="color:#e6db74">"{*cover*,*thumbnail*}"</span> <span style="color:#75715e">}}{{</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">with</span> <span style="color:#960050;background-color:#1e0010">$</span>featured -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">=</span> <span style="color:#960050;background-color:#1e0010">$</span>featured.Permalink -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>item <span style="color:#f92672">:=</span> <span style="color:#f92672">(</span>dict <span style="color:#e6db74">"title"</span> <span style="color:#960050;background-color:#1e0010">$</span>title <span style="color:#e6db74">"tags"</span> .Params.tags <span style="color:#e6db74">"categories"</span> .Params.categories <span style="color:#e6db74">"series"</span> .Params.series <span style="color:#e6db74">"content"</span> .Plain <span style="color:#e6db74">"permalink"</span> .Permalink <span style="color:#e6db74">"date"</span> <span style="color:#960050;background-color:#1e0010">$</span>date <span style="color:#e6db74">"img"</span> <span style="color:#960050;background-color:#1e0010">$</span>img<span style="color:#f92672">)</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>.Scratch.Add <span style="color:#e6db74">"index"</span> <span style="color:#960050;background-color:#1e0010">$</span>item -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> end <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>.Scratch.Get <span style="color:#e6db74">"index"</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">uniq</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">jsonify</span> -<span style="color:#75715e">}}</span></span></span></code></pre></div>
|
|||
|
|
<p>Um einen Hinweis auf der Suchseite einfügen zu können, kopiert man die Datei <code>themes/hugo-theme-bootstrap/layouts/_default/search.html</code> nach <code>layouts/_default/search.html</code> und trägt z. B. ein:</p>
|
|||
|
|
<pre><code><p><a href="/ueber/suche/">Hinweis: Einige Blogbeiträge sind von der Suche ausgeschlossen. Für Details hier klicken.</a></p>
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="ergebnis-der-optimierung-via-weglassen" data-numberify>Ergebnis der Optimierung via Weglassen<a class="anchor ms-1" href="#ergebnis-der-optimierung-via-weglassen"></a></h3>
|
|||
|
|
<p>Im Ergebnis wurde die index.json statt 3,8 MiB nur noch ca. 1,4 MiB groß. Ohne <a href="#a_fusejs-optimieren">Optimierung der Sucheinstellungen von FuseJS</a> wurde das aber nur etwas schneller.</p>]]></content:encoded><enclosure url="https://natenom.de/2022/05/suchfunktion-im-blog-massiv-beschleunigt-und-ausschluss-von-beitraegen/cover.png" length="174624" type="image/png"/></item><item><title>Verbesserung des Render Hooks für Bilder hier im Blog (und im Wiki)</title><link>https://natenom.de/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/</link><pubDate>Wed, 27 Apr 2022 02:20:37 +0200</pubDate><guid>https://natenom.de/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/</guid><description><![CDATA[<p>Nach dem letzten Blogbeitrag zu meinem neuen <a href="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/">Render Hook zum Einbinden von Bildern in Hugo</a> habe ich von <a class='urlextern' href="https://benjaminneff.ch/">SuperTux88</a> wertvolle Rückmeldungen bekommen. Vielen Dank dafür. 👍</p>]]></description><content:encoded><![CDATA[<p>Nach dem letzten Blogbeitrag zu meinem neuen <a href="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/">Render Hook zum Einbinden von Bildern in Hugo</a> habe ich von <a class='urlextern' href="https://benjaminneff.ch/">SuperTux88</a> wertvolle Rückmeldungen bekommen. Vielen Dank dafür. 👍</p>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content"><p>Update 1: Den Shortcode und den Hook gibt es hier zum herunterladen, <a href="#a_download">siehe unten</a>.</p>
|
|||
|
|
<p>Update 2 (04.04.2023): Es gibt wieder einen verbesserten Render Hook, der sich am Ursprungsformat eines Fotos orientiert, nur auf Webp für die Bildvarianten ausgelegt ist und somit sehr viel schneller ist und viel weniger Daten produziert, <a href="/2023/04/shortcode-und-render-hook-fuer-hugo-verbessert-weniger-datenmuell-und-schnelleres-rendern/">siehe hier</a>.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2 id="die-rückmeldungen" data-numberify>Die Rückmeldungen<a class="anchor ms-1" href="#die-rückmeldungen"></a></h2>
|
|||
|
|
<p>Die Rückmeldungen sind im Einzelnen aufgelistet…</p>
|
|||
|
|
<h3 id="mehr-monitor" data-numberify>Mehr Monitor<a class="anchor ms-1" href="#mehr-monitor"></a></h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Wenn jemand einen 4k Monitor hat, dann freut er sich über Bilder, die höher aufgelöst sind als nur 816 Pixel in der Breite.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Meine Lösung: Wenn das Originalbild breiter ist als 1632 Pixel, dann wird zusätzlich noch ein hoch aufgelöstes Bild erzeugt mit 1632 Pixel Breite. In meinem Blog trifft das z. B. auf einzelne Fotos oder Panoramabilder zu, die mindestens 2000 Pixel breit sind.</p>
|
|||
|
|
<h3 id="webp-und-jpg" data-numberify>WebP und JPG<a class="anchor ms-1" href="#webp-und-jpg"></a></h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Hugo kann man anweisen, die Varianten des Originalbilds immer als WebP zu erzeugen, auch wenn das Original ein anderes Format hat.</li>
|
|||
|
|
<li><del>Safari auf Mac OS kann noch nicht mit WebP umgehen</del>. Korrektur: Nur Safari auf alten Mac OS Systemen kann kein WebP. Es hängt wohl vom Betriebssystem ab und das aktuelle Mac OS kann WebP.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Lösung: Für alle Bilder werden jetzt kleine Bildvarianten in den Formaten JPG und WebP erzeugt. Beide Dateiformate werden zur Verfügung gestellt. WebP ist der Standard und JPG das Fallback (z. B. für Safari und Mac OS).</p>
|
|||
|
|
<h3 id="4k-simulieren" data-numberify>4k “simulieren”<a class="anchor ms-1" href="#4k-simulieren"></a></h3>
|
|||
|
|
<p>Im Browser auf 200 % zoomen, dann bekommt man auch die große Bildvariante geliefert, wenn sie vorhanden ist, siehe nächster Abschnitt.</p>
|
|||
|
|
<h2 id="wie-der-neue-render-hook-arbeitet" data-numberify>Wie der neue Render Hook arbeitet<a class="anchor ms-1" href="#wie-der-neue-render-hook-arbeitet"></a></h2>
|
|||
|
|
<p>Und aus all den Vorschlägen und viel Arbeit ist nun das neue Render Hook entstanden, das wie folgt arbeitet (und damit etwas anders als <a href="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/#wie-der-neue-render-hook-funktioniert">bisher</a>):</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ist das Originalbild eine <code>.webp</code>-Datei, dann wird dieses konvertiert und eine <code>.jpg</code>-Datei erzeugt, sodass beide Formate vorliegen.</li>
|
|||
|
|
<li>Ist das Originalbild eine <code>.jpg</code>-Datei, dann wird dieses konvertiert und eine <code>.webp</code>-Datei erzeugt, sodass beide Formate vorliegen.</li>
|
|||
|
|
<li>Ist das Originalbild eine andere von Hugo unterstützte Datei, dann wird diese konvertiert und sowohl eine <code>.webp</code>- als auch in eine <code>.jpg</code>-Datei erzeugt, sodass beide Formate vorliegen.</li>
|
|||
|
|
<li>Ist das Originalbild 816 Pixel breit oder breiter, dann wird ein srcset erzeugt für die Breiten 360, 500, 816 und optional bei Bildern über 1632 Pixeln noch zusätzlich 1632 Pixel Breite.</li>
|
|||
|
|
<li>Ist das Originalbild kleiner als 816 Pixel, dann wird nur das Originalbild ohne srcset in der Seite eingebunden und es findet keine Verlinkung statt und es werden keine kleinen Bildvarianten erzeugt.</li>
|
|||
|
|
<li>Ist das Originalbild breiter als 1000 Pixel, dann wird um die einbegundene verkleinerte Variante herum ein Link auf das Originalbild gesetzt.</li>
|
|||
|
|
<li>In allen Fällen wird das Bild per <code>picture</code>-Element eingebunden. Dieses enthält immer als Voreinstellung per <code>source</code>-Element (<a class='urlextern' href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source">Dokumentation</a>) alle Bildgrößen im <code>.webp</code>-Format und als Fallback im <code>img</code>-Element alle Bildgrößen im <code>.jpg</code>-Format.</li>
|
|||
|
|
<li>Liegt das Bild nicht im <code>Page Bundle</code>, dann wird es ohne irgendwelche Zusätze per <code>img</code>-Element eingebunden.</li>
|
|||
|
|
<li>Bilder werden immer per Lazy loading eingebunden.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="vorteile-der-neuen-variante-des-render-hooks" data-numberify>Vorteile der neuen Variante des Render Hooks<a class="anchor ms-1" href="#vorteile-der-neuen-variante-des-render-hooks"></a></h2>
|
|||
|
|
<p>Ich kann für die Originalbilder alle Formate verwenden, die Hugo konvertieren kann. Das sind <code>bmp, gif, jpeg, jpg, png, tif, tiff, webp</code>. Alle kleinen Bildvarianten werden jedoch im JPG- und WebP-Format zur Verfügung gestellt.</p>
|
|||
|
|
<h2 id="beispiele" data-numberify>Beispiele<a class="anchor ms-1" href="#beispiele"></a></h2>
|
|||
|
|
<p>So sieht es z. B. aus, wenn das Originalbild eine circa 5000 Pixel breites WebP-Datei ist <em>(Pfade und Dateinamen auf das Wesentliche gekürzt)</em>:</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-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">figure</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image-caption"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala.webp"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">picture</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">source</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image/webp"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"360x.webp 360w,500x.webp 500w,816x.webp 816w, 1632x.webp 1632w"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">sizes</span><span style="color:#f92672">=</span><span style="color:#e6db74">"(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> />
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">img</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"360x.jpg 360w, 500x.jpg 500w, 816x.jpg 816w, 1632x.jpg 1632w,"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">sizes</span><span style="color:#f92672">=</span><span style="color:#e6db74">"(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1632x.jpg"</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala"</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lazy"</span> />
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">picture</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">a</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">figcaption</span>>lala</<span style="color:#f92672">figcaption</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">figure</span>></span></span></code></pre></div>
|
|||
|
|
<p>Und so sieht es aus, wenn die Datei schmaler als 816 Pixel 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-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">figure</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image-caption"</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">picture</span>><<span style="color:#f92672">source</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image/webp"</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"330x.webp"</span> />
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">img</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala"</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala.jpg"</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lala"</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">"lazy"</span> /></<span style="color:#f92672">picture</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">figcaption</span>>lala</<span style="color:#f92672">figcaption</span>>
|
|||
|
|
</span></span><span style="display:flex;"><span></<span style="color:#f92672">figure</span>></span></span></code></pre></div>
|
|||
|
|
<h2 id="unschöne-platzverschwendung" data-numberify>Unschöne Platzverschwendung<a class="anchor ms-1" href="#unschöne-platzverschwendung"></a></h2>
|
|||
|
|
<div class="shortcode-notice update">
|
|||
|
|
<div class="shortcode-notice-title update">
|
|||
|
|
Update</div>
|
|||
|
|
<div class="notice-content"><p>29.04.2022: Eindeutig Unfähigkeit 🤪</p>
|
|||
|
|
<p>Mit den genannten Befehlen wird das Ergebnis ins HTML gerendert. Das Bild wird aber schon beim Befehl <code>.Resize</code> generiert. Danke für die Klarstellung.</p>
|
|||
|
|
<p>Durch eine zur Verfügung gestellte Beispielimplementierung von SuperTux88 hab ich einige Dinge über Hugo gelernt, die ich vorher nicht wusste. Bin halt Anwender, kein Programmierer. 🤪 Dadurch konnte ich den Render Hook so umsetzen, wie ich es eigentlich vor hatte.</p>
|
|||
|
|
<p>Zum Beispiel werden jetzt nicht mehr immer alle möglichen Bildgrößen erzeugt sondern nur die benötigten. Für den Blog bedeutet das eine Verkleinerung der genertierten Bilddateien von 700 MiB auf 244 MiB und für das Wiki von 644 MiB auf 355 MiB.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p><del>Entweder liegt es an meiner Unfähigkeit oder an Hugo, dass Bildvarianten, die gar nicht verwendet werden und in irgendwelchen If-Bedingungen im Render Hook stehen und gar nicht erfüllt werden, trotzdem jedes Mal erzeugt werden. Stört mich nicht sehr, da sie niemals ausgeliefert werden, aber sie sind da und belegen Speicherplatz. Vielleicht kann ich das in Zukunft noch lösen.</del></p>
|
|||
|
|
<p><del>Laut <a class='urlextern' href="https://gohugo.io/content-management/image-processing/#image-rendering">Dokumentation</a> sollte meinem Verständnis nach das Bild erst dann generiert werden, wenn einer dieser “Befehle” auf das Bild ausgeführt wird: <code>Permalink, RelPermalink, Width, Height</code>.</del></p>
|
|||
|
|
<p><del>Im Render Hook reicht aber schon so eine Zeile aus, um das Bild zu generieren</del>:</p>
|
|||
|
|
<pre><code>{{- $img_webp := $img.Resize "600x webp" -}}
|
|||
|
|
</code></pre>
|
|||
|
|
<p><del>Wer darüber etwas weiß, darf sich gerne melden. 🙂</del></p>
|
|||
|
|
<h2 id="verbesserungen" data-numberify>Verbesserungen?<a class="anchor ms-1" href="#verbesserungen"></a></h2>
|
|||
|
|
<p>Vielleicht wäre es sinnvoller, immer auf die konvertierte jpg-Datei zu verlinken. Oder auf die webp-Datei? Kann man das irgendwie so in HTML einbinden, dass sich der Browser je nach Fähigkeit selbst aussuche, welchen Link zu welchem Ziel er wählt?</p>
|
|||
|
|
<h2 id="nützliches-zum-picture-tag" data-numberify>Nützliches zum Picture-Tag<a class="anchor ms-1" href="#nützliches-zum-picture-tag"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Antwort auf die Frage, ob man ein <code>picture</code>-Element in ein <code>figure</code>-Element stecken darf, <a class='urlextern' href="https://stackoverflow.com/a/23941403">siehe hier</a>. Spoiler: Definitiv. Und hier zur <a class='urlextern' href="https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content">weiteren Lektüre</a> dazu.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="a_download" data-numberify>Shortcode und Hook zum Herunterladen<a class="anchor ms-1" href="#a_download"></a></h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="downloads/figure.html.txt">figure.html</a></li>
|
|||
|
|
<li><a href="downloads/render-image.html.txt">render-image.html</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Das .txt am Ende muss entfernt werden.</p>]]></content:encoded></item><item><title>Einbindung von Bildern in Hugo – Infos und eigener Render Hook</title><link>https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/</link><pubDate>Sun, 24 Apr 2022 12:01:40 +0200</pubDate><guid>https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/</guid><description><p>Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht.</p></description><content:encoded><
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Das bedeutet konkret:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Keine Möglichkeit zur Angabe, wie groß das Bild dargestellt wird, es wird immer maximal groß angezeigt.</li>
|
|||
|
|
<li>Es werden keine kleineren Bildvarianten erstellt. Ist ein Bild z. B. 10 MiB groß, 2000 Pixel breit und beträgt der zur Verfügung stehende Platz im Blog nur 800 Pixel in der Breite, so wird trotzdem das Originalbild mit 2000 Pixeln eingebunden, nur eben verkleinert und man muss 10 MiB herunterladen.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="a_renderhook" data-numberify>Render Hook<a class="anchor ms-1" href="#a_renderhook"></a></h3>
|
|||
|
|
<p>Für einen <a class='urlextern' href="https://gohugo.io/templates/render-hooks/">Render Hook</a> erstellt man die Datei <code>layouts/_default/_markup/render-image.html</code>.</p>
|
|||
|
|
<p>Hier kann man Programmcode hinterlegen, der ausgeführt wird, sobald die Standard-Markdown-Syntax für die Einbindung von Bildern gerendert wird.</p>
|
|||
|
|
<p>Dies hat den Vorteil, dass man im Gegensatz zu einem <a href="#a_shortcode">Shortcode</a> beim Standard-Markdown bleiben oder diesen auch erweitern kann.</p>
|
|||
|
|
<h3 id="a_theme" data-numberify>Theme-Erweiterungen<a class="anchor ms-1" href="#a_theme"></a></h3>
|
|||
|
|
<p>Das hier im Blog verwendete Theme ‘<a class='urlextern' href="https://hbs.razonyang.com/en/docs/image-processing/">Bootstrap</a>’ stellt einige Möglichkeiten zum Einbinden von Bildern bereit. So kann man z. B. Bilder verkleinert anzeigen lassen und dafür wird auch wirklich eine kleinere Variante des Originalbildes erzeugt (wenn das Bild Teil des <code>Page Bundles</code> ist).</p>
|
|||
|
|
<p>Es kann eine erweitere Standard-Markdown-Syntax verwendet werden, wie z. B.</p>
|
|||
|
|
<pre><code>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Letztlich wird das üer einen Render Hook ermöglicht, siehe <a href="#a_renderhook">oben</a>.</p>
|
|||
|
|
<h3 id="a_shortcode" data-numberify>Shortcode<a class="anchor ms-1" href="#a_shortcode"></a></h3>
|
|||
|
|
<p>Es gibt im Netz verschiedene Lösungen in Form von Shortcodes, die z. B. automatisch kleinere Varianten der Bilder erstellen und diese einbinden statt des Originals und es auch ermöglichen, einen Link auf das Originalbild zu setzen, einen Text unter dem Bild anzuzeigen und mehr.</p>
|
|||
|
|
<p>Solch einen Shortcode hatte ich bis vor kurzem auch verwendet. Jedoch muss man für Shortcodes eine andere Syntax verwenden, z. B. für den Shortcode <code>bildeinbinden</code>:</p>
|
|||
|
|
<pre><code>{{< bildeinbinden src="" link="" alt="" title="" width="" >}}
|
|||
|
|
</code></pre>
|
|||
|
|
<h2 id="so-nah-am-standard-wie-möglich" data-numberify>So nah am Standard, wie möglich<a class="anchor ms-1" href="#so-nah-am-standard-wie-möglich"></a></h2>
|
|||
|
|
<p>Ich bevorzuge die Verwendung von gegebenen Standards statt einer eigenen Lösung. Denn so werden Probleme beim Wechsel eines Themes oder auch beim Export minimiert.</p>
|
|||
|
|
<p>So verwende ich lieber die Standard-Markdown-Syntax für das Einbinden von Bildern in Hugo statt eines eigenen Shortcodes, dessen Parameter man sich mehr oder weniger merken muss. Zudem ist es für neue Menschen leichter.</p>
|
|||
|
|
<p>Deshalb habe ich mich hier im Blog für einen Render Hook entschieden, um Bilder einzubinden.</p>
|
|||
|
|
<h2 id="der-eigene-render-hook" data-numberify>Der eigene Render Hook<a class="anchor ms-1" href="#der-eigene-render-hook"></a></h2>
|
|||
|
|
<p>Als Ausgangspunkt habe ich <a class='urlextern' href="https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html">diese Version hier</a> verwendet und für meine Anforderungen angepasst.</p>
|
|||
|
|
<p>Die Syntax ist die selbe wie in Hugo:</p>
|
|||
|
|
<pre><code>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>z. B.</p>
|
|||
|
|
<pre><code>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Im Ergebnis das 200 Pixel breite Bild, das nicht automatisch verlinkt wird, weil es zu klein ist:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture><source type="jpeg" srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-200px.jpg" />
|
|||
|
|
<img alt="Ein Demobild mit Radfahrenden, um zu verdeutlichen, wie ein Bild mit dem eigenen Render Hook eingebunden wird. " src="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-200px.jpg" title="Radfahrende in Pforzheim" width="200" height="133" loading="lazy" /></picture><figcaption>Radfahrende in Pforzheim</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Und hier ein Beispiel eines Bildes, das 2000 Pixel breit ist und deshalb automatisch zum Originalbild verlinkt, während automatisch eine erzeugte kleinere Variante (800 Pixel breit) des Originalbildes hier eingebunden wird.</p>
|
|||
|
|
<p>Aus:</p>
|
|||
|
|
<pre><code>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>Wird:
|
|||
|
|
</p><figure class="image-caption"><a href="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross.jpg"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_360x0_resize_q95_h2_catmullrom.webp 360w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_500x0_resize_q95_h2_catmullrom.webp 500w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp 816w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_1632x0_resize_q95_h2_catmullrom.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px" />
|
|||
|
|
<img alt="Fahrrad auf einem Feldweg und mit einem &lsquo;Vorsicht Kinder&rsquo; Schild auf dem Gepäckträger" srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_360x0_resize_q95_h2_catmullrom.webp 360w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_500x0_resize_q95_h2_catmullrom.webp 500w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp 816w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_1632x0_resize_q95_h2_catmullrom.webp 1632w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"
|
|||
|
|
src="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp" title="Das Schild habe ich zuvor am Straßenrand gefunden." loading="lazy" width="816" height="612" /></picture></a><figcaption>Das Schild habe ich zuvor am Straßenrand gefunden.</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Man kann jedoch sowohl den Alt-Text als auch den Titel weglassen.</p>
|
|||
|
|
<div class="shortcode-notice hinweis">
|
|||
|
|
<div class="shortcode-notice-title hinweis">
|
|||
|
|
Hinweis</div>
|
|||
|
|
<div class="notice-content"><p>Mir gefällt jedoch an dieser Syntax, dass man immer daran erinnert wird, einen Beschreibungstext zu hinterlegen und nicht nur einen Titel. Denn der Beschreibungstext (Alt-Text) ist wichtig für Menschen mit Sehbeeinträchtigungen.</p>
|
|||
|
|
<p>Ich werde in Zukunft somit darauf achten, solche Texte zu hinterlegen. In der Vergangenheit habe ich das im Blog fast nie getan.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 id="quelltext" data-numberify>Quelltext<a class="anchor ms-1" href="#quelltext"></a></h3>
|
|||
|
|
<p>Hier der fertige Render Hook <code>layouts/_default/_markup/render-image.html</code>:</p>
|
|||
|
|
<div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
|
|||
|
|
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
|
|||
|
|
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
|
|||
|
|
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
|
|||
|
|
</span></code></pre></td>
|
|||
|
|
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
|
|||
|
|
<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:#960050;background-color:#1e0010">$</span>autolinking <span style="color:#f92672">:=</span> .Page.Param <span style="color:#e6db74">"imageAutoLink"</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">default</span> <span style="color:#66d9ef">true</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">:=</span> .Page.Resources.GetMatch .Destination -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">if</span> <span style="color:#66d9ef">and</span> <span style="color:#f92672">(</span><span style="color:#66d9ef">not</span> <span style="color:#960050;background-color:#1e0010">$</span>img<span style="color:#f92672">)</span> .Page.File -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>path <span style="color:#f92672">:=</span> path.Join .Page.File.Dir .Destination <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img <span style="color:#f92672">=</span> resources.Get <span style="color:#960050;background-color:#1e0010">$</span>path -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">with</span> <span style="color:#960050;background-color:#1e0010">$</span>img -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>large <span style="color:#f92672">:=</span> <span style="color:#960050;background-color:#1e0010">$</span>img.Resize <span style="color:#e6db74">"816x"</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>medium <span style="color:#f92672">:=</span> <span style="color:#960050;background-color:#1e0010">$</span>img.Resize <span style="color:#e6db74">"500x"</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>small <span style="color:#f92672">:=</span> <span style="color:#960050;background-color:#1e0010">$</span>img.Resize <span style="color:#e6db74">"360x"</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><figure class="image-caption">
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> <span style="color:#66d9ef">if</span> gt <span style="color:#960050;background-color:#1e0010">$</span>img.Width <span style="color:#ae81ff">816</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> <span style="color:#66d9ef">if</span> <span style="color:#66d9ef">and</span> <span style="color:#f92672">(</span>gt <span style="color:#960050;background-color:#1e0010">$</span>img.Width <span style="color:#ae81ff">1000</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span>eq <span style="color:#960050;background-color:#1e0010">$</span>autolinking <span style="color:#66d9ef">true</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}</span><a href="<span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#960050;background-color:#1e0010">$</span>img.RelPermalink -<span style="color:#75715e">}}</span>"><span style="color:#75715e">{{</span> end <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <img alt="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Text <span style="color:#75715e">}}</span>" srcset="
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>small.RelPermalink <span style="color:#75715e">}}</span> 360w,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>medium.RelPermalink <span style="color:#75715e">}}</span> 500w,
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>large.RelPermalink <span style="color:#75715e">}}</span> 816w" sizes="(max-width: 424px) 360px,(max-width: 596px) 500px,(min-width: 565px) 816px" src="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>small.RelPermalink <span style="color:#75715e">}}</span>" title="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Title <span style="color:#75715e">}}</span>" loading="lazy" />
|
|||
|
|
</span></span><span style="display:flex;"><span> <span style="color:#75715e">{{</span> <span style="color:#66d9ef">if</span> <span style="color:#66d9ef">and</span> <span style="color:#f92672">(</span>gt <span style="color:#960050;background-color:#1e0010">$</span>img.Width <span style="color:#ae81ff">1000</span><span style="color:#f92672">)</span> <span style="color:#f92672">(</span>eq <span style="color:#960050;background-color:#1e0010">$</span>autolinking <span style="color:#66d9ef">true</span> <span style="color:#f92672">)</span> <span style="color:#75715e">}}</span></a><span style="color:#75715e">{{</span> end <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> <span style="color:#66d9ef">else</span> <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <img alt="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Text <span style="color:#75715e">}}</span>" src="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>img.RelPermalink <span style="color:#75715e">}}</span>" loading="lazy" title="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Title <span style="color:#75715e">}}</span>" />
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span> end <span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span> <figcaption><span style="color:#75715e">{{</span> <span style="color:#66d9ef">with</span> <span style="color:#960050;background-color:#1e0010">$</span>.Title <span style="color:#f92672">|</span> <span style="color:#a6e22e">safeHTML</span> <span style="color:#75715e">}}{{</span> <span style="color:#960050;background-color:#1e0010">.</span> <span style="color:#75715e">}}{{</span> end <span style="color:#75715e">}}</span></figcaption>
|
|||
|
|
</span></span><span style="display:flex;"><span></figure>
|
|||
|
|
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> <span style="color:#66d9ef">else</span> -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><img src="<span style="color:#75715e">{{</span> .Destination <span style="color:#f92672">|</span> <span style="color:#a6e22e">safeURL</span> <span style="color:#75715e">}}</span>" alt="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Text <span style="color:#75715e">}}</span>" title="<span style="color:#75715e">{{</span> <span style="color:#960050;background-color:#1e0010">$</span>.Title <span style="color:#75715e">}}</span>" loading="lazy" /><span style="color:#75715e">{{</span><span style="color:#f92672">-</span> end -<span style="color:#75715e">}}</span>
|
|||
|
|
</span></span><span style="display:flex;"><span><!-- adapted from https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html --></span></span></code></pre></td></tr></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h3 id="wie-der-neue-render-hook-funktioniert" data-numberify>Wie der neue Render Hook funktioniert<a class="anchor ms-1" href="#wie-der-neue-render-hook-funktioniert"></a></h3>
|
|||
|
|
<p>Und so funktioniert der neu erstellte Render Hook <code>render-image.html</code>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Bild ist breiter als 816 Pixel<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>:
|
|||
|
|
<ul>
|
|||
|
|
<li>Es werden automatisch kleinere Bildvarianten erstellt und via <code>srcset</code> eingebunden.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>Bild ist schmaler als 816 Pixel:
|
|||
|
|
<ul>
|
|||
|
|
<li>Es werden keine kleineren/größeren Bildvarianten erstellt und auf ein <code>srcset</code> wird verzichtet, es wird nur das Originalbild eingebunden. <em>(Man könnte noch implementieren, dass in letzterem Fall nur die Bildvarianten erstellt werden, die kleiner als 816 Pixel sind. Aber das spare ich mir, da das nur selten vorkommt und das meistens Dateien mit sehr geringen Dateigrößen sind.)</em></li>
|
|||
|
|
<li>Hierdurch wird ein sehr kleines Bild wirklich nur so groß angezeigt, wie es auch ist, nicht vergrößert und matschig.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>Bild ist breiter als 1000 Pixel:
|
|||
|
|
<ul>
|
|||
|
|
<li>Es wird automatisch ein Link auf das Originalbild gesetzt. Das Verlinken kann man unterbinden mit <code>imageAutoLink: false</code> im Front Matter eines Blogbeitrags.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>Der angegebene Titel wird unter dem Bild angezeigt.</li>
|
|||
|
|
<li>Der angegebene Alt-Text in eckigen Klammern wird in das alt-Attribut eingefügt.</li>
|
|||
|
|
<li>Die Bilder werden per <a class='urlextern' href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a> eingebunden, sodass der Browser sie erst herunterlädt, wenn sie in der Nähe des Sichtbereits im Browser sind. Das spart Ressourcen, falls man nur einen Teil eines Beitrags liest.</li>
|
|||
|
|
<li>Es werden kleine Bildvarianten mit 500 und 360 Pixeln Breite erstellt. Diese sind für die kleineren Ansichten im Blog notwendig, z. B. auf Mobilgeräten.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="ideen-für-später" data-numberify>Ideen für später<a class="anchor ms-1" href="#ideen-für-später"></a></h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Es wäre schön, wenn die Beschreibung aus den <a class='urlextern' href="https://gohugo.io/content-management/image-processing/#exif-data">Exif-Tags</a> verwendet werden könnte, sofern man keine eigene Beschreibung in Markdown einträgt. Ein Beispiel einer Umsetzung gibt es <a class='urlextern' href="https://digitalnotions.net/show-photo-exif-data-in-hugo/">hier</a>.</li>
|
|||
|
|
<li>Angabe von selbst festgelegter Breite für das Einbinden eines Bildes, wie z. B. <a class='urlextern' href="https://discourse.gohugo.io/t/pass-attributes-to-image-render-hook/36899">hier</a> beschrieben oder auch im <a href="#a_theme">hier im Blog verwendeten Theme</a>.</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="uffbasse-aufpassen--besser-kein-srcset-bei-kleinen-bildern" data-numberify>Uffbasse (Aufpassen) – Besser kein srcset bei kleinen Bildern<a class="anchor ms-1" href="#uffbasse-aufpassen--besser-kein-srcset-bei-kleinen-bildern"></a></h2>
|
|||
|
|
<p>Man kann Hugo anweisen, <a class='urlextern' href="https://gohugo.io/content-management/image-processing/#resize">kleinere Bildvarianten des Originalbildes</a> zu erstellen, die man dann statt des Originalbildes verwenden kann. Alternativ kann man daraus ein <code>srcset</code> erstellen, sodass der Browser automatisch die passende Größe aussuchen und herunterladen kann.</p>
|
|||
|
|
<p>Jedoch ist dieser Mechanismus der Erstellung von Bildvarianten in Hugo ziemlich “dumm”. Wenn z. B. das Bild nur 200 Pixel breit ist, werden angeforderte größere Bildvarianten trotzdem erstellt und das resultiert dann in einem total zermatschten größeren Bild.</p>
|
|||
|
|
<p>In diesem Screenshot wird das deutlich sichtbar. Das Originalbild (200 Pixel breit) und darunter das Bild, das von Hugo auf Anfrage in 800 Pixel Breite erzeugt wurde, obwohl das Originalbild kleiner ist:</p>
|
|||
|
|
<p></p><figure class="image-caption"><picture>
|
|||
|
|
<source type="image/webp" srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" />
|
|||
|
|
<img alt="Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist." srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp 816w"
|
|||
|
|
sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"
|
|||
|
|
src="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp" title="Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist." loading="lazy" width="816" height="706" /></picture><figcaption>Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist.</figcaption></figure><p>
|
|||
|
|
</p>
|
|||
|
|
<p>Jedoch kann man in Hugo per <code>.Width</code> die Breite eines Bildes abfragen und nur dann weitere Bildvarianten erstellen lassen, wenn eine Mindestbreite gegeben ist und bei zu kleinen Bildern auf srcset verzichten.</p>
|
|||
|
|
<h2 id="passt" data-numberify>Passt<a class="anchor ms-1" href="#passt"></a></h2>
|
|||
|
|
<p>Ich bin mit der neuen Lösung erst einmal zufrieden. Ich kann die Standard-Markdown-Syntax verwenden, es wird automatisch ein srcset eingefügt und große Bilder werden automatisch zum Originalbild verlinkt. Und zusätzlich werde ich auch noch daran erinnert, einen passenden Alt-Text zu schreiben.</p>
|
|||
|
|
<div class="footnotes" role="doc-endnotes">
|
|||
|
|
<hr>
|
|||
|
|
<ol>
|
|||
|
|
<li id="fn:1">
|
|||
|
|
<p>816 Pixel ist die Breite des Inhalts in der Standardansicht meines Blog. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>]]></content:encoded><enclosure url="https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/cover.jpg" length="1439790" type="image/jpeg"/></item></channel></rss>
|