canxin का ब्लॉग - democanxin का ब्लॉग।Zola2026-02-13T00:00:00+00:00https://blog.cxits.cn/hi/tags/demo/atom.xmlफ़ीचर डेमो ब्लॉग: रिच टेक्स्ट, Mermaid, गणित और Shortcodes2026-02-13T00:00:00+00:002026-02-13T00:00:00+00:00
canxin
https://blog.cxits.cn/hi/blog/feature-demo-blog/<p>यह पोस्ट इस साइट का <strong>डेमो ब्लॉग पेज</strong> है, जिसका उपयोग rich text और extended formatting क्षमताओं को एक जगह सत्यापित करने के लिए किया जाता है।</p>
<h2 id="buniyaadii-markdown-kssmtaaen"><a class="zola-anchor" href="#buniyaadii-markdown-kssmtaaen" aria-label="Anchor link for: buniyaadii-markdown-kssmtaaen"><i class="icon"></i></a>
बुनियादी Markdown क्षमताएं</h2>
<p>टेक्स्ट स्टाइल: <strong>bold</strong>, <em>italic</em>, <del>strikethrough</del>, <code>inline code</code>, और मिला-जुला स्टाइल <em><strong><del>all together</del></strong></em>।</p>
<ul>
<li>आंतरिक लिंक: <a href="https://blog.cxits.cn/">Home</a></li>
<li>बाहरी लिंक: <a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.getzola.org/documentation/">Zola Documentation</a></li>
<li>Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊</li>
</ul>
<blockquote>
<p>यह एक quote block है।</p>
<p>यहां nested quote का उदाहरण है:</p>
<blockquote>
<p>Duckquill स्पष्ट और संरचित तकनीकी लेखन के लिए बहुत अच्छा है।</p>
</blockquote>
</blockquote>
<h2 id="suuciyaan-ttaask-aur-footnotes"><a class="zola-anchor" href="#suuciyaan-ttaask-aur-footnotes" aria-label="Anchor link for: suuciyaan-ttaask-aur-footnotes"><i class="icon"></i></a>
सूचियां, टास्क और Footnotes</h2>
<ul>
<li>सामान्य सूची आइटम A</li>
<li>सामान्य सूची आइटम B
<ul>
<li>नेस्टेड आइटम B.1</li>
<li>नेस्टेड आइटम B.2</li>
</ul>
</li>
<li>सामान्य सूची आइटम C</li>
</ul>
<ol>
<li>सामग्री लिखें</li>
<li>लोकल प्रीव्यू देखें</li>
<li>प्रकाशित करें</li>
</ol>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
कार्य 1: सामान्य Markdown एक्सटेंशन सक्षम करें</li>
<li><input disabled="" type="checkbox" checked=""/>
कार्य 2: Mermaid समर्थन जोड़ें</li>
<li><input disabled="" type="checkbox" checked=""/>
कार्य 3: इसे showcase पोस्ट में पुनर्गठित करें</li>
<li><input disabled="" type="checkbox"/>
कार्य 4: वास्तविक उपयोग के और उदाहरण जोड़ते रहें</li>
</ul>
<p>Footnote उदाहरण<sup class="footnote-reference" id="fr-note1-1"><a href="#fn-note1">1</a></sup> और लिंक वाला footnote<sup class="footnote-reference" id="fr-note2-1"><a href="#fn-note2">2</a></sup>।</p>
<p>Definition List उदाहरण:</p>
<dl>
<dt>Mermaid</dt>
<dd>टेक्स्ट से ग्राफ़ संरचना लिखें और उसे अपने-आप SVG में रेंडर करें।</dd>
<dt>KaTeX</dt>
<dd>LaTeX गणितीय सूत्रों के लिए उच्च-प्रदर्शन रेंडरिंग।</dd>
<dt>Duckquill Shortcodes</dt>
<dd>थीम-स्तरीय फीचर एक्सटेंशन, जैसे <code>alert</code>, <code>image</code>, <code>video</code>, और <code>youtube</code>।</dd>
</dl>
<h2 id="ttebl-aur-kodd-haailaaitting"><a class="zola-anchor" href="#ttebl-aur-kodd-haailaaitting" aria-label="Anchor link for: ttebl-aur-kodd-haailaaitting"><i class="icon"></i></a>
टेबल और कोड हाइलाइटिंग</h2>
<table><thead><tr><th style="text-align: left">सुविधा</th><th style="text-align: center">स्थिति</th><th style="text-align: left">टिप्पणियां</th></tr></thead><tbody>
<tr><td style="text-align: left">GitHub Alerts</td><td style="text-align: center">Enabled</td><td style="text-align: left"><code>[!NOTE]</code> और संबंधित सिंटैक्स समर्थित</td></tr>
<tr><td style="text-align: left">Syntax Highlighting</td><td style="text-align: center">Enabled</td><td style="text-align: left">लाइन नंबर और highlighted lines समर्थित</td></tr>
<tr><td style="text-align: left">Mermaid</td><td style="text-align: center">Enabled</td><td style="text-align: left"><code>mermaid</code> code blocks से रेंडरिंग समर्थित</td></tr>
<tr><td style="text-align: left">KaTeX</td><td style="text-align: center">इस पेज पर Enabled</td><td style="text-align: left"><code>extra.katex = true</code> के माध्यम से</td></tr>
</tbody></table>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="rust"><span class="giallo-l"><span style="color: #859900;">fn</span><span style="color: #268BD2;"> main</span><span>() {</span></span>
<span class="giallo-l"><span style="color: #268BD2;"> println!</span><span>(</span><span style="color: #2AA198;">"Duckquill demo blog"</span><span>);</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="toml"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln">1</span><span>[extra]</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">2</span><span style="color: #268BD2;">show_copy_button</span><span> =</span><span style="color: #B58900;"> true</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">3</span><span style="color: #268BD2;">show_reading_time</span><span> =</span><span style="color: #B58900;"> true</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">4</span><span style="color: #268BD2;">show_share_button</span><span> =</span><span style="color: #B58900;"> true</span></span></code></pre><h2 id="github-shailii-alerts"><a class="zola-anchor" href="#github-shailii-alerts" aria-label="Anchor link for: github-shailii-alerts"><i class="icon"></i></a>
GitHub-शैली Alerts</h2>
<blockquote class="markdown-alert-note">
<p>यह NOTE alert है, जिसे पृष्ठभूमि संदर्भ देने के लिए उपयोग किया जाता है।</p>
</blockquote>
<blockquote class="markdown-alert-tip">
<p>यह TIP alert है, जो व्यावहारिक सुझावों के लिए उपयोग होता है।</p>
</blockquote>
<blockquote class="markdown-alert-important">
<p>यह IMPORTANT alert है, जो महत्वपूर्ण चरणों पर जोर देता है।</p>
</blockquote>
<blockquote class="markdown-alert-warning">
<p>यह WARNING alert है, जो संभावित समस्याओं की ओर संकेत करता है।</p>
</blockquote>
<blockquote class="markdown-alert-caution">
<p>यह CAUTION alert है, जो जोखिमपूर्ण व्यवहार बताने के लिए उपयोग होता है।</p>
</blockquote>
<h2 id="katex-suutr"><a class="zola-anchor" href="#katex-suutr" aria-label="Anchor link for: katex-suutr"><i class="icon"></i></a>
KaTeX सूत्र</h2>
<p>Inline formula: $E = mc^2$.</p>
<p>Block formula:</p>
<p>$$
f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi
$$</p>
<h2 id="mermaid-aarekh"><a class="zola-anchor" href="#mermaid-aarekh" aria-label="Anchor link for: mermaid-aarekh"><i class="icon"></i></a>
Mermaid आरेख</h2>
<p>नीचे दिया गया <code>mermaid</code> block flowchart के रूप में रेंडर होता है:</p>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="mermaid"><span class="giallo-l"><span>flowchart LR</span></span>
<span class="giallo-l"><span> A[Writing] --> B[Git Commit]</span></span>
<span class="giallo-l"><span> B --> C[Zola Build]</span></span>
<span class="giallo-l"><span> C --> D[Static Deploy]</span></span>
<span class="giallo-l"><span> D --> E[Visit Site]</span></span></code></pre>
<p>एक sequence diagram का उदाहरण:</p>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="mermaid"><span class="giallo-l"><span>sequenceDiagram</span></span>
<span class="giallo-l"><span> participant U as User</span></span>
<span class="giallo-l"><span> participant G as Git Repo</span></span>
<span class="giallo-l"><span> participant Z as Zola</span></span>
<span class="giallo-l"><span> U->>G: push content</span></span>
<span class="giallo-l"><span> G-->>Z: trigger build</span></span>
<span class="giallo-l"><span> Z-->>U: generated public site</span></span></code></pre><h2 id="duckquill-shortcodes"><a class="zola-anchor" href="#duckquill-shortcodes" aria-label="Anchor link for: duckquill-shortcodes"><i class="icon"></i></a>
Duckquill Shortcodes</h2>
<p><code>alert</code> shortcode (GitHub alerts से अलग; यह थीम shortcode है):</p>
<blockquote class="markdown-alert-note">
<p>यह <code>note</code> shortcode alert है।</p>
</blockquote>
<blockquote class="markdown-alert-tip">
<p>यह <code>tip</code> shortcode alert है।</p>
</blockquote>
<blockquote class="markdown-alert-important">
<p>यह <code>important</code> shortcode alert है।</p>
</blockquote>
<blockquote class="markdown-alert-warning">
<p>यह <code>warning</code> shortcode alert है।</p>
</blockquote>
<blockquote class="markdown-alert-caution">
<p>यह <code>caution</code> shortcode alert है।</p>
</blockquote>
<p>Image shortcode (मूल उपयोग):</p>
<img class="full transparent no-hover"alt="Local feature demo figure"src="figure-demo.svg"decoding="async" loading="lazy"/>
<p>Image shortcode (अधिक विकल्प):</p>
<a href="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg" data-lightbox="true">
<img class="no-hover"alt="Compressed preview demo"src="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg"decoding="async" loading="lazy"/>
</a><img class="full transparent no-hover"alt="Feature local figure"src="figure-demo.svg"decoding="async" loading="lazy"/>
<p><img class="start transparent no-hover"alt="Float start demo"src="figure-demo.svg"decoding="async" loading="lazy"/>
यह टेक्स्ट <code>start</code> floating image व्यवहार दिखाता है, जहां छवि अनुच्छेद की शुरुआत वाली तरफ चिपकती है।</p>
<p><br />
<img class="end transparent no-hover"alt="Float end demo"src="figure-demo.svg"decoding="async" loading="lazy"/>
यह टेक्स्ट <code>end</code> floating image व्यवहार दिखाता है, जहां छवि अनुच्छेद के अंत वाली तरफ चिपकती है।</p>
<img class="spoiler"alt="Spoiler image demo"src="https://files.catbox.moe/lk7nee.jpg"decoding="async" loading="lazy"/><img class="spoiler solid"alt="Solid spoiler image demo"src="https://files.catbox.moe/lk7nee.jpg"decoding="async" loading="lazy"/>
<p>Video shortcode (मूल और autoplay उदाहरण):</p>
<video
class=""
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"aria-label="Flower wake up"preload="metadata"
controls loop muted
></video>
<video
class=""
src="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm"aria-label="Duckling preening"preload="metadata"
autoplay controls muted playsinline
></video>
<p>YouTube / Vimeo / Mastodon shortcode लिंक्स:</p>
<ul>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.youtube.com/watch?v=0Da8ZhKcNKQ">YouTube example link</a></li>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://vimeo.com/">Vimeo example link</a></li>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://toot.community/@sungsphinx/111789185826519979">Mastodon example link</a></li>
</ul>
<p>(ध्यान दें: इस showcase में third-party embeds से शोरगुल वाले console output से बचने के लिए इन्हें लिंक के रूप में दिखाया गया है।)</p>
<p>CRT shortcode:</p>
<div class="crt scanlines" aria-hidden="true">
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="plain"><span class="giallo-l"><span>user@duckquill-demo:~$ zola check</span></span>
<span class="giallo-l"><span>Checking site...</span></span>
<span class="giallo-l"><span>-> Site content: OK</span></span></code></pre>
</div>
<h2 id="html-eksttenshn-kssmtaaen"><a class="zola-anchor" href="#html-eksttenshn-kssmtaaen" aria-label="Anchor link for: html-eksttenshn-kssmtaaen"><i class="icon"></i></a>
HTML एक्सटेंशन क्षमताएं</h2>
<details>
<summary>क्लिक करके collapsible panel खोलें</summary>
<p>आप यहां कोई भी सामग्री रख सकते हैं, जिसमें सूचियां, चित्र या code snippets शामिल हैं।</p>
<ul>
<li>Collapsible सामग्री A</li>
<li>Collapsible सामग्री B</li>
</ul>
</details>
<aside>
यह `aside` ब्लॉक है, जो पूरक नोट्स के लिए उपयोगी है।
</aside>
<p>सामान्य inline HTML tags भी सीधे काम करते हैं:</p>
<ul>
<li><abbr title="American Standard Code for Information Interchange">ASCII</abbr></li>
<li><kbd>Ctrl</kbd> + <kbd>K</kbd></li>
<li><mark>highlighted key text</mark></li>
<li><span class="spoiler">this is a spoiler text</span></li>
<li><span class="spoiler solid">this is a solid spoiler text</span></li>
<li><del>old plan</del> <ins>new plan</ins></li>
<li><q>this is an inline quotation</q></li>
<li><samp>demo-output.log: all checks passed</samp></li>
<li><u>this sentence is underlined</u></li>
</ul>
<p><small>यह <code><small></code> साइड-नोट टेक्स्ट का उदाहरण है।</small></p>
<p>Form और interaction widget उदाहरण:</p>
<ul>
<li><input class="switch" type="checkbox" checked /><label> Mermaid सक्षम करें</label></li>
<li><input class="switch" type="checkbox" /><label> KaTeX सक्षम करें</label></li>
<li><input class="switch big" type="checkbox" checked /><label> Backlinks सक्षम करें</label></li>
<li><input type="radio" name="theme-demo" checked /><label> Dark</label></li>
<li><input type="radio" name="theme-demo" /><label> Light</label></li>
</ul>
<p><label for="accent-color">Accent color:</label>
<input id="accent-color" type="color" value="#14897b" /></p>
<p><label for="demo-range">Content density:</label>
<input id="demo-range" type="range" max="100" value="72" /></p>
<div id="demo-live-panel">
<small id="accent-preview">Current accent color: #14897b</small>
<small id="density-preview">Content density: 72%</small>
</div>
<p>Image + caption संयोजन (<code>figure</code> + <code>figcaption</code>):</p>
<figure>
<img alt="Local figure demo" src="figure-demo.svg" />
<figcaption>स्थानीय छवि + figcaption (कोई बाहरी निर्भरता नहीं, रेंडरिंग स्थिर रहती है)।</figcaption>
</figure>
<p>Progress bar उदाहरण (range input से page script द्वारा जुड़ा हुआ):</p>
<p><progress id="density-progress" value="72" max="100"></progress></p>
<h2 id="bttn-aur-tvrit-nevigeshn"><a class="zola-anchor" href="#bttn-aur-tvrit-nevigeshn" aria-label="Anchor link for: bttn-aur-tvrit-nevigeshn"><i class="icon"></i></a>
बटन और त्वरित नेविगेशन</h2>
<div class="buttons">
<a href="#top">ऊपर जाएं</a>
<a class="colored external" href="https://www.getzola.org/documentation/content/overview/">Zola content दस्तावेज़ पढ़ें</a>
</div>
<div class="buttons centered">
<button class="big colored" type="button" disabled>बड़े बटन शैली का डेमो</button>
</div>
<h2 id="pej-striiy-front-matter-phiicrs"><a class="zola-anchor" href="#pej-striiy-front-matter-phiicrs" aria-label="Anchor link for: pej-striiy-front-matter-phiicrs"><i class="icon"></i></a>
पेज-स्तरीय Front Matter फीचर्स</h2>
<p><code>featured = true</code> के अलावा, यह पेज निम्न भी दिखाता है:</p>
<ul>
<li><code>banner = "banner-feature-en.png"</code>: पोस्ट बैनर और सूची थंबनेल।</li>
<li><code>accent_color</code> / <code>accent_color_dark</code>: पेज-स्तरीय accent override।</li>
<li><code>styles = ["css/feature-demo-blog.css"]</code> और <code>scripts = ["js/feature-demo-blog.js"]</code>: पेज-स्कोप्ड styles और scripts।</li>
<li><code>emoji_favicon = "🧪"</code>: ब्राउज़र टैब के लिए emoji favicon।</li>
</ul>
<p>यह सेक्शन पेज-स्तरीय कॉन्फ़िग रेंडरिंग की जांच के लिए एक संक्षिप्त checklist है।</p>
<h2 id="backlinks-ddemo"><a class="zola-anchor" href="#backlinks-ddemo" aria-label="Anchor link for: backlinks-ddemo"><i class="icon"></i></a>
Backlinks डेमो</h2>
<p>मैंने <a href="https://blog.cxits.cn/">about</a> पेज से इस पोस्ट के लिए एक लिंक जोड़ा है।</p>
<p>यदि quick-action बटनों में <code>Backlinks</code> आइटम दिखता है, तो internal backlink index अपेक्षित रूप से काम कर रहा है।</p>
<hr />
<p>यदि ऊपर के सभी मॉड्यूल सही रेंडर होते हैं, तो इसका अर्थ है कि ब्लॉग की rich-text क्षमता अब अधिकांश सामान्य लेखन परिदृश्यों को कवर करती है।</p>
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn-note1">
<p>Footnotes मुख्य पढ़ने के प्रवाह को बाधित किए बिना अतिरिक्त व्याख्या देने का अच्छा तरीका हैं। <a href="#fr-note1-1">↩</a></p>
</li>
<li id="fn-note2">
<p><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.getzola.org/documentation/content/overview/">Footnotes में links भी हो सकते हैं</a> <a href="#fr-note2-1">↩</a></p>
</li>
</ol>
</section>