DiscourseのテーマにJavaScriptを挿入する方法

danielabc · 2022 年 11 月 19 日午後 8:49

雪が降るエフェクトのJavaScriptを見つけたのですが、このスクリプトをテーマに組み込むことは可能でしょうか？CSSを挿入した場所に挿入してみたのですが、サイトがバグってしまいました（笑）。他に挿入できる場所はありますか、それともDiscourseではこのようなスクリプトは受け付けられないのでしょうか？

Canapin · 2022 年 11 月 19 日午後 8:52

スクリプトタグは、テーマ/コンポーネントのHeadタブに配置します。

danielabc · 2022 年 11 月 19 日午後 8:56

ヘッドにJavaScriptコードを挿入できますか？

また、HTMLコードとCSSが組み合わさっている場合、通常のCSSに入れるべきですか、それとも統合CSSに入れるべきですか？

Canapin · 2022 年 11 月 19 日午後 8:57

挿入したいコードを見せていただけますか？そうすれば、達成したいことをよりよく理解できます。

danielabc · 2022 年 11 月 19 日午後 9:00

HTML は <div></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 · 2022 年 11 月 19 日午後 9:05

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

このJavaScriptを使ってみましたが、動作しませんでした。

Canapin · 2022 年 11 月 19 日午後 10:24

外部JavaScriptの信頼性が不明な場合は、リンクしないことをお勧めします。リモートスクリプトが変更されると、フォーラムが破損する可能性があります。

代わりに、管理パネルで新しいテーマコンポーネントを作成することをお勧めします。「snowflake effect」のような名前を付けます。

この新しいテーマコンポーネントを編集します。

「Head」タブで、JavaScriptコードを <script> HTMLタグ内にコピー＆ペーストします。
「CSS」タブで、body { の height: 100vh; 部分を除いたCSSコードを貼り付けます。
「Footer」タブで、:grimacing: を176回貼り付けます。<div></div>。
雪をお楽しみください。

このエフェクトは、誰かが独自のHTML環境で作成したものであり、そのままでは「Discourse互換」ではないため、フォーラムで問題が発生する可能性があることに注意してください。

merefield · 2022 年 11 月 19 日午後 10:28

まだ読んでいないなら、@danielabc、これを読むべきです。

pfaffman · 2022 年 11 月 19 日午後 10:29

モデルとしてこれを使用できます：冬の雪テーマコンポーネント

danielabc · 2022 年 11 月 19 日午後 10:34

この雪の効果を見つけましたが、とても気に入りました。しかし、デスクトップでは機能しますが、モバイルでは機能しません。なぜですか？モバイルで機能するように何かを有効にする必要がありますか？

if(typeof jQuery=='undefined'){document.write('\u003c'+'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"\u003e');document.write('\u003c/'+'script'+'\u003e')}
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))};
  $('\u003cdiv\u003e\u003c/div\u003e').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=$('\u003cimg/\u003e').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()})
});
if(typeof jQuery=='undefined'){document.write('\u003c'+'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"\u003e');document.write('\u003c/'+'script'+'\u003e')}
$(document).ready(function(){
  var a=$('\u003cimg\u003e').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});
  $('\u003ca\u003e\u003c/a\u003e').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorial untuk blog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')
});

danielabc · 2022 年 11 月 19 日午後 10:35

それについては確認します、ありがとうございます

danielabc · 2022 年 11 月 19 日午後 10:43

インストールしましたが、何も起こりませんでした

Canapin · 2022 年 11 月 20 日午後 4:16

正直なところ、インターネット上にある雪の効果をディスコースで機能させようとしても、必ずしも簡単な作業ではありません。

ディスコースには独自の制約があり、インターネット上にあるほとんどのJavaScriptは、ディスコースの制約に合わせて変更・適応させる必要があります。

昨日試しましたが、現在の状態では効果はかなり…控えめです。確かに改善の余地はありますが、それはやはり作業が必要です。

他の人も言っているように、ウェブサイトにカスタマイズを追加したいのであれば（あなたはそれに非常に熱心で、メタをたくさん読んでいるようです）、まずは最初から始めて、HTML、CSS、JavaScriptの基本を理解することから始めるべきです。

このようなカスタマイズに対する無料のヘルプは限られていると思います。

danielabc · 2022 年 11 月 20 日午後 9:40

疑問が解消されてよかったです。一つ理解できなかったのは、エフェクトがデスクトップサイトでは機能するのに、携帯電話では機能しないことです。なぜでしょうか???

トピック		返信	表示
Adding a javascript in a post? Support	2	1527	2019 年 11 月 1 日
How to add Javascript to Footer Of Posts? Support	3	852	2021 年 10 月 10 日
Javascript code snippet injection for cookie tracking Support	3	780	2021 年 4 月 8 日
How do you add custom JS to a theme? Support	2	2090	2022 年 5 月 28 日
What's the fastest and easiest way to add a persistent javascript file or snippet Dev	4	1565	2020 年 8 月 5 日

DiscourseのテーマにJavaScriptを挿入する方法

関連トピック