환영 링크 배너

커스터마이징 테마 컴포넌트
,
132

몇 달간 테스트를 진행 중입니다…(왜 그러냐고 묻지 마세요).

다시 확인해 보니, 업데이트 이후로 웰컴 바가 사용자가 로그아웃 상태일 때만 표시되는 것 같습니다.

로그인 상태와 관계없이 모든 사용자에게 바가 표시되도록 하는 방법이 있을까요?

감사합니다

Martyn

1개의 좋아요
133

조금 테스트해 봤는데 해당 문제를 재현할 수 없네요. 혹시 모서리의 x를 클릭해서 배너를 닫았나요? 그렇다면 다시 보기 위해 브라우저의 localStorage를 지워야 합니다.

3개의 좋아요
134

좋은 지적이에요 — 한번 확인해볼게요
감사합니다

135

로컬스토리지도 지워봤고, 브라우저 데이터도 지워봤고, Edge 브라우저에서도 시도해 봤는데 (몇 주 동안 내 몸을 깨끗이 씻어야 할 것 같네요!) … 그래도 여전히 안 됩니다 :frowning:

136

max trust level와 hide for staff 설정을 어떻게 구성하셨나요?
테스트용으로 새로 생성한 사용자로 시도해 보셨나요?

3개의 좋아요
137

등록된 사용자와 미등록된 사용자에게 서로 다른 배너를 표시하고 싶거나, 미등록된 사용자에게 배너의 모든 링크를 표시하지 않도록 하고 싶습니다. 이것이 가능한가요?

1개의 좋아요
138

@Aurora

한 가지 방법은 로그인한 사용자를 위한 링크와 로그인하지 않은 사용자를 위한 링크를 각각 생성하는 것입니다(순서대로 배치하여 두 개의 링크 그룹을 만듭니다).

그 다음 CSS를 사용하여 한 그룹을 숨기면 됩니다.
사용할 수 있는 CSS anon 클래스가 있습니다.

예를 들어, 로그인한 사용자를 위한 링크가 2개, 로그인하지 않은 사용자를 위한 링크가 3개 있다고 가정해 보겠습니다:

  • 로그인 링크 1
  • 로그인 링크 2
  • 비로그인 링크 1
  • 비로그인 링크 2
  • 비로그인 링크 3

CSS에서는 다음과 같이 처리할 수 있습니다:

/* 비로그인 사용자: 처음 두 개의 링크를 숨깁니다 */
html.anon .featured-banner-link > div:nth-child(-n+2) {
    display: none !important;
}

/* 로그인 사용자: 마지막 세 개의 링크를 숨깁니다 */
html:not(.anon) .featured-banner-link > div:nth-last-child(-n+3) {
    display: none !important;
}

이렇게 하면 되시겠습니까?

5개의 좋아요
139

네! 정말 감사합니다! 정말 도움이 됩니다!

3개의 좋아요
140

링크 영역의 아이콘 필드에서 원하는 아이콘을 더 쉽게 찾을 수 있도록 자동완성을 적용할 수는 없을까요?

그렇지 않다면, 적어도 FontAwesome 웹사이트에 대한 직접 링크를 포함하면 해당 아이콘 제공사가 무엇인지 더 명확해지고, 사용자를 원천으로 바로 연결해 줄 수 있을 것입니다.

예를 들어, 컴포넌트를 다운로드하여 설치한 후 링크를 생성할 때 이 토픽으로 돌아가서 다시 읽어봐야만 그것이 FontAwesome임을 알 수 있었습니다. 아이콘을 더 빠르고 쉽게 추가할 수 있도록 하는 제안입니다.

수정: 그들의 웹사이트에서 이름을 사용했지만 아이콘이 추가되지 않습니다:

image
image440×115 2.45 KB

예를 들어 이 아이콘:

image

무료로 사용 가능한 것으로 보입니다:

image
image158×161 1.37 KB

그러면 우리는 어떤 아이콘을 사용해야 하나요?

이 토픽의 요약(Summary)에도 문제가 있는 것 같았습니다. 요약에는 Welcome Link Banner는 사용자 정의 텍스트와 1~4개의 링크를 추가할 수 있는 간단한 배너입니다라고 되어 있지만, 실제로는 더 많은 링크를 추가할 수 있습니다. 저는 6개까지 추가할 수 있었고, 계속 클릭하면 더 많은 링크가 추가되었습니다.

