Como colocar javascript no tema do Discourse?

[danielabc (Daniela)]

Encontrei um script em JavaScript com efeito de neve caindo, e estava me perguntando, é possível colocar este script no tema? Tentei inserir onde coloco CSS, mas o site deu bug, rsrs, existe outro lugar onde posso inseri-lo ou o discourse não aceita esse tipo de script?

[Canapin (Coin-coin le Canapin)]

Olá, as tags de script vão na aba Head do seu tema/componente.

[danielabc (Daniela)]

É possível inserir qualquer tipo de código JavaScript na seção head?

E quando há código HTML combinado com CSS, devo colocá-lo em CSS normal ou CSS combinado???

[Canapin (Coin-coin le Canapin)]

Você pode mostrar o código que deseja inserir para que possamos entender melhor o que você quer alcançar?

[danielabc (Daniela)]

html é

<div></div> 176 vezes

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-yoyo-time * 100vh;
    $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)]

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

Eu tentei usar este javascript, mas não funcionou

[Canapin (Coin-coin le Canapin)]

Eu não recomendaria vincular um JavaScript externo se você não souber o quão confiável ele é. Se o script remoto mudar, ele pode quebrar seu fórum.

Sugiro que você crie um novo componente de tema em seu painel de administração. Nomeie-o como algo como “efeito de floco de neve”.

Edite este novo componente de tema.

1. Na aba Head, copie e cole o código JavaScript dentro de uma tag HTML \u003cscript\u003e.

2. Na aba CSS, cole o código CSS, sem a parte height: 100vh; em body {.

3. Na aba Footer, cole 176 vezes \u003cdiv class=\"snow\"\u003e\u003c/div\u003e.

4. Aproveite sua neve.

Observe que este efeito foi criado por alguém em seu próprio ambiente HTML, não é “compatível com Discourse” pronto para uso e, portanto, pode causar problemas em seu fórum.

[merefield (Robert)]

Você realmente deveria ler isto @danielabc se ainda não o fez:

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

Você pode usar este como um modelo: Componente de tema de inverno com neve

[danielabc (Daniela)]

Encontrei este efeito de neve e gostei muito, mas ele só funciona no desktop, no mobile não, por quê? Terei que ativar algo no mobile para funcionar?

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

[danielabc (Daniela)]

Vou verificar isso, obrigado

[danielabc (Daniela)]

Eu instalei, mas nada aconteceu

[Canapin (Coin-coin le Canapin)]

Honestamente, pegar um efeito de neve aleatório da internet e tentar fazê-lo funcionar no Discourse não é uma tarefa necessariamente fácil.

O Discourse tem suas próprias restrições, e a maioria dos códigos JavaScript genéricos que você deseja incluir no Discourse precisa ser modificada e adaptada a essas restrições.

@Danielabc

Eu instalei, mas nada aconteceu

Eu tentei ontem e, no estado atual, o efeito é bastante… Sutil. Certamente poderia ser melhorado, mas novamente, isso dá um certo trabalho.

Também concordo com os outros, se você quer adicionar personalizações ao seu site (você parece estar muito envolvido nele e lê o Meta bastante), você deveria começar pelo começo e entender os fundamentos de HTML, CSS e JavaScript.

Acho que a ajuda gratuita aqui para tais personalizações será limitada.

[danielabc (Daniela)]

Obrigado por esclarecer minhas dúvidas, uma coisa que não entendi é que os efeitos funcionam no site para desktop, mas não para celular, por quê???