テンプレートとJS APIのためのインラインスクリプトタグのモダナイゼーション

開発
21

「何か見落としているかもしれませんが、「ダーク」テーマを編集しておらず、HTMLタブにJSタブに移行するコードもありません。

image
image1008×479 17.2 KB

22

その部分を削除するとエラーはなくなりますか？

「いいね！」 2
23

はい、どういたしまして

「いいね！」 1
24

テーマにこれがあるのですが、エラーを消すにはどうすればよいですか？


<script type="text/discourse-plugin" version="0.5">
api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id"> #${topic.get('id')}</div>`);
  }
});

</script>
25

api.decorateWidget(); の部分は、テーマの「CSS/HTMLの編集」の下にある「JS」タブに移動する必要があります。ただし、ウィジェットは廃止されたため、プラグアウトレットを使用することをお勧めします。

「いいね！」 2
26

このようにJSに移動しました。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
  api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">&nbsp#${topic.get('id')}</div>`);
  }
});

そして、私のピンクの警告が赤い警告に変わりました。
PNG image

私はコーダーではなく、このコードを書いたわけではないので、誰かが手伝ってくれることしかできません。
プラグインのアウトレットについてあなたが言ったことに関しては、それは私の手に負えません。

27

もし誰かがここで十分に速く投稿しない場合は、手伝ってくれる人を見つけるために#marketplaceを検討してください。

28

とりあえず <head> に戻しました。
解決されるまでは警告は気にしません。
もしダメになったとしても、世界が終わるわけではなく、私が本当に探していたものに対する良い回避策にすぎません。

29

ブラウザのコンソールにエラーはありますか？

30

「非推奨通知: <script type='text/discourse-plugin'> を使用したJSコードの追加は非推奨です。このコードを専用のJavaScriptファイルに移動してください。[deprecation id: discourse.script-tag-discourse-plugin] [info: Modernizing inline script tags for templates & JS API]」

「非推奨通知: post-meta-data ウィジェットは非推奨となり、api.decorateWidget はもはやサポートされるオーバーライドではありません。[deprecated since Discourse v3.5.0.beta1-dev] [deprecation id: discourse.post-stream-widget-overrides] [info: Upcoming post stream changes - How to prepare themes and plugins]」

31

これをアウトレットに置き換えることができると思います。トピックのどこに追加していますか？

32

プロダクションでの出力場所について質問している場合、それはここにあります。

post-number
post-number1568×436 53.9 KB

しかし、検索可能な場所にある方がずっと良いです。

「いいね！」 1
33

ウェブサイトのヘッダーに簡単にJavaScriptを追加する人向けに、以下を追加します。

  1. 私にとっては、通常のJavaScriptではなく、ほとんどの場合「バニラ」JavaScriptが機能します。
  2. コードを追加する際の読み込み問題を解決するには、<script> document.addEventListener(‘DOMContentLoaded’, function() { ここにコードを挿入 }); </script> の中に配置してください。これにより、ページ読み込み後にコードが読み込まれるため、エラーを防ぐことができます。
34

フッターを全ページに表示するために、以下を使用しています。

<script type="text/discourse-plugin" version="0.8.40">
    const LoginRoute = require("discourse/routes/login").default;
    
    LoginRoute.reopen({
        activate() {
            this.controllerFor('application').setProperties({
                showFooter: true
            });
        }
    });
</script>

これはGDPR（プライバシーポリシーとインプリント）のためです。それ以外に変更はありません。これを最も効果的に変換するにはどうすればよいでしょうか？

よろしくお願いいたします！

「いいね！」 1
35

指示をありがとうございます。スクリプト内のどのメソッド（もしあれば）が非推奨であり、どのメソッドに移行すべきか少し混乱しています。ページ上部にランダムなバナー画像を表示するためのものです。画像の位置を頻繁に変更する必要があるため、ローカルアップロードやGITリポジトリではなく、テーマコンポーネント内の新しいJSタブを使用したいです。以下は、**\u003chead\u003e**タブの現在のコードの簡単な概要です。

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-widget", {
    html() {

        ...

        <<<javascript>>>

        ...

        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
  {{mount-widget widget="my-widget"}}
</script>
36

Poke and guess の管理者として、これを読んで少し心配になりましたが、カスタムテーマを確認したところ、非常にシンプルなスクリプトしかありませんでした。

<script type="text/discourse-plugin" version="0.8.11">

// アイコンを共有ボタンに置き換えます
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');


</script>

スクリプトタグの間の内容をコピーして、JSタブに貼り付けるだけでした。簡単でした！

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
	// アイコンを共有ボタンに置き換えます
	api.replaceIcon('d-post-share', 'up-right-from-square');
	api.replaceIcon('d-topic-share', 'up-right-from-square');
});
「いいね！」 1
37

この件で再度質問させてください。どの新しいメソッドを使用すればよいか、まだ混乱しています。

上記と同じことを、管理パネルインターフェース（\u003chead\u003e または JS タブ）を使用して実現する方法はありますか？

38

ウィジェットやスクリプトタグは非推奨になりました。コードをJSタブに移動し、以下のようなものを使用して、コンポーネントクラスを top-notices アウトレットに配置できます。

import Component from "@glimmer/component";
// …

api.renderInOutlet(
  "top-notices",
  class MyBanner extends Component {
    get someGetter() {
      // ここにコードを記述
    }

    <template>
      <!-- ここにHTMLを記述 -->
      {{this.someGetter()}}
    </template>
  }
);
「いいね！」 3
40

api.decorateWidget を使用する別の非推奨のテーマコンポーネントがあり、これは次のようなコードを使用しています。

api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;

そして、最初の投稿の後にHTML（href）を挿入するために return h("div.myimage", [… を使用しています。

私の理解が正しければ、api.decorateWidget も非推奨ですが、Glimmer でこれを実現する方法がわかりません。このメソッドは、最初の投稿であるかどうかを判断するのに近そうです…
https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6
…しかし、現在必要なHTMLを挿入するための推奨される方法が何であるかを把握できません。

41

完全なコードまたはリポジトリへのリンク（もしあれば）を送っていただけますか？ありがとうございます！