특정 그룹 멤버에게 헤더에 커스텀 HTML 표시

디스코र्स 가족 여러분, 안녕하세요! 이 문제에 대한 쉬운 해결책이 있을 것 같아 이렇게 질문드립니다. 아마도 자바스크립트를 사용해야 하는 것 같다는 느낌이 듭니다.

관리자 CSS/HTML 설정의 “after header” 섹션에 버튼 4개가 있습니다.

특정 그룹의 멤버에게만 일부 버튼이 표시되고, 나머지 버튼은 모든 사용자에게 표시되도록 하고 싶습니다.

예를 들어, 메인 버튼 4개는 모두에게 표시하되, 다른 버튼은 특정 그룹의 멤버에게만 표시되도록 하려는 경우입니다.

저는 자바스크립트를 잘 모르는데, 만약 정말로 간단한 방법이라면 스니펫이나 코드를 공유해 주실 수 있을까요? 정말로 도움이 될 것 같습니다 :folded_hands:

이 기사를 찾았는데 Zendesk 플랫폼에 대해 설명하고 있지만, 우리가 찾고 있는 기능과 매우 유사해 보입니다!

<div id="after-header">Stuff</div>
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>
.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

다음처럼 교체하면 작동하는 것 같습니다.
api.onPageChange(() => {
을
$( document ).ready(function() {
으로 바꾸면 스크립트가 모든 페이지에서 로드되지 않지만, api.onPageChange(() => { 가 꼭 필요한 곳이 어디인지 확실히 알 수 없습니다.

이 구성 요소를 설치하면 현재 사용자의 모든 그룹이 페이지 본문에 클래스로 추가되어, CSS만으로 추가적인 변경이 용이해집니다.

하하, 그거 바로 다음에 알아볼려고 했거든

안녕하세요,

비슷한 기능을 찾고 있었는데, 특정 그룹을 제외하는 기능이 필요해서 ChatGPT로 한번 시도해 보았습니다. 답변은 다음과 같습니다:

Discourse에서 특정 그룹을 제외하고 스크립트를 트리거하는 HTML 테마를 만들려면, Discourse의 테마 커스터마이징 옵션과 함께 그룹 제외를 처리하기 위한 JavaScript를 사용해야 합니다. Discourse는 api.getCurrentUser()를 통해 사용자의 세부 정보(그룹 포함)를 가져올 수 있으며, 이는 스크립트를 조건부로 트리거하는 데 유용합니다.

테마 또는 컴포넌트의 </head> 섹션에서 이를 구현하는 예시는 다음과 같습니다:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // 현재 사용자 세부 정보 가져오기
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // 스크립트 실행에서 제외할 그룹 이름 목록
            const excludedGroups = ['group1', 'group2'];

            // 사용자의 그룹 가져오기
            const userGroups = currentUser.groups.map(group => group.name);

            // 사용자가 제외 대상 그룹 중 하나에 속하는지 확인
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // 여기에 사용자 정의 스크립트 로직 작성
                console.log('Script is executed for this user.');
                // 예: 제외되지 않은 사용자를 위한 사용자 정의 로직 트리거
                // customScriptFunction();
            } else {
                console.log('User is in an excluded group, script not executed.');
            }
        }
    });
</script>

설명:

  1. api.onPageChange(): 페이지가 변경될 때마다 스크립트를 실행합니다.
  2. api.getCurrentUser(): 현재 로그인된 사용자의 세부 정보를 가져옵니다.
  3. excludedGroups: 제외할 그룹을 나열합니다.
  4. userGroups.includes(group): 사용자가 제외 대상 그룹 중 하나에 속하는지 확인합니다.
  5. 조건부 스크립트 실행: 사용자가 제외 대상 그룹에 속하지 않을 때만 스크립트가 실행됩니다.

customScriptFunction();를 실행해야 하는 스크립트로 교체할 수 있습니다. 추가 조정이 필요하면 알려주세요!

솔직히 이 답변에 완전히 압도되었습니다 :exploding_head:. 아직 직접 시도해 보지는 않았는데, ChatGPT가 제시한 코드가 올바른가요?