Если вы встретили меня в техническом мероприятии, вы уже знаете, что я активный пользователь Привычка , трекер привычки, который применяет геймификацию в вашу жизнь. Это помогло мне держать себя организовываться, обеспечивая ощущение игры в MMORPG, что я очень увлечен.
Мой профиль был создан в 2014 году, но только в 2016 году я попробовал. Я задействовал некоторых других друзей, и это сработало довольно хорошо в течение некоторого времени. Я даже внес свой вклад в Португальская вики Habitica’s Wiki с переводами. Несколько месяцев назад я вернулся в Habitica, и сегодня я являюсь фронтальным разработчиком, поэтому не должно быть трудно внести свой вклад в какой-то код.
Привычка/привычка
Приложение Tracker, которое рассматривает ваши цели как ролевую игру.
Я взял этот хороший первый выпуск и поделился своим прогрессом в этом посте. Раньше я был обеспокоен тем, что основные трудности – создание среды разработки и работа с Vuejs (что было очень любопытным, так как я узнал реагировать)
Значок пользователя> Настройки> Страница API Содержит ссылку на расширение Chrome Chat. Также должна быть ссылка на расширение чата Firefox, которое находится в https://addons.mozilla.org/en-us/firefox/addon/habitica-chat-client-v2/
Оба расширения делают одно и то же, единственное отличие – это браузер, на котором они бегут. Из -за этого я думаю, что было бы наиболее полезно, если бы один и тот же запись точки точки была использована для обоих расширений – это должно сделать очевидным, что вы ничего не упускаете, если вы установите только один из них. Лина точек пули может читать ” Расширение хромового чата и Firefox Chat Extension “И абзац под ним может быть изменен на это:
«Расширение чата для Habixica добавляет интуитивно понятную коробку чата ко всему abhica.com. Это позволяет пользователям общаться в таверне, их вечеринке и любых гильдиях, в которых они находятся ».
Я оставлю эту проблему открытой в качестве раскрытия предложений на несколько дней, а затем, если нет никаких возражений или изменений в этом подходе, я изменю его помощь. Я помежу это как хорошую первую проблему, так как он будет идеальным для нового участника. РЕДАКТИРОВАТЬ: Это приостановлено, в то время как некоторые изменения вносятся в расширение.
Первые шаги
В этой первой части я просто следовал этому руководству: Wabitica wiki – создание Habibica на местном уровне на Linux
Так как у меня уже были установлены GIT, Buildenseals, 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 Ура, Хабитика работает на моей собственной машине! Страница для входа была немного пробитой без текстов, но, как указано Кринг Кэш исправил его. Затем я создал пользователя и вошел в систему.
Начинать менять вещи
Следуя этому руководству, мы создаем новую филиал GIT Wabitica wiki – Использование местной установки для изменения веб -сайта Dibidica и API
git fetch upstream git checkout -b firefox-extension-link
Основная цель – добавить ссылку на странице настроек, и мы можем найти ее в Веб -сайт/Клиент/Компоненты/Настройки/API.VUE Анкет
Это то, что мы хотим изменить:
li
a(target='_blank' href='https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb') {{ $t('chromeChatExtension') }}
br
| {{ $t('chromeChatExtensionDesc') }}
Но что это за HTML? Как намекал <Шаблон> , это Мопс Препроцессор Это берет этот код и выводит HTML. То же самое с Sass и CSS.
Круто, поэтому нам нужно только изменить этот текст и добавить другую ссылку. Но дело в том, что все тексты на самом деле переменные, потому что интернационализация . Как получить доступ $ t ('ChromeChatextension') Или даже как иметь единую текстовую переменную с двумя ссылками?
Хороший выход – просить о помощи в Гильдии кузнецов, но также работает где -то для аналогичной ситуации.
Проверяя веб -страницу этой API, мы можем заметить, что прямо вверху есть это предупреждающее сообщение API.
это соответствует этой строке в коде
p(v-html='$t("APITokenWarning", { hrefTechAssistanceEmail })')`
И поиск Apitokenwarning Внутри проекта мы можем найти, как Настройки.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.",
Поэтому , с < %= hrefteChassistancemail %>
Также HrefteChassistanceMail Значение можно найти в следующем разделе
/// api.vue
...
const TECH_ASSISTANCE_EMAIL = "admin@habitica.com";
export default {
data() {
return {
newWebhook: {
url: ""
},
hrefTechAssistanceEmail: `${TECH_ASSISTANCE_EMAIL}`,
showApiToken: false
};
}
}, ...
И после некоторых попробовался, мы узнаем, как правильный способ использовать напрямую:
{{ $t("APITokenWarning", { hrefTechAssistanceEmail: "myemail@lol.com" }) }}
На самом деле…
Ладно, круто. Мы могли бы просто создать некоторые константы с каждой ссылкой и использовать их в качестве примера выше. Однако что, если когда -нибудь кто -то должен был изменить эти ссылки? Возможно, изменение текстовой строки непосредственно в Настройки.json Файл будет проще.
Поскольку этот подход приводит к меньшему коду, мы собираемся использовать его вместо этого.
Затем мы меняем ChromeChatextension и ChromeChatextensionDesc к следующему:
"chatExtension": "Chrome Chat Extension and Firefox Chat Extension", "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 не отображается. На самом деле Другое DESC Текст не появляется, даже вживую!
После некоторых экспериментов кажется, что когда теги создаются с атрибутами такие как li (v-html = "$ t ('otherextensions')") Их теги детей не отображаются. Решение меняет детское вдавливание, поэтому оно появляется чуть ниже.
(ошибка с мопсом+Vue?)
Окончательный код
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 был бы Основной файл где кто -то проверит, если ему нужно изменить ссылку. Однако, поместив это в Настройки.json Ссылки могут быть изменены на разные языки также. И изменение кода было бы много проще Анкет Участие в этой возможности имели мои Первый практический контакт С VUE, обнаружение существования Предварительные обработки HTML такие как мопс и создание Запрос на вытягивание к большому проекту уже в производстве.
Исправляет #11042
Изменения
Я добавил ссылку Firefox Chat Extension, удалил описание расширения Chart Chat и добавил описание расширения чата
До:
После:
Работая над этим, я также обнаружил ошибка с Мопс и/или Vue что всякий раз, когда использует HTML -тег с атрибутом такие как li (v-html = "$ t ('otherextensions')") его дети не будут отображаться, так как вы можете заметить, как текстовое описание « другие расширения » не появляется.
исправить не размещает текст как ребенка, исправляя его СДАРТАЦИЯ Анкет
Это последний результат:
PS: я ошибочно изменился Настройки.json отступление. Есть ли проблема?
Uuid: 40387571-91EE-489E-960F-278BF8FD503A
Оригинал: “https://dev.to/heymarkkop/my-first-open-source-contribution-21dh”