ヘッダーに Discourse Gamification Plugin

開発
1

こんにちは。何かを試しています。Discourse Gamificationプラグインのユーザーポイントをサイトの上部に表示したいです。例えば、Adamというユーザーが700ポイント持っている場合、これをヘッダーセクションにどのように表示できますか？コードはどこに配置すべきですか？

つまり、ユーザー自身のポイントを見えるようにしたいのです。
よろしくお願いします！

2

このリクエストは非常に素晴らしいです。私も回答を知りたいと思っています。
各ユーザーが自分の名前タグの下に貢献ポイントを見ることができれば、コミュニティのエンゲージメントが大幅に向上すると信じています。

AIによって生成された画像は、高層ビルに似たアバターと「shannon shannon1024」というユーザー名を持つオンラインプラットフォームのユーザーインターフェイスを示しています。(由 AI 生成标题)
AIによって生成された画像は、高層ビルに似たアバターと「shannon shannon1024」というユーザー名を持つオンラインプラットフォームのユーザーインターフェイスを示しています。(由 AI 生成标题)972×142 16.6 KB

「いいね！」 1
3

ユーザー評価のHTML例を少なくとも1つ教えてください

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

これはヘッダーのすぐ下やトピックルートもサポートしています。

ただし、コンポーネントは自分で構築する必要があるかもしれません。

7

Cheer Points をユーザーカードからホームページの上部に移動したいです。ユーザーは自分のスコアを確認できる必要があります。これらのスコアはリーダーボードから取得されます。

8

このバナー/ヘッダー項目の配置は、月別、四半期別、日別、週別、年別、または全期間のいずれになりますか？

9

現在のヘッダーAPIはこちらです。

しかし、おそらくコンポーネントをアウトレットにアタッチしたいだけでしょう。

before-header-panel が良さそうです。

「いいね！」 1
10

AIによってキャプションが付けられた、電卓アプリが開かれ、「100」と表示され、音声と検索のアイコンが表示されているスマートフォンの画面を示す画像。 (AI tarafından altyazılı)

いいえ、お客様。ユーザーはヘッダーで自分のスコアのみを確認できる必要があります。プロファイルカードに追加されるセクションをヘッダーに追加する必要があります。このスコアは、タスクから獲得したポイントを反映するリーダーボードから取得されます。

11

それは、すべての時間の合計ポイントに基づいて行われます。

12

各ユーザーは、ホームページのヘッダーセクションで自分のスコアを確認できるはずです。これを行うためのコードや方法があれば教えてください。14時間も苦労していて、猫と格闘しています！:smiley:

13

コンポーネントの例がたくさんあります。Theme component のコードベースを見て、.gjs グリマーコンポーネントの例を確認し、それらがプラグインアウトレットにどのようにアタッチされているかに注目してください。

15

@merefield は、このコンポーネントをどのように構築できるかについて言及していました。問題は、これは機能ではないため、テーマコンポーネントとして作成する必要があるということです。

「いいね！」 1
16

申し訳ありません。私の英語が悪かったため、あなたが私を理解していないと思ったのです。気分が悪かったです。

「いいね！」 2
17

3a
仕事は完了しました

「いいね！」 4
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));
    });
});
「いいね！」 4
21

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.