プレースホルダー形式

:discourse2: 概要 プレースホルダー形式を使用すると、投稿内の =PATTERN= というパターンを、テキスト入力フィールドや選択入力フィールドの値に置き換えるフォームを作成することで、動的なドキュメントを構築できます。
:eyeglasses: プレビュー Discourse Theme Creator でプレビュー
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/discourse-placeholder-theme-component
:open_book: Discourse テーマは初めてですか? Discourse テーマの使い方の初心者ガイド

このテーマコンポーネントをインストール

機能

投稿に以下の形式でプレースホルダーを追加します。

[wrap=placeholder key=NAME description="あなたの名前"][/wrap]
[wrap=placeholder key=COUNTRY default=US defaults=FR,DE,US,CN,AU,CA][/wrap]

あなたのメール: =NAME=-=COUNTRY=@example.com

これにより、以下のような結果になります。

これはメーリングリストで使用されます。

あなたのメール: =ZNAME=-=ZCOUNTRY=@example.com

上記の通り、ラッパー内のテキストは長い説明として使用されます。

[wrap=placeholder key=NAME description="あなたの名前"]
これはメーリングリストで使用されます
[/wrap]

利用可能なキー

  • key: 投稿内で置き換えるキー
  • default/defaults: デフォルト値(複数可)
  • description: 入力用のプレースホルダーテキスト

# 新しいプラグインを作成
rails g plugin =PLUGIN_NAME=
cd plugins/=PLUGIN_NAME=

ランブック、ハウツー、再利用可能なテンプレートを作成するために使用しています(コードブロック内でも機能します)。あなたの使用例もぜひ共有してください!

設定

翻訳 デフォルト
toolbar.builder プレースホルダーを追加
builder.errors.no_key キーは必須です。
builder.title プレースホルダーを追加
builder.insert 挿入
builder.key.label キー
builder.key.description 投稿内で置き換える =キー=。
builder.description.label 説明
builder.description.description 値が設定されていない入力に表示される説明。
builder.values.label デフォルト値(複数可)
builder.values.description プレースホルダーのオプションの値(複数値が定義されている場合、選択リストが使用されます)。

\u003cbr\u003e

\u003e:discourse2: 当方でホストされていますか? テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

「いいね!」 66

The big issue with math handling like this, is that you need to eval() and eval is unsafe, so you need to use some lib which provide a safe eval with a limited subset of the real eval. I’m unsure we want all this complexity for such a rare case.

「いいね!」 6

「!」を試してみましたが、これは OP 内の Composer プレビューをリフレッシュするような素晴らしい機能になるはずです。しかし… :pensive: 何か見落としているのかもしれません。私の理解が正しければ、Reply Template コンポーネントは生のテキスト(raw)を取得して「replacers」を検索しますが、Placeholder Forms コンポーネントは調理済み(cooked)のテキストを装飾するのでしょうか?

私が目指しているのは、ユーザーがトピック内にクイズの Q&A を追加する際、技術的な手間、クリック数、あるいはキー入力すら最小限に抑えてスムーズに行えるようにすることです。:heavy-sigh: :roll_eyes:

[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]

これは以下のようになります。

今のところ順調ですが、残念ながらテンプレートボタンを押すと、プレースホルダーの =question==réponse= が Composer 内にそのまま残ってしまいます。

はい、この文章を書いた時の自分の考えが何だったのか確信が持てません……おそらく別のユースケースを想定していたのでしょうが、覚えていません。

このやり方では確かに機能しません。少し考えてみます……当時の両方のテーマコンポーネントは実験的なものでしたが、人々が頻繁に利用していることから、より適切な扱いを受けるべきかもしれません。

「いいね!」 7

ありがとうございます!

happy lets go GIF by Shalita Grant

「いいね!」 3

