 |
요약 | 사이트에 진행률 표시줄 추가 |
 |
미리보기 | [todo] |
 |
저장소 | https://github.com/Canapin/Discourse-progress-bar |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
Discourse 테마 초보입니까? | Discourse 테마 사용자를 위한 입문 가이드 |
이 테마 컴포넌트 설치
Discourse Progress Bar
설명
이 컴포넌트는 사이트의 사용 가능한 모든 아웃렛(outlet)에 진행률 표시줄을 추가합니다.
/admin/theme/[theme_component_ID]/setting 경로에 페이로드 {"name":"current_value","value":"[yourNewValue]"}를 사용하여 진행률 표시줄 값을 자동으로 업데이트하는 스크립트와 함께 사용하는 것이 가장 좋습니다.
진행률 표시줄은 다음 아웃렛에 맞게 최적화되어 있습니다:
above-main-containerabove-site-headerbefore-header-panelbelow-site-headerbefore-sidebar-sections
사용 사례
이 컴포넌트는 커뮤니티 펀딩 기반 포럼에서 기부 진행 상황을 공개적으로 표시하기 위해 개발되었습니다.
사용자 정의 스크립트는 Ko-fi의 웹훅을 사용하여 각 기부 시 진행률 표시줄을 동적으로 업데이트했습니다.
진행률 표시줄의 존재는 커뮤니티가 기부에 참여하도록 하는 매우 큰 
동기가 되었습니다.
이전에는 고정된 주제만 사용했으며, 기부 목표 달성에 수개월이 걸렸습니다.
진행률 표시줄 도입 이후, 지난 몇 년간 기부 목표가 며칠 만에 달성되고 있습니다! 
물론 이 진행률 표시줄은 다른 용도로도 사용할 수 있습니다. 여러분이 어떤 용도로 사용하시는지 공유해 주세요!
스크린샷
데스크톱
above-main-container
before-sidebar-sections
above-site-header
before-header-panel (데스크톱 전용)
below-site-header
모바일
above-main-container 및 below-site-header
before-sidebar-sections
above-site-header
설정
| 설정 | 설명 |
|---|---|
| content_before | 진행률 표시줄 위에 표시되는 텍스트 (HTML 허용). 기본값: <strong>기부 진행률</strong> |
| content_after | 진행률 표시줄 아래에 표시되는 텍스트 (HTML 허용). 기본값: 비어 있음 |
| progress_bar_width | 진행률 표시줄 래퍼의 너비. 기본값: 50% |
| progress_bar_height | 진행률 표시줄의 높이. 기본값: 10px |
| max_value | 진행률 표시줄의 최대 값. 기본값: 300 |
| current_value | 진행률 표시줄의 현재 값. 기본값: 150 |
| value_display | 진행률 표시줄 옆에 표시되는 값 형식. 사용 가능한 플레이스홀더: {current}, {max}, {percentage}. 예시:{percentage}%는 33%로 표시됩니다.{current} of {max} rubber ducks는 9 of 15 rubber ducks로 표시됩니다. 기본값: {percentage}% |
| hide_when_full | 진행률 표시줄이 가득 찼을 때 숨기기. 기본값: false |
| outlet_name | 진행률 표시줄이 표시되는 사이트 위치. 권장 아웃렛: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. 기본값: above-main-container |
| display_on_mobile | 모바일 기기에서 진행률 표시줄 표시. 기본값: true |
| display_on_homepage | 홈페이지에서 진행률 표시줄 표시. 기본값: true |
| url_must_contain | 진행률 표시줄이 표시되는 URL. 기본값: /latest|/categories|/new|/unread|/top*|/tag/*|/tags/*|/c/*|/t/* |
| progress_bar_color | 유효한 CSS 배경 값. 예시:#FC0FC0rgb(252,15,192)var(--tertiary)linear-gradient(0deg, white 0%, var(--tertiary) 100%)참고: 비어 있으면 빨간색(0%)에서 녹색(100%)으로 변화하는 동적 색상이 사용됩니다. 기본값: var(--tertiary) |
감사의 말
일반적인 코드 도움과 조언을 주신 @Arkshine 님께 감사드립니다 
(다만, 여러 사이드바를 추가하더라도 기존 설정이 깨지지 않아야 해요)