# 게시물 내부 콘텐츠를 커스터마이징하는 방법 (커스텀 속성 등)
**URL:** https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747
**Category:** Support
**Created:** [5월 11, 2022, 11:10오전 UTC](https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747 "2022-05-11T11:10:01Z")
**Posts on this page:** 10
**Page:** 1
지금까지 제가 알고 있는 방법은 두 가지입니다:
1. `some text`
2. `[wrap="indent"]some text[/wrap]`
이는 div 또는 span(같은 줄에 다른 콘텐츠가 있는 경우)을 생성하며, 다음 속성을 포함합니다: `class="d-wrap"` 및 `data-wrap="custom"`
게시글에서 특정 콘텐츠를 커스터마이징하는 다른 방법이 있을까요?
또한, 요소에 사용자 지정 **class** 를 추가하는 방법이 있을까요? 검색을 해봐도 찾을 수 없었습니다. 불가능한 것 같습니다.
---
대놓고 이 글을 올릴 수 있을까요?
Discourse의 기본 에디터를 사용하여 게시물의 HTML 내용을 커스터마이징하는 모든 방법을 나열한 주제를 찾지 못했습니다.
제가 언급한 두 가지 외에 다른 방법이 있다면, #howto 주제를 만드는 것이 유용할까요? (두 방법은 매우 유사합니다.)
---
컴포저에서 어떤 HTML 태그가 동작하는지도 궁금합니다. 전에 어딘가에서 본 것 같은데, 오늘早些에 찾을 수가 없었거든요.
예를 들어, 컴포저에 ``를 추가하려고 했는데, 미리보기에서는 표시가 되긴 했지만 게시할 때는 실패했습니다. _일부_ HTML 태그는 동작하는 것 같은데, 정확히 어떤 태그들이 그런지 모르겠습니다.
---
이것이 기본적으로 허용되는 HTML 태그와 속성인 것 같습니다:
>
`data-*` 속성이 허용됨을 확인할 수 있습니다.
* * *
이 파일에는 `*` 값을 가진 `data-wrap` 속성을 추가하여 요소를 커스터마이징하는 `[wrap=*] text [/wrap]` 방식도 포함되어 있습니다…
>
아직 더 이상의 정보는 찾지 못했습니다.
---
Discourse에서는 일부 HTML 클래스를 사용할 수 있지만, 보안상의 이유로 게시물 내 대부분의 HTML은 정제(sanitize)되며, 마크다운에서는 매우 엄격한 화이트리스트에 포함된 HTML만 허용됩니다. 클래스를 화이트리스트에 추가하려면 **반드시** 플러그인을 사용해야 하며, 정제 과정은 서버 측과 클라이언트 측 모두에서 수행됩니다. 화이트리스트에 추가할 수 있는 속성에 대한 세부 사항은 [Whitelisting HTML tags / attributes](https://meta.discourse.org/t/whitelisting-html-tags-attributes/159653)를 참고하세요. ~~그리고 이것은 다음과 같은 모습일 것입니다: [Discourse HTML Whitelist](https://github.com/pnewell/discourse-html-whitelist).~~ 그리고 @RGJ가 언급했듯이, `whiteList()` 함수는 비추천(deprecated) 상태이며, 현재는 [allowList()](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js#L39)로 불립니다.
콘텐츠를 커스터마이징할 수 있는 다른 방법에 대해 말씀드리자면, 게시물은 [위젯](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347)이며, Discourse 테마는 [위젯을 장식(decorate)할 수 있는 기능](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6)을 갖추고 있으므로 이를 활용할 수 있습니다.
도움이 되셨으면 좋겠습니다!
---
> [@SaraDev](#):
>
> 화이트리스트에 클래스를 추가하려면 **반드시** 플러그인을 사용해야 합니다. 세리제이션은 서버 측과 클라이언트 측 모두에서 수행됩니다. 어떤 세부 사항에 대해서는 [Whitelisting HTML tags / attributes](https://meta.discourse.org/t/whitelisting-html-tags-attributes/159653)를 확인해 보세요. ~~그리고 아마도 이렇게 비슷한 형태로 보일 것입니다: [Discourse HTML Whitelist](https://github.com/pnewell/discourse-html-whitelist)~~
답변 주셔서 감사합니다!
오늘 오후에 첫 번째 링크를 우연히 발견했습니다.
GitHub 링크의 파일은 7년 전 것이므로 코드가 오래되었을 것 같습니다.
어쨌든, 저는 이것을 사용했습니다:
```js
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](https://github.com/unfoldingWord-dev/discourse-mermaid) 에서 가져온 것입니다.
제 플러그인에는 몇 줄의 코드만 있고, 실제로 무엇을 하는지 그리고 모든 것이 필요한지 정확히 모르지만, 적어도 `nolinkify` 클래스가 있는 스팬을 추가할 수는 있습니다.
제 경우, 목적은 [Auto-Linkify Words](https://meta.discourse.org/t/linkify-words-in-post/82193) (링크화를 방지하기 위해 태그와 클래스만 허용합니다)을 사용하여 게시물 내의 단어를 쉽게 "unlinkify"하는 것이었고, 특히 [DiscoTOC - automatic table of contents](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143) 을 사용하면서 제목 HTML 태그 내의 단어들이었습니다.
저는 또한 다음과 같은 bbcode 문법 기반 솔루션도 시도해 보았습니다:
```js
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 = `${escaped}`;
return true;
}
});
});
```
그래서, 목차의 제목 태그 문제에 대해 두 가지 솔루션을 모두 시도해 보았습니다.
이것은 작동하지 않습니다:
```xml
## [nolinkify]test[/nolinkify]
```
하지만 이것은 작동합니다:
```xml
## test
```
첫 번째 문법을 선호했지만, 스크립트 실행 순서 때문에 목차와 호환되지 않는 것 같습니다…
---
> [@SaraDev](#):
>
> ~~그리고 다음과 같은 형태로 보일 것이라고 생각합니다: [Discourse HTML Whitelist](https://github.com/pnewell/discourse-html-whitelist)~~
그 코드는 더 이상 작동하지 않습니다. 게시글에서 해당 내용을 제거하는 것이 좋습니다.
[답변은 링크된 토픽에 있습니다](https://meta.discourse.org/t/whitelisting-html-tags-attributes/159653/5). @canapin이 이미 알아낸 바와 같습니다.
`whiteList()` 함수는 비권장(deprecated)되었으며, 현재는 [allowList()](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js#L39)라고 불립니다.
---
> [@RGJ](#):
>
> `whiteList()` 함수는 더 이상 사용되지 않으며(deprecated), 현재는 [allowList()](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js#L39)로 호출됩니다.
확인해 주셔서 감사합니다. 정확성을 위해 원본 게시물을 업데이트했습니다.
---