Placeholder Forms

커스터마이징 테마 컴포넌트
,
46

안녕하세요 :wave:

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

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

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

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 :wave:

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] 스타일링
다음과 같습니다 :arrow_down_small:

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); 
  }
}

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

template-button

데모

Use template as new topic

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

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

이 게시글의 원본 보기…

9개의 좋아요