위키화 게시물 컴포넌트

[nathank (Nathan Kershaw)]

간단한 설명

이 테마 컴포넌트를 사용하면 Wiki 게시물(및 공유 편집 게시물)을 더 명확하게 표시할 수 있습니다.

Wiki와 공유 편집은 Discourse의 강력한 기능이지만, 많은 사용자가 이 개념에 익숙하지 않아 UI가 다소 은근하다고 느낍니다. 이 컴포넌트는 Change the style of a wiki post 의 내용을 패키지로 제공하여 이를 명확하게 보여줍니다.

스크린샷

자세한 설명

이 컴포넌트를 설치하면 Wiki 게시물의 배경색을 제어하고, 게시물 오른쪽 위にある 히스토리/편집 아이콘에 텍스트를 추가할 수 있습니다.

이것은 @pacharanero의 discourse-wikified-post-background-color의 포크이며, Change the style of a wiki post 의 내용을 포함하고 @Rhidian의 Personal Message Bubbles 에서 재사용된 코드를 활용했습니다.

설정

Wiki 게시물 배경색

Wiki 게시물의 배경색은 원하는 대로 설정할 수 있습니다. 기본값은 'highlight’이지만, 다음 옵션 중 하나를 사용할 수 있습니다:

1. 스킴 색상이 선택되었을 때 가장 잘 작동합니다(예: primary, secondary, tertiary 등). 이는 자동 다크 모드에 반응하기 때문입니다.
2. CSS에서 인식되는 명명된 색상(예: blue, red, yellow, black 등)
3. HTML 색상 코드(예: #effbfb 등)

공유 편집 배경색

공유 편집 게시물에 동일한 색상 옵션 중 하나를 선택할 수 있습니다( 공유 편집 플러그인 참고)

Wiki 추가 텍스트

이것은 게시물 오른쪽 위 모서리에 작은 녹색 텍스트(기본값: Wiki Post)를 추가합니다:

이것은 동적이며, 최근 편집이 있었다면 히스토리 아이콘과 함께 색상이 변경됩니다(이는 의도치 않은 기쁜 일입니다):

여기에 텍스트가 원치 않는다면, 설정에서 텍스트를 삭제하고 저장하십시오.

공유 편집 추가 텍스트

공유 편집 게시물일 때 표시되는 텍스트입니다. 이는 팔레트의 Danger 색상을 사용합니다.

로드맵

1. 'wiki’로 토픽을 자동 태그하기

제안 사항은 이 게시물에 대한 답글로 남겨주세요.

	저장소	GitHub - nathan-nz/discourse-wikified-posts: This allows you to make Wiki posts more obvious. · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마 초보자?	Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

[pacharanero (Marcus Baw)]

정말 멋진 작업이네요, @nathank
기존의 위키화 된 게시물 배경색 저장소를 아카이브로 이동하고, 훨씬 더 많은 기능을 추가한 이 새로운 버전으로 대체할 계획입니다.

[Zup]

나 말고 이 오류를 받는 사람이 더 있나요?

Error: Undefined variable: "$Shared-edits-hide". on line 42 of common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

[nathank (Nathan Kershaw)]

재현이 되지 않고, 코드에서 눈에 띄는 문제는 발견되지 않습니다. 추가 정보를 제공해 주실 수 있을까요?

[Zup]

No로 공용 편집 숨김이 설정되어 있었기 때문입니다. TC 설정에서 오류가 발생했으며, Yes로 설정한 후 오류가 사라졌습니다.

[nathank (Nathan Kershaw)]

@Zup

Shared edits hide 설정을 No로 해두었기 때문입니다.

최신 Discourse Beta에서 No든 Yes든 동작 원리가 이해되지 않습니다. 혹시 구버전의 Discourse를 사용 중이신가요? 죄송하지만 해당 기능에 버전 관리를 전혀 하지 않았습니다.

[Zup]

미안, 내 실수였어. 좀 오래된 정보가었던 것 같아. 최근 업데이트 이후로 다시 테스트해 보지 않았었거든, 네가 언급해 주길 때까지. 고마워.

[nathank (Nathan Kershaw)]

Shared Edits 게시물을 더 잘 지원하도록 컴포넌트를 방금 업데이트했습니다.

이에는 다음 Shared Edits 변경 사항에 맞게 조정하는 내용이 포함됩니다:

@Johani

몇 가지 변경 사항을 push했습니다.
DEV: improve interaction between wiki and shared-edit posts - Pull Request #31 - discourse/discourse-shared-edits - GitHub

[nathank (Nathan Kershaw)]

기본 배경색을 약간 조정했습니다. @멘션을 쉽게 볼 수 없었기 때문입니다.

또한 공유된 편집 배경색 기본값이 이제 tertiary-very-low입니다.

Colour very low (#4)

[volanar]

훌륭한 컴포넌트입니다. 하지만 이 컴포넌트는 주제 페이지에서만 가시성을 향상시킵니다. 위키 아이콘이 카테고리 페이지, “최근”, “읽지 않은” 등의 주제 목록에도 표시되도록 수정할 수 있을까요?

[nathank (Nathan Kershaw)]

좋은 제안입니다. 그리고 충분히 가능하다고 생각합니다 (PR 환영합니다!).

저는 인스턴스에서 게시물을 Wiki 태그로 붙이는 방식으로 이 문제를 해결하고 있습니다. 물론 반자동 방식입니다 — 고급 검색을 통해 위키 게시물/주제를 식별할 수 있습니다. 사이드바 내비게이션을 통해 쉽게 찾을 수 있다는 부가적인 장점도 있습니다.

이 컴포넌트에서 위키 게시물을 자동으로 태그하는 기능을 어떤 형태로든 포함하면 좋겠다고 생각했습니다 (또는 제안하신 대로). 하지만 아쉽게도 이 정도로는 시간을 들여 시도해볼 만큼 큰 문제가 아니었습니다.

[Canapin (Coin-coin le Canapin)]

@volanar

위키 아이콘이 카테고리 페이지, “최근”, “읽지 않음” 등의 주제 목록에 표시되도록 수정할 수 있을까요?

저는 2021년에 여기에서 이 질문을 한 적이 있습니다: Add an icon in front of wikis in the topic list?

답변은 다음과 같았습니다:

@Johani

위키는 포스트 레벨의 속성이지, 주제 레벨의 속성이 아닙니다. 그래서 주제 목록 항목 모델에 추가되지 않습니다. 태그를 사용하거나, 해당 클래스를 추가하도록 Discourse에 기능 요청을 생성할 수 있습니다.

Contribute > Feature 요청:

Add a specific class for wikis (when first post) at the topic list level

Following the suggestion from @Johani here: To which Johani replied: Unfortunately, wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class. I suppose the vast majority of wikis are first posts, but I understand the post level issue. However, having the possibility of emphasizing wikis on the topic list would be a neat addition and may incite people to visit them and m…

[thoka (Thomas Kalka)]

배경색을 (자동) 다크 모드에 맞게 조정하는 방법에 대한 조언을 구합니다.

현재 배경으로 선택한 밝은 색들은 다크 모드에서 게시글을 읽기 어렵게 만듭니다.

색상 팔레트를 확장하고 색상 계산을 수행하여 위키와 패드의 배경색을 정의할 수 있을까요?

[thoka (Thomas Kalka)]

태그를 사용해 “위키” 주제를 표시할 수 있습니다.
아마 기억이 맞다면, 태그는 CSS로 스타일을 지정할 수 있습니다.
이 경우 태그를 나열하거나 드릴다운으로 탐색할 수 있는 추가적인 이점도 얻을 수 있습니다.

또한, 위키가 포함된 주제에는 플러그인을 통해 자동으로 위키 태그가 추가될 수 있습니다.

[nathank (Nathan Kershaw)]

이것이 제가 Scheme 색상을 추천하는 이유입니다:

@nathank

Scheme 색상(예: primary, secondary, tertiary 등)을 선택하는 것이 가장 잘 작동합니다. 이러한 색상은 자동 다크 모드에 반응하기 때문입니다.

색상에서 벗어나고 싶다면 다크 모드를 처리할 수 있는 지능적인 방법을 찾아야 합니다.

다크 모드 색상도 지정할 수 있는 기능이 있으면 좋겠습니다. 시간이 나면 이 부분을 살펴보겠습니다.

[thoka (Thomas Kalka)]

@nathank

스킴 색상(primary, secondary, tertiary 등)을 선택할 때 가장 잘 작동합니다. 이는 자동 다크 모드에 반응하기 때문입니다.

알겠습니다. 하지만 이 색상들은 배경으로 사용하기에는 너무 강합니다.
그래서 저는 스킴 색상 10%와 배경 90%를 혼합한 것 같은 것을 상상하고 있었습니다. 프론트엔드에서는 SASS(또는 유사한 도구)를 사용할 수 없다고 생각됩니다.
하지만 CSS 마법 이것은 효과가 있을까요?

업데이트: rgba(0, 255, 0, 0.1)은 다크 모드와 라이트 모드 모두에서 꽤 잘 작동합니다.

[Canapin (Coin-coin le Canapin)]

@thoka

프론트엔드에서는 SASS(또는 유사한 것)를 사용할 수 없는 것 같습니다.
하지만 이것 같은 CSS 마법이 작동할까요?

커스텀 테마 섹션에서는 SASS 함수를 사용할 수 있으며, 수정 사항을 저장할 때 컴파일됩니다. 다만 테마 변수나 CSS 변수에는 SASS 함수를 사용할 수 없습니다.
색상 스키마의 색상에 SASS 함수를 사용하려면 해당 SASS 변수를 사용해야 합니다.

작동합니다

body {
    background: darken($secondary, 10%);
}

작동하지 않습니다

body {
    background: darken($my_theme_variable, 10%);
}

작동하지 않습니다

body {
    background: darken(var(--secondary), 10%);
}

종이 위에서는(이론적으로는) 링크에서 설명하는 것이 작동해야 할 것 같습니다.

[nathank (Nathan Kershaw)]

@Canapin

SASS 함수는 테마 커스터마이즈 섹션에서 사용 가능하며, 수정 사항을 저장할 때 컴파일됩니다.

이것이 도움이 될 수도 있습니다. SASS mix() 함수 사용법에 대한 가이드(개인 참고용)입니다:

https://subscription.packtpub.com/book/web-development/9781849694544/4/ch04lvl1sec45/the-mix-function