Как добавить JavaScript в тему Discourse?

[danielabc (Daniela)]

Я нашел JavaScript с эффектом падающего снега и хотел спросить: можно ли добавить этот скрипт в тему? Я пытался вставить его туда, где обычно размещают CSS, но сайт начал глючить, ха-ха. Есть ли другое место для вставки или Discourse не поддерживает такие скрипты?

[Canapin (Coin-coin le Canapin)]

Привет! Теги скриптов размещаются на вкладке Head вашей темы/компонента.

[danielabc (Daniela)]

Можно ли вставлять любой JavaScript-код в секцию ?

А когда есть HTML-код в сочетании с CSS, нужно ли размещать его в обычном CSS или в объединённом CSS???

[Canapin (Coin-coin le Canapin)]

Можете показать код, который вы хотите вставить, чтобы мы лучше поняли, чего вы хотите достичь?

[danielabc (Daniela)]

HTML — это

<div class="snow"></div> 176 раз

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

Я пытался использовать этот JavaScript, но он не сработал.

[Canapin (Coin-coin le Canapin)]

Я бы не рекомендовал подключать внешний JavaScript, если вы не уверены в его надёжности. Если удалённый скрипт изменится, это может сломать ваш форум.

Вместо этого я предлагаю создать новый компонент темы в панели администратора. Назовите его, например, «эффект снежинки».

Отредактируйте этот новый компонент темы:

1. На вкладке «Head» скопируйте и вставьте код JavaScript внутри тега <script>.

2. На вкладке «CSS» вставьте код CSS, исключив часть height: 100vh; из body {.

3. На вкладке «Footer» вставьте 176 раз <div class="snow"></div>.

4. Наслаждайтесь снегом.

Обратите внимание, что этот эффект был создан кем-то в собственной HTML-среде, не является «совместимым с Discourse» из коробки и поэтому может вызвать проблемы на вашем форуме.

[merefield (Robert)]

Вам действительно стоит прочитать это, @danielabc, если вы ещё этого не сделали:

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

Вы можете использовать это как образец: Компонент зимней снежной темы

[danielabc (Daniela)]

Я нашел этот эффект снега, и он мне очень понравился, но он работает только на компьютере, на мобильном — нет. Почему? Нужно ли что-то активировать на мобильном устройстве, чтобы он заработал?

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

Я узнаю об этом, спасибо

[danielabc (Daniela)]

Я установил его, но ничего не произошло

[Canapin (Coin-coin le Canapin)]

Честно говоря, взять случайный эффект падающего снега из интернета и заставить его работать на Discourse — не самая простая задача.

У Discourse есть свои ограничения, и большинство скриптов JavaScript из открытых источников, которые вы хотите использовать на Discourse, нужно модифицировать и адаптировать под эти ограничения.

@Danielabc

Я установила, но ничего не произошло

Я пробовал вчера, и в текущем виде эффект довольно… незаметный. Его, конечно, можно улучшить, но это потребует дополнительной работы.

Я также согласен с другими: если вы хотите добавить кастомизацию на свой сайт (похоже, вы очень активно в этом участвуете и часто читаете раздел Meta), вам стоит начать с основ и разобраться в HTML, CSS и JavaScript.

Я думаю, что бесплатная помощь здесь по таким кастомизациям будет ограничена.

[danielabc (Daniela)]

Спасибо за разъяснение моих сомнений. Но я не понял одну вещь: эффекты работают на сайте для настольных компьютеров, но не для мобильных телефонов. Почему так?