Discourse 할로윈 장식 공유하기!

커뮤니티 구축
1

크리스마스 장식과 마찬가지로, 여기는 할로윈 장식을 공유하기 위한 주제입니다.

으스스한 유령


기본적으로 작성을 시작할 때 유령이 나타날 확률은 10분의 1입니다.

  1. 테마/컴포넌트에 다음 이미지를 업로드하고 변수 이름을 ghost로 설정하세요:

ghost
ghost323×415 13.7 KB

출처

  1. 테마 또는 컴포넌트의 </head> 탭에 다음 자바스크립트를 추가하세요:
    rarity 변수의 값을 늘리거나 줄여서 유령이 나타나는 빈도를 조절할 수 있습니다.

    <script type="text/discourse-plugin" version="1.4.0">
const appEvents = api.container.lookup("service:app-events");
appEvents.on('composer:opened', () => {
    let rarity = 10 // the ghost has 1 out of [rarity value] chance to appear when opening the composer
    if (Math.floor(Math.random() * rarity) == 0) {
        let halloweenGhost = document.createElement("img");
        halloweenGhost.id = "halloween-ghost";
        halloweenGhost.src = settings.theme_uploads.ghost;
        document.getElementsByTagName("body")[0].appendChild(halloweenGhost);
        setTimeout(function () {
            halloweenGhost.classList.add("ghost-show");
        }, 0);
        setTimeout(function(){
            halloweenGhost.remove();
        }, 1000);
    }
});
</script>

  2. CSS 탭에 다음 코드를 추가하세요:

    #halloween-ghost {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.5);
    z-index: 10000;
    opacity: 1;
    pointer-events: none;
    transition: opacity .75s ease-in, top .75s ease, transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    &.ghost-show {
        transform: translate(-50%, -60%) scale(.6);
        opacity: 0;
    }
}
@media all and (min-width: 1024px) {
    #halloween-ghost {
        transform: translate(-50%, -50%) scale(.75);
        &.ghost-show {
            transform: translate(-50%, -60%) scale(.9);
        }
    }
}

:warning: 모바일에서 가상 키보드가 나타날 때 유령이 "점프"하는 현상이 발생합니다.

거미줄

image
image1858×1009 142 KB

작은 화면에서는 거미줄이 숨겨집니다.

포럼에 추가하는 방법:

  1. 새로운 테마 컴포넌트를 만들거나 기존 테마를 편집하여 이 이미지를 업로드하고, 변수 이름을 spiderweb으로 설정하세요:

    toppng.com-spider-web-corner-600x564
    toppng.com-spider-web-corner-600x564835×785 98 KB

    출처

  2. 다음 CSS를 테마 또는 컴포넌트에 추가하세요:

    @media all and (min-width: 1300px) {
   #main {
     &:before, &:after {
         content: "";
         display: block;
         top: 4em;
         width: 300px;
         height: 300px;
         position: absolute;
         background: transparent url($spiderweb) top left no-repeat;
         background-size: contain;
         z-index: -1;
     }
     &:after {
         right: 0;
         transform: scaleX(-1);
      }
   }
}

이모지 선택기의 해골 아이콘

메시지 작성기의 웃는 얼굴 아이콘을 해골 :skull:로 대체하는 은은한 효과입니다.

image

  1. svg icon subset 설정에 skull을 추가하세요:

    image
    image746×118 8.05 KB

  2. 테마/테마 컴포넌트의 </head> 탭에서 아이콘을 교체하세요:

    <script type="text/discourse-plugin" version="0.8.23">
    api.replaceIcon('far-smile', 'skull');
</script>

:warning: 관리자 패널과 같은 다른 곳의 웃는 얼굴 아이콘도 함께 교체됩니다. 하지만 할로윈이니까 괜찮죠?

image

잭-o’-lantern(호박 등)

사이트 오른쪽 하단에 놓이는 단순한 정적 조각 호박입니다:

image
image1858×1009 58.1 KB

  1. 새로운 테마 컴포넌트를 만들거나 기존 테마를 편집하여 이 이미지를 업로드하고, 변수 이름을 pumpkin으로 설정하세요:

    jack-o-lantern
    jack-o-lantern378×387 18.3 KB

    출처

  2. 다음 CSS를 테마 또는 컴포넌트에 추가하세요:

    body {
    background: transparent url($pumpkin) bottom right no-repeat;
    background-size: 10%;
}
@media all and (min-width: 1024px) {
    body {
        background-size: 7%;
    }
}

:warning: 이미 <body>에 배경 이미지를 사용 중인 포럼과는 호환되지 않습니다.

기괴한 로고

