PaperMod on kenji.blog

Perubahan Tata Letak Gambar PaperMod

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

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">&nbsp;&nbsp;[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.

Cara Mengatur Twitter Card di PaperMod

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

Pendahuluan

Tema PaperMod mendukung Twitter Card. Namun, pengaturan Twitter Card harus ditulis dalam config.toml atau di informasi header *.md pada setiap artikel. Jika diatur di artikel maupun di config.toml, informasi header dari setiap artikel akan diprioritaskan.

Cara Pengaturan

config.toml

Di config.toml, tambahkan item bernama images di bawah [params]. Di images, tulis path ke gambar yang akan ditampilkan di Twitter Card. Jika Anda menempatkan gambar di folder static, Anda hanya perlu menentukan nama filenya saja.

1
2


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

Struktur folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Tulis di sini)
├─content
│ └─posts
│ └─folder artikel
│ │ index.md (Tulis di sini)
│ └─images
│ cover.png (Tempatkan di sini)
└─static
 twitter_card.jpg (Tempatkan di sini)

Informasi header setiap artikel

Di informasi header setiap artikel, tambahkan item bernama image di bawah cover. Jika Anda mengatur relative menjadi true, Anda dapat menentukannya dengan path relatif dari *.md artikel tersebut.

1
2
3


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

Jika Anda tidak ingin menampilkannya di bagian atas artikel

Jika Anda tidak ingin menampilkan gambar sampul di bagian atas artikel, tambahkan item bernama hidden di bawah cover dan atur menjadi true.

1
2
3
4


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

Tentang Ukuran Gambar

Berdasarkan spesifikasi PaperMod saat ini, ukuran Twitter Card tampaknya hanya mendukung summary_large_image. Ukuran yang tepat (resolusi) untuk summary_large_image bervariasi, namun sekitar 800 x 418 (rasio gambar 1.91:1) tampaknya sudah baik.

Situs referensi 1 Situs referensi 2

Jika memungkinkan, kami sarankan mengubah ukuran gambar sebelum mempublikasikannya.

Cara memeriksa pengaturan

Untuk memeriksa pengaturan Twitter Card, gunakan Twitter Card Validator. Namun, di lingkungan saya, pratinjau tidak ditampilkan dengan benar, jadi jika pratinjau tidak muncul, kami sarankan untuk memeriksanya sekali sebelum mempublikasikannya dengan menggunakan akun privat atau sejenisnya.

Mengubah Skema Warna PaperMod

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

Saya telah mengubah skema warna tema PaperMod. Saya merujuk ke bawah ini untuk metode perubahannya.

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

Path CSS adalah sebagai berikut.

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

Untuk saat ini, tidak ada perubahan pada mode gelap.