PaperMod on kenji.blog

Modifier la disposition des images dans PaperMod

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

La disposition par défaut place l’image au centre avec une largeur de 100 %, mais comme je la trouvais parfois un peu grande, j’ai essayé de faire en sorte que l’image s’enroule sous le titre, et j’ai modifié la largeur à environ 150px.

Les modifications apportées aux fichiers sont les suivantes.

blank.css

Pour modifier les marges, la taille de l’image et les lignes d’affichage du texte, ajoutez la description suivante dans 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

Comme je n’ai pas pu supprimer la définition du côté de blank.css, j’ai supprimé 1 ligne à l’emplacement suivant dans post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Supprimer cette ligne
 height: auto;
}

list.html

Pour modifier la disposition de l’image, j’ai modifié l’emplacement suivant dans 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) }} --><!-- Déplacé vers le bas -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Déplacé vers le bas -->
 <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;"><!-- Ajouté -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Ajouté -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Déplacé du haut -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Déplacé du haut -->
 </div><!-- Ajouté -->
 <div style="width:100%;"><!-- Ajouté -->
 {{- 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><!-- Ajouté -->
 </div><!-- Ajouté -->
</article>

Il semble qu’il y ait pas mal de demandes similaires.

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

Ce serait bien si les développeurs officiels pouvaient également le prendre en charge.

Comment configurer Twitter Card avec PaperMod

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

Introduction

Le thème PaperMod prend en charge Twitter Card. Cependant, les paramètres de Twitter Card doivent être écrits dans le config.toml ou dans les informations d’en-tête du *.md de chaque article. Si vous le configurez à la fois dans chaque article et dans le config.toml, les informations d’en-tête de chaque article seront prioritaires.

Comment configurer

config.toml

Dans config.toml, ajoutez un élément appelé images sous [params]. Dans images, décrivez le chemin de l’image à afficher sur Twitter Card. Si vous placez l’image dans le dossier static, il suffit de spécifier uniquement le nom du fichier.

1
2


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

Structure des dossiers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Écrire ici)
├─content
│ └─posts
│ └─Dossier de l'article
│ │ index.md (Écrire ici)
│ └─images
│ cover.png (Placer ici)
└─static
 twitter_card.jpg (Placer ici)

Informations d’en-tête de chaque article

Dans les informations d’en-tête de chaque article, ajoutez un élément appelé image sous cover. Si vous définissez relative sur true, vous pouvez spécifier avec un chemin relatif à partir du *.md de l’article.

1
2
3


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

Si vous ne souhaitez pas l’afficher en haut de l’article

Si vous ne souhaitez pas afficher l’image de couverture en haut de l’article, ajoutez un élément appelé hidden sous cover et définissez-le sur true.

1
2
3
4


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

À propos de la taille de l’image

Dans les spécifications actuelles de PaperMod, il semble que la taille de Twitter Card ne prenne en charge que summary_large_image. La taille appropriée (résolution) de summary_large_image a plusieurs théories, mais autour de 800 x 418 (ratio d’image 1.91:1) semble être bon.

Site de référence 1 Site de référence 2

Si possible, nous vous recommandons de redimensionner la taille de l’image avant de publier.

Comment vérifier les paramètres

Pour vérifier les paramètres de Twitter Card, utilisez le Twitter Card Validator. Cependant, comme l’aperçu ne s’est pas affiché correctement dans mon environnement, si l’aperçu n’apparaît pas, je vous recommande de vérifier une fois avant de publier en utilisant un compte privé ou similaire.

Modification de la palette de couleurs de PaperMod

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

J’ai modifié la palette de couleurs du thème PaperMod. Je me suis référé au lien suivant pour la méthode de modification.

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

Le chemin du CSS est le suivant.

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

Aucun changement pour le mode sombre pour le moment.