로고가 순수한 텍스트이거나 단순한 텍스트 이미지인 경우, 더 할로윈 분위기가 나는 폰트로 교체할 수 있습니다.

image → image
사용한 폰트: Creepster

  • 로고가 이미지를 사용하는 경우, 이미지를 편집하여 폰트를 변경하세요.
  • 로고가 실제 텍스트인 경우, 로고에 사용되는 폰트를 변경하는 방법에 대한 이 튜토리얼을 따르세요: Include assets (e.g. images, fonts) in themes and components
    • CSS에서 선택자 #site-text-logo를 사용하세요.
36개의 좋아요
Holiday Theme Recommendations
2020: The Year in Review
2

좋긴 한데, 거미 공포증이 있는 사용자들이 몇 명 있어요. 그분들은 그 사실을 꽤 자주 말씀해 주셨고, 그분들은 제 게시판에서 가장 활발하게 활동하는 분들 중 몇몇이기도 해요. :frowning_face:
그래도 저는 거미줄 디자인을 정말 좋아해요. 잘 어울리네요! :+1:

6개의 좋아요
3

그런 이유 때문에 거미는 포함하지 않았습니다. 저는 (아마도 잘못되었을지 모르지만) 사람들이 거미줄만은 더 잘 참아줄 거라고 가정했습니다?

5개의 좋아요
4

화면에 거미가 돌아다니고, 처음 방문할 때 ‘무하하하’ 소리가 나며, 카테고리에 들어갈 때나 주제를 클릭할 때 문이 삐걱거리거나 사슬을 끌고 다니는 소리가 가끔씩(매번 들리면 너무 귀찮으니까, 20번 클릭할 때마다 한 번 정도) 들린다면 정말 멋질 것 같아요! :joy:

3개의 좋아요
5

주제에 답변할 때 화면에 귀신 이모티콘이 잠시(그것도 드물게) 무작위로 나타나는 걸 만들어볼까 생각 중입니다 :ghost:

3개의 좋아요
6

좋은 아이디어네요! 만들어 주셔서 감사합니다.

4개의 좋아요
7

@Rhidian 님이 만든 이 테마 컴포넌트가 완벽한 선택이 될 것입니다:

4개의 좋아요
8

그것도 추가했습니다. @Chaboi_3000님 감사합니다!

2개의 좋아요
9

좋아요, 방금 Discourse에 거미줄을 추가했어요 :crazy_face:

2개의 좋아요
13

이것은 위키이므로 마지막에 올린 게시글들을 삭제하고 첫 번째 게시글에 추가했습니다! 여러분도 직접 커스터마이징을 추가해 보세요!
고스트 코드를 개선하고, 스케일 전환을 통해 살짝 튀어나오는 효과를 추가했습니다.

1개의 좋아요
14

저희가 @ondrej 님을 위한 아이디어를 하나 생각해냈습니다. 커뮤니티에 조금 더 재미있고 축제 같은 분위기를 더해줄 것 같아요. 할로윈 기간에 이 기능이 추가되었으면 좋겠습니다. :eyes:

다양성을 좀 줄여서 예상치 못한 '스파이스’를 더하는 것도 좋을 것 같아요 :joy:

2개의 좋아요
15

첫 번째 게시글에 으스스한 유령을 만들고 추가했습니다.

1개의 좋아요
16

아! 알겠습니다. 처리하겠습니다.

1개의 좋아요
17

정말 감사합니다! :heart_eyes: 당신의 장식 덕분에 http://lettucecraft.com/이(가) 축제 분위기예요! :raised_hands:

1개의 좋아요
18

방금 이걸 포럼에서 삭제했지만, 있는 동안 꽤 즐거웠어요 - 도움을 주셔서 감사합니다 (크레딧도 드렸어요)! Screenshot 2020-11-01 at 18.08.00|690x55

1개의 좋아요
19

12월 휴가를 위해 같은 개념을 재사용했습니다. 다시 한번 감사드립니다!! https://forum.lettucecraft.com/

2개의 좋아요
20

고스트를 추가한 내 사이트에서 이 오류가 발생합니다.
image

1개의 좋아요
21

나이를 고려하면 그렇게 자주 사용하지 않으므로 꽤 그럴듯한 설명입니다.

2개의 좋아요
22

네, 방금 이걸 보고 일부 추가하면 재밌을 것 같아서요. 그냥 깨진 유령 팝업 하나뿐인데 디스코스가 “경고!!! 당신의 사이트가 깨졌어요!!!”라고 뜨는 게 너무 웃기죠 ㅋㅋ

1개의 좋아요
23

한번 살펴볼게. 이렇게 하면 너무 무서워.

3개의 좋아요