PaperMod on kenji.blog

PaperMod में इमेज लेआउट बदलना

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

डिफ़ॉल्ट लेआउट में इमेज को 100% चौड़ाई के साथ केंद्र में रखा गया है, लेकिन क्योंकि मुझे कभी-कभी यह थोड़ा बड़ा लगता था, मैंने इमेज को शीर्षक के नीचे रैप करने की कोशिश की, और चौड़ाई को लगभग 150px में बदल दिया।

फ़ाइलों में परिवर्तन इस प्रकार हैं।

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 पंक्ति हटा दी।

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

अगर मूल डेवलपर्स भी इसका समर्थन कर सकें तो बहुत अच्छा होगा।

PaperMod में Twitter Card कैसे सेट करें

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

परिचय

PaperMod थीम Twitter Card का समर्थन करती है। हालाँकि, Twitter Card सेटिंग्स को config.toml में या प्रत्येक लेख के *.md की हेडर जानकारी में लिखा जाना चाहिए। यदि आप प्रत्येक लेख और config.toml दोनों में सेट करते हैं, तो प्रत्येक लेख की हेडर जानकारी को प्राथमिकता दी जाएगी।

सेट कैसे करें

config.toml

config.toml में, [params] के तहत images नामक एक आइटम जोड़ें। 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 (यहाँ रखें)

प्रत्येक लेख की हेडर जानकारी

प्रत्येक लेख की हेडर जानकारी में, cover के तहत image नामक एक आइटम जोड़ें। यदि आप relative को true पर सेट करते हैं, तो आप इसे लेख के *.md से सापेक्ष पथ के रूप में निर्दिष्ट कर सकते हैं।

1
2
3


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

यदि आप इसे लेख के शीर्ष पर प्रदर्शित नहीं करना चाहते हैं

यदि आप लेख के शीर्ष पर कवर छवि प्रदर्शित नहीं करना चाहते हैं, तो cover के तहत hidden नामक एक आइटम जोड़ें और इसे true पर सेट करें।

1
2
3
4


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

छवि आकार के बारे में

वर्तमान PaperMod विनिर्देश में, ऐसा लगता है कि Twitter Card आकार केवल 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 {
}

डार्क मोड के लिए अभी कोई बदलाव नहीं।