게시물 본문 링크에 스타일링용 클래스 추가하기

개발
1

Discourse가 앵커(Anchor)를 다시 포맷팅하는 것을 우회할 수 있는 방법이 있을까요? 링크를 버튼으로 표시하고 싶고, 따라서 특정 스타일을 적용하고 싶습니다.

게시글은 .raw 속성으로 게시되고 있습니다(‘.cooked’를 사용하려고 시도했지만, API 문서에 명시되어 있음에도 불구하고 지원되지 않는 것 같습니다).

<a aria-label="homepage-link" href="http://blablabla...">View Homepage</a>를 게시하면

Discourse 게시글 또는 카테고리 설명에서 다음과 같이 표시됩니다.

<div class="cooked"><a>View Homepage</a></div>

또한 시도해 본 방법

[View this page][http://blablabla]

이것은 다음과 같이 변환되었습니다:

<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">http://blablabla</a></div>

하지만 만약 단순히 다음처럼만 얻을 수 있다면:

<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">View this page</a></div>

body 요소에서 CSS를 통해 해당 요소를 타겟팅하여 필요한 CSS 버튼 스타일을 적용할 수 있을 것입니다.

2

해결된 것 같습니다…

[이 페이지 보기](http://blablabla)

사용할 대상 CSS:

body.<여기에 최상위 카테고리 이름 삽입>-* div.cooked a

다만

위 내용에 대한 해결책이 있다면, <a> 링크에 자체 클래스를 추가하고 최상위 카테고리를 피하는 것이 조금 더 깔끔하고 쉬울 것입니다.

미리 감사드립니다.

3

이렇게 하려면 다음과 같은 것을 사용하세요.

예를 들어

[wrap=link-button][Link Text](http://meta.discourse.org)[/wrap]

은 다음과 같이 렌더링됩니다.

Link Text

그리고 마크업은 다음과 같습니다.

<div class="d-wrap" data-wrap="link-button">
  <p>
    <a href="http://meta.discourse.org">Link Text</a>
  </p>
</div>

그런 다음 CSS에서 다음과 같이 스타일을 적용할 수 있습니다.

[data-wrap="link-button"] {
  a {
    // 링크 스타일
  }
}

[wrap=link-button]을 원하는 값으로 변경할 수 있습니다. 예를 들어

[wrap=custom-button] 또는
[wrap=home-link] 또는
[wrap=foobar]

로 변경한 후, 위 예시처럼 해당 링크를 대상으로 사용할 수 있습니다.

4

@Johani 정말 흥미롭네요!!! 이 부분에 대한 작업을 해주셔서 감사합니다. 이 옵션을 검토해 보겠습니다. 향후 Post의 원시(raw) 속성 설정에 대해 API 문서에 포함되면 좋겠습니다. 아니면 Post의 UPDATE:/POST: 속성과 관련된 모든 가능성을 그룹화/정의하는 중앙 문서를 만드는 것도 좋겠습니다.