I found a java script with a falling snow effect, and I was wondering, is it possible to put this script in the theme? I tried to insert where I put CSS, but the site bugged lol, is there another place I can insert it or does discourse not accept these types of scripts?

Hi, script tags go in the Head tab of your theme/component. :slight_smile: [image]

Can you insert any kind of javascript code in the head? And when there is HTML code combined with CSS, do I put it in normal CSS or combined CSS???

Can you show the code you want to insert so we can understand better what you want to achieve?

html is 176 times and CSS is 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); } } } }

I had tried to use this javascript, but it didn’t work

I wouldn’t recommend linking an external javascript if you don’t know how reliable it is. If the remote script change, it could break your forum. I suggest you create a new theme component in your admin panel instead. Name it something like “snowflake effect”. Edit this new theme component. In the Head tab, copy-paste the javascript code inside a HTML tag. In the CSS tab, paste the CSS code, without the height: 100vh; part in body {. In the Footer tab, paste 176 times :grimacing: . Enjoy your snow. [image] :warning: Note that this effect was created by someone in their own HTML environment, isn’t “Discourse-compatible” out of the box and thus it may cause issues on your forum.

You really ought to read this @danielabc if you haven’t done so already: [图片] Developing Discourse Themes & Theme Components Developer Guides 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…

You might use this as a model: Winter snow theme component :snowflake:

I found this snow effect and I really liked it, but it only works on desktop, on mobile it doesn’t, why? Will I have to activate something on the mobile to work? if(typeof jQuery=='undefined'){document.write(' ');document.write(' ')} 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))};$(' ').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 ').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(' ');document.write(' ')} $(document).ready(function(){var a=$(' ').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$(' ').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')});

如何在Discourse主题中放置javascript？

开发

pfaffman (Jay Pfaffman) 2022 年11 月 19 日 22:29 10

您可以将此用作模型：冬季雪景主题组件

话题		回复	浏览量
Adding a javascript in a post? Product Support	1	1644	2019 年10 月 2 日
How to add Javascript to Footer Of Posts? Product Support	3	992	2021 年10 月 10 日
Javascript code snippet injection for cookie tracking Product Support	3	967	2021 年4 月 8 日
How do you add custom JS to a theme? Product Support	1	2185	2019 年3 月 27 日
What's the fastest and easiest way to add a persistent javascript file or snippet Development	4	1776	2020 年8 月 5 日

如何在Discourse主题中放置javascript？

相关话题