4개가 목표라면, 4번째 링크를 추가한 후 + banner link 버튼이 사라지거나 회색으로 비활성화되는 것이 더 좋을 것 같습니다.

1개의 좋아요
141

편리할 것 같다는 데 동의합니다. 다만 이는 이 TC(테마 컴포넌트)에만 국한된 문제는 아닙니다. 코어/플러그인과 비교할 때 TC에서는 사용할 수 없는 입력 유형이 몇 가지 있습니다.

설명을 개선하기 위해 PR을 보내볼 수 있는지 확인해 보겠습니다.

디스코스가 기본적으로 포함하지 않는 아이콘은 svg_icons 설정에 추가해야 할 수도 있습니다

이것이 당신의 문제일 것입니다.

네, 원하는 만큼 추가할 수 있습니다. 제한이 없습니다.
다만, 이는 1~4개의 링크로 사용할 때 가장 잘 작동하도록 설계되었음을 의미합니다.

2개의 좋아요
142

감사합니다

아, 사용 가능한 아이콘을 모두 로드하지 않는다는 것을 몰랐습니다. FA 웹사이트에서 직접 읽어오는 줄 알았거든요. 로드되지 않던 아이콘을 추가했는데 이제 잘 보입니다. 정말 감사합니다.
사용 가능한 아이콘이 어떤 것들이 있는지 어떻게 확인할 수 있을까요? 목록이 있는 건가요, 아니면 그냥 추가해 보고 안 나오면 다시 추가하는 식인가요?

아, 그렇군요. 그러면 문구의 문제인 것 같습니다. 아마 이런 식으로 표현하면 어떨까요?
Welcome Link Banner는 커스텀 텍스트와 링크를 추가할 수 있는 간단한 배너입니다. (권장: 최대 4개 링크) 또는 비슷한 내용으로요.

도와주셔서 정말 감사합니다. 이제 아이콘이 잘 보이는 것 같아서 기쁩니다! :slight_smile:

2개의 좋아요
143

네, 그게 가장 쉬운 방법입니다.

2개의 좋아요
144

“Welcome Link Banner” 테마 업데이트로 인해 SCSS 컴파일 오류 및 사이트 충돌 발생

안녕하세요,

최근 Discourse 포럼에서 “Welcome Link Banner” 테마를 업데이트하는 중 심각한 문제를 겪었습니다.

:stop_sign: 문제 요약:

  • 테마 업데이트 직후 사이트가 즉시 충돌했습니다.
  • 안전 모드(/safe-mode)에도 접근할 수 없었습니다.
  • 기록된 오류는 다음과 같습니다:
CssSyntaxError: Missed semicolon in common.scss (MiniRacer::RuntimeError)
  • 이 SCSS 오류로 인해 Discourse가 에셋을 컴파일하지 못하여 프론트엔드가 완전히 실패했습니다.

:magnifying_glass_tilted_left: 근본 원인:

  • “Welcome Link Banner” 테마 내부의 업데이트된 common.scss 파일에 구문 오류(누락된 ; 세미콜론)가 있었습니다.
  • 그 결과 에셋 컴파일이 중단되어 Discourse가 기본 UI조차 제공할 수 없게 되었습니다.

:hammer_and_wrench: 해결 방법:

웹 인터페이스(안전 모드 포함)에 접근할 수 없었기 때문에 수동으로 수정해야 했습니다:

  1. 서버에 SSH로 접속합니다.

  2. 앱 컨테이너에 진입합니다:

    ./launcher enter app

  3. Rails 콘솔을 실행합니다:

    RAILS_ENV=production rails c

  4. 오류가 발생한 테마를 비활성화합니다:

    Theme.where(name: "Welcome Link Banner").update_all(enabled: false)

  5. Rails 콘솔을 종료합니다.

  6. 모든 컴파일된 에셋을 정리합니다:

    RAILS_ENV=production rake assets:clobber

  7. 앱을 다시 빌드합니다:

    ./launcher rebuild app

이 단계들을 수행한 후 포럼이 다시 온라인으로 복구되었습니다.

:light_bulb: 제안:

  • 테마 업로드/업데이트 시, 테마를 프로덕션 사이트에 적용하기 전에 SCSS 구문 검사를 추가로 수행하는 것이 좋습니다.
  • 이를 통해 사소한 CSS 실수로 인한 전체 사이트 충돌을 방지할 수 있습니다.
