Minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
Um externe Links automatisch mit CSS zu kennzeichnen müssen zuerst mit einem passenden CSS-Selektor alle externen Links ausgewählt werden. Anschließend können Darstellungseigenschaften für die ausgewählten Links festgelegt werden. Mit folgendem Code werden z.B. hier im Blog alle ausgehenden Links mit einer kleinen Grafik versehen.
article a[href^="http://"]:not([href*="blog.tausys.de"]):not([href*="localhost"]):after,
article a[href^="https://"]:not([href*="blog.tausys.de"]):after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
position: relative;
top: -.3em;
}
Alle Artikel hier im Blog stehen innerhalb von <article> ... </article>. In diesen Artikeln werden alle Links (a) selektiert, welche mit http:// beginnen und nicht auf die Blog-Webseite (blog.tausys.de) zeigen. Der Link darf auch nicht auf localhost zeigen, da ich Artikel-Entwürfe mit hugo darüber anzeigen lasse.
Im Ordner tpl/default die Datei linklist.html wie folgt anpassen:
--- linklist.html.old Sat Mar 18 08:45:18 2023
+++ linklist.html Sun Sep 29 19:37:39 2024
@@ -7,11 +7,11 @@
{include="page.header"}
<div class="linkcount pure-u-0 pure-u-lg-visible">
{if="!empty($linkcount)"}
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
- {if="$privateLinkcount>0"}
+ {if="$is_logged_in && $privateLinkcount>0"}
<br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
{/if}
{/if}
</div>
@@ -56,11 +56,11 @@
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
<div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
<div class="linkcount pure-u-lg-0 center">
{if="!empty($linkcount)"}
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
- {if="$privateLinkcount>0"}
+ {if="$is_logged_in && $privateLinkcount>0"}
· <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
{/if}
{/if}
</div>
Der zweite Abschnitt wird wegen der #CSS-Eigenschaft display:none zwar im Webbrowser verborgen, aber ein Besucher könnte auf die Idee kommen, in den Seitenquelltext hineinzuschauen.