JSコードはページをリフレッシュすると動作しなくなる

開発
1

こんにちは。

修正方法を教えていただけますでしょうか :pray:

<script>
let intervalId = setInterval(() => {
  const tags = document.querySelectorAll('.discourse-tag');
  if (tags.length > 0) {
    Array.prototype.forEach.call(tags, (tag) => {
      const tagClone = tag.cloneNode(true);
      tagClone.style.fontSize = '--font-down-2';
      tagClone.style.backgroundColor = '#1f1f33';
      tagClone.style.margin = '1px';
      tagClone.style.borderRadius = '7px';
      tagClone.style.padding = '2px 8px';
      const title = tag.closest('.main-link').querySelector('.title');
      title.parentNode.insertBefore(tagClone, title);
      tag.remove();
    });
    clearInterval(intervalId);
  }
}, 100);
</script>
2

JavaScriptではなくCSSスタイルを適用する代わりに、なぜこれを行うのですか？

「いいね！」 2
3

CSSでタグが意図した位置に配置されませんでした

4

どういうことですか？ スタイルを手動で挿入しても、CSS の変更と同じ結果になるはずです。

5

私はプロではありません。見つけたコードでしか編集できません。ゼロからコードを書くことはできません。
私のフォーラムを確認できます
https://pvpfarm.com

私の優先事項は常にCSSでの編集です。私の最初のJSコードです。

6

このようにしたいのだと思います。

  1. topic-list-before-status プラグインのアウトレットを使用してタグを移動します。
<script type="text/x-handlebars" data-template-name="/connectors/topic-list-before-status/tag.raw">
  {{discourse-tags context.topic mode="list" tagsForUser=context.tagsForUser}}
</script>
  1. CSS を使用して元のタグを非表示にし、スタイルを設定します（調整が必要になる場合があります）。
.link-bottom-line .discourse-tags {
    display: none;
}

.link-top-line .discourse-tags {
    column-gap: 5px;
    vertical-align: text-top;

    .discourse-tag {
        font-size: var(--font-down-2);
        border-radius: 7px;
        padding: 2px 8px;
        background-color: #1f1f33;
    }

    .discourse-tag::after {
        content: '' !important;
        margin: none !important;
    }
}
「いいね！」 1
7

ご協力ありがとうございます。 :pray:
現在、これらのコードを使用しており、機能しています。

function moveTagsToTitle() {
    const mainLinks = document.querySelectorAll('.main-link');
    mainLinks.forEach(mainLink => {
        const discourseTags = mainLink.querySelector('.discourse-tags');
        const titleElement = mainLink.querySelector('.title');

        if (discourseTags && titleElement) {
            const tags = discourseTags.querySelectorAll('.discourse-tag');

            tags.forEach(tag => {
                const tagSpan = document.createElement('span');
                tagSpan.className = 'discourse-tag box';
                tagSpan.textContent = tag.textContent;
                tagSpan.style.fontSize = 'var(--font-down-2)';
                tagSpan.style.borderRadius = '10px';
                tagSpan.style.border = '1px solid #444460';
                tagSpan.style.backgroundColor = '#1f1f33';
                tagSpan.style.color = 'white';
                tagSpan.style.margin = '2px';
                tagSpan.style.padding = '2px 8px';
                tagSpan.style.display = 'inline-block';
                tagSpan.style.overflow = 'hidden';
                tagSpan.style.whiteSpace = 'nowrap';
                tagSpan.style.textOverflow = 'ellipsis';
                tagSpan.style.verticalAlign = 'middle';
                tagSpan.style.marginRight = '5px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

            if (discourseTags.parentNode) {
                discourseTags.parentNode.removeChild(discourseTags);
            }
        }
    });
}

window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
    childList: true,
    subtree: true
};
observer.observe(targetNode, observerOptions);
8

お役に立てて嬉しいです。はい、プレーンなJavaScriptでも機能します。しかし、目標を達成するには、Discourse APIとプラグインアウトレットを使用することを強くお勧めします。よりクリーンで、変更に対してより堅牢になります。:+1:

「いいね！」 1
9

私の英語は多くの科目で不十分です。
サイトに害を及ぼすようなコードは望みません。
例えば、これらのJSコードがサイトを遅くしないことを願っています。（そう願っています:grin:）
ご協力ありがとうございます :heart:

10

それがやろうとしていることの良い方法ではないと思います。

何をしようとしていますか？

「いいね！」 1
11

トピックタイトルの左にタグを移動しました。
これでうまくいきましたが、選択肢がありません。CSSでコードを書くことができないからです。
私のサイトを訪問することができます。リンクは上に書きました。

12

以前の投稿 #6 で、よりクリーンな方法を提示しました。

理想的にはテンプレートを直接更新したいところですが、メンテナンスや互換性の問題につながるため、それは良い方法ではありません。

「いいね！」 1
13

お教えいただいたコードを所定の場所にアップロードしましたが、期待通りに動作しません。

お教えいただいたコードは現在サイトで有効になっています。ご確認いただけますでしょうか？

14

問題がわかりました！

これは奇妙ですね。「カテゴリページ」の「最新トピックリスト」テンプレートには、プラグインのアウトレットが存在しません。:thinking:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs#L13

ですので、おっしゃる通りです。残念ながら、私のコードはそのページでは動作しません。

ただし、/latest では動作するはずです。

ローカルのDiscourseで表示されているもの

image
image473×209 4.75 KB

「いいね！」 2
15

もし私がコードを書くとしたら、CSSで書くでしょう。
それか、ヒーローが現れて私を助けてくれるでしょう。:smiley: