PaperMod on kenji.blog

Bildlayout in PaperMod ändern

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

Das Standardlayout zentriert das Bild mit einer Breite von 100 %, aber da es mir manchmal etwas zu groß vorkam, habe ich versucht, das Bild unter dem Titel umfließen zu lassen, und die Breite auf etwa 150px geändert.

Die Änderungen an den Dateien sind wie folgt.

blank.css

Um Ränder, Bildgröße und Textanzeigezeilen zu ändern, fügen Sie die folgende Beschreibung in blank.css hinzu.

 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

Da ich die Definition in blank.css nicht löschen konnte, habe ich 1 Zeile an der folgenden Stelle in post-entry.css gelöscht.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Diese Zeile löschen
 height: auto;
}

list.html

Um das Bildlayout zu ändern, habe ich die folgende Stelle in list.html geändert.

 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) }} --><!-- Nach unten verschoben -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Nach unten verschoben -->
 <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;"><!-- Hinzugefügt -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Hinzugefügt -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Von oben verschoben -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Von oben verschoben -->
 </div><!-- Hinzugefügt -->
 <div style="width:100%;"><!-- Hinzugefügt -->
 {{- 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><!-- Hinzugefügt -->
 </div><!-- Hinzugefügt -->
</article>

Es scheint, dass es nicht wenige ähnliche Anfragen gibt.

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

Es wäre toll, wenn die offiziellen Entwickler dies ebenfalls unterstützen könnten.

So konfigurieren Sie Twitter Card mit PaperMod

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

Einführung

Das PaperMod-Theme unterstützt Twitter Card. Die Einstellungen für Twitter Card müssen jedoch in der config.toml oder in den Header-Informationen der *.md jedes Artikels geschrieben werden. Wenn Sie es sowohl in jedem Artikel als auch in der config.toml konfigurieren, haben die Header-Informationen jedes Artikels Vorrang.

Konfiguration

config.toml

Fügen Sie in config.toml ein Element namens images unter [params] hinzu. Beschreiben Sie in images den Pfad des Bildes, das auf Twitter Card angezeigt werden soll. Wenn Sie das Bild im Ordner static platzieren, reicht es aus, nur den Dateinamen anzugeben.

1
2


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

Ordnerstruktur

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Hier schreiben)
├─content
│ └─posts
│ └─Artikelordner
│ │ index.md (Hier schreiben)
│ └─images
│ cover.png (Hier platzieren)
└─static
 twitter_card.jpg (Hier platzieren)

Header-Informationen jedes Artikels

Fügen Sie in den Header-Informationen jedes Artikels ein Element namens image unter cover hinzu. Wenn Sie relative auf true setzen, können Sie es mit einem relativen Pfad von der *.md des Artikels aus angeben.

1
2
3


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

Wenn Sie es nicht oben im Artikel anzeigen möchten

Wenn Sie das Titelbild nicht oben im Artikel anzeigen möchten, fügen Sie ein Element namens hidden unter cover hinzu und setzen Sie es auf true.

1
2
3
4


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

Über die Bildgröße

In der aktuellen PaperMod-Spezifikation scheint die Twitter Card-Größe nur summary_large_image zu unterstützen. Für die geeignete Größe (Auflösung) von summary_large_image gibt es verschiedene Theorien, aber etwa 800 x 418 (Bildverhältnis 1.91:1) scheint gut zu sein.

Referenzseite 1 Referenzseite 2

Wenn möglich, empfehlen wir, die Bildgröße vor dem Posten zu ändern.

So überprüfen Sie die Einstellungen

Verwenden Sie den Twitter Card Validator, um die Twitter Card-Einstellungen zu überprüfen. Da die Vorschau in meiner Umgebung jedoch nicht richtig angezeigt wurde, empfehle ich Ihnen, falls die Vorschau nicht angezeigt wird, sie vor dem Posten einmal mit einem privaten Konto oder Ähnlichem zu überprüfen.

Ändern des Farbschemas von PaperMod

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

Ich habe das Farbschema des PaperMod-Themas geändert. Für die Änderungsmethode habe ich Folgendes konsultiert.

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

Der CSS-Pfad lautet wie folgt.

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

Vorerst keine Änderungen für den Dunkelmodus.