헤더에 있는 Discourse Gamification 플러그인

개발
1

안녕하세요, 무언가를 시도하고 있습니다. Discourse Gamification 플러그인의 사용자 포인트를 사이트 상단에 표시하고 싶습니다. 예를 들어, Adam이라는 사용자가 700점을 가졌을 때, 이 정보를 헤더 섹션에 어떻게 표시할 수 있을까요? 코드를 어디에 배치해야 하나요?

즉, 사용자가 자신의 포인트를 직접 확인할 수 있도록 하고 싶습니다.
감사합니다!

2

이 요청은 정말 훌륭합니다. 저도 답이 궁금합니다.
각 사용자의 이름 태그 아래에 기여 포인트를 표시할 수 있다면 커뮤니티 참여도가 크게 향상될 것이라고 생각합니다.

The image shows a user interface possibly from an online platform with an avatar resembling a high-rise building and the username "shannon shannon1024." (由 AI 生成标题)
The image shows a user interface possibly from an online platform with an avatar resembling a high-rise building and the username "shannon shannon1024." (由 AI 生成标题)972×142 16.6 KB

3

최소 사용자 평점을 위한 HTML 예시를 하나만이라도 주세요

4

아마 이거일까요?

5

“홈페이지 상단으로 Cheer Points를 이동하고 싶습니다. 사용자가 자신의 점수를 볼 수 있어야 합니다. 이 점수는 리더보드에서 가져온 것입니다.”

Ekran görüntüsü 2025-02-27 131004
Ekran görüntüsü 2025-02-27 131004509×177 23.8 KB

6

이것은 헤더 바로 아래와 Topic Route도 지원합니다

하지만 컴포넌트를 직접 만들어야 할 수도 있습니다.

7

홈페이지 상단에 Cheer Points를 배치하고 싶습니다. 사용자는 자신의 점수를 확인할 수 있어야 하며, 이 점수는 리더보드에서 가져온 것입니다.

8

이 배너/헤더 항목의 순위는 월, 분기, 일, 주, 연도, 또는 전체 기간 중 어떤 기준으로 설정할까요?

9

현재 Header API는 다음과 같습니다:

하지만 아마도 outlet에 Component를 연결하는 것만 필요할 것입니다.

before-header-panel이 좋은 선택지로 보입니다.

10

The image shows a smartphone screen with a calculator app open, displaying the number "100", and icons for speech and search. (AI tarafından altyazılı)

아니요, 사장님. 사용자는 헤더에서 점수만 확인해야 합니다. 프로필 카드에 추가되는 섹션을 헤더에 추가해야 합니다. 이 점수는 태스크를 통해 획득한 포인트를 반영하는 리더보드에서 가져온 값입니다.

11

이는 전 기간 동안 획득한 총 점수를 기반으로 할 것입니다.

12

각 사용자는 홈페이지의 헤더 섹션에서 자신의 점수를 확인해야 합니다. 이를 위한 코드나 방법이 있다면 알려주세요. 14시간째 씨름 중인데, 고양이까지 저랑 싸우고 있어요! :smiley:

13

컴포넌트에 대한 예제가 많이 있습니다. .gjs 글리머 컴포넌트의 예제를 보려면 #customization:theme-component의 코드베이스를 살펴보세요. 그리고 플러그인 아웃렛에 어떻게 연결되는지 주목해 보세요.

15

@merefield은 이 컴포넌트를 어떻게 구축할 수 있는지에 대해 언급했습니다. 문제는 이것이 기능이 아니므로 테마 컴포넌트로 만들어야 한다는 점입니다.

16

미안해. 내 영어가 부족해서 네가 나를 이해하지 못한다고 생각했어. 그래서 좀 속상했어.

17

3a
작업이 완료되었습니다

18

이걸 어떻게 해냈는지 공유해 주시겠어요?

19

새로운 컴포넌트를 만들었습니다. 포인트를 위해 API를 사용했고, 사용자 섹션을 홈 페이지로 이동했습니다.

20

일시적이지만 유용한 방법입니다. 개선하려는 것일 수도 있으니, 여기 코드를 남겨두겠습니다.

테스트 웹사이트: https://trgala.com

Js

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.8", (api) => {
    api.onPageChange(() => {
        const currentUser = api.getCurrentUser();
        if (!currentUser) {
            console.warn("사용자가 로그인되지 않았습니다");
            return;
        }

        fetch(`/u/${currentUser.username}.json`)
            .then(response => response.json())
            .then(data => {
                console.log("게임화 데이터:", data);
                let score = data?.user?.gamification_score ?? 0;

                // 이미 점수 상자가 있으면 다시 추가하지 않음
                if (document.querySelector("#gamification-score")) return;

                // 헤더의 .contents 컨테이너 찾기
                let headerContents = document.querySelector(".d-header>.wrap .contents");
                if (headerContents) {
                    // 점수 상자 생성
                    let scoreContainer = document.createElement("a");
                    scoreContainer.id = "gamification-score";
                    scoreContainer.classList.add("gamification-box");
                    scoreContainer.href = "website";
                    scoreContainer.target = "_blank"; // 새 탭에서 열기

                    // 금색 아이콘
                    let icon = document.createElement("span");
                    icon.innerText = "T";
                    icon.classList.add("gold-icon");

                    // 점수 텍스트
                    let scoreText = document.createElement("span");
                    scoreText.innerText = `${score}`;
                    scoreText.classList.add("gold-text");

                    // 아이콘과 텍스트를 상자에 추가
                    scoreContainer.appendChild(icon);
                    scoreContainer.appendChild(scoreText);

                    // 상자를 헤더에 추가
                    headerContents.appendChild(scoreContainer);
                }
            })
            .catch(error => console.error("게임화 점수 가져오기 오류:", error));
    });
});