分享你的 Discourse 万圣节装饰！

[Canapin (Coin-coin le Canapin)]

类似于 圣诞装饰，这里是一个分享万圣节装饰的主题。

恐怖幽灵

默认情况下，打开编辑器时幽灵出现的概率为 1/10。

1. 在您的主题/组件中上传以下图片，并将变量名设置为 ghost：

来源

2. 在您的主题或组件的 \u003c/head\u003e 选项卡中添加此 JavaScript：
   您可以增加或减少 rarity 变量的值，以调整幽灵出现的频率。

   \u003cscript type="text/discourse-plugin" version="1.4.0"\u003e
   const appEvents = api.container.lookup("service:app-events");
   appEvents.on('composer:opened', () =\u003e {
       let rarity = 10 // 打开编辑器时，幽灵出现的概率为 1/[rarity 值]
       if (Math.floor(Math.random() * rarity) == 0) {
           let halloweenGhost = document.createElement("img");
           halloweenGhost.id = "halloween-ghost";
           halloweenGhost.src = settings.theme_uploads.ghost;
           document.getElementsByTagName("body")[0].appendChild(halloweenGhost);
           setTimeout(function () {
               halloweenGhost.classList.add("ghost-show");
           }, 0);
           setTimeout(function(){
               halloweenGhost.remove();
           }, 1000);
       }
   });
   \u003c/script\u003e
   

3. 在 CSS 选项卡中添加以下代码：

   #halloween-ghost {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(.5);
       z-index: 10000;
       opacity: 1;
       pointer-events: none;
       transition: opacity .75s ease-in, top .75s ease, transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       \u0026.ghost-show {
           transform: translate(-50%, -60%) scale(.6);
           opacity: 0;
       }
   }
   @media all and (min-width: 1024px) {
       #halloween-ghost {
           transform: translate(-50%, -50%) scale(.75);
           \u0026.ghost-show {
               transform: translate(-50%, -60%) scale(.9);
           }
       }
   }
   

在移动设备上，当虚拟键盘出现时，幽灵会“跳动”。

蜘蛛网

蜘蛛网将在较小屏幕上隐藏。

如何将其添加到您的论坛：

1. 创建新的主题组件或编辑您的主题，上传此图片，并将变量名设置为 spiderweb：

   
   
   来源

2. 将以下 CSS 添加到您的主题或组件中：

   @media all and (min-width: 1300px) {
      #main {
        \u0026:before, \u0026:after {
            content: "";
            display: block;
            top: 4em;
            width: 300px;
            height: 300px;
            position: absolute;
            background: transparent url($spiderweb) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }
        \u0026:after {
            right: 0;
            transform: scaleX(-1);
         }
      }
   }
   

表情选择器中的骷髅图标

一个微妙的改动，将消息编辑器中的笑脸图标替换为骷髅

1. 在您的 svg 图标子集 设置中添加 skull：
   

   

2. 在您的主题/主题组件的 \u003c/head\u003e 选项卡中替换图标：

   \u003cscript type="text/discourse-plugin" version="0.8.23"\u003e
       api.replaceIcon('far-smile', 'skull');
   \u003c/script\u003e
   

因此，它也会在其他地方（如管理面板）替换笑脸图标。但这毕竟是万圣节，对吧？

杰克南瓜灯

一个简单的静态雕刻南瓜，位于您站点的右下角：

1. 创建新的主题组件或编辑您的主题，上传此图片，并将变量名设置为 pumpkin：

   
   
   来源

2. 将以下 CSS 添加到您的主题或组件中：

   body {
       background: transparent url($pumpkin) bottom right no-repeat;
       background-size: 10%;
   }
   @media all and (min-width: 1024px) {
       body {
           background-size: 7%;
       }
   }
   

如果论坛已在 \u003cbody\u003e 上使用背景图像，则此设置不兼容。

恐怖标志

如果您的标志使用纯文本或简单的文本图像，您可以将字体替换为更具万圣节风格的字体。

→
使用的字体：Creepster

• 如果您的标志使用图像，请编辑图像以更改字体。
• 如果您的标志是真实文本，请按照本教程更改标志中使用的字体：Include assets (e.g. images, fonts) in themes and components
  • 在您的 CSS 中使用选择器 #site-text-logo。

[JimPas]

我很乐意，但我有一些用户患有蜘蛛恐惧症，他们经常明确表示这一点，而他们也是我发帖最频繁的用户。
我真的很喜欢这些蜘蛛网，看起来很棒！

[Canapin (Coin-coin le Canapin)]

@JimPas

我很乐意，但我有一些用户患有蜘蛛恐惧症。

这就是我没有加入蜘蛛的原因。我（也许错误地）认为人们对仅有蛛网的情况容忍度更高？

[Paracelsus]

首次访问时屏幕上出现四处乱爬的蜘蛛，并伴随“MUHAHAAHA”的笑声，以及进入分类或点击主题时（随机触发，例如每 20 次点击一次，否则每次都会触发会非常烦人）出现门吱呀作响或拖拽锁链的声音，那也会非常棒！

[Canapin (Coin-coin le Canapin)]

我考虑过，在回复主题时，让一个小幽灵随机（且罕见地）在屏幕上闪现一秒钟：：ghost:

[ondrej]

这主意真不错！感谢你的创作。

[Chaboi_3000]

@Rhidian 制作的这个主题组件是绝佳选择：

Bugs theme-component

Bugs: a Discourse theme-component Did you know fruit flies were the first living creatures to be sent into space? Spiders are found on every continent of the world except Antarctica This theme component is a port and update of Auzbugs repo. It originally started out as an April fools joke and has been adapted over time. I’ve included a new bugs interact feature in this component. This is just a bit of fun : I suggest you use it sparingly, maybe just at …

[ondrej]

刚刚也加上了。谢谢 @Chaboi_3000！

[Terrapop]

太棒了，刚刚在我们的 Discourse 上添加了蜘蛛网

[Canapin (Coin-coin le Canapin)]

我已将最后的帖子移除，因为这是一个 wiki，所以将它们整合到了首帖中。也欢迎大家添加自己的定制内容！
我还优化了幽灵代码，并增加了一点“弹出”效果，采用了缩放过渡动画。

[ECoops123]

@ondrej 我觉得我们有个好点子。这应该能给社区增添一些乐趣和节日气氛，我特别希望能在万圣节期间加入这个内容。

或许可以稍微减少一些种类，让其中带点意想不到的“惊喜”

[Canapin (Coin-coin le Canapin)]

@ondrej

那真是个好主意！

我已经在首帖中创建并添加了那个恐怖的幽灵。

[ondrej]

啊！好的，我会去处理的。

[soraiden]

非常感谢！ 我们在 http://lettucecraft.com/ 因您的装饰而充满节日气氛！

[anon89147131]

刚从论坛里删掉了这个，不过能玩一会儿也挺开心的——谢谢你的帮助（我们已为你署名）！Screenshot 2020-11-01 at 18.08.00|690x55

[soraiden]

将同一概念重新用于十二月假期。再次感谢！！https://forum.lettucecraft.com/

[darkpixlz (Pyx)]

我在我的网站上添加了 ghost 后遇到了这个错误。

[Stephen]

考虑到它的年龄和使用频率，这相当合理。

[darkpixlz (Pyx)]

是的，我刚看到这个，觉得添加一些很有趣。而且，Discourse 就像“警告！！！您的网站坏了！！！”一样搞笑，但它只是一个坏掉的幽灵弹出窗口，哈哈。

[Canapin (Coin-coin le Canapin)]

我会试着看看。这样太可怕了。