Comment mettre du javascript dans le thème Discourse ?

[danielabc (Daniela)]

J’ai trouvé un script JavaScript avec un effet de neige qui tombe, et je me demandais s’il était possible de mettre ce script dans le thème. J’ai essayé de l’insérer là où j’ai mis le CSS, mais le site a buggé lol. Y a-t-il un autre endroit où je peux l’insérer ou Discourse n’accepte-t-il pas ce type de scripts ?

[Canapin (Coin-coin le Canapin)]

Salut, les balises de script vont dans l’onglet Head de votre thème/composant.

[danielabc (Daniela)]

Pouvez-vous insérer n’importe quel type de code JavaScript dans l’en-tête ?

Et quand il y a du code HTML combiné avec du CSS, est-ce que je le mets dans du CSS normal ou dans du CSS combiné ???

[Canapin (Coin-coin le Canapin)]

Pouvez-vous montrer le code que vous souhaitez insérer afin que nous puissions mieux comprendre ce que vous voulez réaliser ?

[danielabc (Daniela)]

Le HTML est
<div></div> 176 fois

et le CSS est

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>

J’ai essayé d’utiliser ce javascript, mais cela n’a pas fonctionné.

[Canapin (Coin-coin le Canapin)]

Je ne recommanderais pas de lier un javascript externe si vous ne savez pas à quel point il est fiable. Si le script distant change, il pourrait casser votre forum.

Je vous suggère plutôt de créer un nouveau composant de thème dans votre panneau d’administration. Nommez-le quelque chose comme « effet flocon de neige ».

Modifiez ce nouveau composant de thème.

1. Dans l’onglet Head, copiez-collez le code javascript à l’intérieur d’une balise HTML \u003cscript\u003e.

2. Dans l’onglet CSS, collez le code CSS, sans la partie height: 100vh; dans body {.

3. Dans l’onglet Footer, collez 176 fois \u003cdiv class=\"snow\"\u003e\u003c/div\u003e.

4. Profitez de votre neige.

Notez que cet effet a été créé par quelqu’un dans son propre environnement HTML, il n’est pas « compatible Discourse » tel quel et pourrait donc causer des problèmes sur votre forum.

[merefield (Robert)]

Tu devrais vraiment lire ceci @danielabc si ce n’est pas déjà fait :

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

Vous pourriez l’utiliser comme modèle : Composant de thème hivernal neigeux

[danielabc (Daniela)]

J’ai trouvé cet effet de neige et je l’ai beaucoup aimé, mais il ne fonctionne que sur ordinateur, pas sur mobile, pourquoi ? Devrai-je activer quelque chose sur le mobile pour qu’il fonctionne ?

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

Je vais voir ça, merci

[danielabc (Daniela)]

Je l’ai installé mais rien ne s’est passé

[Canapin (Coin-coin le Canapin)]

Honnêtement, prendre un effet de neige aléatoire sur Internet et essayer de le faire fonctionner sur Discourse n’est pas une tâche nécessairement facile.

Discourse a ses propres contraintes, et la plupart des javascript du web que vous souhaitez inclure dans Discourse doivent être modifiés et adaptés à ces contraintes.

@Danielabc

Je l’ai installé mais rien ne s’est passé

J’ai essayé hier et dans l’état actuel, l’effet est assez… subtil. Il pourrait certainement être amélioré, mais encore une fois, cela demande du travail.

Je suis également d’accord avec les autres, si vous souhaitez ajouter des personnalisations à votre site web (vous semblez y être très impliqué et lire beaucoup Meta), vous devriez commencer par le début et comprendre les bases de HTML, CSS et javascript.

Je pense que l’aide gratuite ici pour de telles personnalisations sera limitée.

[danielabc (Daniela)]

Merci d’avoir clarifié mes doutes, une chose que je n’ai pas comprise est que les effets fonctionnent sur le site pour ordinateur, mais pas pour les téléphones portables, pourquoi est-ce???