Come inserire javascript nel tema di Discourse?

[danielabc (Daniela)]

Ho trovato uno script JavaScript con un effetto neve che cade, e mi stavo chiedendo, è possibile inserire questo script nel tema? Ho provato a inserirlo dove ho messo il CSS, ma il sito ha avuto un bug lol, c’è un altro posto dove posso inserirlo o discourse non accetta questi tipi di script?

[Canapin (Coin-coin le Canapin)]

Ciao, i tag script vanno nella scheda Head del tuo tema/componente.

[danielabc (Daniela)]

È possibile inserire qualsiasi tipo di codice javascript nella head?

E quando c’è codice HTML combinato con CSS, devo metterlo nel CSS normale o nel CSS combinato???

[Canapin (Coin-coin le Canapin)]

Puoi mostrare il codice che vuoi inserire in modo da capire meglio cosa vuoi ottenere?

[danielabc (Daniela)]

html è
<div></div> 176 volte

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

[danielabc (Daniela)]

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

Ho provato a usare questo javascript, ma non ha funzionato

[Canapin (Coin-coin le Canapin)]

Non consiglierei di collegare uno script JavaScript esterno se non si sa quanto sia affidabile. Se lo script remoto cambia, potrebbe compromettere il tuo forum.

Ti suggerisco invece di creare un nuovo componente tematico nel tuo pannello di amministrazione. Chiamalo qualcosa come “effetto fiocco di neve”.

Modifica questo nuovo componente tematico.

1. Nella scheda “Head”, incolla il codice JavaScript all’interno di un tag HTML \u003cscript\u003e.

2. Nella scheda “CSS”, incolla il codice CSS, senza la parte height: 100vh; in body {.

3. Nella scheda “Footer”, incolla 176 volte \u003cdiv class=\"snow\"\u003e\u003c/div\u003e.

4. Goditi la tua neve.

Nota che questo effetto è stato creato da qualcuno nel proprio ambiente HTML, non è “compatibile con Discourse” pronto all’uso e quindi potrebbe causare problemi sul tuo forum.

[merefield (Robert)]

Dovresti davvero leggerlo @danielabc se non l’hai già fatto:

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)]

Potresti usarlo come modello: Componente tema neve invernale :fiocco di neve:

[danielabc (Daniela)]

Ho trovato questo effetto neve e mi è piaciuto molto, ma funziona solo su desktop, su mobile no, perché? Dovrò attivare qualcosa sul cellulare per farlo funzionare?

<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/>').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/>').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)]

Ci penso io, grazie

[danielabc (Daniela)]

L’ho installato ma non è successo niente

[Canapin (Coin-coin le Canapin)]

Onestamente, prendere un effetto neve a caso da Internet e cercare di farlo funzionare su Discourse non è un compito necessariamente facile.

Discourse ha i suoi vincoli e la maggior parte del javascript “selvaggio” che si desidera includere in Discourse deve essere modificato e adattato a questi vincoli.

@Danielabc

L’ho installato ma non è successo niente

Ho provato ieri e allo stato attuale, l’effetto è piuttosto… Sottile. Sicuramente potrebbe essere migliorato, ma di nuovo, è un lavoro.

Sono anche d’accordo con gli altri, se vuoi aggiungere personalizzazioni al tuo sito web (sembra che tu sia molto coinvolto in esso e legga molto Meta), dovresti iniziare dall’inizio e capire le basi di HTML, CSS e javascript.

Penso che l’aiuto gratuito qui per tali personalizzazioni sarà limitato.

[danielabc (Daniela)]

Grazie per aver chiarito i miei dubbi, una cosa che non ho capito è che gli effetti funzionano sul sito per desktop, ma non per i cellulari, perché???