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 {
}

黑暗模式暫時沒有更改。