홈페이지 로고를 클릭할 때 오류 발생

개발
11

그 경로를 선택하지 않는 것을 강력히 권장합니다. 이는 문제의 근본 원인을 수정하는 대신 부작용에 반창고를 붙이는 것과 같습니다. 이렇게 하면 더 많은 문제를 초래하게 됩니다(위 코드 때문에 최근 발생한 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;
    }
}