隠しディレクトリ機能を追加していただけると幸いです。
カスタムプラグイン
これはあなたのプラグインを参考に、主にボタンを一つ追加し、JavaScriptで動的にレンダリングしています。
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
css
// エディタに表示される目次関連のスタイル
// エディタプレビューで目次を表示するためのスタイルを定義
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// 背景色をテーマの3番目の色に設定
background: var(--tertiary);
// テキスト色をテーマの2番目の色に設定
color: var(--secondary);
// 要素をスティッキー配置にし、スクロール時にビューポートの上部に固定
position: sticky;
// z-indexを1に設定し、他の要素の上に表示されるようにする
z-index: 1;
// 要素の上端をビューポートの上端から0に設定
top: 0;
// 要素の高さを30ピクセルに設定
height: 30px;
// 要素の表示方法をflexboxにし、コンテンツの配置を容易にする
display: flex;
// flexbox内の項目を垂直方向中央揃えにする
align-items: center;
// flexbox内の項目を水平方向中央揃えにする
justify-content: center;
// :before疑似要素を使用して、要素の前にコンテンツを挿入
&::before {
// 挿入するコンテンツを $composer_toc_text 変数の値に設定
// content: "#{$composer_toc_text}";
content: "この投稿には目次は表示されません";
}
}
JavaScript
// 要素のスタイルを設定する関数を定義
function setStyle(selector, styles) {
// 指定されたセレクタの要素を検索
const element = document.querySelector(selector);
// 要素が見つかった場合、スタイルを適用
if (element) {
Object.assign(element.style, styles);
}
}
// ページコンテンツに特定のTOCマークアップが含まれているかチェックする関数を定義
function checkForTOCMarkup() {
// ページコンテンツに特定の文字列が含まれているかチェック
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// タイムライン要素を非表示にする
setStyle('.with-timeline', { display: 'none' });
// 投稿コンテナの列スタイルを100%に変更
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// トピック本文の幅を100%に設定
setStyle('.topic-body', { width: '100%' });
// トピックマップの最大幅と左パディングを設定
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// トピックアバター要素を非表示にする
setStyle('.topic-avatar', { display: 'none' });
// ギャップ要素の最大幅と左パディングを設定
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// トピックフッターボタンの最大幅と左パディングを設定
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// 注意: 変更前のデフォルトコードを使用しないでください。モバイルに影響するため、システムに自動処理させます。
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // デフォルトの幅に戻す
setStyle('.with-timeline', { display: '' }); // デフォルトスタイルに戻す
setStyle('.container.posts', { gridTemplateColumns: '' }); // デフォルトの列スタイルに戻す
setStyle('.topic-body', { width: '' }); // デフォルトの幅に戻す
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // デフォルトスタイルに戻す
setStyle('.topic-avatar', { display: '' }); // デフォルトの表示に戻す
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // デフォルトスタイルに戻す
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // デフォルトスタイルに戻す
}
}
// DOMの変更を監視するためのオブザーバーインスタンスを作成
const observer = new MutationObserver(checkForTOCMarkup);
// オブザーバーオプションを設定し、子ノードの変更とすべての子孫ノードを監視
const config = { childList: true, subtree: true };
// ドキュメントの変更の監視を開始
observer.observe(document.body, config);
// ページロード時にすぐに一度チェックを実行
checkForTOCMarkup();
