사용자의 그룹 소속에 따라 주제 내에서 다른 콘텐츠를 표시할 수 있나요?

[craigconstantine]

저는 discourse.org의 호스팅을 사용하고 있으므로, 이 경우 플러그인 사용이 불가능합니다. 누구나 볼 수 있는 토픽이 게시되어 있다고 가정해 보겠습니다.

누군가가 “A” 그룹에 속해 있다면 이 콘텐츠를 보고 싶고, 그렇지 않다면 이 다른 콘텐츠를 보고 싶습니다. 그리고 토픽의 일부는 모든 사람이 볼 수 있어야 합니다. 도식적으로 다음과 같습니다…

모든 사람이 볼 수 있는 콘텐츠입니다.

{wishful thinking: A 그룹에만 표시}
특별한 그룹에 소속되어 주셔서 감사합니다!
{/wishful}

{wishful thinking: A 그룹에 속하지 않은 사람만 표시}
가입할 수 있는 특별한 그룹이 있습니다. [자세히 알아보기](…)
{/wishful}

표시할/숨길 콘텐츠를 대상으로 CSS 클래스를 설정하는 테마 컴포넌트를 사용하면 이것이 가능할 것이라고 확신합니다(정확한 방법은 잊어버렸지만요). 이것이 제가 생각해 낼 수 있는 최선의 방법이라면 이렇게 해보겠습니다.

하지만 CSS의 display: none은 효과가 약합니다. 보여서는 안 되는 것을 DOM에서 완전히 사라지게 하고 싶습니다. 가능하다면 서버 측에서 사라지게 하는 것이 좋지만, 최소한 j/s 기반으로 브라우저 측에서 사라지게 하는 것이라도 만족할 것입니다. (CSS의 display: none을 우회하는 것보다 훨씬 더 높은 수준의 지능이 필요합니다.)

[craigconstantine]

