¿Cómo poner javascript en el tema de Discourse?

[danielabc (Daniela)]

Encontré un script de JavaScript con un efecto de nieve cayendo, y me preguntaba si es posible poner este script en el tema. Intenté insertarlo donde puse CSS, pero el sitio dio errores, ¿hay otro lugar donde pueda insertarlo o discourse no acepta este tipo de scripts?

[Canapin (Coin-coin le Canapin)]

Hola, las etiquetas de script van en la pestaña Head de tu tema/componente.

[danielabc (Daniela)]

¿Se puede insertar algún tipo de código javascript en la cabecera?

Y cuando hay código HTML combinado con CSS, ¿lo pongo en CSS normal o en CSS combinado?

[Canapin (Coin-coin le Canapin)]

¿Puedes mostrar el código que quieres insertar para que podamos entender mejor lo que quieres lograr?

[danielabc (Daniela)]

html es
<div></div> 176 veces

y CSS es

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

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

Intenté usar este javascript, pero no funcionó.

[Canapin (Coin-coin le Canapin)]

No recomendaría enlazar un script de javascript externo si no sabes cuán confiable es. Si el script remoto cambia, podría dañar tu foro.

Sugiero que crees un nuevo componente de tema en tu panel de administración en su lugar. Nómbralo algo como “efecto de copo de nieve”.

Edita este nuevo componente de tema.

1. En la pestaña Head, copia y pega el código javascript dentro de una etiqueta HTML \u003cscript\u003e.

2. En la pestaña CSS, pega el código CSS, sin la parte height: 100vh; en body {.

3. En la pestaña Footer, pega 176 veces \u003cdiv class=\"snow\"\u003e\u003c/div\u003e.

4. Disfruta de tu nieve.

Ten en cuenta que este efecto fue creado por alguien en su propio entorno HTML, no es “compatible con Discourse” directamente y, por lo tanto, puede causar problemas en tu foro.

[merefield (Robert)]

Realmente deberías leer esto @danielabc si aún no lo has hecho:

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

Es posible que utilices esto como modelo: Componente de tema de nieve invernal

[danielabc (Daniela)]

Encontré este efecto de nieve y me gustó mucho, pero solo funciona en el escritorio, en el móvil no, ¿por qué? ¿Tendré que activar algo en el móvil para que funcione?

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

Lo veré, gracias

[danielabc (Daniela)]

Lo instalé pero no pasó nada

[Canapin (Coin-coin le Canapin)]

Honestamente, tomar un efecto de nieve aleatorio de Internet e intentar que funcione en Discourse no es una tarea necesariamente fácil.

Discourse tiene sus propias restricciones, y la mayoría del javascript que deseas incluir en Discourse necesita ser modificado y adaptado a estas restricciones.

@Danielabc

Lo instalé pero no pasó nada

Lo intenté ayer y en el estado actual, el efecto es bastante… sutil. Seguramente podría mejorarse, pero de nuevo, eso requiere trabajo.

También estoy de acuerdo con los demás, si quieres agregar personalizaciones a tu sitio web (pareces estar muy involucrado en él y lees Meta mucho), deberías empezar por el principio y comprender los conceptos básicos de HTML, CSS y javascript.

Creo que la ayuda gratuita aquí para tales personalizaciones será limitada.

[danielabc (Daniela)]

Gracias por aclarar mis dudas, una cosa que no entendí es que los efectos funcionan en el sitio para escritorio, pero no para teléfonos celulares, ¿por qué es???