메타 배너 링크를 어떻게 재현할 수 있나요?

개발
1

image
image1612×428 48.8 KB

커스터마이즈, 가이드, 인기 주제, 우리 호스팅 버튼 4개를 어떻게 만들 수 있을까요?

2

Search Banner 테마 컴포넌트에는 두 개의 플러그인 아웃렛이 있습니다. 이 아웃렛을 대상으로 하여 별도의 커스텀 컴포넌트를 구축하여 커스텀 콘텐츠를 삽입할 수 있습니다.

3

search_banner.search_button_text은 무엇인가요?
같은 사진으로 버튼을 만들 수 있나요?

image
image1612×428 48.8 KB

4

감사합니다! 커스터마이징에서 이 코드를 삽입할 옵션을 찾을 수 없었어요.
혹시 방법을 알려주실 수 있을까요? :pray:

5

테마 컴포넌트를 만들겠습니다. :+1:

7

음, 괜찮아요, Don. 배우고 공유하는 게 중요하니까요. 다음부터는 처음부터 우리의 의도를 알리는 것이 좋은 방법일 것 같아요. 공유해 주셔서 감사합니다. :+1:

사실 어제부터 이 작업을 해 왔습니다[1]. 비슷한 것을 만들었지만 아직 게시하지는 않았어요. 이모지, Font Awesome 아이콘, 이미지 URL 중에서 선택할 수 있는 기능과 같은 더 많은 커스터마이징 옵션을 추가하고 싶어요. 버튼별 CSS, 조건부 렌더링 같은 것도요. 이를 위해 JSON 스키마 형식을 많이 탐색하고 테스트해 왔는데 (솔직히 꽤 골치 아픕니다 – 참고로, 스타일링을 개선하기 위한 이 PR은 정말 훌륭할 거예요!). 나중에 제 버전을 GitHub에 조용히 게시할 예정입니다.

  1. image
    image477×499 35.1 KB
    ↩︎

8

성공적으로 만들 수 있었나요? 저도 직접 만들어 봤는데 막혀서 진행이 안 되고 있어요.

9

안녕하세요 @Arkshine, 이 컴포넌트에 대해 새로운 업데이트가 있나요? 저에게도 정말 도움이 될 것 같습니다 :innocent:

10

완전히 잊어버렸네요, 죄송합니다. :smile:

불행히도 설정을 위한 JSON 스키마 형식 곧 폐지될 예정이라, 원래 하려던 방법은 더 이상 작동하지 않습니다(솔직히 말해서, 그걸 통한 커스터마이징은 너무 까다로웠거든요).

Don의 버전을 올리려 했는데, 그의 저장소를 찾을 수가 없네요. :thinking:

가능한 한 빨리 작동하는 버전을 올릴 수 있도록 방법을 찾아보겠습니다. :+1:

11

정말 감사합니다! :pray:t2:

12

@Helga_Razinkova

한 번 시도해 보시겠어요? @Don 과 @manuel 님께 감사드립니다 – 그들의 아이디어를 일부 차용했습니다.

새로운 Objects type for theme setting 기능을 기반으로 하기 때문에 최신 Discourse 버전(3.3)이 필요합니다.

일부 이미지

일반 설정:

image
image616×907 15.9 KB

링크 설정:

image
image1090×1036 34.4 KB

기본 모습 – 테마 색상을 사용합니다.
image

버튼은 별도로 스타일링할 수 있습니다:
image

특정 설정이 필요하시면 알려주세요.
모바일 환경에서 일부 조정이 필요할 수 있습니다. 기본적으로 모바일에서는 버튼이 줄바꿈되어 한 열로 표시됩니다. 피드백을 기다리고 있습니다.

모든 것이 문제없으면 나중에 배포하겠습니다. :+1:

13

@Arkshine 지연된 점 정말 죄송합니다. 드디어 이 아이디어를 살펴봤습니다 :slight_smile:

버튼을 추가할 수 있었습니다. 이 플러그인을 만들어 주셔서 정말 정말 감사합니다!! 이제 남은 문제는 검색 바로 바로 뒤에 버튼을 배치하는 것인데, 해결책을 찾기를 희망합니다.

한 가지 질문이 있습니다: 이모지 필드를 필수 항목이 아닌 선택 항목으로 만들 수 있을까요?

다시 한번 감사합니다!

14

안녕하세요, 컴포넌트를 테스트해 주셔서 감사합니다!

이모지를 선택 입력으로 변경하도록 업데이트했습니다. :+1:

Banner Search 컴포넌트를 사용 중이시며 버튼을 아래에 표시하고 싶으신 건가요?
그렇다면 plugin outlets 설정에서 below-site-header로 설정할 수 있습니다.
다만, 간격을 조정하기 위해 CSS를 일부 수정해야 할 수 있습니다.

추가 도움이 필요하시면 알려주세요. :slight_smile:

15

안녕하세요, 헬가가 이 플러그인 아웃렛을 찾고 있는 것 같습니다. :slightly_smiling_face:

16

맞아요!

어떤 이유에선지 Plugin Outlet 컴포넌트가 그들을 표시할 거라고 생각했어요 (컴포넌트가 어떻게 그들을 생성하는지 잊어버렸었거든요). 알려주셔서 감사합니다. :+1:

컴포넌트 아웃렛과 함께 작동하도록 설정을 조정하고, 간격을 더 쉽게 사용자 지정할 수 있도록 해야 할 것 같습니다. 곧 업데이트해 드리겠습니다, 헬가.

17

멋지네요, 도움 주셔서 정말 감사합니다, @Arkshine @Don! :fire: :fire:

18

기다리게 해서 죄송합니다! 컴포넌트를 업데이트했습니다. 몇 가지 새로운 설정을 추가했습니다.

사용자님의 경우, plugin_outlet 설정에서 search-banner-below-input을(를) 사용하시길 원하시죠.
이제 바로 아래에 표시됩니다:

image
image1206×356 24.5 KB

원하시면 이제 컨테이너의 최대 폭을 설정할 수 있습니다:

image
image654×303 14.2 KB

`
사용한 설정은 다음과 같습니다:

image
image740×128 2.68 KB

The image shows a user interface element labeled "buttons wrapper max width" with a slider control and a number input field allowing the user to set a maximum width of 600 pixels, along with a "reset" button. (Captioned by AI)

모바일 뷰를 위한 설정 등 다른 설정들도 있습니다.

잘 작동하는지 알려주세요. :+1:

19

와, @Arkshine, 정말 대단하시네요!! 정말 감사드립니다. 이제 모든 게 완벽해 보입니다! :heart_eyes:

20

이 테마 컴포넌트의 설정이 이렇게 정갈하게 배치되어 있다니, @Arkshine님 정말 멋지네요! 늘 그렇듯이, 커뮤니티의 초보 컴포넌트 개발자들에게 또 하나의 훌륭한 출발점과 템플릿을 제공해 주셨습니다!

친구여, 정말 감사드립니다!

21

훌륭한 테마 컴포넌트네요 — 그리고 이 주제에 대해 별도의 토론을 열어도 좋을 것 같습니다!

이 목적을 위해 이 주제를 다시 포맷할까요? 아니면 새 주제를 만들까요?