Placeholder Forms

[Discourse]

	Summary	Placeholder Forms will let you build dynamic documentation, by creating a form that replaces any occurrence of a =PATTERN= in your post with the value from a text or selectable input field.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-placeholder-theme-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Add placeholders to posts in this format:

[wrap=placeholder key=NAME description="Your name"][/wrap]
[wrap=placeholder key=COUNTRY default=US defaults=FR,DE,US,CN,AU,CA][/wrap]

Your email: =NAME=-=COUNTRY=@example.com

And this will result in:

This is used in mailing list

Your email: =ZNAME=-=ZCOUNTRY=@example.com

As seen above, text inside the wrapper will be used as a long description.

[wrap=placeholder key=NAME description="Your name"]
This is used in mailing list
[/wrap]

Available keys

• key: The key that should be replaced in your post
• default/defaults: default value(s)
• description: a placeholder text for the input

Examples

# create a new plugin
rails g plugin =PLUGIN_NAME=
cd plugins/=PLUGIN_NAME=

Set up file and image uploads to S3

So, you want to use S3 to handle image uploads? Here’s the definitive guide, but also see Configure an S3 compatible object storage provider for uploads to see how to configure your app.yml. S3 registration Head over to https://aws.amazon.com/free/ and click on [Create a Free Account] During the create account process, make sure you provide payment information, otherwise you won’t be able to use S3. There’s no registration fee, you will only be charged for what you use, if you exceed the AWS …

---

We use it to create runbooks, howtos and reusable templates (it will work in code blocks). Please share your use cases!

Settings

Translation	Default
toolbar.builder	Add Placeholder
builder.errors.no_key	A key is required.
builder.title	Add Placeholder
builder.insert	Insert
builder.key.label	Key
builder.key.description	The =Key= to be replaced in the post.
builder.description.label	Description
builder.description.description	Description displayed on input with no value set.
builder.values.label	Default value(s)
builder.values.description	Optional value(s) for your placeholder, if multiple values are defined, a select will be used.

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-13T22:28:45Z

Check document

Perform check on document:

[j.jaffeux (Joffrey Jaffeux)]

이런 방식으로 수식을 처리하는 큰 문제는 eval()을 사용해야 한다는 점인데, eval은 안전하지 않으므로 실제 eval의 제한된 부분 집합만 제공하는 안전한 eval을 지원하는 라이브러리를 사용해야 합니다. 이런 드문 케이스를 위해 이 모든 복잡성을 감수할 가치가 있는지 확신이 서지 않습니다.

[Benjamin_D (Benjamin Decotte)]

@joffreyjaffeux

이것을 Reply Template 테마 컴포넌트와 결합해서 사용해 보세요!

!를 시도해 보았는데, 그것은 composer-preview-redux-in-OP 같은 멋진 기능이 될 것 같지만.. 제가 무언가를 놓치고 있는 것 같습니다. 제 이해가 맞다면 Reply Template 컴포넌트는 raw 데이터를 가져와서 "replacers"를 찾는데, Placeholder Forms 컴포넌트는 cooked 데이터를 장식(decorate)하나요?

제가 하려는 것은 사용자들이 토픽에 퀴즈 Q&A를 추가할 때 최소한의 기술적 마찰, 클릭 또는 심지어 키 스트로크로 할 수 있도록 돕는 것입니다. :heavy-sigh:

[wrap=placeholder key="question" description="question"][/wrap]
[wrap=placeholder key="réponse" description="réponse"][/wrap]

[wrap=template key="template-spoiler" action="reply" tagsList="#qui, #quand, #où, #comment"]

## Question
=question=
### Réponse
[spoiler]
=réponse=
[/spoiler]
---
*Étiquette(s) ?*
[/wrap]

이렇게 하면

이렇게 됩니다.

지금까지는 잘 되고 있지만, 불행히도 템플릿 버튼을 누르면 composer에 플레이스홀더 =question=와 =réponse=가 그대로 남아 있습니다.

[j.jaffeux (Joffrey Jaffeux)]

네, 제가 이 코드를 작성할 때 무슨 생각을 했는지 모르겠네요… 아마 다른 사용 사례를 염두에 두고 있었을 수도 있지만, 기억이 나지 않습니다.

이 방식으로는 절대 작동할 수 없습니다. 조금 더 생각해보겠습니다… 두 가지 테마 컴포넌트는 당시 실험적인 것이었고, 사람들이 꽤 자주 사용하고 있으므로 더 나은 처리가 필요할지도 모릅니다.

[Benjamin_D (Benjamin Decotte)]

@j.jaffeux

이 부분에 대해 조금 생각해 볼게요…

감사합니다!

[Benjamin_D (Benjamin Decotte)]

