Tata letak default menempatkan gambar di tengah dengan lebar 100%, tetapi kadang-kadang saya merasa itu agak terlalu besar, jadi saya mencoba membungkus gambar di bawah judul dan mengubah lebarnya menjadi sekitar 150px.
Lokasi perubahan file adalah sebagai berikut.
blank.css
Untuk mengubah margin, ukuran gambar, dan baris tampilan teks, tambahkan deskripsi berikut ke 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
Karena definisi tidak dapat dihapus di sisi blank.css, hapus satu baris berikut di post-entry.css.
1
2
3
4
5
6
| .entry-cover img {
border-radius: var(--radius);
pointer-events: none;
/* width: 100%; */ ← hapus baris ini
height: auto;
}
|
list.html
Untuk mengubah tata letak gambar, saya mengubah bagian berikut dari 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) }} --><!-- pindah ke bawah -->
<!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- pindah ke bawah -->
<header class="entry-header">
<h2>
{{- .Title }}
{{- if .Draft }}<sup><span class="entry-isdraft"> [draft]</span></sup>{{- end }}
</h2>
</header>
<div style="display:flex;"><!-- tambahkan -->
<div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- tambahkan -->
{{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- pindah dari atas -->
{{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- pindah dari atas -->
</div><!-- tambahkan -->
<div style="width:100%;"><!-- tambahkan -->
{{- 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><!-- tambahkan -->
</div><!-- tambahkan -->
</article>
|
Sepertinya ada cukup banyak permintaan serupa.
https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844
Saya akan berterima kasih jika pengembang asli juga mendukungnya.
