JavaScript HTML - 위젯

개발
1

안녕하세요, 햄버거 메뉴에 서브메뉴에서 볼 수 있는 ul 목록을 클릭 또는 마우스 호버 시 표시되도록 추가하려면 이렇게 하는 것이 맞는지, 아니면 더 효율적인 방법이 있는지 알고 싶습니다.

컴포넌트를 통해 햄버거 메뉴에 개별 항목을 추가할 수는 있지만, 호버 시 표시될 하위 항목을 공급해야 합니다.

자문을 구할 수 있을까요? 감사합니다

<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

위젯 반환:

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', {
...
});

위젯의 일부 기능을 학습하려면 이 토픽을 확인해 보세요:

드롭다운 헤더 테마 컴포넌트에서 위젯을 상당히 많이 사용했는데, 일부 코드가 도움이 될 수 있습니다.

target=“_blank” 추가

attributes 객체에 추가하면 됩니다:

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