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

**URL:** https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345
**Category:** Support
**Created:** [2월 16, 2022, 10:46오전 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345 "2022-02-16T10:46:21Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Arta\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arta_s/32/537495_2.png) [@Arta\_S](https://meta.discourse.org/u/Arta_S)
#### Post date: [2월 16, 2022, 10:46오전 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/1 "2022-02-16T10:46:22Z")

</div>

안녕하세요,

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

> [@이미지와 텍스트를 로고로 사용](https://meta.discourse.org/t/image-and-text-as-logo/138996/6):
>
> Try this .d-header .title::after { padding-left: 20px; font-size: 1.5em; color: #333; content: "Here is some text"; } .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) { …

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

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2월 16, 2022, 12:06오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/2 "2022-02-16T12:06:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Arta\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arta_s/32/537495_2.png) [@Arta\_S](https://meta.discourse.org/u/Arta_S)
#### Post date: [2월 16, 2022, 12:09오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/3 "2022-02-16T12:09:30Z")

</div>

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

이것이 해당 코드입니다:

```plaintext
.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;
}

```

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

```plaintext
<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 의도대로 웹사이트 링크를 가지고 있습니다)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 16, 2022, 12:39오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/4 "2022-02-16T12:39:12Z")

</div>

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

```css
.d-header .title a:after {

```

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

![image](https://global.discourse-cdn.com/meta/original/3X/6/6/66639bd8c84f7863948f7aceb46dba6c66259933.png)

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

이상하게도, [Robert](https://meta.discourse.org/t/image-and-text-as-logo/138996/2?u=canapin)이 링크된 토픽에서 같은 질문을 했지만, 이쪽도 답변이 없었습니다 🙃

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 16, 2022, 12:46오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/5 "2022-02-16T12:46:03Z")

</div>

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

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

**Header**

```xml
<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>

```

---

<div class="post-metadata">

### Author: ![Arta\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arta_s/32/537495_2.png) [@Arta\_S](https://meta.discourse.org/u/Arta_S)
#### Post date: [2월 16, 2022, 12:56오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/6 "2022-02-16T12:56:06Z")

</div>

> [@Canapin](#):
>
> 이상하게도, [Robert](https://meta.discourse.org/t/image-and-text-as-logo/138996/2)님이 링크된 주제에서 같은 질문을 했지만 이 역시 답변이 없었습니다

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

---

<div class="post-metadata">

### Author: ![Arta\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arta_s/32/537495_2.png) [@Arta\_S](https://meta.discourse.org/u/Arta_S)
#### Post date: [2월 16, 2022, 12:56오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/7 "2022-02-16T12:56:33Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 16, 2022, 1:04오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/8 "2022-02-16T13:04:06Z")

</div>

> [@Arta\_S](#):
>
> 모바일 기기에서 보기 좋지 않습니다.

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

`yoursite/admin/site_settings/category/branding`

---

<div class="post-metadata">

### Author: ![Arta\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arta_s/32/537495_2.png) [@Arta\_S](https://meta.discourse.org/u/Arta_S)
#### Post date: [2월 16, 2022, 1:07오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/9 "2022-02-16T13:07:11Z")

</div>

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

> [@pfaffman](#):
>
> 이 사이트에서는 텍스트가 포함된 넓은 로고를 사용하는 것 같아요. 그렇게 해보는 건 어떨까요?

이제 좀 더 이해가 됩니다.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [3월 18, 2022, 1:07오후 UTC](https://meta.discourse.org/t/text-alongside-logo-in-discourse-both-linked/218345/10 "2022-03-18T13:07:31Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.