我的第一个开源贡献
将“Firefox聊天扩展”添加到“设置”>“API”页面 #11042
结论
将“Firefox聊天扩展”添加到“设置”>“API”页面 #11375
如果你在科技活动中见过我，你可能已经知道我是Habitica的活跃用户。Habitica 是一款习惯追踪应用，它将游戏化元素融入你的生活。它帮助我保持井然有序，同时还能让我体验到玩大型多人在线角色扮演游戏（MMORPG）的乐趣，而这正是我非常热衷的游戏类型。
我的个人资料创建于 2014 年，但直到 2016 年我才开始尝试使用 Habitica。我拉拢了一些朋友，效果在一段时间内都相当不错。我甚至还为Habitica 的葡萄牙语 Wiki做过翻译贡献。
几个月前我又重新回到 Habitica，现在我是一名前端开发人员，所以贡献一些代码应该不难。
我以这期不错的入门刊为例，在这篇文章中分享了我的进展。在开始之前，我最担心的是搭建开发环境和使用 VueJS（因为我学的是 React，所以对 VueJS 非常感兴趣）。
将“Firefox聊天扩展”添加到“设置”>“API”页面 #11042
用户图标 > 设置 > API 页面包含 Chrome 聊天扩展程序的链接。此外，还应该有一个指向 Firefox 聊天扩展程序的链接，其地址为https://addons.mozilla.org/en-US/firefox/addon/habitica-chat-c lient-v2/
这两个扩展程序功能相同，唯一的区别在于它们运行的浏览器。因此，我认为最好使用相同的要点描述来介绍这两个扩展程序——这样就能清楚地表明，即使只安装其中一个，也不会错过任何功能。要点描述可以写成“ Chrome聊天扩展程序和Firefox聊天扩展程序”，下面的段落可以改为：
“Habitica聊天扩展程序为habitica.com的所有页面添加了一个直观的聊天框。用户可以通过它在酒馆、队伍以及他们加入的任何公会中进行聊天。”
我会将此问题作为建议讨论帖保留几天，如果没有人反对或更改此方案，我会将其更改为“需要帮助”。我会将其标记为“适合新手入门的问题”，因为它非常适合新贡献者。编辑：由于扩展程序正在进行一些更改，此问题暂时搁置。
第一步
在第一部分中，我只是简单地按照这篇指南操作：
Habitica Wiki - 在 Linux 上本地设置 Habitica
由于我已经安装了 Git、build-essentials、Node、npm 和 MongoDB，所以我运行了以下命令：
sudo npm install -g mocha
git clone https://github.com/Markkop/habitica.git
cd habitica
git remote add upstream https://github.com/HabitRPG/habitica.git
cp config.json.example config.json
npm install
sudo service mongod start
npm start
npm run client:dev
http://localhost:8080/static/home
太棒了，Habitica 在我的电脑上运行成功了！
登录页面有点小问题，没有显示文字，不过按照说明清除缓存后就解决了。
然后我创建了一个用户并登录了。
开始改变一些事情
按照本指南，我们将创建一个新的 Git 分支
。Habitica Wiki - 使用本地安装修改 Habitica 的网站和 API
git fetch upstream
git checkout -b firefox-extension-link
主要目标是在“设置”页面中添加一个链接，我们可以在这里找到它website/client/components/settings/api.vue。
这就是我们想要改变的：
li
a(target='_blank' href='https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb') {{ $t('chromeChatExtension') }}
br
| {{ $t('chromeChatExtensionDesc') }}
但这究竟是哪种 HTML 代码呢？正如 所暗示的<template lang="pug">，这是Pug 预处理器，它会读取这段代码并输出 HTML。SASS和 CSS 也是如此。
太好了，我们只需要修改这段文本并添加另一个链接。
但问题是：由于国际化的原因，所有文本实际上都是变量。如何访问$t('chromeChatExtension')或甚至如何让一个文本变量拥有两个链接呢？
一个不错的解决办法是向铁匠公会寻求帮助，但寻找类似情况的案例也是个好办法。
通过查看该 API 的网页，我们可以注意到上方有一条 API 令牌警告消息。
这对应于代码中的这一行。
p(v-html='$t("APITokenWarning", { hrefTechAssistanceEmail })')`
通过APITokenWarning在项目内部搜索，我们可以找到如何settings.json声明这种类型的变量。
"APITokenWarning": "If you need a new API Token (e.g., if you accidentally shared it), email <%= hrefTechAssistanceEmail %> with your User ID and current Token. Once it is reset you will need to re-authorise everything by logging out of the website and mobile app and by providing the new Token to any other Habitica tools that you use.",
因此，随着<%= hrefTechAssistanceEmail %>
此外，hrefTechAssistanceEmail的值可以在以下部分找到。
/// api.vue
...
const TECH_ASSISTANCE_EMAIL = "admin@habitica.com";
export default {
data() {
return {
newWebhook: {
url: ""
},
hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
showApiToken: false
};
}
}, ...
经过一些尝试，我们找到了直接使用的正确方法：
{{ $t("APITokenWarning", { hrefTechAssistanceEmail: "myemail@lol.com" }) }}
实际上...
好的，没问题。我们可以为每个链接创建一些常量，并像上面的例子那样使用它们。但是，如果将来有人需要更改这些链接怎么办？也许直接在文件中更改文本字符串settings.json会更容易一些。
由于这种方法生成的代码更少，我们将改用这种方法。
然后我们将chromeChatExtension和chromeChatExtensionDesc更改为以下内容：
"chatExtension": "<a target='blank' href='https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb'>Chrome Chat Extension</a> and <a target='blank' href='https://addons.mozilla.org/en-US/firefox/addon/habitica-chat-client-v2/'>Firefox Chat Extension</a>",
"chatExtensionDesc": "The Chat Extension for Habitica adds an intuitive chat box to all of habitica.com. It allows users to chat in the Tavern, their party, and any guilds they are in.",
我们的扩展列表最终是这样的：
ul
li
a(target='_blank' href='https://www.beeminder.com/habitica') {{ $t('beeminder') }}
br
| {{ $t('beeminderDesc') }}
li(v-html="$t('chatExtension')")
br
| {{ $t('chatExtensionDesc') }}
li
a(target='_blank' :href='`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id') {{ $t('dataTool') }}
br
| {{ $t('dataToolDesc') }}
li(v-html="$t('otherExtensions')")
| {{ $t('otherDesc') }}
问题
经手动检查，我们发现chatExtensionsDesc没有显示。实际上，即使在实时环境中， otherDesc文本也没有显示！
经过一些实验，发现当使用诸如 `<a>` 之类的属性创建标签时，其子标签不会显示。解决方法是调整子标签的缩进，使其显示在子标签下方。li(v-html="$t('otherExtensions')")
（Pug+Vue 的 bug？）
最终代码是
ul
li
a(target='_blank' href='https://www.beeminder.com/habitica') {{ $t('beeminder') }}
br
| {{ $t('beeminderDesc') }}
li(v-html="$t('chatExtension')")
| {{ $t('chatExtensionDesc') }}
li
a(target='_blank' :href='`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id') {{ $t('dataTool') }}
br
| {{ $t('dataToolDesc') }}
li(v-html="$t('otherExtensions')")
| {{ $t('otherDesc') }}
结论
在开始这个项目之前，我以为最大的难点在于搭建项目环境，但说明非常清晰，我并没有遇到任何问题。
有趣的是，我原本以为在一行文本中添加一个链接会很简单，但由于 Vue-i18n 插件的国际化功能，我不得不考虑几种不同的解决方案
。 一开始，最初的方案似乎更合理，因为这样一来，用户就api.vue可以在主文件中检查是否需要修改链接。
然而，如果将链接放在其他位置，settings.json就可以同时支持不同语言的链接，而且修改代码也会更加简单。
这次经历让我收获颇丰：第一次亲身实践了 Vue，发现了Pug 等HTML 预处理器，并向一个已经上线的大型项目提交了Pull Request 。
将“Firefox聊天扩展”添加到“设置”>“API”页面 #11375
修复 #11042
变化
我添加了 Firefox 聊天扩展的链接，删除了 Chrome 聊天扩展的描述，并添加了关于该聊天扩展的描述。
前：
后：
在进行这项工作时，我还发现Pug和/或Vue存在一个bug，即当使用带有属性的 HTML 标签（例如 <code><p></code>）时，其子元素将不会显示，正如您所看到的，“其他扩展”的文本描述没有出现。li(v-html="$t('otherExtensions')")
解决方法不是通过调整缩进将文本作为子文本放置。
这是最终结果：
PS：我不小心更改了settings.json缩进。这会有什么问题吗？
UUID：40387571-91ee-489e-960f-278bf8fd503a