PaperMod on kenji.blog

'PaperMod 이미지 배치 변경'

Sun, 11 Sep 2022 18:50:40 +0900

기본 레이아웃은 이미지가 중앙에 가로폭 100%로 배치되어 있지만, 조금 크다고 느껴질 때가 있어서, 이미지를 제목 아래에 둘러싸이게 하고, 가로폭을 150px 정도로 변경해 보았습니다.

파일의 변경 사항은 다음과 같습니다.

blank.css

여백이나 이미지 크기, 텍스트 표시 줄 수를 변경하기 위해, blank.css에 다음 내용을 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

blank.css 쪽에서 정의를 삭제할 수 없었기 때문에, post-entry.css에서 아래의 1줄을 삭제합니다.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 이 줄을 삭제
 height: auto;
}

list.html

이미지 배치를 변경하기 위해, list.html의 다음 부분을 변경했습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 아래로 이동 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 아래로 이동 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 추가 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 추가 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 위에서 이동 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 위에서 이동 -->
 </div><!-- 추가 -->
 <div style="width:100%;"><!-- 추가 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 추가 -->
 </div><!-- 추가 -->
</article>

비슷한 요구 사항이 적지 않게 있는 것 같습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

본가(공식) 쪽에서도 지원해 주면 좋겠네요.

'PaperMod에서 Twitter Card를 설정하는 방법'

Sat, 10 Sep 2022 18:41:22 +0900

시작하며

PaperMod 테마는 Twitter Card를 지원합니다. 단, Twitter Card 설정은 config.toml 또는 각 게시물의 *.md 헤더 정보에 작성해야 합니다. 각 게시물과 config.toml 양쪽에 설정한 경우에는, 각 게시물의 헤더 정보가 우선됩니다.

설정 방법

config.toml

config.toml에는 [params] 아래에 images라는 항목을 추가합니다. images에는 Twitter Card에 표시할 이미지의 경로를 작성합니다. 이미지를 static 폴더에 배치할 경우에는 파일 이름만 지정하면 됩니다.

1
2


[params]
 images = ["twitter_card.jpg"]

폴더 구성

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (여기에 작성)
├─content
│ └─posts
│ └─게시물 폴더
│ │ index.md (여기에 작성)
│ └─images
│ cover.png (여기에 배치)
└─static
 twitter_card.jpg (여기에 배치)

각 게시물의 헤더 정보

각 게시물의 헤더 정보에는 cover 아래에 image라는 항목을 추가합니다. relative를 true로 하면, 게시물의 *.md로부터의 상대 경로로 지정할 수 있습니다.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

게시물 상단에는 표시하고 싶지 않은 경우

게시물 상단에 커버 이미지를 표시하고 싶지 않은 경우에는 cover 아래에 hidden이라는 항목을 추가하고 true로 설정합니다.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

이미지 크기에 대하여

현재 PaperMod의 사양상 Twitter Card의 크기는 summary_large_image만 지원하는 것 같습니다. summary_large_image의 적절한 크기(해상도)는 여러 의견이 있지만 800 x 418(이미지 비율 1.91:1) 정도가 좋을 것 같습니다.

참고 사이트1 참고 사이트2

가능하다면, 이미지 크기를 리사이징하여 게시하는 것을 추천합니다.

설정 확인 방법

Twitter Card의 설정을 확인하려면 Twitter Card Validator를 이용합니다. 단, 제 환경에서는 미리보기가 잘 표시되지 않았기 때문에, 만약 미리보기가 표시되지 않는다면 비공개 계정 등을 이용해 게시 전에 한번 확인해 보는 것을 추천합니다.

'PaperMod 색상 변경'

Wed, 07 Sep 2022 15:30:21 +0900

PaperMod 테마의 색상을 변경했습니다. 변경 방법은 아래를 참고했습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 경로는 아래와 같습니다.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

다크 모드는 일단 변경하지 않았습니다.