PaperMod on kenji.blog

Changing the Image Layout in PaperMod

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

In the default layout, images are placed in the center with a width of 100%. However, I felt this was a bit too large, so I tried wrapping the image under the title and changing the width to around 150px.

The changes made to the files are as follows.

blank.css

To change the margins, image sizes, and the number of displayed text lines, add the following code to 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

Since I couldn’t delete the definition in blank.css, I deleted the following line in post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ <- Delete this line
 height: auto;
}

list.html

To change the image layout, I modified the following section in 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) }} --><!-- Moved down -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Moved down -->
 <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;"><!-- Added -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Added -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Moved from above -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Moved from above -->
 </div><!-- Added -->
 <div style="width:100%;"><!-- Added -->
 {{- 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><!-- Added -->
 </div><!-- Added -->
</article>

It seems there are quite a few similar requests.

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

I would be grateful if this was supported in the upstream repository as well.

How to set up Twitter Card in PaperMod

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

Introduction

The PaperMod theme supports Twitter Cards. However, Twitter Card settings need to be described in config.toml or the header information of each article’s *.md. If set in both each article and config.toml, the header information of each article takes precedence.

How to Configure

config.toml

In config.toml, add an item named images under [params]. In images, describe the path to the image to be displayed on the Twitter Card. If placing the image in the static folder, specifying just the file name is sufficient.

1
2


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

Folder structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Describe here)
├─content
│ └─posts
│ └─article folder
│ │ index.md (Describe here)
│ └─images
│ cover.png (Place here)
└─static
 twitter_card.jpg (Place here)

Header Information of Each Article

In the header information of each article, add an item named image under cover. If you set relative to true, you can specify it as a relative path from the article’s *.md.

1
2
3


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

If You Do Not Want to Display It at the Top of the Article

If you do not want to display a cover image at the top of the article, add an item named hidden under cover and set it to true.

1
2
3
4


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

About Image Size

Based on the current specifications of PaperMod, it seems that Twitter Card sizes are only supported for summary_large_image. The appropriate size (resolution) for summary_large_image varies according to different sources, but around 800 x 418 (aspect ratio 1.91:1) seems good.

Reference Site 1 Reference Site 2

If possible, it is recommended to resize the image before posting.

How to Check Settings

To check Twitter Card settings, use the Twitter Card Validator. However, in my environment, the preview did not display properly, so if the preview does not appear, it is recommended to check once using a private account or similar before posting.

Changing the Color Scheme of PaperMod

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

I changed the color scheme of the PaperMod theme. I referred to the following for the method.

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

The CSS path is as follows.

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

No changes for dark mode for now.