:grin: 料理人が何を作っているのかはわかりませんが、待ち時間にピスタチオやその他のおやつを頬張っているうちに、なんとか動作するようにできました(もちろん私の特定の用途限定ですが、何をやってるのかほとんどわかっていないので… :sweat_smile:

「いいね!」 4

理想的には、管理者が独自の置換ルールを定義できるようにしたいのですが、eval はリスクが高く(セキュアな CSP ではそもそも使用不可能です)、どのように実現すればよいのか確信が持てません。

「いいね!」 3

まず第一に、このテーマコンポーネントは非常に優れており、本当に役立つものです。

しかし、バグを見つけたようです。コードスニペット内にバッククォート(`)を含むプレースホルダーを使用すると、正しく動作しません。例えば、SQL のコードスニペットでは以下のようになります。

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

TABLENAME プレースホルダーが存在しても、TABLENAME は決して置換されません。

Jinja2のような条件も含まれていると素晴らしいでしょう。たとえば、誰かがキーredを作成し、それをアイコン:red_circle:にマッピングできるようにします。orange:orange_circle:にマッピングされます。もちろん、これらがなくても問題ありませんが、これらのテスト条件があればクールだったでしょう。

このコンポーネント、本当に気に入りました。:star_struck:


「そしてあなたは本当にその=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=と落ちて=NOUN_8=のパッチが現れ、=FOOD_1=のような匂いがし、=NOUNS_5=と=NOUNS_6=が水路を詰まらせ、そして私が=MOISTURE=の=NOUN_9=のほとんどの=NOUN_10=で=VERB_1=、そして食べるための新鮮な=FOOD_2=を見つけるとき、そして=NOUNS_7=から落ちてきた人々が落とした=ADJECTIVE_3=なもの!」


オリジナルはStandard Ebooks版The Wind in the Willowsから取られ、オンラインで読むことができます(By it and with itを検索してください)。

「いいね!」 10

こんにちは :wave:

このコンポーネントありがとうございます :heart: まさに今達成しようとしていることにぴったりです。実際、最初に考えたのは、返信テンプレートコンポーネントと組み合わせることができれば素晴らしいだろうということでした。しかし、残念ながら、上記の投稿で説明されているように、それは不可能です。 :confused:


テンプレートとして使用するための回避策を見つけました。これは、新しいトピックへのリンクおよび新しい個人メッセージへのリンクと連携します。

以下にその方法を示します。

  1. プレースホルダーフォームを作成します(簡単にするために、OPの例を使用します)。

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


  1. 新しいトピックへのリンクを作成します。
    リンクで設定したのは次のとおりです。

    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>
    

  1. トピックプレビューを作成します。

    Selected category

    =CATEGORY=

    Topic title

    This is a topic created by =NAME=

    Topic body

    Hello :wave:

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

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


  1. 「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

素晴らしいですね、ドン、ありがとうございます。これは私のニーズにぴったりです :slight_smile:

「いいね!」 2

注意点として、コードブロックが問題を引き起こすことがあります。

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>

これをシェルコマンドとして明示することで修正できます。

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

これにより、次のようになります。

usermod -aG sudo =USERNAME=

それでもうまくいかない場合は、text を使用すると、highlight.js がプレースホルダーを操作するのを防ぐことができます。

より一般的な解決策(Meta Discourse が使用していると思われる)は、default code lang 設定を auto から plaintext などに変更することです。 :wink:


あまり重要ではありませんが、java を使用することは、プレースホルダーについて記述したい場合にプレースホルダーを展開させないようにする方法です。

「いいね!」 1

プレビューリンクを確認してもらえますか?私には壊れているようです。

「いいね!」 1

これは素晴らしい機能であり、多くの用途があると思います。

しかし、返信で、ユーザーがテキストボックスに入力し始めるまで=(name)=を非表示にすることは可能でしょうか?ユーザー(特に新規ユーザー)はその目的を理解できない可能性があり、または、誤ったフォーマットのように見える可能性があります。

動作するものができたと思います (:crossed_fingers: :slight_smile:)

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

try.discourse.org にも追加したので、実際に触って試すことができます。:+1:

「いいね!」 1

代わりに表示されるデフォルト値を入力できるかもしれません。

「いいね!」 1

うまくいきました!ありがとうございます!

「いいね!」 2

この回避策はもう機能しないようです。

reply-templateplaceholder-forms を組み合わせる他のオプションはありますか?

4件の投稿が新しいトピックに分割されました: プレースホルダーフォームでリンクが機能しない