Insertable, centrally maintained text/markdown snippets

コミュニティWiki 開発者
1

I was wondering if there was any way I could define a string of text in a single place and insert it within posts with a single, short reference.

It’s a bit like the out of the box Admin -> Customize -> Text Content, but for my own custom variables that can be inserted into posts.

My use case was adding a disclaimer for my affiliate links. As the number of affiliate links grew across many posts and Topics I noted that my disclaimers were proliferating along with them. I occasionally like to make improvements to the disclaimers and this gets more onerous as the number grows.

I’m also considering making my affiliate links more generic so I have one centrally managed link for each product link, for example, which appears multiple times. If that product link changes, I only have to change it in one place.

Obviously I might be able to do some kind of rails find & replace, but that’s not as clean/safe nor ‘online’.

So I wanted a place to define & maintain a text string in a single place and have changes immediately reflected everywhere that is used on next page view.

Read on for @Johani’s solution!:

「いいね！」 3
2

One possible option is to use a theme component.

This goes in header.html

<script type="text/discourse-plugin" version="0.8">
var disclaimer = settings.Disclaimer_text,
  disclaimer_selector = 'div[data-theme="disclaimer"]';

$.fn.disclaimer = function() {
  if (!this.length) {
    return;
  } else {
    this.each(function() {
      $(this).html(disclaimer);
    });
    return this;
  }
};

api.decorateCooked($elem => $elem.children(disclaimer_selector).disclaimer());

// create composer button
let currentLocale = I18n.currentLocale();

I18n.translations[currentLocale].js.disclaimer_button = "Add disclaimer";
I18n.translations[currentLocale].js.composer.disclaimer_prompt = ""; // leave empty

api.onToolbarCreate(function(toolbar) {
  toolbar.addButton({
    trimLeading: true,
    id: "disclaimer-button",
    group: "insertions",
    icon: "exclamation-circle", // change icon
    title: "disclaimer_button",
    perform: function(e) {
      return e.applySurround(
        '<div data-theme="disclaimer">',
        "</div>",
        "disclaimer_prompt"
      );
    }
  });
});
</script>

and this goes into your component’s settings.yml file

Disclaimer_text:
  default: "Lorem ipsum dolor sit amet, ei purto complectitur has, per at quas senserit. Et malis libris eos, vix id pericula dissentiet, aliquid apeirian pro eu. Sed ex viderer inciderint, vitae officiis dissentiet eos no. Omnes percipit singulis in has, ne nam nibh tation inciderint. Quas nulla ei sit, ex eam rebum voluptaria. Id eam altera similique. Ex justo assentior persequeris mea, ei hinc paulo ubique mei. <br><br>Cu nam epicurei torquatos, et accusam accommodare vim. Vis sint saperet officiis et. Ad consequat posidonium mea, et duo paulo quidam maluisset, vel an electram expetendis. An vis repudiare tincidunt, mentitum convenire eloquentiam ut vis, summo partiendo pro ad."
  description:
    en: Enter desired disclaimer text. Use &lt;br&gt; for linebreaks.

You would then have a button in the composer that looks like so:

1
1906×1002 20.9 KB

and clicking the button would add

<div data-theme="disclaimer"></div>

which get’s converted to whatever you set in the component’s settings

1
1980×191 10.2 KB

and the end result looks like this

1
11788×556 55.5 KB

and you can use

[data-theme="disclaimer"] {

}

in CSS to style it however you like.

「いいね！」 21
3

That’s awesome! Thanks @Johani

Added to Tips’n’Tricks.

「いいね！」 2
4

Hi @merefield - funnily enough I was looking for similar functionality - inserting a standard snippet of text - but rather than a button I wanted a trigger string that would expand out to a piece of markdown. (OK, I suppose alternatively I could modify the button to a dropdown with a few options)

This is probably not a core Discourse feature but a plugin.

Ideal behaviour:

  • I type :stub: (I don’t mind about using something instead of the delimiting : characters, but wondered if hooking into the emoji interface might work since that has the kind of ‘completion’ type behaviour that I’d like)

  • Discourse replaces :stub: with

    > This article is a stub - please improve it by  **editing**  and  **adding links**  and  **detail**  (it’s a ‘wiki’ so any user can edit and add information) or by  **commenting**  below.

  • which is rendered as

    This article is a stub - please improve it by editing and adding links and detail (it’s a ‘wiki’ so any user can edit and add information) or by commenting below

  • and there should be somewhere in the UI to configure these snippets, a bit like the Custom Emoji interface

「いいね！」 5
5

Great idea for a plugin! Would you be ok for the text to appear only in the preview and the final cooked view?

「いいね！」 4
6

@pacharaneroさんの提案は私たちにとっても素晴らしいものです。私たちの場合は、スタッフ専用になるため、エディタツールバーに何も表示したくありませんが、自動更新ブロックを挿入するための短いコードを入力できるのは素晴らしいことです :+1:

「いいね！」 1
7

現時点では、これを実現するためのDiscourse以外の中央管理されていない方法は、CopyQのようなクロスプラットフォームのクリップボードマネージャーを使用し、「コマンド/グローバルショートカット」セクションを設定して、任意のテキストをクリップボードに挿入できるようにすることです。

これらのスニペットは、CopyQ UIで管理したり、ホットキーに割り当てたり、右クリックCopyQメニューに表示したりできます。Discourseに組み込まれたプラグインほどではありませんが、すべてのアプリケーションで機能するという利点があり、すでに存在します！

（これは、このように使用したい各コンピューターに設定する必要があることに注意してください。これらのコマンドとグローバルショートカットはファイルにエクスポートおよびインポートして、複数のマシンやチーム全体で同じ設定を有効にすることができます。）

8

それは私にとって全く問題ありません。DiscoTOCやPlaceholdersとは異なり、プレビューペインでは適切にレンダリングされる必要がありますが、コンポーザーでは選択された:slug:トリガーフレーズが表示されるだけでよいと思います。

9

ご回答ありがとうございます。CopyQ ソリューションは、私の求めているものではないようです（少なくとも、そう思います）。

例えば、投稿にスニペット（例：「:slug:」）を入力し、それがレンダリングされるたびに、このスラグの現在のコンテンツ（マークダウンが含まれる可能性がある）がレンダリングされるようにしたいのです。このスラグのコンテンツを変更すると、これを使用するすべての投稿は、新しいコンテンツを持つように即座に更新されます（投稿自体にはスラグのみが含まれ、コンテンツはレンダリング時に切り替えられます）。

検索がコンテンツの存在を知らなくても構いません（最終的に調理されたバージョンのみが表示されれば、それで十分です）。

Cheers

10

別のアプローチを試します…

「いいね！」 1