재미있는 TC: Discourse Confetti Clicks

커스터마이징 테마 컴포넌트
1
:information_source: 요약 tsParticles를 사용하여 클릭 위치에 색종이가 떨어지도록 하여 커뮤니티에 재미를 더합니다.
:eyeglasses: 미리보기 Theme Creator
:hammer_and_wrench: 저장소 GitHub - NateDhaliwal/discourse-confetti-clicks · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스커스 테마 초보자? 디스커스 테마 사용 입문 가이드

이 테마 컴포넌트 설치

이 테마 컴포넌트는 사용자가 클릭하거나 탭한 위치에 색종이를 생성합니다. 색종이의 양과 퍼지는 각도는 설정을 통해 모두 제어할 수 있습니다.
이 TC(테마 컴포넌트)는 커뮤니티가 더 상호작용적이고 재미있어지도록 도와줍니다.
색종이 효과는 색종이, 눈, 선 등을 애니메이션 처리하는 JS 라이브러리인 tsParticles를 통해 구현됩니다.
일부 도움은 ask.discourse.com에서 받았습니다.

설정:

  1. confetti_amount는 각 클릭 시 생성되는 색종이의 양을 변경합니다.

:warning: 너무 큰 숫자를 넣지 않는 것이 좋습니다. 그렇지 않으면 색종이가 나타내고 사라지는 과정에서 더 많은 지연 현상이 발생할 수 있습니다. 100~200이 적절한 범위입니다.

  1. confetti_spread는 색종이가 퍼지는 각도를 변경합니다. 모든 숫자는 도(degree) 단위로 입력됩니다. 360 값은 색종이가 모든 방향으로 퍼지도록 하고, 1 값은 색종이가 일직선으로 퍼지며 떨어지도록 합니다.
  2. allowed_in은 색종이를 사용할 수 있는 위치를 설정합니다. 이 필드에 카테고리 슬러그를 입력하세요. 여러 카테고리를 지정하려면 슬러그를 |로 구분하여 입력하세요(공백 없이).
    이 필드를 비워두면 모든 페이지에서 색종이 기능이 활성화됩니다.
13개의 좋아요
2

재밌네요! 이 기능이 활성화되는 범위에 제한을 두는 건 어떨까요? 일반적인 공간에서 이동할 때는 실용적이지 않아 보이지만, 축하 페이지에서는 재미있을 수 있을 것 같아요.

5개의 좋아요
3

이건 회원 생일 자동화와 연결해야 해요 :smiley:

14개의 좋아요
4

이것이 /leaderboard나 /about 같은 포럼 페이지를 의미하나요, 아니면 특정 카테고리 안의 주제(topics)를 의미하나요?

5

업데이트:
새로운 설정 allowed_in이 추가되었습니다. 이 설정을 사용하면 특정 카테고리에서만 컨페티를 표시할 수 있습니다. 카테고리 슬러그를 입력하세요. 여러 카테고리를 지정하려면 |로 구분하여 입력하세요.

3개의 좋아요
6

이제 수정되었습니다! 이 필드를 공백으로 두면 모든 페이지에서 색종이(콘페티) 효과가 활성화됩니다.

1개의 좋아요
8

업데이트: allowed_in 카테고리가 이제 설정의 list_type으로 category를 사용하도록 업데이트되었습니다. 이를 통해 카테고리를 더 나은 방식으로 선택할 수 있습니다.

9

테마 제작자 미리보기 링크가 저에게는 아무 반응도 없습니다.

1개의 좋아요
10

아, 실수했네요. 설정에 있던 카테고리가 #school과 #movies였어요. #general로 변경했습니다.

11

이 TC는 아마도 가장 쓸모없는 것일 겁니다 :laughing:

곧 스크립트 태그를 현대화할 예정입니다. 특정 URL 경로에서 표시되도록 설정하는 기능도 추가할 수 있겠네요.

1개의 좋아요
12

이 컴포넌트를 업데이트하여 더 이상 <script type='text/discourse-plugin'>을 사용하지 않습니다.

또한 포럼 내 특정 경로에서 컨페티를 활성화하기 위해 allowed_in_urls 설정을 추가했습니다. (확인 시 URL 인수는 제거됩니다.)

예를 들어, Theme Creator에서 제가 설정한 내용은 다음과 같습니다:

image
image931×480 27.9 KB

즉, 컨페티는 다음 장소에서 활성화됩니다:

2개의 좋아요