최신 안정 버전의 Discourse(3.2.x)와 업데이트된 Landing Pages 컴포넌트(플러그인, 블로그 페이지 및 블로그 테마)를 사용했을 때 이미지 배경과 게시물 컨테이너 크기 문제를 재현할 수 있었습니다. 가능하면 테마를 소폭 업데이트할 예정이지만, 원하시면 포크에서 쉽게 수정할 수 있습니다.
클린 설치에서 기본 설정을 사용할 경우, 게시물/구독 버튼은 페이지 하단에 위치하며 모두 정상 작동합니다. 모바일 버전의 경로 동작은 데스크톱과 동일하며, 블로그 카테고리를 설정할 때 변경되는 '마지막 업데이트’를 제외하고는 게시물 날짜 관련 문제를 확인할 수 없었습니다(해당 카테고리의 모든 게시물에 ‘블로그 게시물’ 태그가 부여됩니다).
랜딩 페이지 설정의 ‘메뉴’ 설정에서 아무것도 구성하지 않는 한 모바일 버전의 햄버거 메뉴는 비어 있을 것입니다. 이 경우 인터페이스를 단순화하기 위해 코드를 업데이트하여 메뉴를 완전히 숨기도록 할 수 있습니다.
방금 블로그에 접속해서 몇 가지 문제를 빠르게 디버깅해 보았습니다:
CSS 수정과 관련하여 다양한 옵션이 있습니다. 예를 들어, 배경 이미지의 경우 common.scss 파일 내의 .title-container 클래스에 background: no-repeat center/cover fixed;를 설정할 수 있으며, 게시물 내의 "작은 컨테이너"의 경우 같은 파일 내의 .post-content 클래스에 min-width: 100%;를 추가할 수 있습니다.
메뉴 설정과 관련하여, 현재 메뉴를 추가할 수 있는 유일한 방법은 문서에 언급된 대로 전역 pages.json 파일을 사용하는 것입니다. 다만 이 부분에 대한 정보가 많지는 않습니다. 그러나 pavilion-landing-pages 저장소에서 예시를 확인할 수 있습니다.
안녕하세요! 화면 녹화하신 영상에서 직접 URL은 정상적으로 작동합니다. 하지만 블로그 홈 페이지에 가서 그다음에 블로그 제목을 클릭하면 페이지를 찾을 수 없다는 오류가 발생합니다. 직접 URL은 잘 작동하지만, 아무도 그 URL을 손에 갖고 있을 리가 없고, 당연히 현실적인 방법이 아닙니다.
CSS 수정 사항을 바로 시도해 보고, 결과를 바탕으로 이 글을 수정하거나 다시 답변드릴게요. 감사합니다!
Content-Security Policy 관련 발견은 정말로… 매우 흥미롭네요… 제가 그 부분에 대해 뭔가 했다는 기억이 전혀 없습니다. 음. 어떻게 수정해야 할까요?
수정: 설정에서 content security policy를 비활성화하여 구독 버튼을 수정했습니다. 하지만 이 설정을 활성화한 채로 버튼이 계속 작동하도록 하는 방법이 있을까요? 버튼 작동 방식을 변경해서 그 문제를 트리거하지 않도록 할 수도 있을까요?
CSP 설정에 대해서는 잘 모르겠습니다, 죄송합니다. 영상에서 약 26초~27초 사이에 정확히 그렇게(홈 블로그에서 블로그 제목을 클릭) 해 보았는데도 여전히 정상 작동했기 때문에, 제 쪽에서 더 어떻게 테스트해야 할지 모르겠습니다.
위쪽 게시물을 수정해서 이렇게 적었습니다: “설정에서 content security policy를 비활성화하여 구독 버튼을 수정했습니다. 하지만 이 기능을 활성화한 채로 버튼이 작동하게 하는 방법이 있을까요? 버튼 동작 방식을 바꿔서 그 문제를 트리거하지 않도록 하는 것도 가능할까요?”
아, 그리고 제 실수였네요! 음, 그러면 정말 이상하네요. 여러 브라우저와 심지어 몇 대의 휴대폰에서도 같은 문제가 발생하더라고요…
참고로, 모바일 화면에 떠 있는 “Posts” 아이콘 크기와 맞도록 구독 버튼/텍스트를 크게 만들 수 있는 방법이 있을까요? 계정에 로그인된 상태에서는 아이콘 크기가 적절하지만, 게스트로 접속(로그아웃된 상태)할 때는 그렇지 않은데, 이 부분은 영상에서 확인하실 수 있습니다.
그 외에는, 모바일에서 프로필 사진/작성자 이름, 날짜, “Forum Topic” 영역을 수평으로 배치하고 싶습니다. 이렇게 세로로 쌓여 있으면 보기 좋지 않으니까요 (아니면 적어도 날짜와 Topic 영역을 나란히 배치하고 프로필 사진 아래에 가운데 정렬하거나 무언가를 하는 것)…
아, 그리고 CSS 코드가 잘 작동했습니다! 정말 감사합니다.
위에서 드린 답변 외에, @cabidop 님, 제 파트너가 블로그 페이지/테마 관련 사항을 몇 시간 동안 꼼꼼히 살펴봤습니다. 기술에 익숙하지 않은 일반인의 시각에서 기본 설정에 대한 의견을 듣고 싶었기 때문입니다. 블로그 관련 부분에 반영하고 싶으시다면 여기서 언급해 드리겠습니다:
구독이 완료되면 로그인 상태에서는 버튼을 완전히 제거하거나, 데스크톱에서 여전히 '구독’이라고 표시하지 않고 '구독됨’으로 변경하세요. 또한 스크롤할 때 화면에 고정되어 있지 않도록(스크롤 시 사라지도록) 버튼 설정을 변경하세요.
블로그 게시물 페이지의 큰 헤더 사진이 모바일에서 제대로 표시되지 않습니다. 거의 보이지 않거나 아예 보이지 않는 경우도 있습니다(아래 사진은 데스크톱과 모바일을 비교한 것입니다):
이러한 변경 사항들은 기본 설정에서도 정말 훌륭할 것이라고 생각합니다.
피드백을 남겨주셔서 감사합니다, @45thj5ej. 향후 일부 제안 사항을 기본값으로 구현할 수도 있습니다. CSP 문제를 이미 해결하셨는지 확실하지 않지만, 해당 기능을 완전히 비활성화하지 않고도 사용자의 상황에 맞게 작동할 수 있는 content security policy script src 옵션이 있는 것 같습니다(이 부분은 완전히 확신하지는 못합니다).
다른 페이지에서 테마가 작동하지 않는 문제는 스타일에서 .blog와 .blog-post 클래스를 사용했기 때문에 예상되는 동작입니다. 각 랜딩 페이지는 자신의 슬러그를 HTML 클래스로 바디에 추가하므로, CSS 스타일이 해당 클래스에만 적용되는 한 "Blog"와 “Blog Post” 페이지에만 각각 영향을 미치게 됩니다.
나머지 코멘트/이슈에 대해서는 다른 토픽에서 언급했듯이 사용자의 특정 사용 사례에 국한된 문제라는 점을 다시 한번 강조하고 싶습니다. 이들은 컴포넌트의 실제 문제라기보다는 보다 일반적인 CSS 관련 질문이기 때문입니다. 그렇긴 하지만, 나중에 한번 살펴볼 수는 있겠지만(그렇다고 해서 당연하게 받아들이지는 마세요).
안녕하세요, 상황이 좀 급합니다…
Nginx를 설정하여 mysite.com을 https://forums.mysite.com/home으로 리다이렉트하고, 도메인 제공업체에서 DNS A 레코드를 설정했습니다(이것이 사이트의 메인 페이지가 되希기 때문입니다).
이상한 점을 하나 발견했습니다. 리다이렉트(즉, 제 사이트를 방문하는 모든 사용자에게 발생하는 경우)를 통해 블로그 게시글에 접근하면 URL에 두 번째 /home이 추가됩니다. 하지만 직접 URL인 https://forums.mysite.com/home을 통해 블로그 홈 페이지에 접근하면 그런 현상이 발생하지 않습니다.
가능한 한 빨리 수정할 방법이 있을까요? 아니면 방법을 알려주시면 제가 직접 진행하겠습니다. 며칠 전 모바일에서만 이런 문제가 발생했던 것과 별개의 문제입니다. 그리고 물론, 블로그 홈 페이지에서 링크에 마우스를 올리면 링크가 중복으로 표시됩니다. 예를 들어 다음과 같습니다:
https://forums.mysite.com/home/home/blog-test-one-million
다시 한번 말하지만, 리다이렉트가 아닌 직접 URL로 접근하면 정상적으로 작동합니다.
이 “더블 패스” 문제가 블로그 페이지에서만 발생하는지, 랜딩 페이지에서 발생하는지, 아니면 모든 Discourse 페이지(예: /latest)에서 발생하는지 확인해 주시겠습니까?
블로그 홈/랜딩 페이지, 즉 블로그 게시물 제목을 클릭하는 곳에만 해당됩니다.
.
수정: 아래 내용을 무시하세요. 해결 방법은 다음과 같습니다:
블로그 테마의 common.scss 파일에서 약 172번째 줄 부근의 아래 한 줄을 주석 처리했습니다:
body.blog {
/* padding-top: 8em; */
또한, 사이트 헤더를 어떻게 수정하나요? 어떤 방법을 써도 헤더는 항상 표시되고, 아예 수정할 수 없습니다. 상단 내비게이션 바/메뉴/로고 영역 말입니다.
예를 들어, 기본 헤더를 더 짧게 만들기 위해 사용자 지정 헤더를 만들었습니다. 그리고 다음 코드를 사용해도
.landing-header {
display:none
}
여전히 상단에 큰 간격이 생깁니다. 이 간격을 제거하는 방법은 무엇인가요?
@angus 이거 아직 작동하나요? 제게는 완벽한 솔루션처럼 보이네요.
@cabidop과 @merefield가 최근 랜딩 페이지 플러그인을 유지보수해 왔기 때문에, 이 두 분에게 묻는 것이 더 좋습니다.
@merefield 현재 버전의 Discourse에서도 여전히 지원되나요?
잘 모르겠습니다. 블로그 확장 기능에 익숙하지 않아서 사용하지 않습니다.
에러 메시지를 공유해 주실 수 있을까요?
오류가 있는 건 아니에요. 그냥 이게 아직 호환되는지 궁금해서요.
안녕하세요, @NateDhaliwal. 답변이 좀 늦은 것 같지만 블로그 확장 프로그램에는 문제가 없어야 합니다. 만약 문제가 있다면 알려주세요.