1개의 좋아요
145

이상하네요. 이 컴포넌트의 CSS에서 누락된 세미콜론이 없습니다.
히스토리에서도 변경 사항이 보이지 않네요. :thinking:

참고로, /safe-mode가 작동하지 않으면 URL에 ?safe_mode=no_themes를 직접 추가해 보세요.

3개의 좋아요
146

음, 저도 확인해 봤는데 이 문제를 찾지 못했어요. 해당 컴포넌트가 커스터마이즈된 건가요? 아니면 업데이트 과정에서 뭔가 문제가 생긴 건 아닌가요?

1개의 좋아요
147

제가 개발 중인 다른 컴포넌트와 충돌할 수 있습니다

2개의 좋아요
149

1 - 배너를 닫았지만 몇 가지를 테스트해야 하므로 다시 표시해야 합니다. 어떻게 해야 하나요?
2 - 모바일에서 채널 페이지에 있을 때 배너가 전체 레이아웃을 완전히 깨뜨리는 것을 확인했습니다:

IMG_1622
IMG_16221242×2208 207 KB

IMG_1623
IMG_16231242×2208 247 KB

IMG_1618
IMG_16181242×2208 235 KB

IMG_1620
IMG_16201242×2208 97 KB

3 - CSS를 사용하지 않고 특정 페이지에서 배너를 제외하는 것이 가능한가요? homepage,discovery,all이 포함된 드롭다운 메뉴가 있다는 것은 알고 있지만, 그 범위는 너무 제한적입니다.

150

localStorage에 저장되므로 캐시를 지우는 것이 도움이 될 수 있습니다:

151

저도 그렇게 해보았어요:

image
image496×398 25 KB

하지만 작동하지 않았습니다. 저는 Cloudflare를 사용 중인데, 그들의 캐시 관련 문제가 있었습니다. 조금 더 기다려야 할까요, 아니면 localStorage에 저장되는 것이므로 관련이 없는 것일까요?

저는 이 분야 전문가가 아닙니다. 그냥 추측하는 것뿐이죠…

개발자 도구 창을 통해 이를 삭제하는 방법이 있을까요? 웹사이트를 작업하던 중 한때 거기서 몇 가지를 삭제했던 기억이 납니다.

152

업데이트: 당신의 답변에 따라 ChatGPT에게 도움을 요청했는데, 다음과 같은 답변을 받았습니다:

브라우저 캐시를 지우는 것은 localStorage에 영향을 주지 않으며, 닫기 상태가 저장되는 곳도 바로 localStorage입니다. 따라서 localStorage에서 해당 항목을 수동으로 삭제해야 합니다.

이렇게 해보세요:

  1. Discourse 사이트를 엽니다.

  2. F12 키를 누르거나 마우스 오른쪽 버튼을 클릭한 뒤 **검사(Inspect)**를 선택하여 개발자 도구를 엽니다.

  3. 콘솔(Console) 탭으로 이동합니다.

  4. 아래 코드를 붙여넣고 Enter 키를 누릅니다:

    localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");

  5. 페이지를 새로고침합니다.

이렇게 하면 닫기 상태가 초기화되어 웰컴 배너 링크가 다시 표시되어야 합니다.

그 후 수동으로 처리할 수 있는지 물어보니, 가능하다고 하더군요. Application 탭으로 이동한 뒤, 사이드바에서 Storage > Localstorage로 가서 해당 "항목(entry)"을 삭제하면 됩니다:

image

정확한 방향으로 이끌어주셔서 감사합니다!

그런데 이제 제 질문은 이렇습니다: 데스크톱에서는 이렇게 처리할 수 있는데, 모바일에서는 어떻게 해야 할까요? ChatGPT는 주소창에 아래 코드를 넣고 "실행"할 수 있다고 했지만, 효과가 없었습니다:

javascript:localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");

수정: 작동했습니다! 제가 잘못하고 있었네요. ChatGPT가 이제 명확히 설명해 주었는데, 포럼을 열어야 하고, 그와 동일한 탭에서 javascript:localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");를 실행해야 한다는 것이었습니다. 저는 새로운 탭에서 실행하고 있었거든요.

다시 한번 답변에 감사드립니다. 확실히 문제를 좁히는 데 큰 도움이 되었습니다. :raising_hands:

1개의 좋아요