投稿内のコンテンツをカスタマイズする方法(カスタム属性など)

現在、2つの方法があることを認識しています。

  1. <span>some text</span>

    CSS:

    [data-theme-custom] {
        color: pink;
    }
    
  2. [wrap="indent"]some text[/wrap]
    これにより、次の属性を含むdivまたはspan(同じ行に他のコンテンツがある場合)が作成されます。class="d-wrap"およびdata-wrap="custom"

    CSS

     [data-wrap="custom"] {
         color: pink;
     }
    

    投稿内の選択したコンテンツをカスタマイズする他の方法はありますか?
    また、要素にカスタムクラスを追加する方法はありますか?検索しても何も見つかりませんでした。これは不可能だと思いますか?

「いいね!」 2

厚かましくもこのスレッドを上げてもよろしいでしょうか?

Discourse の標準コンポーザーを使用して投稿の HTML コンテンツをカスタマイズする方法をすべてリストアップしたトピックが見つかりませんでした。

私が言及した 2 つの方法(非常に似ています)以外にも方法がある場合、howto が役立つかもしれませんか?

「いいね!」 1

コンポーザーでどのHTMLタグが機能するかについても興味があります。以前どこかで見たような気がしますが、今日早くに見つけられませんでした。

例えば、コンポーザーに<button class="success">Click me</button>を追加しようとしましたが、プレビューでは表示されたものの、投稿時には失敗しました。一部のHTMLタグは機能すると思いますが、どれかはよくわかりません。

HTML タグと属性のデフォルト許可リストは以下のとおりです。

data-* 属性が許可されていることがわかります。


このファイルには、要素をカスタマイズする方法として [wrap=*] text [/wrap] も含まれており、* 値を持つ data-wrap 属性が追加されます…

まだそれ以上の情報は見つかっていません。

「いいね!」 1

Discourse では一部の HTML クラスを使用できますが、セキュリティ上の理由から、ほとんどの HTML は投稿内でサニタイズされ、Markdown で許可されるのは非常に厳格なホワイトリストに登録された HTML のみです。クラスをホワイトリストに追加するには、必ずプラグインを使用する必要があります。サニタイズはサーバー側とクライアント側の両方で行われます。ホワイトリストに登録された属性をどこに追加するかについての詳細は、HTML タグ/属性のホワイトリスト を参照してください。また、Discourse HTML Whitelist のようなものになると思います。また、@RGJ が言及したように、whiteList() 関数は非推奨であり、現在は allowList() と呼ばれていることに注意してください。これは pretty-text/addon/engines/discourse-markdown-it.js at main · discourse/discourse で呼び出されています。

コンテンツをカスタマイズする他の方法については、投稿は ウィジェット であり、Discourse テーマには ウィジェットを装飾する 機能があるため、それを活用できます。

お役に立てば幸いです!

「いいね!」 7

返信ありがとうございます!

今日、最初のリンクを見つけました。

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 から借用したものです。

私のプラグインには数行のコードしかなく、何をしているのか、すべてが必要なのかはよくわかりませんが、少なくとも nolinkify クラスを持つspanを追加できます。

私の場合は、https://meta.discourse.org/t/linkify-words-in-post/82193(リンク化を防ぐためにタグとクラスのみを受け入れます)を使用して、投稿内の単語を簡単に「リンク化解除」することを目的としていました。特に、https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143 を使用しながら、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>

最初の構文を好んでいましたが、スクリプトの実行順序のため、目次との互換性がないと思います。

「いいね!」 3

そのコードはもう機能しません。投稿から削除することをお勧めします。

リンクされたトピックに回答があります@canapin がすでに発見したように。

whiteList() 関数は非推奨であり、現在では allowList() と呼ばれていることに注意してください。 (呼び出し元)。

「いいね!」 3

ああ、コンソールにも記載されていました :+1:

「いいね!」 3

ご確認いただきありがとうございます。元の投稿は正確性を期して更新されました。

「いいね!」 2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.