考えられるオプションの1つは、テーマコンポーネントを使用することです。
これは header.html に記述します。
<script type="text/discourse-plugin" version="0.8">
var disclaimer = settings.Disclaimer_text,
disclaimer_selector = 'div[data-theme="disclaimer"]';
$.fn.disclaimer = function() {
if (!this.length) {
return;
} else {
this.each(function() {
$(this).html(disclaimer);
});
return this;
}
};
api.decorateCooked($elem => $elem.children(disclaimer_selector).disclaimer());
// composer ボタンの作成
let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.disclaimer_button = "免責事項を追加";
I18n.translations[currentLocale].js.composer.disclaimer_prompt = ""; // 空のまま
api.onToolbarCreate(function(toolbar) {
toolbar.addButton({
trimLeading: true,
id: "disclaimer-button",
group: "insertions",
icon: "exclamation-circle", // アイコンを変更
title: "disclaimer_button",
perform: function(e) {
return e.applySurround(
'<div data-theme="disclaimer">',
"</div>",
"disclaimer_prompt"
);
}
});
});
</script>
また、コンポーネントの settings.yml ファイルには以下を記述します。
Disclaimer_text:
default: "Lorem ipsum dolor sit amet, ei purto complectitur has, per at quas senserit. Et malis libris eos, vix id pericula dissentiet, aliquid apeirian pro eu. Sed ex viderer inciderint, vitae officiis dissentiet eos no. Omnes percipit singulis in has, ne nam nibh tation inciderint. Quas nulla ei sit, ex eam rebum voluptaria. Id eam altera similique. Ex justo assentior persequeris mea, ei hinc paulo ubique mei. <br><br>Cu nam epicurei torquatos, et accusam accommodare vim. Vis sint saperet officiis et. Ad consequat posidonium mea, et duo paulo quidam maluisset, vel an electram expetendis. An vis repudiare tincidunt, mentitum convenire eloquentiam ut vis, summo partiendo pro ad."
description:
en: 表示したい免責事項のテキストを入力してください。改行には <br> を使用します。
これにより、composer に以下のようなボタンが表示されます。
このボタンをクリックすると、以下のコードが追加されます。
<div data-theme="disclaimer"></div>
これは、コンポーネントの設定で指定した内容に変換されます。
最終的な結果は以下のようになります。
また、CSS で以下のように記述して、自由にスタイルを適用することもできます。
[data-theme="disclaimer"] {
}
