Discourse 테마에 JavaScript를 넣는 방법?

[danielabc (Daniela)]

눈이 내리는 효과를 가진 자바스크립트 스크립트를 찾았는데, 이 스크립트를 테마에 넣을 수 있는지 궁금합니다. CSS를 넣는 위치에 삽입해 보았지만 사이트가 버그가 났어요 ㅋㅋ 다른 곳에 삽입할 수 있는 곳이 있거나, 디스커스가 이런 유형의 스크립트를 지원하지 않는 건가요?

[Canapin (Coin-coin le Canapin)]

안녕하세요, 스크립트 태그는 테마/컴포넌트의 Head 탭에 넣으시면 됩니다.

[danielabc (Daniela)]

head 부분에 어떤 종류의 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>

이 자바스크립트를 사용해 보았지만 작동하지 않았습니다.

[Canapin (Coin-coin le Canapin)]

신뢰할 수 있는지 모르는 외부 JavaScript를 연결하는 것은 권장하지 않습니다. 원격 스크립트가 변경되면 포럼이 깨질 수 있습니다.

대신 관리자 패널에서 새로운 테마 컴포넌트를 생성하는 것을 제안합니다. 이름을 "snowflake effect"처럼 지으세요.

이 새로운 테마 컴포넌트를 편집하세요.

1. Head 탭에서 JavaScript 코드를 <script> HTML 태그 안에 복사하여 붙여넣으세요.

2. CSS 탭에서 CSS 코드를 붙여넣되, body { 안의 height: 100vh; 부분은 제외하세요.

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에는 자체적인 제약 사항이 있으며, Discourse에 포함하려는 대부분의 외부 JavaScript는 이러한 제약 사항에 맞게 수정하고 적응시켜야 합니다.

@Danielabc

설치를 했지만 아무런 반응이 없었습니다

어제 시도해 보았지만 현재 상태에서는 효과가 꽤… 미묘합니다. 분명 개선할 여지는 있지만, 다시 말하지만 그것은 상당한 작업이 필요합니다.

또한 다른 분들 의견에 동의합니다. 웹사이트에 커스터마이징을 추가하고 싶다면(매우 깊이 관여하고 계시고 Meta를 많이 읽으시는 것 같습니다), 처음부터 시작하여 HTML, CSS, JavaScript의 기본 사항을 이해하는 것이 좋습니다.

이러한 커스터마이징에 대한 무료 도움은 여기에서 제한적일 것이라고 생각합니다.

[danielabc (Daniela)]

의문을 해소해 주셔서 감사합니다. 한 가지 이해가 안 되는 부분은, 이 효과가 데스크톱에서는 사이트에 적용되는데 휴대폰에서는 적용되지 않는다는 것입니다. 왜 그런 걸까요?