如何在Discourse主题中放置javascript？

开发
1

我找到了一个带有下雪效果的 JavaScript，我想知道是否可以将此脚本放入主题中？我尝试将其插入到我放置 CSS 的位置，但网站出错了，哈哈，是否有其他地方可以插入它，或者 Discourse 不接受这类脚本？

2

您好，脚本标签应放在主题/组件的Head选项卡中。 :slight_smile:

image
image1278×1311 116 KB

2 个赞
4

可以将任何类型的 JavaScript 代码插入到 head 中吗？

当 HTML 代码与 CSS 结合时，我应该将其放在普通 CSS 还是组合 CSS 中？

5

您能展示一下您想插入的代码，以便我们更好地理解您想实现的目标吗？

6

html 是
<div></div> 176 次
CSS 是

body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}
7

\u003cscript src=\"https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js\"\u003e\u003c/script\u003e

我曾尝试使用此 JavaScript，但它不起作用

8

我不建议链接外部javascript，除非你知道它的可靠性。如果远程脚本发生更改，可能会破坏您的论坛。

我建议您在管理员面板中创建一个新的主题组件。将其命名为“雪花效果”。

编辑这个新的主题组件。

  1. 在“Head”选项卡中，将javascript代码复制粘贴到一个<script> HTML标签中。

  2. 在“CSS”选项卡中，粘贴CSS代码，去掉body {中的height: 100vh;部分。

  3. 在“Footer”选项卡中，粘贴176次:grimacing: <div></div>。

  4. 享受您的雪景。

image
image1920×991 52.9 KB

:warning: 请注意，此效果是由某人在其自己的HTML环境中创建的，并非“开箱即用”的“Discourse兼容”，因此可能会在您的论坛上引起问题。

9

您真的应该读读这个 @danielabc，如果您还没有读过的话：

2 个赞
10

您可以将此用作模型：冬季雪景主题组件 :snowflake:

3 个赞
11

我发现了这个雪景效果，我很喜欢，但它只在桌面端有效，在移动端却无效，为什么？我需要在移动端激活什么才能让它生效吗？

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">'+'');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain2']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain3']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain4']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">'+'');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img/>').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
12

我会看看的，谢谢

1 个赞
13

我安装了，但什么也没发生 :frowning:

14

老实说，在网上随意找一个下雪效果并尝试让它在 Discourse 上运行并非易事。

Discourse 有其自身的限制，你想要包含在 Discourse 中的大多数 JavaScript 都需要修改和适应这些限制。

我昨天试过了，目前的效果相当……微妙。肯定可以改进，但同样，这需要一些工作。

我也同意其他人的看法，如果你想为你的网站添加自定义（你似乎非常投入其中，并且经常阅读 Meta），你应该从头开始，理解 HTML、CSS 和 JavaScript 的基础知识。

我认为在这里获得关于此类自定义的免费帮助将是有限的。

1 个赞
16

感谢您澄清我的疑虑，有一件事我没弄明白，那就是这些效果在桌面网站上有效，但在手机上却无效，这是为什么呢？？？