배너 추천 링크

[Arkshine]

	요약	Banner Featured Links를 사용하면 링크 배너를 만들 수 있습니다.
	미리보기	Theme Creator
	저장소	GitHub - Arkshine/discourse-banner-featured-links · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

요약

Banner Featured Links를 사용하면 링크 배너를 만들 수 있습니다.
다양한 사용자 지정 옵션을 제공합니다.

이 기능은 훌륭한 “Meta Branded” Discourse 테마에서 영감을 받아 만들어졌습니다.

기능

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

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

plugin outlet 설정을 통해 링크를 다양한 위치에 배치할 수 있습니다.
일반적인 위치 목록은 설명에 제공됩니다.

플러그인 아웃렛의 위치를 확인하려면 Developer Toolbar 테마 컴포넌트 사용을 권장합니다!

예를 들어, Meta Brand 테마를 모방하려면 search-banner-below-input 아웃렛을 사용하십시오. Search Banner 컴포넌트가 설치되어 있다고 가정합니다.

세부 정보

현재 스타일은 다음 설정으로 달성할 수 있습니다:

자신의 스타일을 시도해 보시길 권장합니다!

설정

일반

이름	설명
links	헤더에 표시할 텍스트 링크.
show_for_members	로그인한 사용자에게 링크 표시.
show_for_anon	익명 사용자에게 링크 표시.
display_on_mobile	모바일 기기에서 링크 표시.
display_on_desktop	데스크톱 컴퓨터에서 링크 표시.
display on homepage	홈페이지에 링크 표시.
url must contain	배너를 표시해야 하는 경로를 입력하십시오. 와일드카드로 경로의 끝에 *를 추가하십시오.
plugin outlet	링크를 표시할 위치. 일반적인 위치 above-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-stream Search Banner 컴포넌트: search-banner-below-headlinesearch-banner-below-input

links 설정:

이름	설명
아이콘	링크에 표시할 FontAwesome 아이콘 또는 이모지. 단축키 Windows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space
제목	링크의 제목.
URL	연결할 URL.
대상	연결된 문서 열기: _blank: 새 창 또는 탭에서 (기본값) _self: 클릭한 것과 동일한 프레임에서 _parent: 부모 프레임에서 _top: 창 전체 본문에서.

버튼별로도 스타일링할 수 있습니다. 이는 전역 스타일을 덮어씁니다.

