Johani
2018 年1 月 30 日 06:27
1
不 应单独作为主题使用。
这是一个主题组件，仅用于处理背景。它应被整合到您的主题设计中。
仓库：GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub
该组件使用 Mario Klingemann 的 StackBlur 库（压缩后 2kb - MIT 许可证 ），基于您在 <canvas> 元素中选择的图像生成滚动性能优异 的模糊背景。
示例：（这些图片经过压缩，因此存在伪影——实际背景是平滑的 ）
如果我使用这张照片：
那么生成的 Discourse 背景将如下所示：
在移动设备上：
更多使用其他图像的示例：
您使用的图像质量其实并不重要，因为模糊效果非常宽容，因此我推荐使用高度压缩的 JPG 格式，分辨率不超过 1080p——您只需要颜色信息。
像安装其他主题组件一样安装此仓库：
完成后，请按照以下步骤操作：
创建一个新主题
为其命名（任意名称）
在通用头部 部分添加以下内容：
<canvas
id="background_b"
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT"
></canvas>
将 BACKGROUND_URL_GOES_HERE 替换为您的图像 URL（该 URL 必须托管在您的域名上，或托管在已正确配置 CORS 的域名上）
将 BLUR_AMOUNT 替换为您所需的模糊量（0 - 180 ），数值越大，模糊程度越高。
将 StackBlur 背景作为主题组件添加到您新创建的主题下。
演示样本使用的是“简单深色”配色方案
您可能注意到主题列表背后有轻微的深色背景。
这不是主题组件的一部分
这是通过以下 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 日 19:28
7
我尝试实现这个功能，但我的论坛组件似乎变得完全透明，导致文字极难阅读。
@Johani
sam
2020 年8 月 24 日 02: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 个赞
这不应单独作为主题使用。
