현재 사용자의 게시글을 분리하는 CSS 선택기

개발
1

현재 사용자가 작성한 게시물만 선택할 수 있는 간단한 CSS 선택자를 찾고 있습니다(다른 사용자의 게시물은 제외). 제가 파악한 바로는, 이러한 게시물에 사용할 수 있는 CSS 클래스가 추가되어 있지 않은 것 같습니다. 하지만 제가 무언가를 놓치고 있는 걸까요?

만약 현재 그런 클래스가 없다면, 추가되어 주시면 매우 감사하겠습니다!

제 제안은 topic-post 요소에 현재 게시글 작성자와 관련된 기존 클래스(예: topic-owner)와 유사한 클래스를 추가하는 것입니다. 새 클래스는 current-user 또는 my-post 등으로, 기존 Discourse 명명 규칙에 맞는 이름이면 됩니다.

왜 이걸 하고 싶은지 설명을 보려면 여기를 클릭하세요...

얼마 전 제 포럼 사용자들이 자신의 게시물이 몇 개의 좋아요를 받았는지 확인하는 데 중독되는 것에 대해 불만을 제기했습니다. 그들은 좋아요 수를 확인하기 위해 게시물을 반복적으로 방문했고, 이 행동은 주류 소셜 미디어 플랫폼의 더 독성 있는 측면을 떠올리게 했습니다.

제 해결책은 그들이 사용할 수 있는 테마를 만들어, 현재 사용자의 게시물에서 좋아요 카운터를 숨기는 CSS 규칙을 단순히 추가하는 것이었습니다. 현재 사용자가 작성한 게시물의 좋아요 버튼에는 .my-likes라는 클래스가 있으므로 CSS로 선택하기가 쉽습니다. 이 방법은 잘 작동했고 사용자들도 해결책에 만족했습니다.

하지만 오늘早些, 게시물의 “…” 버튼, 즉 "더 보기"를 클릭하면 그 게시물을 좋아요한 사용자들이 목록으로 표시된다는 점이 지적되었습니다. 한 사용자는 이 때문에 “도파민 중독자” 시절로 돌아간 것 같다고 보고하며, 특수 테마를 우회하고 좋아요를 확인하기 위해 반복적으로 "…"를 클릭하고 있다고 말했습니다.

하지만 위에서 언급한 좋아요 버튼의 경우와 달리, 제가 이 작업을 수행할 수 있는 CSS 선택자를 찾을 수 없습니다. 제가 찾은 유일한 해결책은 모든 게시물의 좋아요한 사용자 목록을 숨기는 것입니다. 즉, 테마 사용자는 어떤 게시물의 목록도 볼 수 없게 만드는 것입니다.

제가 현재 할 수 있는 일은 다음과 같습니다:

.who-liked { display: none;}

제가 하고 싶었던 것은 다음과 같은 것이었습니다:

.topic-post.current-user .who-liked { display: none;}

(하지만 .current-user 클래스가 존재하지 않기 때문에 이는 작동하지 않습니다.)

2

.topic-post article 태그에 data-user-id 속성을 사용할 수 있을지도 모릅니다.

3

한 가지 방법은 토픽 목록에서 현재 사용자가 게시자인 토픽을 찾는 것입니다. 이는 jQuery로 수행할 수 있습니다. 조건이 참이면 해당 행에 스타일을 적용하면 됩니다. 단점으로는 사용자가 OP(첫 번째 게시글) 토픽의 게시자로 표시될 수 있다는 점이 있습니다.

다른 방법은 토픽 목록 컴포넌트를 완전히 오버라이드하고 해당 부분에서 처리하는 것입니다. 템플릿 오버라이딩에 대한 자세한 내용은 다음 링크에서 확인할 수 있습니다:

4

죄송하지만, 주제 목록에서 사용자 게시물을 꾸미는 건지, 아니면 실제 주제 안에서의 게시물을 꾸미는 건지 말씀하시는 건가요?
그 경우라면 현재 사용자의 아바타에 훅을 걸고, 부모 게시물의 루트 요소를 찾아서 jQuery로 클래스를 추가할 수 있습니다.

5

답변해 주셔서 감사합니다!

자바스크립트를 사용하면 이 작업을 수행할 수 있다는 점을 잘 알고 있습니다. 처음부터 이렇게 말씀드렸어야 했습니다. 하지만 제 글의 핵심은 훨씬 더 간단한 방식으로, 아주 적은 양의 CSS(원래 글의 확장 부분을 참조하세요)를 사용하여 이 작업을 해 보고 싶다는 것입니다.

더 단순하고 자연스러운 해결책일 뿐만 아니라, 테마 및 테마 구성 요소에 대한 뛰어난 내장 시스템을 통해 이를 관리할 수 있게 해 줍니다.

또한 이것이 이상하거나 이례적인 일은 아닙니다. 처음 언급했듯이, Discourse에는 이미 주제 페이지의 게시글 요소에 게시 사용자의 속성(주제 소유자, 신뢰 수준, 그룹 소속 등)을 나타내는 클래스 속성이 존재합니다. 그리고 이 요소의 하위 요소(좋아요 버튼)에는 현재 페이지에 접근 중인 사용자가 작성한 게시글임을 나타내는 클래스 속성이 이미 있습니다.

이러한 이유들로 인해, 주제-게시글 요소에 해당 단일 속성을 추가하는 것이 자바스크립트 해킹(hack)보다 훨씬 나은 해결책이라고 생각합니다.

6

아, 바로 자바스크립트 해결책을 올리려고 여기에 왔습니다. 'hidelikes’라는 그룹을 만들고, 이 자바스크립트는 해당 그룹의 모든 멤버가 자신의 게시물에서 '누가 좋아요를 눌렀는지(who-liked)'를 숨기도록 합니다.

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

물론 모든 사용자에게 적용하려면 그룹 관련 부분을 삭제하면 됩니다.

7

실제 코드를 올려주셔서 정말 감사합니다. 정말 도움이 됩니다!

8

plugin-api를 조금 살펴본 결과, 문제의 해결책과 제안하신 기능을 구현하는 올바른 방법을 찾은 것 같습니다.

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

여기를 확인해 보세요:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

이 코드는 현재 로그인된 사용자가 작성한 모든 게시글에 current-user-post 클래스를 추가합니다.

9

정말 훌륭해요—대단히 감사합니다!

10

이 코드를 어디에 추가해야 하나요? 태그 안에 추가했는데 정상적으로 작동하지 않습니다.