bump! 아무도 없나요? :~(

@team 태그를 왜 못 걸까요?

[jimkleiber]

지금 바로 자세히 살펴볼 시간은 많지 않지만, 이 테마 컴포넌트가 도움이 될 수 있을 것 같습니다. 이 컴포넌트는 현재 사용자의 모든 그룹을 body 태그 안에 나열해 주기 때문입니다(아마도). 그런 다음 특정 그룹 클래스명이 body 태그에 존재하는지 여부에 따라 CSS 셀렉터를 사용하여 표시/숨기기를 할 수 있을 것입니다.

현재 사용자의 그룹에 대한 CSS 클래스

요약 CSS Classes for Current User’s Groups는 사용자가 속한 그룹을 <body> 태그에 CSS 클래스로 추가합니다. 미리보기 theme-creator.discourse.org에서 미리보기 리포지토리 링크 https://github.com/discourse/discourse-groups-css-classes-in-body 디스코urs 테마를 처음 사용하시나요? 디스코urs 테마 사용 입문가 가이드 이 테마 컴포넌트 설치 설치 전: [image] 설치 후: [image] Discourse는 기본적으로 현재 사용자의 기본 그룹만 CSS 클래스로 추가합니다. 이 컴포넌트는 이를 변경하여, 현재 사용자가 속한 모든 그룹(신뢰 수준(trust-level)과 같은 내장 그룹 포함)을 클래스로 추가합니다. 이 컴포넌트…

그리고 이 게시물에서 컴포저(composer)에서 사용할 수 있는 HTML 요소와 컴포저 텍스트를 클래스로 감싸는 방법에 대한 정보와 결합하면 작동할 수 있습니다:

게시물 내부 콘텐츠를 커스터마이징하는 방법 (커스텀 속성 등)

지금까지 제가 알고 있는 방법은 두 가지입니다: <span data-theme-custom>some text</span> CSS: [data-theme-custom] { color: pink; } [wrap="indent"]some text[/wrap] 이는 div 또는 span(같은 줄에 다른 콘텐츠가 있는 경우)을 생성하며, 다음 속성을 포함합니다: class="d-wrap" 및 data-wrap="custom" CSS [data-wrap="custom"] { color: pink; } 게시글에서 특정 콘텐츠를 커스터마이징하는 다른 방법이 있을까요? 또한, 요소에 사용자 지정 class를 추가하는 방법이 있을까요? 검색을 해봐도 찾을 수 없었습니다. 불가능한 것 같습니다.

네, 여기서 바로 테스트해 봤는데, 해당 컴포넌트를 다음과 같은 것들과 결합하면 작동할 것입니다:

<span data-group-a>그룹 A 전용 텍스트</span>
<span data-group-b>그룹 B 전용 텍스트</span>

그리고 다음과 같은 CSS 셀렉터를 사용하십시오:

span[data-group-a] {display: none;}
body.group-a span[data-group-a] {display: block;}

또는 이와 유사한 방식으로…

수정 사항이 많아 죄송합니다. 제 인스턴스 중 하나에서 테스트해 봤는데 작동합니다.

하지만 말씀하신 대로, 이것이 원하시는 것이 아닐 수도 있겠네요 …

@craigconstantine

하지만 CSS display: none은 약합니다. 그들이 보지 말아야 할 것을 DOM에서 사라지게 하고 싶습니다. 가능하면 서버 측에서 사라지게 하겠지만, 최소한 j/s 기반의 브라우저 측에서 사라지는 것이라도 만족하겠습니다. (이는 CSS의 display: none보다 훨씬 높은 수준의 교묘함이 필요합니다.)

테마 JavaScript를 사용하여 <head> 섹션에 요소를 선택하고 제거하는 코드를 추가함으로써 이것이 가능할 수 있습니다. 여전히 위의 스팬과 래핑이 필요할 수 있지만, 이를 통해 제거할 수 있습니다.

[jimkleiber]

음, 저도 이 기능이 필요할 것 같아서 더 깊이 파고들었습니다

아직 이 코드는 동작하지 않고 깔끔하지도 않지만, 테마의 </head> 부분에 넣기에는 거의 충분한 수준이라고 생각합니다. JS를 사용하여 요소를 선택하는 올바른 방법만 필요합니다:

<script type="text/discourse-plugin" version="0.8.42">

  api.decorateCookedElement(
    element => {
      var hasGroupA = document.body.classList.contains('group-a');

      const group_a_spans = element.querySelectorAll("span[data-group-a]");

      if (!group_a_spans.length) {
        return;
      }

      if (!hasGroupA) {
        group_a_spans.forEach(function (el) {
           el.innerHTML = "";
        });
      }

      },
      { id: "THEME-ID", onlyStream: true }
   );
</script>

주의: 검색 등에서 모든 정보를 숨기는 것은 어려울 수 있으므로, CSS로 숨기는 것보다 나을 수는 있지만 사람들이 정보를 볼 수 없도록 완전히 막지는 못할 것 같습니다.

수정: CSS 선택기가 작동하도록 수정했습니다. 사용하려는 그룹 수만큼 코드를 반복하세요. THEME-ID를 고유한 이름으로 변경하세요. 이렇게 하면 작동할 것 같습니다

아, 이 부분은 아직 처리하지 못했습니다:

@craigconstantine

{wishful thinking: only for ppl NOT in group A}
Hey we have a special group you can join. [Read more about that](…)
{/wishful}

[craigconstantine]

이번 건에 대해 정말 감사드립니다… 아직 고민 중인데, 작동 가능한 해결책의 시작을 열어주신 것 같습니다. 제가 작성한 템플릿 컴포넌트가 있어서 이런 방식으로 작동하게 만들 수 있을 것 같다는 생각이 듭니다.

"foobar"라는 컴포넌트를 상상해 보겠습니다. 다음과 같은 DIV를 추가하여 토픽을 작성할 수 있습니다…

<div data-custom="foobar" data-foobar="<groupname>">
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
</div>

그런 다음 컴포넌트는 시청 중인 사용자의 그룹에 따라 DOM에서 한쪽 DIV를 삭제합니다.

이 방식은 웹 브라우저의 DOM 검사 기능을 통해 쉽게 되돌릴 수 있는 CSS display: none;보다 강력하다고 생각합니다. 이를 우회하려면 페이지 로드 시 실행되는 j/s를 수정해야 하는데, 불가능하지는 않지만 훨씬 어렵습니다.

왜 이런 기능이 필요한가요?

그룹에 속하지 않은 사람들에게 콘텐츠를 부분적으로 공개하기 위해서입니다. (그룹에 가입하려면 유료 구독이 필요하기 때문입니다.)

This is a really cool topic. This first
paragraph is really interesting.

<div data-custom="foobar" data-foobar="<groupname>">
Here's the rest of the content.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
Hi, sorry to interrupt!
There's more conent here for our paying members...
would you like to read about becoming one?
</div>

그룹에 속한 사람들은 토픽 전체를 단순히 볼 수 있습니다. 유료 구독 제한(paywall)의 흔적이 전혀 없습니다.

그룹에 속하지 않은 사람들은 위 두 DIV에 있지 않은 초기 부분과 유료 구독 제한 화면을 봅니다.

따라서 완전히 공개된 영역에서도 이 기능을 사용하여, 가입하고 로그인하여 유료 멤버가 되면 어떤 것을 얻을 수 있는지 보여줄 수 있습니다.

[craigconstantine]

드디어 이 작업을 마무리했습니다. https://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay 아주 간단해서, 현재 사용자가 “foobar” 그룹에 속해 있는지 또는 "!foobar"를 통해 해당 그룹에 속하지 않는지에 따라 대상 DIV를 DOM에서 제거합니다. 이를 통해 아래 이미지와 같은 내용의 간단한 토글 표시를 구현할 수 있습니다.

물론 해당 컴포넌트가 비활성화되면 모든 내용이 표시됩니다(컴포넌트가 없으면 DOM이 정리되지 않기 때문이죠). 하지만 제가 하고 싶은 일에는 충분히 좋습니다.

[Jagster (Jakke Flemming)]

당신은 나와 매우 비슷한 두통 중 하나를 해결해 주셨습니다.