기본값인 새 탭에서 외부 링크 열기 작동 안 함

안녕하세요,

최근 제 포럼의 모든 외부 링크가 새 탭에서 열리지 않게 되었습니다. “기본적으로 외부 링크를 새 탭에서 열기” 옵션을 다시 확인해 보았는데, 체크되어 있습니다:

요소를 검사(inspect element)하여 링크 뒤의 HTML을 확인해 보니 target="_blank"가 분명히 빠져 있습니다.

어떻게 해야 할까요?

안전 모드에서 시도해 보셨나요? 새로운 테마, 테마 컴포넌트 또는 플러그인이 간섭을 일으키고 있을 수도 있습니다. :face_with_monocle:

안전 모드에서 사이트를 시도해 보았지만 여전히 같은 문제가 발생합니다.

현재 사용 중인 Discourse 버전은 무엇인가요? 재현이 가능한지 확인하는 데 도움이 됩니다.

최신 버전인 2.7.0.beta1을 실행 중입니다.

여기 메타에서 테스트해 볼 수 있을까요? 설정에서 외부 링크를 새 탭에서 열도록 지정해 보고, 본인에게도 잘 동작하는지 확인해 보세요. 제 경우에는 꽤 잘 작동합니다.

@riteshsaini 님 안녕하세요

가장 좋은 첫 단계 문제 해결 방법 중 하나는 웹 개발자 콘솔을 사용하여 DOM을 직접 검사하는 것입니다. 특히 링크의 정확한 속성, 구체적으로는 “target” 속성을 살펴보세요.

종종 소스 코드를 직접 읽어서는 이러한 DOM 속성을 볼 수 없습니다(이러한 속성은 소스에는 없더라도 DOM에 존재할 수 있음). 따라서 100% 확실하게 속성을 확인하려면 DOM을 쿼리해야 합니다.

이해가 되셨으면 좋겠습니다.

그가 여기서 한 일이 바로 그것이라고 생각합니다

아니요. 소스 코드를 읽는 것과 DOM을 확인하는 것은 다른 것입니다.

DOM 속성은 소스 코드와 다를 수 있으며(자주 그렇습니다), 특히 DOM을 조작하기 위해 자바스크립트를 많이 사용하는 웹사이트(예: Discourse)에서는 더욱 그렇습니다.

그래서 저는 소스 코드를 단순히 살펴보는 것이 아니라 DOM을 쿼리하도록 구체적으로 언급한 것입니다 :slight_smile:

그러나 @osioke 님과 동의하듯, 소스 코드에는 명확하게 target 속성이 누락된 것이 보입니다. 하지만 DOM을 확인하면 해당 속성이 무엇인지 "확실"하게 알 수 있습니다. DOM은 소스 코드와 다른 상태일 수 있기 때문입니다(자주 다른 상태입니다).

개인적으로 저는 "아무것도 가정하지 않기"를 강력히 지지하므로, @riteshsaini 님께 DOM을 확인하여 “확실히” 하고 나서 "그대로 진행"하도록 제안한 것입니다.

DOM과 소스 코드의 링크 target 속성이 동일한 상태일 가능성이 매우 높지만, 문제를 해결하는 과정에서 이러한 세부 사항을 가정하지 않도록 항상 권고합니다. 따라서 문제 해결 단계로 DOM을 쿼리하도록 제안한 것입니다.

도움이 되기를 바랍니다.

설정에서 조정하는 대신 이렇게 사용하고 있습니다

데모: Theme Creator

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange((url, title) => {
        // Automatically open external links in new tab or window
        var pc = 1;
        if ($("html").hasClass("mobile-device")) pc = 0;
        var links = document.links;
        for (var i = 0, linksLength = links.length; i < linksLength; i++) {
            if (links[i].hostname != window.location.hostname) {
                if (pc) links[i].target = '_blank'; else links[i].target = '_self';
            }
        }
    });
</script>

… 그리고 DOM과 소스 코드의 상태가 다를 수 있으며, 위의 JS로 설정된 대상 속성을 HTML 소스 코드에서 볼 수 없음을 Discourse API의 훌륭한 예시로 완벽하게 보여주고 있습니다 :slight_smile:

@Bcat 이 스니펫을 공유해 주셔서 감사합니다. 그런데 어디에 추가해야 하나요?

PS: 어리석은 질문을 해서 죄송합니다. 저는 코더가 아니고 discourse에 완전히 초보입니다 :slight_smile:

@neounix 님, 답변 감사합니다.

정확히 어떻게 해야 하는지 잘 모르겠습니다 :slight_smile: 시간이 나시면 알려 주실 수 있을까요?

토픽 보기: Installing a theme or theme component

discourse-automatically-open-external-links-in-new-tab.zip (843 Bytes)

preferences/interface의 개인 프로필 설정을 확인해 보셨나요? 보통 개인 프로필에서 새 탭에서 외부 링크 열기 기능이 비활성화되어 있을 때 이런 상황이 발생합니다.

해제되어 있어서 체크를 했습니다. 이제 로그인한 상태에서만 링크가 새 탭에서 열립니다. 인코그니토 탭으로 사이트를 확인하면 여전히 작동하지 않습니다.

완벽하게 잘 작동합니다! 정말 감사합니다 :slight_smile:

관리자가 추가한 링크를 포함하여 모든 외부 링크에 rel="nofollow"를 추가하는 해결책이 있을까요?

몇 달째 이 문제를 해결하지 못해 고생하고 있습니다.

비틀리(bitly)나 기타 사이트(보안 수준이 낮음)의 링크를 사용하여 공유 및 다운로드하는 포럼의 경우, rel="nofollow" 대신 rel="noopener noreferrer"를 사용하는 것을 고려해 보시겠습니까?
noopener noreferrer에 대해 자세히 알아볼 수 있습니다.

noopener noreferrer를 추가하는 것을 고려해 볼 수 있지만, 여전히 nofollow를 함께 추가해야 합니다. 이유는 제가 구글이 해당 링크를 따라가거나 인덱싱하는 것을 원하지 않기 때문입니다. 이 링크들은 제휴 링크이기 때문입니다. 이를 방지하는 데 도움이 되는 것은 오직 nofollow입니다.

links[i].rel = 'nofollow';를 추가하거나 파일: discourse-automatically-open-external-links-in-new-tab.zip (856 바이트)를 사용하세요.