JavaScript HTML - ウィジェット

開発
1

こんにちは、サブメニューからクリックまたはマウスホバーで表示されるHamburgerメニューにulリストを追加したいのですが、この方法でよいでしょうか、それとももっと効率的な方法がありますか？

コンポーネント経由でHamburgerメニューに個々のアイテムを追加できますが、ホバー時に表示されるサブアイテムをそこに供給する必要があります。

アドバイスをいただけますか？よろしくお願いします。

<script type="text/discourse-plugin" version="0.1">
  api.decorateWidget('menu-links:before', helper => {
    return helper.h("li", [
    helper.h("a.google", {
        href:"https://google.com",
        title: "Google",
        }, helper.h('p', 'Google')),
    ]);
  });
</script>

編集：解決済み

でももう一つ、target blankを追加するにはどうすればよいですか？

「いいね！」 2
2

ウィジェットを返す:

api.decorateWidget に独自のカスタムウィジェットを返すことができます。これにより、属性、状態、アクションなどの適用に関して、より多くの制御が可能になります。

次のように実行できます。

api.decorateWidget('menu-links:before', helper => {
   return helper.widget.attach("custom-menu-links");
});

次に、javascripts/discourse/widgets/custom-menu-links.js の中で、createWidget ヘルパーを使用してウィジェットを作成します。

import { createWidget } from 'discourse/widgets/widget';

createWidget('custom-menu-links', {
...
});

ウィジェットの仮想DOMコードがDiscourseでどのように機能するかについてのツアーについては、こちらのトピックをご覧ください。

ドロップダウンヘッダーテーマコンポーネントでウィジェットをかなり使用しました。 コードの一部 が役立つかもしれません。

target=“_blank” を追加する

属性オブジェクトに追加します。

      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );
「いいね！」 2