# Вставьте шаблон hbs в плагин outlet на странице user-preferences-interface в user-preferences-account
**URL:** https://meta.discourse.org/t/insert-the-hbs-template-into-the-plugin-outlet-on-the-page-user-preferences-interface-to-user-preferences-account/232948
**Category:** Development
**Created:** [15.Июль.2022 08:53:40 UTC](https://meta.discourse.org/t/insert-the-hbs-template-into-the-plugin-outlet-on-the-page-user-preferences-interface-to-user-preferences-account/232948 "2022-07-15T08:53:40Z")
**Posts on this page:** 14
**Page:** 1
Привет! Когда я пытаюсь добавить в раздел настроек пользователя (user-preferences-account) возможность выбора между тёмной и светлой темой, я использую код ниже и вставляю его через плагин outlet. Проблема в том, что этот элемент не отображается для выбора, код не работает. Можете посоветовать, как правильно его туда вставить? Это для меня очень важно.
Спасибо большое.
```plaintext
{{#if showColorSchemeSelector}}
{{/if}}
```
Я хочу вставить этот код сюда, чтобы он работал корректно:
```plaintext
```
---
Привет,
Да, думаю, что так это не сработает. Я предлагаю ознакомиться с этим руководством: [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648?u=dodesz).
Если я правильно понял, вы хотите переместить этот раздел со страницы интерфейса 🔽
На страницу учётной записи, вот сюда 🔽
---
Да, именно это я и хочу сделать. Не могли бы вы мне помочь? Я уже прочитал тему, которую вы рекомендовали, но в данном конкретном случае она мне не помогла.
Возможно ли перенести ВСЕ настройки пользователя на одну страницу? Кажется, в предыдущих версиях Discourse это работало именно так.
---
Я уже частично объяснил, почему это может не работать в данном случае:
> [@Change code does not work in VS Studio code editor](https://meta.discourse.org/t/change-code-does-not-work-in-vs-studio-code-editor/233290/2?u=merefield):
>
> Things are a quite a bit more complicated than that. This is not related to your editor, VS Code is an excellent choice. Discourse is a [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller#:~:text=Model%E2%80%93view%E2%80%93controller%20%28usually%20known%20as%20MVC%29%20is%20a%20software,is%20presented%20to%20and%20accepted%20from%20the%20user.) single page app that uses EmberJS on the front end and uses Routes, Models, Controllers and Templates. Changing only the Templates is usually not sufficient. It would be really good for you to do [some reading into EmberJS](https://guides.emberjs.com/v3.16.0/). But for example, part of the reason there is no functionality, is because the Controllers are different. Here are all the Controll…
Нельзя ожидать, что это сработает, не учитывая контроллеры или JS компонентов.
Простое перемещение элементов шаблонов интерфейса между маршрутами, скорее всего, не сработает, если не учесть это. Например, шаблон может полагаться на:
- вычисляемые свойства
- действия
- сериализованные данные
- и т. д.
---
Здравствуйте, я из команды Юрая,
да, мы уже это выяснили — в том числе, отредактировав существующий плагин, чтобы включить в него настройку пользовательского интерфейса (включая шаблон hbs и контроллер JS). Похоже, единственный выход — создать новую страницу настроек пользователя, где мы включим только те параметры, которые хотим отображать. Как импортировать существующие функции, чтобы они работали с нашей собственной страницей настроек?
---
Плагин-аутлет должен подойти, если он передает требуемую модель.
Внутри этого аутлета вам нужно будет дублировать все необходимые JS-элементы из источника.
Вот пример того, как JS настраивает контроллер внутри плагин-аутлета:
>
Вы можете избежать этого довольно нестандартного способа определения контроллера, выполнив всё внутри компонента, например, так:
>
---
Спасибо за ваш ответ. Однако на данный момент у нас есть следующее:
```plaintext
```
Это код, скопированный из шаблона interface.hbs. Я не могу вставить какой-либо JS в скрипт этого компонента. Куда мне поместить функцию setupComponent?
---
Скопируйте структуру файлов связанных плагинов (или, если вы используете компонент темы, возьмите пример компонента темы, написанного в соответствии с актуальными стандартами).
Не используйте эти теги скриптов — используйте правильную структуру файлов JavaScript, это профессиональнее (и, можно сказать, проще в поддержке).
---
По сути, я создал компонент темы со следующими файлами:
/about.json
/javascripts/discourse/connectors/user-preferences-account/component-test.hbs
/javascripts/discourse/connectors/user-preferences-account/component-test.js.es6
Я вставил соответствующий код hbs в шаблон и скопировал весь JavaScript-код из контроллера интерфейса «Настройки пользователя». Я получаю тот же результат, что и при вставке кода напрямую в тег . Не думаю, что понял, что вы имели в виду под примером JS, настраивающим контроллер внутри плагина (plugin outlet).
---
Рекомендуем вам выгрузить ваш код на GitHub и поделиться им, если это возможно.
> [@Tomáš\_Guba](#):
>
> /javascripts/discourse/connectors/user-preferences-account/component-test.hs.es6
Полагаю, это опечатка: должно быть либо `.js`, либо `.js.es6`.
> [@Tomáš\_Guba](#):
>
> компонент плагина
Будьте немного внимательнее к своей терминологии: это либо компонент темы, либо плагин.
---
Извините, да, я имел в виду js.es6. Да, это компонент темы.
У меня нет загруженного на GitHub компонента темы.
**/about.json:**
```plaintext
{
"name": "Component Test",
"component": true,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
},
"color_schemes": {
},
"modifiers": {
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
```
**/javascripts/discourse/connectors/user-preferences-account/component-test.hbs**
```plaintext
```
**/javascripts/discourse/connectors/user-preferences-account/component-test.js.es6**
```plaintext
import Controller, { inject as controller } from "@ember/controller";
import Session from "discourse/models/session";
import { setDefaultHomepage } from "discourse/lib/utilities";
import {
listColorSchemes,
loadColorSchemeStylesheet,
updateColorSchemeCookie,
} from "discourse/lib/color-scheme-picker";
import { listThemes, setLocalTheme } from "discourse/lib/theme-selector";
import { not, reads } from "@ember/object/computed";
import I18n from "I18n";
import { computed } from "@ember/object";
import discourseComputed from "discourse-common/utils/decorators";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { reload } from "discourse/helpers/page-reloader";
import { propertyEqual } from "discourse/lib/computed";
const USER_HOMES = {
1: "latest",
2: "categories",
3: "unread",
4: "new",
5: "top",
6: "bookmarks",
7: "unseen",
};
const TEXT_SIZES = ["smallest", "smaller", "normal", "larger", "largest"];
const TITLE_COUNT_MODES = ["notifications", "contextual"];
export default Controller.extend({
currentThemeId: -1,
previewingColorScheme: false,
selectedDarkColorSchemeId: null,
preferencesController: controller("preferences"),
makeColorSchemeDefault: true,
canPreviewColorScheme: propertyEqual("model.id", "currentUser.id"),
init() {
this._super(...arguments);
this.set("selectedDarkColorSchemeId", this.session.userDarkSchemeId);
},
@discourseComputed("makeThemeDefault")
saveAttrNames(makeThemeDefault) {
let attrs = [
"locale",
"external_links_in_new_tab",
"dynamic_favicon",
"enable_quoting",
"enable_defer",
"automatically_unpin_topics",
"allow_private_messages",
"enable_allowed_pm_users",
"homepage_id",
"hide_profile_and_presence",
"text_size",
"title_count_mode",
"skip_new_user_tips",
"color_scheme_id",
"dark_scheme_id",
];
if (makeThemeDefault) {
attrs.push("theme_ids");
}
return attrs;
},
@discourseComputed()
availableLocales() {
return JSON.parse(this.siteSettings.available_locales);
},
@discourseComputed
defaultDarkSchemeId() {
return this.siteSettings.default_dark_mode_color_scheme_id;
},
@discourseComputed
textSizes() {
return TEXT_SIZES.map((value) => {
return { name: I18n.t(`user.text_size.${value}`), value };
});
},
homepageId: computed(
"model.user_option.homepage_id",
"userSelectableHome.[]",
function () {
return (
this.model.user_option.homepage_id ||
this.userSelectableHome.firstObject.value
);
}
),
@discourseComputed
titleCountModes() {
return TITLE_COUNT_MODES.map((value) => {
return { name: I18n.t(`user.title_count_mode.${value}`), value };
});
},
@discourseComputed
userSelectableThemes() {
return listThemes(this.site);
},
@discourseComputed("userSelectableThemes")
showThemeSelector(themes) {
return themes && themes.length > 1;
},
@discourseComputed("themeId")
themeIdChanged(themeId) {
if (this.currentThemeId === -1) {
this.set("currentThemeId", themeId);
return false;
} else {
return this.currentThemeId !== themeId;
}
},
@discourseComputed
userSelectableColorSchemes() {
return listColorSchemes(this.site);
},
showColorSchemeSelector: reads("userSelectableColorSchemes.length"),
selectedColorSchemeNoneLabel: I18n.t(
"user.color_schemes.default_description"
),
@discourseComputed(
"userSelectableThemes",
"userSelectableColorSchemes",
"themeId"
)
currentSchemeCanBeSelected(userThemes, userColorSchemes, themeId) {
if (!userThemes || !themeId) {
return false;
}
const theme = userThemes.findBy("id", themeId);
if (!theme) {
return false;
}
return userColorSchemes.findBy("id", theme.color_scheme_id);
},
showColorSchemeNoneItem: not("currentSchemeCanBeSelected"),
@discourseComputed("model.user_option.theme_ids", "themeId")
showThemeSetDefault(userOptionThemes, selectedTheme) {
return !userOptionThemes || userOptionThemes[0] !== selectedTheme;
},
@discourseComputed("model.user_option.text_size", "textSize")
showTextSetDefault(userOptionTextSize, selectedTextSize) {
return userOptionTextSize !== selectedTextSize;
},
homeChanged() {
const siteHome = this.siteSettings.top_menu.split("|")[0].split(",")[0];
const userHome = USER_HOMES[this.get("model.user_option.homepage_id")];
setDefaultHomepage(userHome || siteHome);
},
@discourseComputed()
userSelectableHome() {
let homeValues = {};
Object.keys(USER_HOMES).forEach((newValue) => {
const newKey = USER_HOMES[newValue];
homeValues[newKey] = newValue;
});
let result = [];
this.siteSettings.top_menu.split("|").forEach((m) => {
let id = homeValues[m];
if (id) {
result.push({ name: I18n.t(`filters.${m}.title`), value: Number(id) });
}
});
return result;
},
@discourseComputed
showDarkModeToggle() {
return this.defaultDarkSchemeId > 0 && !this.showDarkColorSchemeSelector;
},
@discourseComputed
userSelectableDarkColorSchemes() {
return listColorSchemes(this.site, {
darkOnly: true,
});
},
@discourseComputed("userSelectableDarkColorSchemes")
showDarkColorSchemeSelector(darkSchemes) {
// когда установлен режим тёмной темы по умолчанию
// выпадающий список содержит два элемента (отключить / использовать настройки сайта по умолчанию)
// но в этом случае мы показываем флажок
const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
return darkSchemes && darkSchemes.length > minToShow;
},
enableDarkMode: computed({
set(key, value) {
return value;
},
get() {
return this.get("model.user_option.dark_scheme_id") === -1 ? false : true;
},
}),
selectedColorSchemeId: computed({
set(key, value) {
return value;
},
get() {
if (!this.session.userColorSchemeId) {
return;
}
const theme = this.userSelectableThemes?.findBy("id", this.themeId);
// мы не хотим отображать числовой ID схемы,
// если она установлена темой, но не помечена как выбираемая пользователем
if (
theme?.color_scheme_id === this.session.userColorSchemeId &&
!this.userSelectableColorSchemes.findBy(
"id",
this.session.userColorSchemeId
)
) {
return;
} else {
return this.session.userColorSchemeId;
}
},
}),
actions: {
save() {
this.set("saved", false);
const makeThemeDefault = this.makeThemeDefault;
if (makeThemeDefault) {
this.set("model.user_option.theme_ids", [this.themeId]);
}
const makeTextSizeDefault = this.makeTextSizeDefault;
if (makeTextSizeDefault) {
this.set("model.user_option.text_size", this.textSize);
}
if (!this.showColorSchemeSelector) {
this.set("model.user_option.color_scheme_id", null);
} else if (this.makeColorSchemeDefault) {
this.set(
"model.user_option.color_scheme_id",
this.selectedColorSchemeId
);
}
if (this.showDarkModeToggle) {
this.set(
"model.user_option.dark_scheme_id",
this.enableDarkMode ? null : -1
);
} else {
// если выбранный тёмный режим совпадает с тёмным режимом сайта, хранить его не нужно
if (
this.defaultDarkSchemeId > 0 &&
this.selectedDarkColorSchemeId === this.defaultDarkSchemeId
) {
this.set("model.user_option.dark_scheme_id", null);
} else {
this.set(
"model.user_option.dark_scheme_id",
this.selectedDarkColorSchemeId
);
}
}
return this.model
.save(this.saveAttrNames)
.then(() => {
this.set("saved", true);
if (makeThemeDefault) {
setLocalTheme([]);
} else {
setLocalTheme(
[this.themeId],
this.get("model.user_option.theme_key_seq")
);
}
if (makeTextSizeDefault) {
this.model.updateTextSizeCookie(null);
} else {
this.model.updateTextSizeCookie(this.textSize);
}
if (this.makeColorSchemeDefault) {
updateColorSchemeCookie(null);
updateColorSchemeCookie(null, { dark: true });
} else {
updateColorSchemeCookie(this.selectedColorSchemeId);
if (
this.defaultDarkSchemeId > 0 &&
this.selectedDarkColorSchemeId === this.defaultDarkSchemeId
) {
updateColorSchemeCookie(null, { dark: true });
} else {
updateColorSchemeCookie(this.selectedDarkColorSchemeId, {
dark: true,
});
}
}
this.homeChanged();
if (this.themeId !== this.currentThemeId) {
reload();
}
})
.catch(popupAjaxError);
},
selectTextSize(newSize) {
const classList = document.documentElement.classList;
TEXT_SIZES.forEach((name) => {
const className = `text-size-${name}`;
if (newSize === name) {
classList.add(className);
} else {
classList.remove(className);
}
});
// Принудительное обновление при выходе с этого экрана
this.session.requiresRefresh = true;
this.set("textSize", newSize);
},
loadColorScheme(colorSchemeId) {
this.setProperties({
selectedColorSchemeId: colorSchemeId,
previewingColorScheme: this.canPreviewColorScheme,
});
if (!this.canPreviewColorScheme) {
return;
}
if (colorSchemeId < 0) {
const defaultTheme = this.userSelectableThemes.findBy(
"id",
this.themeId
);
if (defaultTheme && defaultTheme.color_scheme_id) {
colorSchemeId = defaultTheme.color_scheme_id;
}
}
loadColorSchemeStylesheet(colorSchemeId, this.themeId);
if (this.selectedDarkColorSchemeId === -1) {
// установить ту же схему для предварительного просмотра тёмного режима, если тёмный режим отключен
loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
}
},
loadDarkColorScheme(colorSchemeId) {
this.setProperties({
selectedDarkColorSchemeId: colorSchemeId,
previewingColorScheme: this.canPreviewColorScheme,
});
if (!this.canPreviewColorScheme) {
return;
}
if (colorSchemeId === -1) {
// загрузить предварительный просмотр обычной схемы, если тёмный режим отключен
loadColorSchemeStylesheet(
this.selectedColorSchemeId,
this.themeId,
true
);
Session.currentProp("darkModeAvailable", false);
} else {
loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
Session.currentProp("darkModeAvailable", true);
}
},
undoColorSchemePreview() {
this.setProperties({
selectedColorSchemeId: this.session.userColorSchemeId,
selectedDarkColorSchemeId: this.session.userDarkSchemeId,
previewingColorScheme: false,
});
const darkStylesheet = document.querySelector("link#cs-preview-dark"),
lightStylesheet = document.querySelector("link#cs-preview-light");
if (darkStylesheet) {
darkStylesheet.remove();
}
if (lightStylesheet) {
lightStylesheet.remove();
}
},
},
});
```
Это всё, что у меня есть, напрямую скопировано из исходных файлов.
---
Первое, на что стоит обратить внимание: есть ли ошибки в консоли?
> [@Tomáš\_Guba](#):
>
> скопировано напрямую из исходных файлов
Мой друг, «прямое копирование», скорее всего, не сработает во многих случаях. Вам нужно понимать, что вы делаете, и действовать соответствующим образом.
```plaintext
export default Controller.extend({
```
Это яркий пример. В данном конкретном контексте это, вероятно, не сработает.
Как я уже предлагал, пожалуйста, посмотрите на пример кода, который я поделился.
Вот что вам нужно:
```plaintext
export default {
setupComponent(args, component) {
```
потому что это коннектор
---
Спасибо за вашу помощь. Нет, я не вижу никаких ошибок в консоли, и это первое, что я всегда проверяю, так как там видно, чего не хватает в коде.
Я заменил JavaScript только на две функции, которые вы прислали, но не знаю, что именно взять из вашего примера. Как я уже сказал, я не уверен, что нужно реализовать, поскольку в консоли ошибок не видно.