Discourse에서 로고 옆 텍스트가 모두 링크됨

지원
1

안녕하세요,

제 Discourse 인스턴스에서 로고 옆에 텍스트를 추가하고 싶었는데, 이 주제에서 해당 문제를 해결할 수 있었습니다:

하지만 텍스트가 링크가 되지 않았습니다. 로고처럼 텍스트도 포럼 URL로 연결하려면 어떻게 해야 하나요?

이 문제에 대한 조언을 부탁드립니다.

2

이 사이트에서는 텍스트를 포함한 넓은 로고를 사용하는 것 같습니다. 그렇게 해보는 건 어떨까요?

3

기본적으로, 이는 Discourse의 기본 로고를 사이트 설정에 맞게 표시합니다. 그런 다음 :after 콘텐츠에 텍스트를 포함하도록 추가합니다. 즉, 텍스트는 CSS에서 나옵니다.

이것이 해당 코드입니다:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Some text after logo";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

그리고 이것이 스크립트입니다:

<script>
$(document).ready(function() {
	$(window).scroll(function(){
		checkScroll()
    }); 

	function checkScroll() {
		var y = $(window).scrollTop();		
		if (y > 55) {
            document.getElementById("main").classList.add('no-text');
        } else {
            document.getElementById("main").classList.remove('no-text');
        }
	}
	checkScroll();
});
</script>

제가 원하는 것은 after 텍스트에도 포럼 링크를 설정하는 것입니다. (로고는 Discourse 의도대로 웹사이트 링크를 가지고 있습니다)

4

첫째, 첫 번째 CSS 줄(:이 두 번 작성됨)에 오타가 있습니다.
그리고 선택자를 로고를 포함하는 실제 링크를 대상으로 변경하면:

.d-header .title a:after {

그렇게 하면 텍스트가 <a> 태그 안에 포함되고 링크도 함께 적용됩니다.

image

이 사이트에서는 텍스트를 포함하는 넓은 로고를 사용하는 방식으로 구현되어 있습니다. 그렇게 해보는 건 어떨까요?

이상하게도, Robert이 링크된 토픽에서 같은 질문을 했지만, 이쪽도 답변이 없었습니다 :upside_down_face:

5

제가 이해한 바로는… 이걸로 도움이 될까요? :slightly_smiling_face:

이것은 로고 뒤에 이 HTML을 추가합니다: <a href="/" class="after-logo">After logo text</a>

Header

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'After logo text'
    });
  });
</script>
6

모바일 기기에서 보기 좋지 않게 보입니다. 작은 화면에서는 CSS로 텍스트를 숨길 수 있지만, 로고는 항상 표시되기를 원합니다.

7

완벽하네요. @Don 감사합니다

8

이 사용 사례의 경우 모바일에서는 다른 로고를 사용하는 것이 더 나을 것 같습니다. 브랜딩 설정에 모바일 로고라는 항목이 있습니다.

yoursite/admin/site_settings/category/branding

9

맞아요. 이런 기능이 있는지 몰랐어요. 제가 좀 노후화된 편이라 새로운 기능들을 많이 테스트해 보지 못했네요. 감사합니다

이제 좀 더 이해가 됩니다.