Pure Blog: Überschriften verlinken #2
Nach meinem Beitrag Pure Blog: Überschriften verlinken fragt ihr euch vielleicht:
„Aber Waldemar, woher weiß ich denn, wie die jeweilige ID bzw. URL für meine Überschrift lauten?“
Genau das werde ich euch in diesem Beitrag zeigen.
Vor Pure Blog nutzte ich Datenstrom Yellow. Dort hatte ich u. a. die Erweiterung yellow-anchor von Robert Pfotenhauer im Einsatz. Nun hat Pure Blog aber kein komplettes und erst recht kein zu Yellow kompatibles Erweiterungssystem. Deshalb kann man „yellow-anchor“ nicht einfach übernehmen, aber man kann sich in Pure Blog Hooks bauen, wie ihr im letzten Beitrag gelesen habt. Es gilt also den Quellcode von „yellow-anchor“ in einen Hook umzuwandeln.
Aus der Funktion onParseContentHtml() habe ich folgenden Hook gebastelt, den ihr eurer config/hooks.php-Datei hinzufügt:
function inject_anchor_links(string $html): string
{
return preg_replace_callback(
'|<h(\d) id="(.+)">(.+)</h\d>|',
function (array $m): string {
$icon = 'anchor-icon anchor-icon-default';
$anchor = '<a href="#'
. $m[2] . '" class="anchor-link" title="#'
. $m[2] . '"><i class="'
. $icon . '" role="img" aria-label="Anchor"></i></a>';
return "<h$m[1] id=\"$m[2]\">$m[3]$anchor</h$m[1]>";
},
$html
);
}Den von Robert verwendeten regulären Ausdruck /<h(\d) id=\"([^\"]+)\">(.*?)<\/h\d>/i habe ich für meine Zwecke wieder etwas vereinfacht (Zeile 4). Falls er bei euch Probleme machen sollte, gebt also bitte mir und nicht Robert die Schuld. 🤫
Der Aufruf erfolgt wieder aus on_render_markdown() heraus:
function on_render_markdown(string $html): string
{
$html = auto_header_ids($html);
$html = inject_anchor_links($html);
…Der Aufruf muss unbedingt nach dem von auto_header_ids() erfolgen, falls ihr nicht sämtliche Überschriften händisch mit einer ID verseht.
Nun braucht ihr für die Optik nur noch die Dateien anchor-stack.svg und anchor.css, die ihr in der Zip-Datei von Roberts Erweiterung findet. Die anchor-stack.svg werft ihr in den (ggf. anzulegenden) Ordner content/icons und die anchor.css nach content/css.
In der anchor.css ändert ihr nun noch zwei Mal den Pfad zur SVG-Datei in /content/icons/anchor-stack.svg#default.
Zuletzt fügt ihr in den Pure-Blog-Einstellungen → „Blog“ → „Header-Injektionen“ → „Seiten-Kopf-HTML“ und „Beitrags-Kopf-HTML“ jeweils die Zeile <link rel="stylesheet" href="/content/css/anchor.css"> hinzu.
Und dann seht ihr rechts neben jeder Überschrift ein Symbol:
Beispiel
Dieses Symbol könnt ihr entweder anklicken, dann steht die URL dieser Überschrift in der Adresszeile eures Browsers, oder ihr klickt mit der rechten Maustaste auf das Symbol und wählt im Kontextmenü „Link-Adresse kopieren“ (Firefox) bzw. „Adresse des Links kopieren“ (Chrome/Chromium).
Dieser Beitrag entstand mit freundlicher Genehmigung von Robert.