Dienstag, 12. Oktober 2021

Inhaltsverzeichnis im Blog Post

Es gibt viele Vorlagen. Nix funktioniert. Blog Posts brauchen ja auch erst seit Kurzem ein Inhaltsverzeichnis.Warum? SEO 2021...Was will Google? Vollumfassende Artikel, Minimum of 1000 words. Aber keine Angst, viele von meinen haben around 2000 words and no parts to take out and reasonably split in two. 

wo-kommt-meine-vorlage-her

Ich habe eine etwas komplizierte Excel-Tabelle zum Download gefunden. Alles in Englisch, die Erklärungen auch, auf einem englischen Blog. Hier: https://jsvxc.com/html-table-of-contents-generator/#How_to_generate_your_own_table_of_contents 

Sie funktioniert ganz gut, aber einige Anpassung ist nötig. Diesen Post lasse ich jetzt erstmal so, incl Code unten.

warum-schreibe-ich-die-überschriften-so

Wenn ich normal schreiben würde, müßte ich alles doppelt schreiben, denn die Links im Inhaltsverzeichnis sollen wie richtige URLs aussehen. Das ändere ich dann später. Ersteinmal muss ich die Anker im HTML neu schreiben und benennen.

was-ist-ein-anker

Das Sprungziel der Links muß als Anker definiert werden. Die Anker, also die Überschriften, brauchen den HTML-Tag (<h2 oder a (für Anker)) id="irgendwas" oder name="irgendwas" . Ich hab schon wieder vergessen, wie ich name im Link schreiben müsste, also bleibe ich bei der id. Im Link steht dann: #irgendwas 

größerer-sprung-damit-man-ihn-sieht

Bild von MuddieTown und Neilas MUD-Haus
Vor Allem hier muss natürlich was großes hin. Also füge ich mal ein Bild ein. Das hier ist Neilas, also mein Player-Haus in Muddietown im MagicMUD.

Und nach dem Bild springt das jetzt nicht jetzt nicht mehr weiter auf die nächsten Überschriften. Grrrrrr. 
Woran liegt's?? 
Natürlich ist die Seite dann auch gleich zuende...
also machen wir ganz unten die Seite länger...

nix-weiter-nur-ein-sprungziel

Das Dumme ist, ehe ich testen kann, ob es funzt, muss ich das hier veröffentlichen. In der Vorschau gehen nämlich die Links nicht.

versuch-den-html-code-als-text-zu kopieren

<h3 style="text-align: left;">Inhalt</h3>
<div>
  <ul style="list-style: none; margin-left: -36px;">
    <li><a href="#question_9">wo-kommt-meine-vorlage-her</a></li>
    <li><a href="#question_10">warum-schreibe-ich-die-überschriften-so</a></li>
    <li><a href="#keyword11">was-ist-ein-anker</a></li>
    <li><a href="#grossersprung">größerer-sprung-damit-man-ihn-sieht </a></li>
    <li><a href="#sprungziel">nix-weiter-nur-ein-sprungziel</a></li>

    <li><a href="https://dein-blog.blogspot.com/2021/10/dein-blog-post.html#volle-url">Besser immer die Volle URL</a></li>
    <li><a href="https://the-spaceladys-web-lab.blogspot.com/2021/10/inhaltsverzeichnis-im-blog-post.html#deinKeyword">ende-vorerst-und-was-ich-mir-noch-an-textschnipseln-aufheben-wollte</a></li>
    <li><a href="#ID1">Test ID1</a></li>
<li><a href="https://the-spaceladys-web-lab.blogspot.com/2021/10/inhaltsverzeichnis-im-blog-post.html#volle-URL">Warum die volle URL im Link?</a></li>
  </ul>
</div>
Soweit das Inhaltsverzeichnis
Es folgt ein Beispiel, wie der Anker dann zu coden ist. 

<h3 id="question_9"><span>wo-kommt-meine-vorlage-her</span></h3>
text text text - ach so, fast vergessen: Wenn man der Einfachheit halber nur die Überschriften - mit Richtiger! ID der Reihe nach ins HTML kopiert, kann man anschließend im Editor ohne Platzhalter denText nicht mehr normal darunter schreiben. Der Curser springt zum Seitenende.
<h2 id="volle-URL"><span>Warum die volle URL im Link?</span></h3>

Nur noch ein paar kleine erklärende Änderung ab da, wo "#question_11" stehen würde.    

Warum die volle URL im Link?

Schon wenn ein Leser dein Inhaltsverzeichnis auf der Startseite anklickt, könnte er sonst in einen anderen Post gelangen, der zufällig die gleiche ID hat. Außerdem sollen Anker angeblich nicht exportiert werden. Vielleicht erscheinen sie dann auch nicht im Feed. Ich möchte das ungern ausprobieren, lol. 

Ob das Subdomains allgemein so ist, weiß ich auch nicht. Jedenfalls ist es hier sicherer so. Evtl. lässt sich der direkte Link zur zweiten oder fünften Überschrift sogar teilen, in einem anderen Post oder Blog. 

Wie ihr seht, habe ich diesen Abschnitt nachträglich eingefügt, und aus dem Code Beispiel wieder in die HTML Ansicht kopiert.   
Die Überschrift ist normal in H2, wie ich Überschriften normalerweise formatiere. 

ende-vorerst-und-was-ich-mir-noch-an-textschnipseln-aufheben-wollte

creating the attributes for HTML elements, what rules are there for the value? These all work the same way by using href="https://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511" href=”#stuff”would jump to the page element with the name or ID attribute of “stuff”. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Doch, das Klappt, nur das Andere jetzt nicht mehr - oder auch? Müsste man dann in die Seite kopieren, un alles per Hand Reinschreiben. Absolute find the other option to make and target the IDs That did not work. first: find out how to remove list decoration style="list-style: none;"  <<<=== Merken

First item

Warum zum T# springt das hier nicht hin??? 

Machen wir erstmal die Seite länger...

OK, soweit alles fertig 😅 

Jetzt muss ich testen, ob sich das Inhaltsverzeichnis auch so anwenden lässt, wie ich gedacht hätte:

Einen neuen Post in Word / Open Office / Libre Office vorschreiben. (Rechtschreibprüfung, Wörter zählen) 

Dann hier im betreffenden Blog einen neuen Post eröffnen. (oder einen alten, der bearbeitet (sowieso=verlängert) werden soll.

Das wird schon ganz schön viel Kopiererei werden...


















yeah! Das war's wirklich!