셰프 주방에서 무슨 일이 일어나고 있는지는 모르겠지만, 보통 기다리는 동안 피스타치오 같은 걸로 배를 채우곤 하는데, 이번에는 어떻게든 동작하게 만들었어요 (물론 제 특정 용도 기준이고, 제가 뭘 하고 있는지 거의 모르긴 하지만, 어쨌든… )

Add 2 replacers

[j.jaffeux (Joffrey Jaffeux)]

이상적으로는 관리자 사용자가 직접 replacer를 정의할 수 있도록 하고 싶습니다. 하지만 eval은 위험할 뿐 아니라 보안 CSP에서도 사용할 수 없기 때문에, 어떻게 구현할 수 있을지 확신이 서지 않습니다…

[sewid (Sebastian)]

우선, 훌륭하고 정말 유용한 테마 컴포넌트네요.

하지만 버그를 발견한 것 같습니다. 코드 스니펫에 백틱(`)이 포함된 플레이스홀더를 사용하면 작동하지 않습니다. 예를 들어 SQL 코드 스니펫을 들 수 있습니다:

DELETE FROM `=TABLENAME=`
WHERE id NOT IN(
        SELECT
            id FROM (
                SELECT
                    id FROM `=TABLENAME=`
                ORDER BY
                    id DESC
                LIMIT 20
) subquery);

(TABLENAME 플레이스홀더가 있는 경우) TABLENAME은 절대 대체되지 않습니다.

[AquaL1te]

Jinja2와 같은 조건문도 포함되면 좋겠어요. 예를 들어 누군가가 red라는 키를 만들고 이를 아이콘에 매핑할 수 있고, orange는 에 매핑할 수 있는 식이죠. 물론 없어도 괜찮지만, 이런 테스트 조건을 사용할 수 있으면 좋았을 텐데 아쉬워요.

[maiki]

정말 이 구성 요소가 좋아요.

---

“정말 =NOUN_1=에 의지해서 살고 있는 거야? 정말 =ADJECTIVE_1=한 삶이구나!”

“그것과 함께, 그것 위를, 그것 속에, 그것으로,”라고 =PERSON_1=이 말했다. “그것은 내 형제이자 자매, 그리고 고모, =NOUN_2=, 그리고 음식과 음료, 그리고 (=ADJECTIVE_2=) =VERBING_1=야. 그것은 내 =NOUN_3=이고, 나는 다른 것을 원하지 않아. 그것이 없는 것은 =VERBING_2=할 가치가 없고, 그것이 모르는 것은 =VERBING_3=할 가치가 없어. 주님! 우리가 함께 보낸 =NOUNS_1=들! 겨울이든 여름이든, 봄이든 가을이든, 항상 =NOUN_4=와 =NOUNS_2=가 가득해. 2월에 =NOUNS_3=이 피고, 내 =NOUNS_4=와 지하실이 나에게 쓸모없는 =NOUN_5=로 가득 차고, =COLOR_1= =NOUN_6=가 내 가장 좋은 =NOUN_7= 창문 옆을 흐를 때; 또는 다시 모든 것이 =ADVERB_1=하게 쏟아져 =FOOD_1= 냄새가 나는 =NOUN_8= 조각을 드러내고, =NOUNS_5=와 =NOUNS_6=가 수로를 막아, =NOUN_10= 대부분에 =MOISTURE= =NOUN_9=에 대해 =VERB_1=할 수 있고, 먹을 신선한 =FOOD_2=를 찾아내고, =NOUNS_7=에서 떨어뜨린 =ADJECTIVE_3= 것들을 발견할 때!”

---

원문은 The Wind in the Willows의 Standard Ebooks 버전에서 가져왔으며, 온라인으로 읽을 수 있습니다 (By it and with it 검색).

[Don]

안녕하세요

이 컴포넌트를 올려주셔서 감사합니다 지금 제가 하려는 것과 완벽하게 맞습니다. 사실 제 첫 번째 생각은 Reply Template 컴포넌트와 결합할 수 있으면 정말 멋질 것이라는 것이었습니다. 하지만 불행히도 위 게시물들에서 설명한 대로 불가능합니다.

---

이를 템플릿으로 사용하는 우회 방법을 찾았습니다. 새 주제 링크와 새 개인 메시지 링크와 함께 작동합니다.

다음과 같이 만들었습니다:

1. 플레이스홀더 폼 생성 (단순히 하기 위해 OP의 예시를 사용했습니다)

Your email: =NAME=-=COUNTRY=@example.com

---

2. 새 주제 링크 생성:
링크에 다음을 설정했습니다:

1. 카테고리
2. 제목
3. 본문

빈 줄을 추가하려면 링크가 깨지지 않도록 \를 사용하거나,  를 사용하여 보이지 않게 할 수 있습니다. 이는 새 줄에 공백을 추가합니다. 이는 템플릿의 일부가 되어 빈 줄을 만듭니다.

<a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
&nbsp;
This is a test topic... Let's see the placeholder form.
\
Your email: =NAME=-=COUNTRY=@example.com
">Use template as new topic</a>

---

3. 주제 미리보기 생성

선택된 카테고리

=CATEGORY=

주제 제목

This is a topic created by =NAME=

주제 본문

Hello

This is a test topic… Let’s see the placeholder form.

Your email: =NAME=-=COUNTRY=@example.com

---

4. “Use template as new topic” 버튼 생성 (위의 예시에서는 링크이며, 이를 버튼으로 만들 수 있습니다)

이 텍스트를 [wrap] 요소로 만듭니다. 이렇게 하면 CSS로 타겟팅하여 스타일을 적용할 수 있습니다. 저는 아래에 추가했습니다.

<a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
&nbsp;
This is a test topic... Let's see the placeholder form.
\
Your email: =NAME=-=COUNTRY=@example.com
">[wrap=template-button]Use template as new topic[/wrap]</a>

[wrap=template-button] 스타일링
다음과 같습니다

Common / CSS

[data-wrap="template-button"] {
  background: var(--tertiary);
  color: var(--secondary);
  border-radius: var(--d-button-border-radius);
  padding: 0.5em 0.65em;
  transition: background 0.25s;
  &:focus,
  &:hover {
    background: var(--tertiary-hover);
    color: var(--secondary); 
  }
}

템플릿 버튼은 다음과 같이 보입니다

---

데모

Use template as new topic

---

이 작은 튜토리얼이 비슷한 것을 필요로 하는 누군가에게 도움이 되기를 바랍니다

수정: 다른 카테고리에서 주제를 생성할 수 있도록 카테고리 선택기를 설정했습니다.

---

이 게시글의 원본 보기…

[Lilly (Lillian)]

정말 놀랍네요, Don. 감사합니다. 이건 제 필요에 아주 잘 맞아요

[jericson (Jon Ericson)]

참고할 점은 코드 블록이 때때로 문제를 일으킨다는 것입니다:

usermod -aG sudo =USERNAME=

이 경우, highlight.js는 이것이 Java라고 가정하고 코드 블록을 다음과 같이 변환합니다:

<code class="hljs language-java" data-highlighted="yes">
  usermod -
  <span class="hljs-type">aG</span> 
  <span class="hljs-variable">sudo</span> 
  <span class="hljs-operator">=</span>
  USERNAME=
</code>

이것이 실제로 셸 명령어임을 명시하여 문제를 해결할 수 있습니다:

    ```shell
    usermod -aG sudo =USERNAME=
    ```

그 결과 다음과 같습니다:

usermod -aG sudo =USERNAME=

모든 시도가 실패한다면, text를 사용하면 highlight.js가 플레이스홀더를 건드리지 못하게 할 수 있습니다.

더 일반적인 해결책(Meta Discourse가 사용하고 있을 법한)은 default code lang 설정을 auto에서 plaintext 또는 유사한 값으로 변경하는 것입니다.

---

큰 의미는 없지만, 플레이스홀더에 대해 글을 쓰고 플레이스홀더가 확장되는 것을 피하고 싶다면 java를 사용하는 것이 하나의 방법입니다.

[putty]

미리보기 링크를 확인해 줄 수 있나요? 제 쪽에서는 깨진 것 같습니다.

[NateDhaliwal]

정말 멋진 기능이고, 다양한 활용 가능성을 볼 수 있습니다.
다만, 답변에서 사용자가 텍스트 박스에 입력을 시작할 때까지 =(name)=를 숨길 수 있을까요? 사용자(특히 신규 사용자)가 이 기능의 목적을 이해하지 못하거나, 잘못된 포맷으로 인식할 수 있을 것 같습니다.

[JammyDodger]

@putty

미리보기 링크를 확인해 줄 수 있나요? 제게는 깨진 것 같습니다.

다시 작동하게 만든 것 같습니다 ( )

https://discourse.theme-creator.io/theme/Discourse/placeholder-forms

try.discourse.org에도 추가했으니, 직접 더 조작해 볼 수 있습니다.

[pfaffman (Jay Pfaffman)]

대신 표시될 기본값을 입력해 보시는 건 어떨까요?

[putty]

성공적으로 작동했습니다! 감사합니다!

[bangarang]

이 워크어라운드가 더 이상 작동하지 않는 것 같습니다.

#reply-template와 #placeholder-forms를 결합할 수 있는 다른 방법이 있을까요?