 |
요약 | 주제와 게시물에 있는 외부 링크에 아이콘 추가 |
 |
저장소 | GitHub - denvergeeks/discourse-external-links-icon · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
디스코ourse 테마를 처음 사용하시나요? | 디스코ourse 테마 사용 입문 가이드 |
이 테마 컴포넌트 설치
기본 SVG(코어에서 Featured Links와 동일한 아이콘)를 사용하여 이 링크 
처럼 표시합니다
라이트 테마와 다크 테마 모두에서 잘 작동합니다. 즉…
이것은 단순히 아이콘을 추가할 뿐입니다. 전체 기능이 포함된 솔루션을 원하시면 External Link Shield – Exit Confirmation & Trust Gating 를 시도해 보세요.
할 일: 설정…
컴포넌트는 다양한 팔레트에서 정상적으로 작동합니다.
하지만 스크린샷은 색상 팔레트에 맞춰 색상이 조정되지 않습니다. 컴포넌트가 설치되지 않은 포럼에서 이 기능을 어떻게 제시하는 것이 좋을까요? 링크를 포함하는 더 큰 스크린샷을 사용하는 것을 제안하고 싶습니다.
Discourse 아이콘 컴포넌트를 사용하라고 제안하려 했으나, 아이콘의 색상을 변경할 수 없습니다:
[example.com]() [wrap=icon id=up-right-from-square][/wrap]
네, 그렇게 생각해요. 그러면 기대할 수 있는 내용을 더 잘 보여줄 수 있을 거예요.
설명/예시 이미지의 이미지를 회색으로 채운 투명한 .webp 파일로 변경했습니다.
대단하네요, 훨씬 더 좋아 보입니다!
안녕하세요, 제 환경에서는 작동하지 않습니다. 아이콘이 모든 링크에 표시되며, 내부 링크에도 표시됩니다.
또 다른 문제는, YouTube 동영상과 같이 직접적인 외부 링크를 가진 제목에서 아이콘이 두 번 표시됩니다:
저도 같은 증상입니다. 내부 링크에도 아이콘이 표시됩니다.
코드를 올바르게 이해했다면, 외부 링크를 판별하기 위해 URL에서 “http*”를 검색하는 것 같습니다. 불행히도 편집기의 링크 도구는 “https:///..”로 시작하는 완전한(절대) URL을 자동으로 사용합니다.
이것이 “내부” 링크에 외부 아이콘이 표시되는 원인이 될 것으로 추측합니다.
코드를 확장하여 “https:///..”를 확인하고 이를 내부로 분류할 수 있을까요?
이 문제를 수정하기 위해 PR을 생성했습니다.
이 PR은 내부 링크(상대 경로 또는 절대 경로)에 대한 링크 아이콘을 숨기고, 제목 링크에서도 이를 숨기도록 합니다.
@Lilly 감사합니다. 이 부분을 병합했습니다.
오래전에 Discourse가 font-family에 font awesome를 사용하던 시절, 순수 CSS로 비슷한 일을 해본 적이 있습니다.
이제는 불가능하지만, 아래 코드로 비슷한 효과를 낼 수 있습니다:
.cooked {
a[href^="http"]:not([href*="www.yourdomain.com"]) {
display: inline-flex;
align-items: center;
&::after {
content: "";
width: 0.8em;
height: 0.8em;
margin-left: 0.2em;
margin-bottom: 0.4em;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
mask-size: contain;
}
}
}
다만, SVG가 하드코딩되어 있습니다.
안녕하세요 
제 테마 컴포넌트에서 이 기능을 사용하는 예시입니다.
제 경우, 이 컴포넌트는 CSS를 통해 아이콘을 동적으로 변경하므로 설정을 직접 지정할 수 있어 설정을 사용했습니다. (링크에 클래스를 추가하는 방식은 특정 상황에서 항상 잘 동작하지는 않습니다.)
다만, 질문자님의 컴포넌트에서는 다음과 같이 현재 호스트명을 동적으로 제외하는 방식이 더 간단할 것 같습니다:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.decorateCookedElement(
(element) => {
const currentHost = window.location.hostname;
const selector = `a[href*='//']:not([href^='/']):not([href*='${currentHost}'])`;
const links = element.querySelectorAll(selector);
links.forEach((link) => {
console.log("External link:", link.href);
});
},
{ id: "external-link", onlyStream: true }
);
});
피드백 감사합니다. 이제 수정되었습니다!
어떤 이유에서인지 링크 위에 마우스를 올리면 외부 아이콘이 사라집니다. 인스펙터로 테스트해 보니 ::after가 사라지는 것을 확인했습니다.
아마도 다른 CSS 코드에 의해 덮어쓰기(overwrite)된 것 같습니다. 제 테스트 인스턴스에서는 호버 시 외부 아이콘이 사라지지 않습니다.