トピック内でウィジェットをテキストに埋め込む

サポート
2

Discourse はシングルページアプリケーションです。あなたが直面している問題は、使用しているスクリプトがその仕組みを認識していないことに起因します。Discourse のホームページや他のページにアクセスすると、以下のような構造が表示されます。

<html>
  <head>
    head content including your script
  </head>
  <body>
    <section id="main">
      page content
    </section>
  </body>
</html>

別のページに移動すると、再読み込みされるのは以下のセクション内のコンテンツだけです。

<section id="main">

したがって、DOM が変更されるため、カスタムスクリプトは再度実行されません。トピックページに直接アクセスしようとすると、正常に読み込まれることが確認できます。

image
image1143×696 117 KB
.

さて、問題はこれを Discourse で動作させる方法です。

プラグイン API には、投稿を「装飾」するためのメソッドがあります。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L282-L318

これを使用して、投稿がレンダリングされたときにサードパーティのスクリプトを実行できます。

以下に必要なコードです。これをテーマの common > header タブに追加してください。

<script type="text/discourse-plugin" version="0.8">
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

const loadScript = require("discourse/lib/load-script").default;
const { iconHTML } = require("discourse-common/lib/icon-library");

const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
  class: "woxo-preview-icon"
});

const previewMarkup = () => {
  const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;
  return markup;
};

// create a post decorator
api.decorateCookedElement(
  post => {
    const woxoWidgets = post.querySelectorAll("div[data-mc-src]");

    if (woxoWidgets.length) {
      woxoWidgets.forEach(woxoWidget => {
        if (post.classList.contains("d-editor-preview")) {
          woxoWidget.innerHTML = previewMarkup();
          return;
        }

        loadScript(WOXO_SCRIPT_SRC).then(() => {
          const script = document.head.querySelector(
            `script[src*="cdn2.woxo.tech"]`
          );
          script.dataset.usrc = "";
          window.MC.Loader.init();
        });
      });
    }
  },
  { id: "render-woxo-widgets" }
);
</script>

次に、CSP のためにいくつかのドメインを追加する必要があります。これらを以下のサイト設定に追加してください。

content_security_policy_script_src

https://*.woxo.tech/
https://us-central1-core-period-259421.cloudfunctions.net/availableComponentTracks

最後に、静的なコンポーザープレビューのために少し CSS を追加する必要があります。

これはテーマの common > CSS タブに入れます。

.woxo-preview {
  height: 400px;
  width: 100%;
  background: var(--primary-low);
  display: flex;
  align-items: center;
  justify-content: center;
  .woxo-preview-icon {
    font-size: var(--font-up-4);
    color: var(--primary-high);
  }
}

その後、任意の投稿に以下のコードを追加するだけで、ウィジェットがレンダリングされ、完全に機能するようになります。

<div data-mc-src="f4b43a8f-c188-4f80-8206-36d9f7529f13#instagram"></div>

image
image1150×1567 129 KB

JavaScript を見ると、非常に上部に 2 つのオプションがあることに気づくでしょう。

const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

WOXO_SCRIPT_SRC を woxo から提供される src に変更してください。作成するすべての埋め込みで同じであるはずです。

PREVIEW_ICON を、コンポーザープレビューで使用したいアイコンの名前に変更してください。このコードをコンポーザーで実行するのは少しコストがかかるため、コンポーザーには以下のような静的なプレビューがあります。

image
image2100×1413 89.4 KB

選択したアイコンが中央に表示されます。

何が起きているか追いたい方のために、コメント付きのコードのコピーを以下に示します。

commented code 
<script type="text/discourse-plugin" version="0.8">
// options
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

// we use the Discourse Load script lib to ensure scripts are loaded
// properly. Don't worry, this is smart enough to not duplicate the script
// if it's already loaded
const loadScript = require("discourse/lib/load-script").default;

// we load the Discourse Icon HTML function to get the svg for the icon
// we want to use in the static composer preview
const { iconHTML } = require("discourse-common/lib/icon-library");

// setup the composer preview icon
const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
  class: "woxo-preview-icon"
});

// create a helper function for the composer preview markup
const previewMarkup = () => {
  const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;

  return markup;
};

// create a post decorator
api.decorateCookedElement(
  post => {
    // does this post have woxo widgets?
    const woxoWidgets = post.querySelectorAll("div[data-mc-src]");

    // Yes, so let's do some work.
    if (woxoWidgets.length) {
      // for each woxo widget
      woxoWidgets.forEach(woxoWidget => {
        // if it's a composer widget, swap it out for a static preview and
        // quit early
        if (post.classList.contains("d-editor-preview")) {
          woxoWidget.innerHTML = previewMarkup();
          return;
        }

        // if it's not in the composer, load the woxo script.
        loadScript(WOXO_SCRIPT_SRC).then(() => {
          // The woxo script is very strange. It won't work unless the script
          // tag has an empty data-usrc attribute. So, let's add it
          const script = document.head.querySelector(
            `script[src*="cdn2.woxo.tech"]`
          );
          script.dataset.usrc = "";

          // everything is ready, let's call the init method in the woxo script
          window.MC.Loader.init();
        });
      });
    }
  },
  // add an id to the decorator to avoid memory leaks
  { id: "render-woxo-widgets" }
);

</script>
「いいね！」 3