Dies soll nicht als eigenständiges Theme verwendet werden.
Dies ist eine Theme-Komponente, die ausschließlich für den Hintergrund vorgesehen ist. Sie soll in Ihr Theme-Design integriert werden.
Repo: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub
Diese Komponente nutzt die StackBlur-Bibliothek von Mario Klingemann (2kb gzippt – MIT-Lizenz), um hochleistungsstarke unscharfe Hintergründe zu generieren, die auf einem Bild basieren, das Sie in einem <canvas>-Element auswählen.
Beispiele: (diese sind komprimiert und weisen daher Artefakte auf – die Hintergründe sind eigentlich glatt)
Wenn ich dieses Foto verwende:
dann würde der resultierende Discourse-Hintergrund so aussehen:
Und auf dem Mobilgerät:
Weitere Beispiele mit anderen Bildern:
Die Qualität des verwendeten Bildes ist nicht entscheidend, da die Unschärfe sehr verzeihend ist. Ich empfehle daher stark komprimierte JPGs mit einer Auflösung von maximal 1080p – es geht nur um die Farben.
Installation
Installieren Sie das Repository wie bei jeder anderen Theme-Komponente üblich:
Sobald dies erledigt ist, folgen Sie diesen Schritten:
- Erstellen Sie ein neues Theme.
- Geben Sie ihm einen beliebigen Namen.
- Fügen Sie Folgendes im Abschnitt Gemeinsamer Header hinzu:
<canvas
id="background_b"
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT"
></canvas>
-
Ersetzen Sie
BACKGROUND_URL_GOES_HEREdurch die URL Ihres Bildes.
(Die URL muss entweder auf Ihrer eigenen Domain gehostet sein oder auf einer Domain mit korrekter CORS-Konfiguration.) -
Ändern Sie
BLUR_AMOUNTauf den gewünschten Unschärfewert (0 – 180); höhere Werte bedeuten mehr Unschärfe. -
Fügen Sie StackBlur Backgrounds als Theme-Komponente unter Ihrem neu erstellten Theme hinzu.
Wichtig
Die Demo-Beispiele verwenden das Farbschema „Simple Dark".
Sie haben möglicherweise den leichten dunklen Hintergrund hinter der Themenliste bemerkt.
Dies ist kein Teil der Theme-Komponente.
Dies wird mit folgendem CSS erreicht:
#main-outlet {
background: rgba(0, 0, 0, .5);
padding-left: 2em;
padding-right: 2em;
}
Außerdem fügt das Standard-Mobile-Theme dem <body>-Element einen einfarbigen Hintergrund hinzu. Wenn Sie möchten, dass der unscharfe Hintergrund auch auf Mobilgeräten angezeigt wird, müssen Sie dies entfernen. Das können Sie wie folgt tun:
.mobile-view {
body {
background: none;
}
}
