# 在页面头部的Discourse Gamification插件
**URL:** https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769
**Category:** Development
**Created:** [2025年二月27日 06:36 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769 "2025-02-27T06:36:06Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 06:36 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/1 "2025-02-27T06:36:06Z")
您好，我正在尝试做一件事。我想在网站顶部显示 Discourse Gamification 插件的用户积分。例如，如果一个名为 Adam 的用户有 700 分，我该如何在标题部分显示它？我应该把代码放在哪里？
我的意思是，我真正想要的是用户能看到他们自己的积分。
此致敬礼！
---
### Author:  [@qingfeng1024](https://meta.discourse.org/u/qingfeng1024)
#### Post date: [2025年二月27日 07:36 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/2 "2025-02-27T07:36:31Z")
此请求非常出色；我也很想知道答案。
我相信，如果每个用户都能在自己的名字标签下看到他们的贡献积分，将极大地促进社区参与。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 08:05 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/3 "2025-02-27T08:05:07Z")
至少给我一个用户评分的 HTML 示例
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年二月27日 10:05 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/4 "2025-02-27T10:05:43Z")
也许是这个？
> [@Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067/1?u=natedhaliwal):
>
> discourse2Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/right-sidebar-blocks)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-right-sidebar-blocks](https://github.com/discourse/discourse-right-sidebar-blocks)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:11 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/5 "2025-02-27T10:11:40Z")
“我想将用户卡片中的啦啦队积分移到主页顶部。用户应该能够看到他们的分数。这些分数是从排行榜中获取的。”
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2025年二月27日 10:11 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/6 "2025-02-27T10:11:48Z")
这支持标题正下方和主题路由
> [@Discourse Bars beers cocktail (a sidebar framework)](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216?u=merefield):
>
> eyeglasses Overview A Theme Component that allows you to lay out Components[[1]](#footnote-1469292-1) on top and side bars. Specify a set of “widgets” distinctly for Route and Position. Supports setups for each of: discovery[[2]](#footnote-1469292-2), topic, tag[[3]](#footnote-1469292-3), category[[3:1]](#footnote-1469292-3), categories[[3:2]](#footnote-1469292-3) OR tags-intersection[[4]](#footnote-1469292-4) “Bars” can be either: top, left, right OR alternative right location. Each bar can be collapsed or dismissed (refresh browser to reset dismiss). They can be minimised by default. Handles the Official Sidebar, but if you …
但您可能需要自己构建组件。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:14 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/7 "2025-02-27T10:14:49Z")
我想将用户卡片中的欢呼积分移到主页顶部。用户应该能够看到他们的分数。这些分数是从排行榜中获取的。
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年二月27日 10:17 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/8 "2025-02-27T10:17:16Z")
此横幅/标题项目的放置是按月、季度、日、周、年还是所有时间？
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2025年二月27日 10:18 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/9 "2025-02-27T10:18:23Z")
这是当前的 Header API：
> [@Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544?u=merefield):
>
> We’ve recently [been working](https://github.com/discourse/discourse/commit/21f23cc032) on updating Discourse’s header from the legacy ‘widget’ rendering system to modern Glimmer components. This change is now available in Discourse core behind the glimmer header mode site setting. timer_clock Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: white_check_mark core implementation finished & enabled on Meta white_check_mark upgrade advice published; console deprecation messages enabled …
但你可能只想将一个组件附加到一个出口。
`before-header-panel` 看起来是个不错的选择。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:21 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/10 "2025-02-27T10:21:24Z")
不，先生。用户应该只在标题中看到他们的分数。我需要将添加到个人资料卡的部分添加到标题中。这个分数是从排行榜中获得的，该排行榜反映了从任务中获得的积分。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:24 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/11 "2025-02-27T10:24:07Z")
它将基于所有时间获得的总积分。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:26 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/12 "2025-02-27T10:26:30Z")
主页的标题部分应显示每个用户的分数。如果有什么代码或方法可以实现这一点，请告诉我。我为此奋斗了 14 个小时，还和我的猫打架！😃
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2025年二月27日 10:28 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/13 "2025-02-27T10:28:02Z")
有很多组件的示例。查看 #Customization > Theme component 的代码库，以了解 .gjs Glimmer 组件的示例，并注意它们是如何附加到插件出口（Plugin Outlets）的。
> **[Templates are HTML - Components - Ember Guides](https://guides.emberjs.com/release/components/)**
>
> At its core, Ember's UIs are HTML driven - every part of the UI that is shown to the user is defined in a component template somewhere in your application. Because of this, templates are central to Ember, and one of the most important parts of the...
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年二月27日 10:32 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/15 "2025-02-27T10:32:14Z")
@merefield 是指你可以如何构建此组件。问题是，这不是一个功能，所以它必须作为一个主题组件来制作。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月27日 10:33 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/16 "2025-02-27T10:33:27Z")
对不起。我以为您不理解我，因为我的英语不好。我感觉很糟糕。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月28日 01:23 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/17 "2025-02-28T01:23:39Z")
工作已完成
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年二月28日 02:30 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/18 "2025-02-28T02:30:00Z")
您介意分享一下您是如何完成的吗？
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月28日 02:57 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/19 "2025-02-28T02:57:31Z")
我创建了一个新组件。我使用了 API 来获取积分。我将用户部分移到了主页。
---
### Author:  [@TRgala\_Murat](https://meta.discourse.org/u/TRgala_Murat)
#### Post date: [2025年二月28日 09:06 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/20 "2025-02-28T09:06:54Z")
这是一个临时但有用的方法。也许他们想改进它，我把代码放在这里
测试网站：[https://trgala.com](https://trgala.com/)
Js
```plaintext
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));
});
});
```
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2025年三月30日 09:06 UTC](https://meta.discourse.org/t/discourse-gamification-plugin-in-the-header/354769/21 "2025-03-30T09:06:59Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.