Wie fügt man Javascript in ein Discourse-Theme ein?

[danielabc (Daniela)]

Ich habe ein JavaScript mit einem fallenden Schnee-Effekt gefunden und frage mich, ob es möglich ist, dieses Skript in das Theme einzufügen. Ich habe versucht, es dort einzufügen, wo ich CSS einfüge, aber die Website hat dann einen Fehler verursacht, lol. Gibt es eine andere Stelle, an der ich es einfügen kann, oder akzeptiert Discourse diese Arten von Skripten nicht?

[Canapin (Coin-coin le Canapin)]

Hallo, Skript-Tags gehören in den Head-Tab Ihres Themes/Komponenten.

[danielabc (Daniela)]

Kann ich irgendeinen JavaScript-Code in den Head einfügen?

Und wenn HTML-Code mit CSS kombiniert wird, füge ich ihn in normales CSS oder kombiniertes CSS ein???

[Canapin (Coin-coin le Canapin)]

Können Sie den Code, den Sie einfügen möchten, anzeigen, damit wir besser verstehen können, was Sie erreichen möchten?

[danielabc (Daniela)]

html ist
<div></div> 176 Mal

und CSS ist

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-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);
      }
    }
  }
}

[danielabc (Daniela)]

<script src="https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js"></script>

Ich habe versucht, dieses JavaScript zu verwenden, aber es hat nicht funktioniert.

[Canapin (Coin-coin le Canapin)]

Ich würde nicht empfehlen, ein externes JavaScript zu verlinken, wenn Sie nicht wissen, wie zuverlässig es ist. Wenn sich das Remote-Skript ändert, könnte es Ihr Forum beschädigen.

Ich schlage vor, stattdessen eine neue Theme-Komponente in Ihrem Admin-Panel zu erstellen. Nennen Sie sie etwas wie „Schneeflocken-Effekt“.

Bearbeiten Sie diese neue Theme-Komponente.

1. Kopieren Sie im Reiter „Head“ den JavaScript-Code und fügen Sie ihn in einen <script> HTML-Tag ein.

2. Fügen Sie im Reiter „CSS“ den CSS-Code ein, ohne den Teil height: 100vh; in body {.

3. Fügen Sie im Reiter „Footer“ 176 Mal <div class="snow"></div> ein.

4. Genießen Sie Ihren Schnee.

Beachten Sie, dass dieser Effekt von jemandem in seiner eigenen HTML-Umgebung erstellt wurde, nicht sofort „Discourse-kompatibel“ ist und daher Probleme auf Ihrem Forum verursachen kann.

[merefield (Robert)]

Du solltest das wirklich lesen, @danielabc, falls du das noch nicht getan hast:

Developing Discourse Themes & Theme Components

Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

[pfaffman (Jay Pfaffman)]

Sie könnten dies als Modell verwenden: Winter-Schnee-Themenkomponente

[danielabc (Daniela)]

Ich habe diesen Schneeeffekt gefunden und er gefällt mir sehr gut, aber er funktioniert nur auf dem Desktop, auf dem Handy nicht, warum? Muss ich auf dem Handy etwas aktivieren, damit es funktioniert?

<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">'+'</'+'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">'+'</'+'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>

[danielabc (Daniela)]

Ich werde das prüfen, danke

[danielabc (Daniela)]

Ich habe es installiert, aber es ist nichts passiert

[Canapin (Coin-coin le Canapin)]

Ehrlich gesagt, einen Schneefekteffekt zufällig aus dem Internet zu nehmen und zu versuchen, ihn auf Discourse zum Laufen zu bringen, ist keine unbedingt einfache Aufgabe.

Discourse hat seine eigenen Einschränkungen, und die meisten JavaScript-Codes aus dem Internet, die Sie in Discourse einbinden möchten, müssen modifiziert und an diese Einschränkungen angepasst werden.

@Danielabc

Ich habe es installiert, aber es ist nichts passiert

Ich habe es gestern versucht und im aktuellen Zustand ist der Effekt ziemlich… subtil. Er könnte sicherlich verbessert werden, aber das ist eben Arbeit.

Ich stimme auch den anderen zu: Wenn Sie Anpassungen an Ihrer Website vornehmen möchten (Sie scheinen sehr engagiert zu sein und lesen viel im Meta-Bereich), sollten Sie am Anfang beginnen und die Grundlagen von HTML, CSS und JavaScript verstehen.

Ich denke, die kostenlose Hilfe hier für solche Anpassungen wird begrenzt sein.

[danielabc (Daniela)]

Danke für die Klärung meiner Zweifel. Eine Sache, die ich nicht verstanden habe, ist, dass die Effekte auf der Website für Desktops funktionieren, aber nicht für Mobiltelefone. Warum ist das so???