지금까지 제가 알고 있는 방법은 두 가지입니다:
<span data-theme-custom>some text</span>
CSS:
[data-theme-custom] {
color: pink;
}
[wrap="indent"]some text[/wrap]
이는 div 또는 span(같은 줄에 다른 콘텐츠가 있는 경우)을 생성하며, 다음 속성을 포함합니다: class="d-wrap" 및 data-wrap="custom"
CSS
[data-wrap="custom"] {
color: pink;
}
게시글에서 특정 콘텐츠를 커스터마이징하는 다른 방법이 있을까요?
또한, 요소에 사용자 지정 class를 추가하는 방법이 있을까요? 검색을 해봐도 찾을 수 없었습니다. 불가능한 것 같습니다.
대놓고 이 글을 올릴 수 있을까요?
Discourse의 기본 에디터를 사용하여 게시물의 HTML 내용을 커스터마이징하는 모든 방법을 나열한 주제를 찾지 못했습니다.
제가 언급한 두 가지 외에 다른 방법이 있다면, howto 주제를 만드는 것이 유용할까요? (두 방법은 매우 유사합니다.)
컴포저에서 어떤 HTML 태그가 동작하는지도 궁금합니다. 전에 어딘가에서 본 것 같은데, 오늘早些에 찾을 수가 없었거든요.
예를 들어, 컴포저에 <button class="success">Click me</button>를 추가하려고 했는데, 미리보기에서는 표시가 되긴 했지만 게시할 때는 실패했습니다. 일부 HTML 태그는 동작하는 것 같은데, 정확히 어떤 태그들이 그런지 모르겠습니다.
이것이 기본적으로 허용되는 HTML 태그와 속성인 것 같습니다:
data-* 속성이 허용됨을 확인할 수 있습니다.
이 파일에는 * 값을 가진 data-wrap 속성을 추가하여 요소를 커스터마이징하는 [wrap=*] text [/wrap] 방식도 포함되어 있습니다…
아직 더 이상의 정보는 찾지 못했습니다.
Discourse에서는 일부 HTML 클래스를 사용할 수 있지만, 보안상의 이유로 게시물 내 대부분의 HTML은 정제(sanitize)되며, 마크다운에서는 매우 엄격한 화이트리스트에 포함된 HTML만 허용됩니다. 클래스를 화이트리스트에 추가하려면 반드시 플러그인을 사용해야 하며, 정제 과정은 서버 측과 클라이언트 측 모두에서 수행됩니다. 화이트리스트에 추가할 수 있는 속성에 대한 세부 사항은 Whitelisting HTML tags / attributes를 참고하세요. 그리고 이것은 다음과 같은 모습일 것입니다: Discourse HTML Whitelist. 그리고 @RGJ가 언급했듯이, whiteList() 함수는 비추천(deprecated) 상태이며, 현재는 allowList()로 불립니다.
콘텐츠를 커스터마이징할 수 있는 다른 방법에 대해 말씀드리자면, 게시물은 위젯이며, Discourse 테마는 위젯을 장식(decorate)할 수 있는 기능을 갖추고 있으므로 이를 활용할 수 있습니다.
도움이 되셨으면 좋겠습니다!
답변 주셔서 감사합니다!
오늘 오후에 첫 번째 링크를 우연히 발견했습니다.
GitHub 링크의 파일은 7년 전 것이므로 코드가 오래되었을 것 같습니다.
어쨌든, 저는 이것을 사용했습니다:
export function setup(helper) {
if (!helper.markdownIt) { return; }
helper.registerOptions((opts, siteSettings) => {
opts.features.nolinkify = siteSettings.no_linkify_enabled;
});
helper.allowList(["span.nolinkify"]);
}
이것은 GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub 에서 가져온 것입니다.
제 플러그인에는 몇 줄의 코드만 있고, 실제로 무엇을 하는지 그리고 모든 것이 필요한지 정확히 모르지만, 적어도 nolinkify 클래스가 있는 스팬을 추가할 수는 있습니다.
제 경우, 목적은 Auto-Linkify Words (링크화를 방지하기 위해 태그와 클래스만 허용합니다)을 사용하여 게시물 내의 단어를 쉽게 "unlinkify"하는 것이었고, 특히 DiscoTOC - automatic table of contents 을 사용하면서 제목 HTML 태그 내의 단어들이었습니다.
저는 또한 다음과 같은 bbcode 문법 기반 솔루션도 시도해 보았습니다:
helper.registerPlugin(md => {
md.inline.bbcode.ruler.push("nolinkify",{
tag: "nolinkify",
replace: function(state, tagInfo, content) {
const token = state.push("html_raw", '', 0);
const escaped = state.md.utils.escapeHtml(content);
token.content = `<span="nolinkify ">${escaped}</span>`;
return true;
}
});
});
그래서, 목차의 제목 태그 문제에 대해 두 가지 솔루션을 모두 시도해 보았습니다.
이것은 작동하지 않습니다:
## [nolinkify]test[/nolinkify]
하지만 이것은 작동합니다:
## <span class="nolinkify">test</span>
첫 번째 문법을 선호했지만, 스크립트 실행 순서 때문에 목차와 호환되지 않는 것 같습니다…
그 코드는 더 이상 작동하지 않습니다. 게시글에서 해당 내용을 제거하는 것이 좋습니다.
답변은 링크된 토픽에 있습니다. @canapin이 이미 알아낸 바와 같습니다.
whiteList() 함수는 비권장(deprecated)되었으며, 현재는 allowList()라고 불립니다.
아, 맞다. 콘솔에서도 언급이 됐었네요 
확인해 주셔서 감사합니다. 정확성을 위해 원본 게시물을 업데이트했습니다.