배너 추천 링크

[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)]

Hi @Arkshine, thanks a lot for this plugin!

I’ve been using it for a while, but after adding another button today it broke the entire forum so it looks like this now:

Do you happen to know why this could happen?

[Arkshine]

@Helga_Razinkova

I’ve been using it for a while, but after adding another button today it broke the entire forum so it looks like this now:

Hey, does that mean if you remove this button, it doesn’t break?

[Helga_Razinkova (Helga)]

Well, I had to contact the Discourse team to disable the plugin, so everything’s now back to normal, yeah.

Now I’m kind of hesitant to restore the old settings to test the theory

[Arkshine]

I understand, no worries. Sorry about that! You’re the first to have this issue.
Do you still remember what values you entered for the button? If I can reproduce it, that would be helpful!

[Helga_Razinkova (Helga)]

Sure, thanks a lot for your help!

This is really weird, cuz I made changes not so long ago and it worked just fine.

I removed one of the buttons and added the new one:

• Title: 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

• Target: self

• Color Hover: #197bff

Here are the logs, if it helps

[{“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”}]

Previous: [{“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]

Thanks to @Helga_Razinkova’s help in PM, I was able to reproduce the issue.
I pushed a fix .

https://github.com/Arkshine/discourse-banner-featured-links/pull/3

In short, the component was not expecting the settings to be updated through Settings Editor and with a missing icon field, an error happened.

[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와 여러 번 확인해 보니, 검색 기능이 확장 기능이 아닌 코어 기능이 되었기 때문에 해당 위치가 작동하지 않는다고 설명해 주었습니다. 이것이 맞는지 궁금합니다.