이름	설명
너비	버튼의 너비.
글꼴	버튼의 글꼴.
라운딩	버튼에 적용할 라운드링 정도.
배경색	버튼의 배경색.
배경색 호버`	마우스를 올렸을 때 버튼의 배경색.
색상`	버튼의 텍스트 색상.
색상 호버`	마우스를 올렸을 때 버튼의 텍스트 색상.
테두리	버튼의 테두리.
테두리 호버	마우스를 올렸을 때 버튼의 테두리.
그림자	버튼의 그림자.
CSS 클래스명	버튼에 적용할 사용자 지정 CSS 클래스. 버튼을 다르게 스타일링하고 설정이 충분하지 않은 경우 유용합니다. .banner-featured-links__link.your-classname {}로 대상 지정할 수 있습니다.

전역 스타일링

링크의 기본 간격과 모습을 사용자 지정합니다.
각 링크별로 버튼 스타일링을 덮어쓸 수 있습니다.

버튼 래퍼 스타일링

링크의 컨테이너를 사용자 지정합니다.

이름	설명
buttons wrapper max width	버튼 래퍼의 최대 너비.
buttons wrapper margin	버튼 래퍼의 여백.
mobile buttons wrapper max width	모바일에서 버튼 래퍼의 최대 너비.
mobile buttons wrapper margin	모바일에서 버튼 래퍼의 여백.

버튼 간격 및 텍스트 글꼴

버튼의 간격과 텍스트의 글꼴 크기를 사용자 지정합니다.

이름	설명
buttons justify	링크 사이와 주위에 공간을 분배하는 방법.
buttons gap	버튼 사이의 간격.
buttons font	버튼의 글꼴.
mobile buttons justify	모바일에서 링크 사이와 주위에 공간을 분배하는 방법.
mobile buttons gap	모바일에서 버튼 사이의 간격.
mobile buttons direction	모바일에서 버튼의 방향.
mobile buttons font	모바일에서 버튼의 글꼴.

버튼 스타일링

버튼의 기본 모습을 사용자 지정합니다.

이름	설명
button width	버튼의 너비.
button padding	버튼의 패딩.
button rounding	버튼에 적용할 라운드링 정도.
button background	버튼의 배경색.
button background hover	마우스를 올렸을 때 버튼의 배경색.
button color	버튼의 텍스트 색상.
button colo hover	마우스를 올렸을 때 버튼의 텍스트 색상.
button border	버튼의 테두리.
button border hover	마우스를 올렸을 때 버튼의 테두리.
button shadow	버튼의 그림자.

고급 사용자 지정

다음 CSS를 사용하여 추가로 사용자 지정할 수 있습니다:

.banner-featured-links {
  &__wrapper {

  }

  &__wrapper-links {

  }

  &__link {

  }
}

버튼별로 사용자 지정을 제공하면 CSS Classname 설정에서 클래스 이름을 제공할 수 있습니다.

그런 다음, 다음과 같이 대상 지정할 수 있습니다:

.banner-featured-links {
  &__link.myclass {

  }
}

유용한 링크

• Discourse 코어 CSS 변수: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub

크레딧

• 훌륭한 Meta Branded 테마에서 영감을 받아 아이디어를 제공한 Discourse.
• Don과 nolo – 초기 버전을 만들었습니다. 그들의 아이디어 중 일부를 채택했습니다.

[Jagster (Jakke Flemming)]

One meta comment to improve an otherwise good quality introduction of a component: a screenshot from a mobile. It would save time when choosing between usefulness, pros and cons.

[NateDhaliwal]

Was this inspired the Meta Branded theme?

[Moin]

I think so

@Arkshine

It’s a feature inspired by the fantastic “Meta Branded” Discourse theme.

[NateDhaliwal]

Must’ve skimmed it too much - I was looking at the ‘Credits’ section

[Arkshine]

No worries. I’ve updated the credits section to make it clearer. Thanks!

[Arkshine]

I pushed a small fix if you installed the component the first time.
My last commit renamed a setting, but the default values were not updated.
Thanks to @manuel for reporting the issue!

[Helga_Razinkova (Helga)]

안녕하세요 @Arkshine, 이 플러그인을 만들어 주셔서 정말 감사합니다!

얼마 전부터 사용 중이었는데, 오늘 버튼을 하나 더 추가했는데 갑자기 전체 포럼이 깨져서 지금这个样子입니다:

이런 일이 왜 생기는지 혹시 아시나요?

[Arkshine]

@Helga_Razinkova

오래 사용했는데, 오늘 버튼 하나를 추가한 뒤로 포럼 전체가 망가져서 지금은 이렇게 보입니다:

안녕하세요, 이 버튼을 제거하면 깨지지 않는다는 뜻인가요?

[Helga_Razinkova (Helga)]

글쎄, 결국 Discourse 팀에 연락해서 플러그인을 비활성화해야 했어요. 그래서 지금은 모든 게 정상으로 돌아왔죠.

이제 그 이론을 테스트하려고 기존 설정을 복원하는 게 좀 망설여지네요

[Arkshine]

아, 알겠습니다. 걱정 마세요. 불편을 드려서 죄송합니다! 이 문제를 겪으신 분은 처음이네요.
버튼에 어떤 값을 입력하셨는지 기억하시나요? 재현할 수만 있다면 큰 도움이 될 거예요!

[Helga_Razinkova (Helga)]

네, 도움 주셔서 정말 감사합니다!

이게 정말 이상하네요. 얼마 전에도 변경 사항을 넣었는데 그때는 잘 작동했거든요.

버튼 중 하나를 제거하고 새로운 버튼을 추가했는데:

• 제목: Monthly Recaps

• URL: https://community.elfsight.com/c/announcements/release-notes/133?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=monthly-recaps

• 대상: self

• 호버 색상: #197bff

도움이 된다면 여기 로그를 첨부합니다

[{“url”:“Topics tagged new-widget Widgets”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“Topics tagged In-Progress Progress”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“CSS Codes - Elfsight Community Codes”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“Ask the Community - Elfsight Community Recaps”,“target”:“_self”},{“icon”:“”,“text”:"Join our Champion Program! ",“url”:“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”}]

이전: [{“url”=>“Topics tagged new-widget”, “icon”=>“”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Topics tagged In-Progress”, “icon”=>“”, “text”=>“In Progress”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“CSS Codes - Elfsight Community”, “icon”=>“”, “text”=>“CSS Codes”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Ask the Community - Elfsight Community”, “icon”=>“”, “text”=>“Support”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”, “icon”=>“”, “text”=>“Join our Champion Program! “, “target”=>”_self”}]

[Arkshine]

@Helga_Razinkova 님의 PM 도움을 통해 문제를 재현할 수 있었습니다.
수정 사항을 푸시했습니다 .

FIX: issue with missing icon from the settings (#3)

간단히 말하면, 해당 컴포넌트는 설정 편집기를 통해 설정이 업데이트되는 것을 예상하지 못했고, icon 필드가 누락되어 오류가 발생했습니다.

[nathank (Nathan Kershaw)]

This is brilliant! It is so comprehensive and customisable; you seem to have thought of pretty much everything.

I’ve noticed a minor bug where the icons aren’t visible at times.

This is what my links look like:

This is what happens when you:

1. Use Chrome (haven’t tried other browsers sorry)
2. Navigate away from a page with the Banner Featured Links
3. Return to the page using the browser ‘Back’ button

You can demonstrate this yourself on ehealthforum.nz

[Arkshine]

Thanks Nathan! I’ve pushed a fix. Let me know if it still happens!

[nathank (Nathan Kershaw)]

Wonderful!!! All fixed.

Got another minor (but disconcerting) UX bug:

The text on the buttons is still captured by the :visited pseudo class, meaning that the text color behaves strangely on hover once each link has been visited.

This is non-hover:

This is hover before visiting (both icon and text change)

This is hover after visiting (note that the icon changes but not the text)

[Arkshine]

@nathank Can you try to update and see if it’s better?

[nathank (Nathan Kershaw)]

That was with an updated instance. There was one small PR on the Search Banner, but none on this TC to apply. Regardless, I did a rebuild. Still there!

It doesn’t show in incognito, I’m guessing because it doesn’t save my visted status.

[MAR (IOD)]

@Arkshine

GitHub - Arkshine/discourse-banner-featured-links

이것은 커뮤니티 페이지 상단에 워드프레스로 링크되는 버튼과 함께 AIR 테마와 호환되나요?

[long]

이 사이트처럼 검색창 아래에 이 요소들을 배치하려고 'search-banner-below-input’을 "플러그인 아웃렛"으로 지정해 보았습니다. AI와 여러 번 확인해 보니, 검색 기능이 확장 기능이 아닌 코어 기능이 되었기 때문에 해당 위치가 작동하지 않는다고 설명해 주었습니다. 이것이 맞는지 궁금합니다.