sidebarMod: サイドバーリンクとセクションの追加/削除

sidebarMod

こちらがサイドバーのモッドを行うための私のスクリプトです(最初にカスタムサイドバーセクションのトピックで言及されました)。

これは、プロミスとMutationObserverを使用してサイドバーの変更(例:展開または折りたたみ)を監視し、効率的に要素を追加/削除します。

ほとんどのユースケースに対応できるほど柔軟に作成したと思います。リンクの追加(追加、先頭追加、既存リンクの前後に挿入)、セクションの削除、リンクの削除、さらには「⋮詳細」の削除も可能です。

視聴者がゲストか登録ユーザーかによって動作を変更することも可能です。例えば、ゲストには無関係なカスタムセクションを削除するために使用しています。

新しいカスタムサイドバーセクション機能(SiteSetting.enable_custom_sidebar_sectionsで有効化)の良い補完となるため、セクションを作成する機能は追加しませんでした。

バグを見つけたり、追加機能が必要な場合はお知らせください。

インストール

新しいテーマコンポーネントを作成し、「Head」に貼り付けます。テーマで有効化することを忘れないでください。

設定

主に、上部にあるinjectionsremovalsを編集する必要があります。

最初はそのままにして、何が行われているかを確認することをお勧めします。例の構成は分かりやすいように作成しました。

私は個人的に次のように使用しています。

  /**
   * リンクの位置揃え:
   *   (bool) prepend, append: セクションにリンクを先頭に追加/末尾に追加
   *   (str)  addBeforeKebab, addAfterKebab: 既存のリンクの前/後にリンクを追加
   * リンクの表示:
   *   (str)  injectFor: 'anon' ユーザーのみ、'registered' ユーザーのみ、または 'both' の場合にリンクを挿入(デフォルト: 'both')
   */
  injections: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [
        { text: 'Guidelines', kebab: 'guidelines', title: 'Guidelines for using this site', href: '/guidelines', icon: 'gavel', addBeforeKebab: 'faq', injectFor: 'registered' }
      ]
    },
    { sectionSelector: '.sidebar-section[data-section-name="categories"]',
      links: [
        { text: 'Site Map', kebab: 'site-map', title: 'Site Map', href: '/t/32', icon: 'map-marker-alt', prepend: true }
      ]
    }
  ],

  /**
   * セクションオプション:
   *   (str) removeFor: 'anon' ユーザーのみ、'registered' ユーザーのみ、または 'both' の場合にセクションを削除(デフォルト: 'none')
   *   (str) removeMore: '⋮詳細' を 'anon' ユーザーのみ、'registered' ユーザーのみ、または 'both' の場合に削除(デフォルト: 'none')
   *                       リンク削除により空になった場合に便利です
   * リンク削除オプション:
   *   (str) removeFor: 'anon' ユーザーのみ、'registered' ユーザーのみ、または 'both' の場合にリンクを削除(デフォルト: 'both')
   */
  removals: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [{ kebab: 'badges', removeFor: 'anon' }]
    },
    { sectionSelector: '.sidebar-custom-sections .sidebar-section[data-section-name="my-topics"]',
      removeFor: 'anon'
    }
  ],

私からの質問

API (https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js) を使用してこれを実装しようとしましたが、まだ実装されていない機能が多いようです。

DOMにハッキングするのではなく、「正しい方法」でこれを実装するにはどうすればよいでしょうか? Rubyでプラグインを作成する必要があるでしょうか? 何かヒントがあれば幸いです。

「いいね!」 2

data-link-name で動作するように更新されました

ありがとうございます。これは、ページ遷移時に更新する必要があるカスタムサイドバーセクションを実装するのに非常に役立ちました(Making custom changes to the sidebar programmatically を参照)。問題は、カスタムリンクをクリックすると、ページ全体がリフレッシュされてしまうことです。これを回避する方法はありましたか?

FYI、ここで解決策を見つけました: Reload page body when clicking a link in a custom header