# Blog Post Styling
**URL:** https://meta.discourse.org/t/blog-post-styling/110841
**Category:** Theme component
**Tags:** official
**Created:** [3월 6, 2019, 11:10오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841 "2019-03-06T11:10:58Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@geoff777](https://meta.discourse.org/u/geoff777)
#### Post date: [12월 6, 2020, 9:23오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/111 "2020-12-06T09:23:23Z")
페이지 상단에 원하는 사진을 표시할 수 있도록 어떤 방식으로든 나타낼 수 있을까요?
``와 같은 태그 쌍, 예를 들어 `` 같은 것이 있을까요?
감사합니다
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [12월 7, 2020, 9:37오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/112 "2020-12-07T21:37:28Z")
잘못 이해하고 있는 게 아니라면, 그렇게 할 필요는 없을 것 같습니다. 다음 내용을 따르세요:
> [@tshenry](#):
>
> 대표 이미지의 이미지 코드는 **게시글의 첫 번째 줄** 에 있어야 합니다. 이 구성 요소가 해당 이미지를 주제 제목 위로 “이동”시켜, 위 예시 이미지에서 보여지는 효과를 만듭니다. 대표 이미지의 이미지 코드와 그 뒤의 내용 사이에 빈 줄을 반드시 포함해 주세요.
그러면 이미지가 주제 위에 표시됩니다. 나중에 게시글 중간에 이미지를 다시 포함하고 싶다면, 그렇게 하셔도 전혀 문제없습니다.
---
### Author:  [@geoff777](https://meta.discourse.org/u/geoff777)
#### Post date: [12월 8, 2020, 9:14오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/113 "2020-12-08T09:14:26Z")
테일러님,
우회 방법을 알려주셔서 감사합니다.
만약 `` 같은 것을 사용하여 구현할 수 있다면,
- 이미지를 첫 줄에 배치할 필요가 없어지고,
- 빈 줄을 포함하여 정확한 형식을 맞춰야 하는 필요도 사라지며,
- 이미지를 중복해서 사용할 필요도 없어집니다.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [1월 16, 2021, 12:29오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/114 "2021-01-16T00:29:30Z")
방금 코어 변경으로 인해 발생한 스타일링 문제를 해결하기 위한 작은 수정 사항을 커밋했습니다. 문제가 있다면 알려주세요!
---
### Author:  [@Hessikin](https://meta.discourse.org/u/Hessikin)
#### Post date: [1월 22, 2021, 4:32오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/115 "2021-01-22T04:32:46Z")
혹시 다른 분들도 같은 문제를 겪고 계신가요?
Material Design 테마를 사용 중인데, 해당 컴포넌트를 적용한 카테고리뿐만 아니라 모든 카테고리에서 아바타가 게시물 안쪽으로 밀려드는 현상이 발생하고 있습니다.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [1월 22, 2021, 7:22오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/116 "2021-01-22T19:22:41Z")
안타깝게도 이 컴포넌트가 모든 커스텀 테마에서 바로 사용 가능할 것이라고 보장할 수 없습니다. 별도의 컴포넌트에서 약간의 CSS 조정이 필요할 수 있습니다.
스크린샷에 보이는 테마는 주제 타임라인의 답변 버튼이 더 크고 둥근 모양이 아니기 때문에 [Material Design](https://github.com/discourse/material-design-stock-theme.git) 테마로 보이지 않습니다. 어쨌든, Material Design 테마와 Blog Post Styling 컴포넌트를 함께 테스트해 보았으나, 스크린샷과 동일한 결과가 나타나지 않았습니다. Blog Post Styling 변경 사항은 해당 컴포넌트의 테마 설정에 지정된 카테고리에만 적용되었습니다.
---
### Author:  [@Krischan](https://meta.discourse.org/u/Krischan)
#### Post date: [1월 31, 2021, 8:30오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/117 "2021-01-31T08:30:45Z")
작은 버그를 발견했습니다: 주제 하단의 추천 주제를 클릭하면 블로그 게시물의 이미지가 변경되지 않습니다. 이 문제를 수정할 수 있는 방법이 있을까요? 감사합니다!
수정: Apparently, 주제 페이지에서 다른 주제로 연결되는 링크를 클릭해도 이미지가 변경되지 않는 것으로 보입니다.
---
### Author:  [@edgarriba](https://meta.discourse.org/u/edgarriba)
#### Post date: [1월 31, 2021, 2:13오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/118 "2021-01-31T14:13:38Z")
안녕하세요! 본문 기본 너비를 조정할 수 있을까요?
---
### Author:  [@Iceman](https://meta.discourse.org/u/Iceman)
#### Post date: [2월 7, 2021, 12:37오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/119 "2021-02-07T12:37:26Z")
여러분 안녕하세요,
간단한 질문인데, 제 사이트의 본문 폭과 색상이 테마에서 정의된 것과 다른 건 저만 그런 건가요?
블로그 게시물과 추가 댓글의 배경은 항상 흰색으로 보이며, 게시물 본문 자체의 텍스트는 왼쪽 첫 글자들이 조금 잘려 보입니다. 이는 "기본 다크 테마"를 사용할 때 발생하는 문제로, 커스텀 설정은 전혀 없습니다. 기본적으로 배경이 100% 흰색이 아닌 모든 테마에서 이 문제가 눈에 띕니다.
최신 커밋으로 업데이트했는데, Discourse 최신 버전(오늘 날짜 기준 최신 코드)에서도 같은 문제가 발생합니다. [이 커밋](https://github.com/tshenry/discourse-blog-post-styling/commit/ff495cc9f97205f36d57d46fda1a559a949e6f2a) 이전에는 이런 문제가 없었습니다. 하지만 커밋 내용을 보면, 제 제한적인 CSS 지식을 바탕으로 판단할 때 이런 문제가 발생해서는 안 되는 것 같은데, 맞나요? 우선순위/계층 문제인 건가요?
도와주시면 감사하겠습니다.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 8, 2021, 1:05오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/120 "2021-02-08T01:05:43Z")
이번 주에 너비, 색상 및 권장 주제 관련 문제를 확인해 보겠습니다. 너비/색상 문제는 최근 코어 변경 사항과 관련이 있을 것으로 추정됩니다. 보고해 주셔서 감사합니다!
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 9, 2021, 12:44오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/121 "2021-02-09T00:44:10Z")
네, 컴포넌트에 업데이트를 반영했습니다!
>
>
> \- Switches over to the new SCSS color variable syntax
> \- Fixes an issue where sty…ling may not be applied when navigating to a blog topic from a suggested topics list.
> \- Adds a new full-width setting (experimental at this point)
> [@Krischan](#):
>
> 토픽 페이지에서 다른 토픽으로 연결되는 링크의 이미지가 바뀌지 않습니다.
이제 _이 문제_가 수정되었을 것입니다. 놓친 엣지 케이스가 있다면 알려주세요.
> [@edgarriba](#):
>
> 본문의 기본 너비를 조정할 수 있나요?
새로운 실험적 테마 설정(기본값: 꺼짐)을 추가하여 너비를 Discourse 전체 너비로 늘릴 수 있도록 했습니다. 현재 설정이 마음에 들지 않으면 SCSS 코드를 확인하여 별도의 컴포넌트에서 직접 오버라이드를 적용할 수 있습니다.
> [@Iceman](#):
>
> 테마에서 정의한 것과 다른 본문 너비와 색상
리포트해 주셔서 감사합니다! 실제로 컴포넌트에서 처리해야 할 코어 변경 사항이 있었습니다. 이제 모두 수정되어 어떤 색상 스키마에서도 깔끔하게 표시될 것입니다.
다른 문제가 발견되면 알려주세요.
---
### Author:  [@edgarriba](https://meta.discourse.org/u/edgarriba)
#### Post date: [2월 9, 2021, 10:01오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/122 "2021-02-09T10:01:42Z")
> [@tshenry](#):
>
> Discourse의 전체 폭으로 너비를 늘리기 위한 새로운 실험적 테마 설정(기본값: 꺼짐)을 추가했습니다. 현재 설정이 마음에 들지 않으시면 SCSS 코드를 확인하고 별도의 컴포넌트에서 직접 오버라이드를 적용할 수 있습니다.
@tshenry 수고 많으셨습니다!
---
### Author:  [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [2월 10, 2021, 5:42오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/123 "2021-02-10T17:42:56Z")
테일러, 안녕하세요.
> [@tshenry](#):
>
> 디스코스의 전체 폭으로 너비를 늘리는 새로운 실험적 테마 설정(기본값: 꺼짐)을 추가했습니다.
정말 감사합니다. 이 모드를 즉시 활성화해 보았는데, 보기 좋았습니다. 참고하세요:
- [Raspberry RP2 microcontroller family - Hardware bazaar - Hiveeyes](https://community.hiveeyes.org/t/raspberry-rp2-microcontroller-family/3777)
- [Raspberry Pi Pico - Hardware bazaar - Hiveeyes](https://community.hiveeyes.org/t/raspberry-pi-pico/3778)
- [Doppler 1.0 - Hardware bazaar - Hiveeyes](https://community.hiveeyes.org/t/doppler-1-0/1693)
- [EnviroDIY Mayfly Data Logger - Hardware bazaar - Hiveeyes](https://community.hiveeyes.org/t/envirodiy-mayfly-data-logger/3035)
이러한 기운을 계속 이어가시길 바라며,
안드레아스 드림
---
### Author:  [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [2월 10, 2021, 8:22오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/124 "2021-02-10T20:22:50Z")
테일러님,
훌륭한 Discourse 애드온을 구상하고 유지 관리해 주셔서 다시 한번 감사드립니다.
또 다른 (아마도 경미한) 문제를 보고드립니다. `[quote][/quote]` 블록은 일반적으로 매우 깔끔하게 렌더링되지만, 줄바꿈을 제대로 반영하지 않는 것 같습니다. 결과는 [TinyPICO - Hardware bazaar - Hiveeyes](https://community.hiveeyes.org/t/tinypico/2472) 에서 확인할 수 있으며, 다음과 같이 보입니다:
이 부분도 조치해 주실 수 있을까요?
감사합니다.
안드레아스 드림
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2월 10, 2021, 8:25오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/125 "2021-02-10T20:25:23Z")
기꺼이!
> [@amotl](#):
>
> `[quote][/quote]` 블록은 일반적으로 아주 잘 렌더링되지만, 줄바꿈을 무시하는 것 같습니다.
네, 시간이 나면 그 문제를 살펴보고 무슨 일이 일어나고 있는지 확인해 보겠습니다.
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [3월 27, 2021, 6:31오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/126 "2021-03-27T18:31:14Z")
이 테마 컴포넌트를 정말 좋아합니다. 제가 원하는 것의 95%를 해 주거든요! 만들어 주셔서 감사합니다. 🙂
제 가장 큰 바람은 특정 게시물을 제외(또는 포함)하는 방법을 제공하는 것입니다. 현재는 카테고리 전체 단위로만 처리하고 있거든요. 이 방식이 좋은 해결책이 될 것 같다고 생각합니다:
> [@ohellno](#):
>
> 이걸 어떻게든 특정 카테고리 대신 특정 태그를 사용하도록 변경할 수 있을까요?
저도 이 접근 방식의 더 큰 유연성을 환영합니다.
> [@LoganRTW](#):
>
> 이미지가 아닌 비디오를 대표 콘텐츠로 사용하도록 설정하는 방법이 있을까요? YouTube/Vimeo 등을 게시하고 그것이 최상위 콘텐츠로 표시만 되면 워드프레스 사이트를 삭제할 정도입니다. 어떤 아이디어가 있을까요?
저는 이게 꼭 필요한 건 아니지만, 분명히 멋진 기능이 될 것 같습니다. 다만 테마 컴포넌트에서는 가능한지 모르겠네요. @tshenry ?
---
### Author:  [@Krischan](https://meta.discourse.org/u/Krischan)
#### Post date: [5월 25, 2021, 8:03오전 UTC](https://meta.discourse.org/t/blog-post-styling/110841/127 "2021-05-25T08:03:13Z")
최근 Discourse 2.7 stable로 마이그레이션을 완료하고 새로운 섬네일 기능, 즉 마크다운을 사용하여 토론의 섬네일을 설정하는 기능을 직접 테스트해 보았습니다. 그런데 이 기능을 사용하면 여기의 대표 이미지(Featured Image)도 함께 설정되는 것 같습니다. 이 두 기능을 분리하여 블로그 게시물 컴포넌트는 여전히 토론의 첫 번째 이미지를 사용하도록 할 수 있을까요? 그러면 섬네일 뷰에 가장 잘 어울리는 이미지를 별도로 설정할 수 있을 텐데…
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [5월 25, 2021, 10:48오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/128 "2021-05-25T22:48:15Z")
요즘 여유 시간이 많지 않았지만, 현재 상황은 다음과 같습니다:
> [@amotl](#):
>
> `[quote][/quote]` 블록은 일반적으로 매우 깔끔하게 렌더링되지만, 줄바꿈을 무시하는 것 같습니다.
이 문제를 살펴보니, 시몬의 원래 블로그 게시물 플러그인에서 가져온 CSS 스타일링의 일부였습니다. 해당 CSS 규칙을 제거하면 다음과 같은 모습입니다:
개인적으로 인용 아이콘이 다른 모든 요소 위에 떠 있는 모습이 약간 어색하게 느껴집니다. 더 나은 모습으로 보이도록 몇 가지 조정하는 것은 물론 가능하지만, 혹시 구체적인 아이디어가 있으신지 궁금합니다?
> [@oshyan](#):
>
> 제 주요 요청은 전체 카테고리 단위로 처리하는 대신 특정 게시물을 제외(또는 포함)할 수 있는 방법입니다. 저는 이것이 좋은 해결책이 될 것이라고 생각합니다:
태그 지원에 대해 개방적인 입장입니다. 로드맵에 추가하겠지만, 명확한 예상 완료일(ETA)을 제시하기는 어렵습니다. 영상에 대해서는, 이 컴포넌트에서 당분간 그런 기능이 추가될 것으로 보지 않습니다. 현재 이미지를 설정하는 데 사용하는 방식과 완전히 다른 접근 방식이 필요할 것이기 때문입니다.
> [@Krischan](#):
>
> 새로운 섬네일 기능
와, 이 기능이 어떻게 제 눈을 피할 수 있었는지 모르겠습니다! 정말 멋진 기능입니다 🙂. 코드를 빠르게 살펴봤지만, 요소를 분리하는 좋은 방법이 있을 것 같지 않습니다. 이 컴포넌트의 이전 버전은 첫 번째 이미지를 가져오기 위해 해킹적인 방식을 사용했지만, 지금은 서버 측에서 계산된 값에 의존합니다. 최근 변경 사항에 따라, 마크다운에 `thumbnail` 지정이 있는 이미지가 존재하면 계산된 섬네일이 해당 이미지가 되고, 그렇지 않으면 게시물 내의 첫 번째 이미지가 됩니다.
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [8월 2, 2021, 10:24오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/129 "2021-08-02T22:24:37Z")
정말 아름답네요. 특정 카테고리 하나에만 제한을 둔 이유가 있을까요?
사용자가 토글을 클릭하거나类似的한 방식으로 원하는 어디에서나 아름답고 매력적인 페이지를 만들 수 있다는 아이디어를 정말 좋아합니다. 새 프로젝트 제안, 이벤트, 공지사항, 뉴스레터(사용자를 특정 카테고리에 자동으로 구독시키는 방식으로) 또는 추천 프로젝트 등에 완벽할 것 같아요.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [8월 2, 2021, 10:36오후 UTC](https://meta.discourse.org/t/blog-post-styling/110841/130 "2021-08-02T22:36:35Z")
> [@Drew-ART](#):
>
> 사용자들이 원하는 곳에서 아름답고 매력적인 페이지를 만들 수 있다는 아이디어를 좋아합니다
태그 지원이 추가되면 가능할 것입니다 🙂 카테고리로 제한하는 데에는 특별한 이유가 없었습니다 (참고로 테마 설정에서 여러 카테고리를 선택할 수 있습니다). 당시에는 조직적인 관점에서 그렇게 하는 것이 합리적이었지만, 태그를 통해 더 세밀한 제어가 가능한 것이 일부 커뮤니티에는 더 적합할 수 있다는 점은 이해합니다.
[이전 페이지](https://meta.discourse.org/t/blog-post-styling/110841.md?page=1)
[다음 페이지](https://meta.discourse.org/t/blog-post-styling/110841.md?page=3)