Johani
2018 年 1 月 30 日午前 6:27
1
これは背景のみを処理することを意図したテーマコンポーネントです。テーマデザインに組み込む必要があります。
リポジトリ: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub
このコンポーネントは、Mario Klingemann の StackBlur ライブラリ（gzip 圧縮で 2kb - MIT ライセンス ）を使用し、\u003ccanvas\u003e 要素で選択した画像に基づいて、スクロール時のパフォーマンスを高く保ちながら ぼかし背景を生成します。
例：（これらは圧縮されているためアーティファクトが発生していますが、実際の背景は滑らかです ）
この写真を使用する場合：
生成される Discourse の背景は以下のようになります：
モバイル環境では：
他の画像でのさらなるサンプル：
使用する画像の品質はあまり重要ではありません。ぼかし効果が非常に許容範囲が広いため、1080p 以下で高度に圧縮された JPG を使用することを強くお勧めします。必要なのは色のみです。
他のテーマコンポーネントと同様に、このリポジトリをインストールします：
インストールが完了したら、以下の手順に従ってください：
新しいテーマを作成する
任意の名前をつける
共通ヘッダー セクションに以下を追加する：
<canvas
id="background_b"
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT"
></canvas>
BACKGROUND_URL_GOES_HERE を画像の URL に変更する(ドメイン上でホストされているか、正しい CORS が設定されたドメイン上に存在している必要があります)
BLUR_AMOUNT を希望のぼかし量に変更する（0 - 180 ）。数値が大きいほどぼかしが強くなります。
作成した新しいテーマの下に、StackBlur backgrounds をテーマコンポーネントとして追加する。
デモサンプルは「Simple Dark」カラーテーマを使用しています。
トピックリストの背後にわずかに暗い背景があることに気づかれたかもしれません。
これはテーマコンポーネントの一部ではありません
これは以下の CSS で実現されています：
#main-outlet {
background: rgba(0, 0, 0, .5);
padding-left: 2em;
padding-right: 2em;
}
また、デフォルトのモバイルテーマは <body> 要素に単色の背景を追加するため、モバイルでもぼかし背景を表示させたい場合はこれを削除する必要があります。以下のように行います：
.mobile-view {
body {
background: none;
}
}
「いいね！」 27
I’m using 1920x1080 image & no matter what theme I try using with this component, the image is being stretched. The blur appears to be working fine. Any thoughts on what could cause this?
Wouldn’t it be easier and faster to simply generate the blurred image and use that as the background? Why have the source JPG at all, plus an extra dependency…?
I guess if you are changing the background dynamically, that’s all I can think of?
「いいね！」 7
P2W
2020 年 8 月 23 日午後 7:28
7
これを実装しようとしたのですが、フォーラムのコンポーネントが完全に透明になり、テキストを読むのが非常に難しくなってしまいました。
@Johani
sam
2020 年 8 月 24 日午前 2:31
8
残念ながら、これはまだ不具合のままです。@Johani さん、もし長期的にこれをサポートしないのであれば、このトピックを削除してしまったほうがいいかもしれません。あなたが修正することも歓迎しますが、あなたの判断にお任せします。
「いいね！」 2
私のサイトでも使っていますが、特に問題はありません。ここでも問題ありません。ただし、CSSを少し変更しました。Discourseを導入してからずっとこれを使っています。
「いいね！」 1
Firsh
2024 年 10 月 12 日午前 10:19
10
有望そうですが、以下のエラーが発生します。
var blur = $(\"#background_b\").data(\"blur\");
img = new Image();
c = document.getElementById(\"background_b\");
ctx = c.getContext(\"2d\");
w = window.innerWidth;
h = window.innerHeight;
ここでセミコロンの代わりにカンマを使用することを意図していたと思います。
プラグインに#brokenタグが付いており、正常に動作しません。お知らせまで
「いいね！」 1
これは単独でテーマとして使用することを意図していません。
