Custom Header Links (icons)

안녕하세요, 이 컴포넌트는 잘 작동하는데, discourse(동일)에서 생성된 링크에 활성(active) 클래스를 어떻게 추가할 수 있을까요? 기본 아이콘 항목에는 활성 클래스가 적용되지만, 컴포넌트에서 생성된 항목에는 적용되지 않아요.

1개의 좋아요

이 주제는 다소 혼란스럽습니다. 원포스터(OP)가 위키로 업데이트되었지만, 대부분의 토론은 몇 년 전 버전의 컴포넌트에 대해 언급하고 있기 때문입니다.

주제와 OP는 텍스트 링크 외에도 그래픽 아이콘을 지원한다고 시사합니다. 그러나 Object Settings Editor에는 아이콘을 정의하는 필드가 없습니다. 저는 수동으로 SVG 아이콘을 추가해 보았습니다:

"icon": "https://foo.svg",

그래픽 버튼이 표시되지 않으며, 커스텀 링크의 다른 매개변수에 기반한 텍스트 링크 버튼이 표시됩니다. 이 게시물과 OP 사이의 이전 토론에 따르면, SVG 아이콘을 활성화하기 위해 어딘가에 무언가를 추가해야 할 수 있다는 것을 시사합니다. 하지만 무엇을, 어디에 추가해야 하는가요?

안녕하세요,

이 Theme 컴포넌트를 말씀하시는 건가요?

이 Custom Header Links (icons) Theme 컴포넌션에는 Object 설정이 없습니다.

아이콘이 포함된 Header Links가 필요하시다면 이 컴포넌션을 사용하시는 것을 추천합니다. :+1:

2개의 좋아요

이 컴포넌트를 새로운 객체 설정으로 마이그레이션했다는 점을 참고해 주세요:

이제 설정을 수정하기가 훨씬 쉬워야 합니다.

2개의 좋아요

안녕하세요, 커스텀 헤더 링크(Custom Header Links) 컴포넌트를 업데이트하려고 하는데 다음과 같은 오류가 발생합니다: “오류가 발생했습니다: 요청에 잘못된 매개변수가 공급되었습니다: JSON 포인터 '/3/url’의 속성은 유효한 URL이어야 합니다.”

네, 원인이 될 수 있는 부분이 보입니다… 스키마에 url: true라고 되어 있고, 실제로 상대 URL을 허용하므로 이는 단순히 문자열로 처리되어 잘못된 URL로 간주됩니다.

확인해 보겠습니다.

1개의 좋아요

부탁인데, 컴포넌트 설정 보여줄 수 있을까요? 원하시면 DM으로 보내셔도 됩니다.

지금은 집에 없습니다. 가능한 한 빨리 처리하겠습니다.

1개의 좋아요

패트릭과 개인 메시지로 문제를 직접 해결했습니다. 같은 문제를 겪고 계신 분들을 위해 말씀드리면, 이 새로운 설정에서는 URL 검증이 더 엄격해졌습니다.

설정에 입력하는 모든 URL은 올바르게 인코딩된 URL이어야 하며, 가장 간단한 해결 방법은 브라우저 콘솔에서 encodeURI를 사용하는 것입니다:

예를 들어 이 URL을 생각해 보겠습니다: “/some-url?title=Foo bar:baz”

encodeURI("/some-url?title=Foo bar:baz")

다음과 같은 결과가 나옵니다:

/some-url?title=Foo%20bar:baz
5개의 좋아요

안녕하세요, 아이콘 순서를 변경할 수 있는 방법은 없지만, 컴포넌트의 “Editor” 버튼을 클릭하여 스크립트를 편집하고 코드 줄의 순서를 변경하면 됩니다:

1개의 좋아요

3.5.0.beta2-dev (137e8a0fa0)을 실행 중입니다. 14개의 커밋이 뒤처져 있습니다.

업데이트를 시도하면 다음 오류가 발생합니다:

An error occurred: You supplied invalid parameters to the request: The property at JSON Pointer '/1/title' must be present. The property at JSON Pointer '/1/icon' must be present. The property at JSON Pointer '/1/url' must be present.

이를 수정할 방법이 있을까요?

설정 편집기를 클릭하여 설정을 알려줄 수 있을까요?

비공개라면 저에게 DM을 보내주세요.

1개의 좋아요

전해 드렸습니다. 감사합니다!

1개의 좋아요

추가 질문입니다. 예상대로 Wingtip의 마이그레이션이 여러 이유로 실패했습니다. 그에게 올바른 설정을 전달했습니다. 마이그레이션이 어떤 조건에서 실패할 수 있는지 궁금합니다. :thinking:

수정:

사실 처음에는 작동하지 않아 다음과 같이 제안했습니다:

또한 어떤 이유에서인지 유효한 설정을 받아들이지 않았습니다. 설정을 초기화한 뒤 업데이트를 하고, 다시 올바른 설정으로 구성해야 했습니다. 큰 문제는 아니었습니다. 필요한 설정이 많지 않았거든요. 다시 한번 도움 주셔서 감사합니다!

1개의 좋아요

Introducing Font Awesome 5 and SVG icons

안녕하세요, 커스텀 svg 아이콘을 렌더링하지 못하고 있으며, 제가 어디를 잘못하고 있는지 파악하는 데 도움이 필요합니다.

기본 테마에 svg 파일을 업로드했습니다:

그리고 이 테마 컴포넌트에 다음을 추가했습니다:

image

image

icons-sprite, fa-icons-sprite, fab-icons-sprite를 모두 사용해 보았지만 svg가 렌더링되지 않습니다. 플레이스홀더는 있고, 클릭도 가능하며 링크도 작동하지만, 사각형 안에 아이콘이 없습니다.

인스펙터에는 이것이 표시됩니다:
<svg class="fa d-icon d-icon-fab-icons-sprite svg-icon svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#fab-icons-sprite"></use></svg>

새로운 Development 주제로 이동해야 한다고 생각합니다.

@icaria36
Three_asterisks의 내용을 공유해 주시겠습니까?

스프라이트 시트는 특정 형식을 따릅니다.

이후 my-theme-icon-1, my-theme-icon-2를 식별자로 사용할 수 있습니다.

자세한 정보는 Replace Discourse's default SVG icons with custom icons in a theme 에서 확인할 수 있습니다.

2개의 좋아요

@Arkshine 정말 감사합니다! 해당 페이지에 도착은 했었지만, apparently 너무 빨리 스크롤을 내린 것 같습니다. 아니요, 아직 SVG 파일로 그 숙제를 해보지 않았습니다. 한번 시도해 보겠습니다. (SVG 파일에서 텍스트를 편집하는 건 처음이라요. 처음이라는 건 늘 있잖아요) :sweat_smile: 그리고 그게 전부이길 바랍니다. :folded_hands:

1개의 좋아요

이 컴포넌트를 사용하면 Facebook, Instagram, TikTok 아이콘은 정상적으로 로드되지만, 아무리 시도해봐도 기존 Twitter 아이콘도, 새로운 X 아이콘도 로드되지 않습니다.

어떤 팁이나 해결 방법이 있을까요?

설정을 공유해 주시면 도움이 될 수 있습니다. 설정이 없으면 도움을 드리기 어렵습니다.

저에게는 잘 작동합니다.
image

1개의 좋아요