PaperMod on kenji.blog

تغيير تخطيط صورة PaperMod

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

بالنسبة للتخطيط الافتراضي، يتم وضع الصورة في المركز بعرض 100%، لكنني شعرت في بعض الأحيان أنها كبيرة قليلاً، لذا حاولت التفاف الصورة أسفل العنوان وتغيير العرض إلى حوالي 150 بكسل.

مواقع تغيير الملفات هي كما يلي.

blank.css

لتغيير الهوامش وحجم الصورة وخطوط عرض النص، أضف الوصف التالي إلى 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

نظرًا لأنه لم يكن من الممكن حذف التعريف على جانب blank.css، احذف السطر التالي في post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← احذف هذا السطر
 height: auto;
}

list.html

لتغيير تخطيط الصورة، قمت بتغيير الأجزاء التالية من 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) }} --><!-- تحرك لأسفل -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- تحرك لأسفل -->
 <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;"><!-- إضافة -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- إضافة -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- انتقل من الأعلى -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- انتقل من الأعلى -->
 </div><!-- إضافة -->
 <div style="width:100%;"><!-- إضافة -->
 {{- 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><!-- إضافة -->
 </div><!-- إضافة -->
</article>

يبدو أن هناك عددًا لا بأس به من الطلبات المماثلة.

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

سأكون ممتنًا لو تفضل المطورون الأصليون بدعمه أيضًا.

كيفية إعداد Twitter Card في PaperMod

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

مقدمة

يدعم قالب PaperMod ميزة Twitter Card. ومع ذلك، يجب كتابة إعدادات Twitter Card في config.toml أو في معلومات رأس *.md لكل مقال. إذا تم تعيينها في كل من المقال و config.toml، فستكون الأولوية لمعلومات رأس كل مقال.

طريقة الإعداد

config.toml

في config.toml، أضف عنصرًا يسمى images ضمن [params]. في images، اكتب مسار الصورة التي سيتم عرضها في Twitter Card. إذا كنت ستضع الصورة في مجلد static، فيكفي تحديد اسم الملف فقط.

1
2


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

هيكل المجلد

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (اكتب هنا)
├─content
│ └─posts
│ └─مجلد المقال
│ │ index.md (اكتب هنا)
│ └─images
│ cover.png (ضع هنا)
└─static
 twitter_card.jpg (ضع هنا)

معلومات رأس كل مقال

في معلومات رأس كل مقال، أضف عنصرًا يسمى image تحت cover. إذا قمت بتعيين relative إلى true، يمكنك تحديده بمسار نسبي من *.md للمقال.

1
2
3


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

إذا كنت لا ترغب في عرضها أعلى المقال

إذا كنت لا ترغب في عرض صورة الغلاف أعلى المقال، أضف عنصرًا يسمى hidden تحت cover وقم بتعيينه إلى true.

1
2
3
4


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

حول حجم الصورة

حاليًا، يبدو أن حجم Twitter Card في مواصفات PaperMod يدعم فقط summary_large_image. الحجم المناسب (الدقة) لـ summary_large_image مختلف عليه، ولكن يبدو أن 800 x 418 (نسبة الصورة 1.91:1) جيدة.

الموقع المرجعي 1 الموقع المرجعي 2

إذا أمكن، نوصي بتغيير حجم الصورة قبل النشر.

كيفية التحقق من الإعدادات

للتحقق من إعدادات Twitter Card، استخدم Twitter Card Validator. ومع ذلك، في بيئتي لم يتم عرض المعاينة بشكل صحيح، لذلك إذا لم يتم عرض المعاينة، نوصي بالتحقق منها مرة واحدة قبل النشر باستخدام حساب خاص أو ما شابه.

تغيير نظام الألوان في PaperMod

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

لقد قمت بتغيير نظام الألوان لسمة PaperMod. لقد أشرت إلى ما يلي لطريقة التغيير.

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

مسار CSS هو كما يلي.

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

لا توجد تغييرات على المظهر الداكن في الوقت الحالي.