こんにちは。Discourseでの開発は初めてなので、初歩的な質問かもしれませんがご容赦ください。[wrap]タグを適切な\u003cscript\u003evar x='pgn here'; ...\u003c/script\u003eおよび\u003cdiv class='pgn-blahblah'\u003e\u003c/div\u003eブロックに変換できました。import loadScript from \"discourse/lib/load-script\";およびawait loadScript(settings.theme_uploads_local.pgnviewer_js);を使用して、初期化時に/assets/ディレクトリからロードできることがわかりました。/theme-javascripts/dist.js.mapをロードできなかったという警告が表示されます。どこから来ているのか全くわかりません。何か提供する必要があるものはありますか？
FF
「いいね！」 2
Metaへようこそ、@happycactus
はい、おそらく。プラグインが必要になるのは、API（つまりバックエンド）を変更しようとしている場合だけです。
過去に同様の問題がありました。
はい、app.ymlを変更して、リバースプロキシ（nginx）で大きなファイルを処理できるようにする必要があります。
幸いなことに、これは簡単な設定です。upload_size:、ここではコンテキストで示します。
params:
## このコンテナはどのGitリビジョンを使用する必要がありますか？ (デフォルト: tests-passed)
version: tests-passed
## 最大アップロードサイズ (デフォルト: 10m)
upload_size: 20m
これを変更したら、効果を発揮するために再構築する必要があります。
./launcher rebuild app
もちろん、これはサーバーへの適切なアクセス権があることを前提としています…
「いいね！」 2
ロバートさん、ありがとうございます！
dúvida, provavelmente porque não tenho experiência com tais plataformas.
minha abordagem é “incorporar” o pequeno trecho de JavaScript necessário para preencher o bloco div com o conteúdo, mas vejo que talvez eu possa executá-lo a partir de uma função “cookPgn”, como é feito no componente marmaid :
async function applyMermaid(element, key = "composer") {
const mermaids = element.querySelectorAll("pre[data-code-wrap=mermaid]");
...
await loadScript(settings.theme_uploads_local.mermaid_js);
...
mermaids.forEach((mermaid) => {
if (mermaid.dataset.processed) {
return;
}
const spinner = document.createElement("div");
spinner.classList.add("spinner");
...
mermaid.append(spinner);
});
Dessa forma, se entendi corretamente, não preciso carregar o script da página (usando loadScript, talvez??), mas posso simplesmente importá-lo no js do tema? Ou provavelmente estou totalmente enganado!
Outra coisa, o limite é por padrão de 10M, mas meu ativo é de cerca de 300kb, e todo o zip é de 337kb, ainda assim durante o upload ele diz que é mais de 512kb.
Obrigado,
FF
import を試しましたか？外部スクリプトを import することはできないと思います。
Loadscript が正しいアプローチであり、コードがそれを処理して使用する前にスクリプトが完全にロードされることを保証します（これが Promise を返す理由です）。
正確なエラーを共有していただけますか？ブラウザのコンソールに表示されていますか？
Falco
2023 年 9 月 22 日午後 4:10
5
あなたの実際の問題は、CSPによって禁止されているインラインJSを使用しようとしていることです。
このコードをテーマコンポーネントコードのヘルパー関数に入れ、投稿内に挿入しないでください。
現在のテーマをGitHubにアップロードしていただければ、確認することもできます。
「いいね！」 5
pfaffman
2023 年 9 月 22 日午後 4:59
6
Discourse Mermaid コンポーネントを確認してください。これはライブラリをロードし、投稿に何らかの処理を行います。
「いいね！」 2
ありがとうございます、@Falcoさん 。それが私の疑問の一つでした。
はい、こちらです: GitHub - studiofuga/discourse-pgn-component: A theme component for Discourse to display PGN blocks
@pfaffmanさん 、ありがとうございます。実際、そこからインスピレーションを得ました。そして、上記で提案されたようにコードを注入することなく、まさに私が求めていることを正しく行っていることに気づきました。
皆さん、ありがとうございます。提案された方法を試して、結果を報告します。もちろん、私のコードはオープンソースなので、どのような貢献や批判でも大歓迎です。
「いいね！」 1
Robert:
私も過去に同様の問題を抱えていました。
私のミスでした。添付ファイルのサイズを512kBに制限していたことを忘れ、デフォルト（4096）に引き上げたところ、うまく機能しました。ありがとうございます。そして、くだらない質問をして申し訳ありませんでした。
「いいね！」 2
すべて修正してコンポーネントが動作するようになりました！しかし、問題が発生しました。使用しているライブラリで「unsafe eval」が発生しています。おそらく、アップストリームライブラリを修正する必要があるでしょう。パッケージ化の方法がわかりません。
そして、元のjsモジュールでの該当行はこちらです。
let isBrowser=new Function("try {return this===window;}catch(e){ return false;}")
こちら です。
「いいね！」 1
本番環境でコンテンツセキュリティポリシーによりスクリプトがエラーを起こしています。
サイト設定の content security policy script src に 'unsafe-eval' を追加する必要があります。
ありがとうございます。これを実行する方法を調べるためにドキュメントを閲覧しています。
「いいね！」 1
Robert:
unsafe-eval
わかりました、できました。’ を使う必要がありましたが…（笑）。とにかく、私のスクリプトはほぼ機能しました。すべてをメインにプッシュしたところ、なぜか機能しました。レンダリングに問題があるようですが、少なくともメインコンポーネントは呼び出されています（問題はそこにあると疑っています）。
「いいね！」 1
Falco
2023 年 9 月 23 日午後 6:27
13
unsafe-eval を CSP に追加することは、CSP の目的をほぼ無効にし、結果としてサイトのセキュリティを低下させることを念頭に置いてください。
eval の使用はコードの臭いであり、上記で指摘したように、アップストリームで修正する必要があります。
「いいね！」 4
はい、もちろんです。現時点では修正できませんが、まずはコンポーネントを修正し、次にアップストリームライブラリを修正してCSPオーバーライドを削除する予定です。
ほぼ完了しました。「something」を表示できましたが、ランダムに動作しています。
まず、一意のIDを持つ<div id='board'>ブロックを定義する必要があります。次に、divを埋める関数を起動する必要があります。たとえば、PGNV.pgnBoard('board', {}); のようなものです。スクリプトは、それを埋めるために同じIDを必要とします。
私の理解が正しければ、調理済みブロックを装飾している間はこれを実行できません。ドキュメントがまだ埋められておらず、PGNVオブジェクトがブロックを見つけられないためです。そのため、最初にウィジェットを使用しました（HTML関数はブロックを返す必要があり、それを持っていないため機能しませんでした）。次に、デバウンス関数に切り替えました：debounceFunction(this, renderPgn, attrs, 200);。
しかし、それは「時々」機能します。
何が足りないのでしょうか？
ありがとうございます。
hawm
2023 年 9 月 26 日午後 12:22
16
debounceFunction は、デバウンス期間中に追加のデバウンス呼び出しがない場合にのみ、ターゲットメソッドの呼び出しを遅延させます。それでも機能しない場合があるのは、
debounce は、あなたのユースケースの解決策ではない可能性があります。
afterAdopt オプションを試してみてください。
}
/**
* Used for decorating the `cooked` content of a post after it is rendered
*
* `callback` will be called when it is time to decorate with an DOM node.
*
* Use `options.onlyStream` if you only want to decorate posts within a topic,
* and not in other places like the user stream.
*
* Decoration normally happens in a detached DOM. Use `options.afterAdopt`
* to decorate html content after it is adopted by the main `document`.
*
* For example, to add a yellow background to all posts you could do this:
*
* ```
* api.decorateCookedElement(
* elem => { elem.style.backgroundColor = 'yellow' }
* );
* ```
**/
「いいね！」 1
こんにちは、Hawnさん、ヒントをありがとうございます！
まず、通常の「decorateCooked」を使用してdivブロックを解析してアタッチし、次にafterAdoptで PGNV.pgnviewer() を呼び出してレンダリングします。または
afterAdoptオプションのみを使用して、アタッチとレンダリングの両方を行います。
どちらもまだ別の問題で機能しませんでした。完全に理解できませんが、内部ライブラリがDOM要素で className 属性が見つからないというエラーでクラッシュしているようです。少し途方に暮れています
ありがとうございます！
こんにちは @hawm さん、原因が見つかりましたが、行き詰まっています。document.getElementByIdを使用してIDを検索します。API.onAppEventでしょうか？
よろしくお願いします。
Emberのlater()を使用しました。これはダーティハックですが、機能します。
system
2023 年 10 月 28 日午後 9:37
20
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
たくさん学んでいます、ありがとうございます。