点击主页logo时出错

您好。
我将通过图片向您展示。
在上次更新之前,我遇到了这个错误。
安装更新后,我仍然收到此错误。

(当前)
Ekran görüntüsü 2024-05-03 153512

我移除了网站上的所有代码并再次尝试,但仍然收到此错误。

翻译

错误
出了些问题。

在安全模式下也会发生这种情况吗?您能否在点击它时检查浏览器控制台是否有错误,并查看 /logs 以获取更多详细信息。

1 个赞

安全模式已激活,日志页面上未显示任何错误。也许是我不理解。

最后日志。
Ekran görüntüsü 2024-05-03 154929

我尝试关闭安全模式。仍然出现相同的错误。

顺便说一句,当我第二次点击它时,错误消失了,主页出现了。

在加载主题组件和卸载插件时,我看到了一些错误。

您可能需要查看一下您最近的自定义设置。

1 个赞

感谢您的关注。

最后一个插件:GIF

所有插件

您是否有远程组件之外的任何 JS 自定义项?

我会尝试禁用所有组件,然后逐个启用它们,直到出现错误。

<script>
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.margin = '2px';
                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';
                tagSpan.style.marginLeft = '-6px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

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

    const topicHeaderExtras = document.querySelectorAll('.topic-header-extra');

    topicHeaderExtras.forEach(topicHeaderExtra => {
        const discourseTags = topicHeaderExtra.querySelector('.discourse-tags');
        const tags = discourseTags.querySelectorAll('.discourse-tag');

        tags.forEach(tag => {
            tag.className = 'discourse-tag box';

            tag.style.borderRadius = '10px';
            tag.style.border = '1px solid #444460';
            tag.style.backgroundColor = '#1f1f33';
            tag.style.margin = '1px';
            tag.style.padding = '2px 8px';
            tag.style.display = 'inline-block';
            tag.style.overflow = 'hidden';
            tag.style.whiteSpace = 'nowrap';
            tag.style.textOverflow = 'ellipsis';
            tag.style.verticalAlign = 'middle';
            tag.style.marginRight = '5px';
            tag.style.marginBottom = '5px';
        });
    });
}

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

</script>

这些代码导致了这个错误。
我不知道该如何修复。
我需要这些代码 :frowning:

您正在移动包含 Emberjs 组件的元素(此处为标签列表),我认为这可能会破坏组件的生命周期。

最好的方法是使用 API。

在您的情况下,您可以:

  • 使用插件插座,正如我在您上一个主题中展示的那样。但是,由于它在分类页面的最新主题中不存在,因此您需要请求它。

  • 覆盖模板。出于兼容性原因,这不是一个好解决方案,但它可以作为一种即时替代方案。

1 个赞

我找到了这些代码。

这并非我想要的,但目前可以先用着。

 var pElement = document.getElementById('site-logo').parentNode;
                    //var pElement = document.createElement('a');
                    //pElement.innerHTML = aElement.innerHTML;
                    //aElement.replaceWith(pElement);
                    pElement.href = '#';
                    pElement.style.cursor = 'pointer'; 
                    pElement.onclick = function() {
                      window.location.href = '/';
                    };
                    //document.getElementById('site-logo').parentNode.href = '/';

如果有人能帮忙,我等着。谢谢 :pray:

我强烈建议你不要走那条路。这就像是给副作用贴创可贴,而不是解决问题的根源。你会因此制造更多问题(就像你最近的 topic 是由上述代码引起的)。

你可以让你的 JS 更符合 discourse 的习惯(最好的方法还是尽可能使用插件插槽)。
这里有一个例子。它在页面更改时使用 API,在特定路由上运行代码,并复制链接之前的 HTML(这样你就可以点击标签了):

JS
<script type="text/discourse-plugin" version="0.8">
  const { next } = require("@ember/runloop");
  
  function moveTags() {
    const mainLinks = document.querySelectorAll(".main-link:not(.tags-moved)");
    
    mainLinks.forEach((mainLink) => {
      const discourseTags = mainLink.querySelector(".discourse-tags");
      const titleElement = mainLink.querySelector("a[data-topic-id]");

      if (discourseTags && titleElement) {
        titleElement.insertAdjacentHTML("beforebegin", discourseTags.outerHTML);
        mainLink.classList.add('tags-moved');
      }
    });
  }

  api.registerModelTransformer("topic", async (topics) => {
    next(() => {
      moveTags();
    })
  });

  api.onPageChange((url) => {
    if (url.startsWith("/categories")) {
      moveTags();
    }
  });
</script>
CSS
.top-row, 
.link-top-line {
    .discourse-tag {
        font-size: var(--font-down-2) !important;
        padding: 2px 8px;
        margin: 2px 5px 2px -6px;
        border-radius: 10px;
        border: 1px solid #444460;
        background-color: #1f1f33;
    }
    
    .discourse-tag::after {
        content: '' !important;
        margin-left: 0 !important;
    }
}

.bottom-row, 
.link-bottom-line {
    .discourse-tags {
        display: none;
    }
}
2 个赞

您好 @Arkshine
更改徽标链接无济于事,我删除了这些代码。

但别无选择。我需要像这样定位标签。
https://pvpfarm.com

如果我付钱给别人,他们能写出能正常工作的像样的代码吗?

您在哪里找到这些代码的? (JS) 来自 https://github.com/discourse/discourse?

如果您需要/想要付费帮助,可以在 Marketplace 中创建一个主题。:+1:

1 个赞

我在#11 中提供了代码。

你好,@Arkshine

我删除了这些代码,然后添加了你给的代码,但它们不起作用。是我犯了什么错误吗?

对我来说是有效的:

请确保保留 \u003cscript type=\"text/discourse-plugin\" version=\"0.8\"\u003e。否则将无法正常工作。

是的,它奏效了!
只有一个小错误。
当我点击徽标时,标签的数量会增加。

我已经更新了上面的代码。

2 个赞

我不知道该如何感谢您。非常感谢!:pray: :heart:

@Arkshine 抱歉再次提起这个话题。
再次感谢。我在您提供的代码中发现了一个错误。
您能帮帮我吗?
我尝试纠正代码但未能成功。

在“最新”部分,只有最近打开的带标签主题会显示标签。


进入分类后,标签不会显示。

@ogulcan1787 我已更新上面的代码。

1 个赞