‘배너’ 주제에 클릭할 방법이 없음

내 웹사이트 상단에 배너가 1개 있습니다. (저는 주제를 고정하는 습관이 거의 없어서, 배너 1개와 전역 고정 1개만 있습니다.)

하지만 사용자가 해당 주제/게시물로 이동하려면 배너를 클릭할 방법이 없습니다.
다행히 해당 주제의 첫 번째 게시물이 유튜브 영상 링크이므로, 방문자는 해당 주제로 이동하지 않아도 영상을 볼 수 있습니다. 하지만 배너에서 클릭하여 해당 주제로 이동할 방법은 없습니다. (유튜브 영상이 없는 다른 주제에서도 시도해 보았습니다.)
또한 로그인하지 않은 사용자 및 다른 계정으로 해당 주제를 방문하여 테스트해 보았습니다.

그리고 제가 ‘X’ 버튼을 눌러 제 계정에서 배너를 제거한 후, 배너를 해제했다가 다시 배너로 설정해도 제 화면에 다시 나타나지 않습니다. 제 화면에 다시 배너로 표시되도록 하는 방법을 알려주세요.

(사이트와 주제/게시물이 힌디어로 되어 있는 점 양해 부탁드립니다.)

이전에는 포스트에 해당 주제 자체를 가리키는 하이퍼링크를 사용하여 이 문제를 우회했습니다. 예를 들어, 여기를 클릭하여 이 주제에 갈 수 있습니다.

:slight_smile:

좋은 우회 방법이네요.
다만, 그렇게 하려면 사용자가 쉽게 보고 클릭할 수 있도록 게시물 맨 위쪽에 링크를 포함해야 하는데, 그러면 게시물을 읽다가 그 링크를 클릭했다가 다시 게시물로 돌아왔을 때 좀 어색해 보일 것 같습니다.

그래도 이 문제가 해결될 때까지는 아주 좋은 제안입니다.

주제에 여러 게시글/답글이 있는 경우, /2를 끝에 붙여 첫 번째 게시글에 두 번째 게시글로 연결되는 하이퍼링크를 작성할 수 있습니다. 즉, 주제 상단/소개 게시글로 다시 연결되는 것이 아니라 두 번째 게시글로 바로 건너뛰게 됩니다. 여전히 약간 이상해 보일 수 있지만, 페이지를 아래로 이동시키는 효과만 있을 것입니다. 완벽하지는 않지만, 나쁘지는 않다고 생각합니다.

@Bathinda 이렇게 할 수 있습니다

게시물의 내용은 다음과 같습니다:

이것은 배너에 링크가 표시되지만 실제 게시물에는 표시되지 않는 배너 주제입니다.

[Visit thread](https://forums.example.com/t/test-thread/26?banner-topic)

트릭은 Discourse가 무시하지만 CSS에서 사용할 수 있는 쿼리 문자열을 링크 끝에 추가하는 것입니다. 즉, https://forums.example.com/t/test-thread/26?banner-topic은 https://forums.example.com/t/test-thread/26으로 이동하며, ?banner-topic 쿼리를 CSS에서 사용하여 숨기고 싶은 링크를 식별할 수 있습니다.

a[href$="?banner-topic"] {
    display:none;
}
#banner-content a[href$="?banner-topic"] {
    display:block;
}

사용자가 사용하기에는 조금 불편하지만, 좋은 우회 방법입니다.

참고로 이 코드로 테마 컴포넌트를 만들고 싶다면, 코드를 ‘head’, 'body’에 추가해야 하는지, 아니면 다른 곳에 추가해야 하는지 궁금합니다.

지난번 제 해결책은 잊어 주세요. 이건 자동으로 처리될 거라고 생각해요. 다음 내용을 Common </head>에 넣어 주세요.

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <div id="banner" class={{overlay}}>
      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
      <div id="banner-content">
        {{{content}}}
        <p><a href="{{banner.url}}">Go to thread</a></p>
        {{#if currentUser.staff}}
          <p><a href="{{banner.url}}">{{{i18n "banner.edit"}}}</a></p>
        {{/if}}
      </div>
    </div>
  </div>
{{/if}}
</script>

<a href="{{banner.url}}">Go to thread</a> 줄이 링크를 추가하며, "Go to thread"는 원하는 텍스트로 자유롭게 교체할 수 있습니다. 링크에 클래스를 추가할 수도 있습니다: <a href="{{banner.url}}" class="banner-link">Go to thread</a> 그리고 공통 CSS에서 .banner-link를 스타일링하면 됩니다.

아래 코드는 링크를 추가하는 대신 배너 전체를 클릭 가능하게 만듭니다.

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <a href="{{banner.url}}" class="banner-link">
      <div id="banner" class={{overlay}}>
        {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
        <div id="banner-content">
          {{{content}}}
            {{#if currentUser.staff}}
          <p><a href="{{banner.url}}">{{{i18n "banner.edit"}}}</a></p>
        {{/if}}
      </div>
     </div>
    </a>
  </div>
{{/if}}
</script>

시간 내어 주셔서 정말 감사합니다.

이 코드에서 제가 직접 수정할 수 있는 단어들을 알려주실 수 있을까요? 강조 표시(기울임체)하거나 따로 구분해 주시면 좋겠습니다. 아니면 해당 단어들을 따로 적어 주시거나 다른 색상으로 표시해 주셔도 됩니다.

제가 이해한 바로는, 이전 답변에서 배너 안에 링크를 만들거나(또는 배너 전체를 클릭 가능하게 하거나) 하는 두 가지 방법(비슷하지만 완전히 같은 방식은 아닌)을 제시해 주셨더군요. 후자의 경우, 주제나 게시글 자체에 링크를 포함하거나 임베드할 필요가 없는 것 같습니다.
감사합니다.

다음과 같이 보입니다.

„이 배너 편집“ 링크는 스태프만 볼 수 있지만, „스레드로 이동“과 동일한 위치를 가리키므로 아예 제거해야 합니다. 그러면 다음과 같이 변경됩니다.

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <div id="banner" class={{overlay}}>
      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
      <div id="banner-content">
        {{{content}}}
        <p><a href="{{banner.url}}">Go to thread</a></p>
      </div>
    </div>
  </div>
{{/if}}
</script>

수정할 수 있는 줄은 다음과 같습니다.
<p><a href="{{banner.url}}">Go to thread</a></p> Go to thread 부분은 원하는 텍스트로 자유롭게 교체할 수 있습니다. 또한 배너 게시물의 {{{content}}} 앞이나 뒤에 원하는 내용을 자유롭게 추가할 수도 있습니다.