Deploying to gh-pages from @ geekifan/chirpy-starter@244d60af9a 🚀
This commit is contained in:
geekifan
BIN
post/2019-08-08-text-and-typography/devices-mockup.png
Normal file
BIN
post/2019-08-08-text-and-typography/devices-mockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
post/2019-08-08-text-and-typography/devtools-dark.png
Normal file
BIN
post/2019-08-08-text-and-typography/devtools-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
post/2019-08-08-text-and-typography/devtools-light.png
Normal file
BIN
post/2019-08-08-text-and-typography/devtools-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
104
post/2019-08-08-text-and-typography/index.html
Normal file
104
post/2019-08-08-text-and-typography/index.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-08-text-and-typography/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Text and Typography"><meta property="og:description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-08T11:33:00+08:00"><meta property="article:modified_time" content="2019-08-08T11:33:00+08:00"><meta property="article:tag" content="Typography"><meta name=twitter:card content="summary"><meta name=twitter:title content="Text and Typography"><meta name=twitter:description content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta itemprop=name content="Text and Typography"><meta itemprop=description content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta itemprop=datePublished content="2019-08-08T11:33:00+08:00"><meta itemprop=dateModified content="2019-08-08T11:33:00+08:00"><meta itemprop=wordCount content="570"><meta itemprop=keywords content="Typography"><title>Text and Typography |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script><script src=/chirpy-starter/js/mathjax.min.d5a771863485b941b4157c0de2d0426f86b284e264501da1d8d9b2d5973488e0.js defer></script><script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script><script id=MathJax-script src=https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js defer></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Text and Typography</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Text and Typography</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Text and Typography</h1><p class="post-desc fw-light mb-4">Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p><div class="post-meta text-muted"><span>Posted
|
||||
<time data-ts=1565235180 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="mt-3 mb-3"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devices-mockup.png class=preview-img alt="Responsive rendering of Chirpy theme on multiple devices." w=1200 h=630 lqip=data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA><figcaption class="text-center pt-2 pb-2">Responsive rendering of Chirpy theme on multiple devices.</figcaption></div><div class="d-flex justify-content-between"><span>By
|
||||
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="1587 words"><em>8 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Text and Typography</span>
|
||||
<button type=button class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">Contents</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Text and Typography</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#headings>Headings</a></li></ul><ul><li><a href=#h2--heading>H2 — heading</a><ul><li><a href=#h3--heading>H3 — heading</a></li></ul></li><li><a href=#paragraph>Paragraph</a></li><li><a href=#lists>Lists</a><ul><li><a href=#ordered-list>Ordered list</a></li><li><a href=#unordered-list>Unordered list</a></li><li><a href=#todo-list>ToDo list</a></li><li><a href=#description-list>Description list</a></li></ul></li><li><a href=#block-quote>Block Quote</a></li><li><a href=#prompts>Prompts</a></li><li><a href=#tables>Tables</a></li><li><a href=#links>Links</a></li><li><a href=#footnote>Footnote</a></li><li><a href=#inline-code>Inline code</a></li><li><a href=#filepath>Filepath</a></li><li><a href=#code-blocks>Code blocks</a><ul><li><a href=#common>Common</a></li><li><a href=#specific-language>Specific Language</a></li><li><a href=#specific-filename>Specific filename</a></li></ul></li><li><a href=#mathematics>Mathematics</a></li><li><a href=#images>Images</a><ul><li><a href=#default-with-caption>Default (with caption)</a></li><li><a href=#left-aligned>Left aligned</a></li><li><a href=#float-to-left>Float to left</a></li><li><a href=#float-to-right>Float to right</a></li><li><a href=#darklight-mode--shadow>Dark/Light mode & Shadow</a></li></ul></li><li><a href=#video>Video</a></li><li><a href=#reverse-footnote>Reverse Footnote</a></li></ul></nav></div></dialog><div class=content><h2 id=headings id=headings><span class=me-2>Headings</span>
|
||||
<a href=#headings class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h1 id=h1--heading class=mt-4 mb-0 data-toc-skip=true id=h1--heading>H1 — heading</h1><h2 id=h2--heading class=mt-4 mb-0 data-toc-skip=true id=h2--heading>H2 — heading</h2><h3 id=h3--heading class=mt-4 mb-0 data-toc-skip=true id=h3--heading>H3 — heading</h3><h4 id=h4--heading class=mt-4 data-toc-skip=true id=h4--heading>H4 — heading</h4><h2 id=paragraph id=paragraph><span class=me-2>Paragraph</span>
|
||||
<a href=#paragraph class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.</p><h2 id=lists id=lists><span class=me-2>Lists</span>
|
||||
<a href=#lists class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=ordered-list id=ordered-list><span class=me-2>Ordered list</span>
|
||||
<a href=#ordered-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ol><li>Firstly</li><li>Secondly</li><li>Thirdly</li></ol><h3 id=unordered-list id=unordered-list><span class=me-2>Unordered list</span>
|
||||
<a href=#unordered-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul><li>Chapter<ul><li>Section<ul><li>Paragraph</li></ul></li></ul></li></ul><h3 id=todo-list id=todo-list><span class=me-2>ToDo list</span>
|
||||
<a href=#todo-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul class=task-list><li class=task-list-item><i class="far fa-circle fa-fw"></i> Job<ul class=task-list><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> Step 1</li><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> Step 2</li><li class=task-list-item><i class="far fa-circle fa-fw"></i> Step 3</li></ul></li></ul><h3 id=description-list id=description-list><span class=me-2>Description list</span>
|
||||
<a href=#description-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><dl><dt>Sun</dt><dd>the star around which the earth orbits</dd><dt>Moon</dt><dd>the natural satellite of the earth, visible by reflected light from the sun</dd></dl><h2 id=block-quote id=block-quote><span class=me-2>Block Quote</span>
|
||||
<a href=#block-quote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote><p>This line shows the <em>block quote</em>.</p></blockquote><h2 id=prompts id=prompts><span class=me-2>Prompts</span>
|
||||
<a href=#prompts class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote class=prompt-tip><p>An example showing the <code>tip</code> type prompt.</p></blockquote><blockquote class=prompt-info><p>An example showing the <code>info</code> type prompt.</p></blockquote><blockquote class=prompt-warning><p>An example showing the <code>warning</code> type prompt.</p></blockquote><blockquote class=prompt-danger><p>An example showing the <code>danger</code> type prompt.</p></blockquote><h2 id=tables id=tables><span class=me-2>Tables</span>
|
||||
<a href=#tables class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=table-wrapper><table><thead><tr><th style=text-align:left>Company</th><th style=text-align:left>Contact</th><th style=text-align:right>Country</th></tr></thead><tbody><tr><td style=text-align:left>Alfreds Futterkiste</td><td style=text-align:left>Maria Anders</td><td style=text-align:right>Germany</td></tr><tr><td style=text-align:left>Island Trading</td><td style=text-align:left>Helen Bennett</td><td style=text-align:right>UK</td></tr><tr><td style=text-align:left>Magazzini Alimentari Riuniti</td><td style=text-align:left>Giovanni Rovelli</td><td style=text-align:right>Italy</td></tr></tbody></table></div><h2 id=links id=links><span class=me-2>Links</span>
|
||||
<a href=#links class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p><a href=http://127.0.0.1:4000>http://127.0.0.1:4000</a></p><h2 id=footnote id=footnote><span class=me-2>Footnote</span>
|
||||
<a href=#footnote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Click the hook will locate the footnote<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup>, and here is another footnote<sup id=fnref:2><a href=#fn:2 class=footnote-ref role=doc-noteref>2</a></sup>.</p><h2 id=inline-code id=inline-code><span class=me-2>Inline code</span>
|
||||
<a href=#inline-code class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>This is an example of <code>Inline Code</code>.</p><h2 id=filepath id=filepath><span class=me-2>Filepath</span>
|
||||
<a href=#filepath class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Here is the <code class=filepath>/path/to/the/file.extend</code>.</p><h2 id=code-blocks id=code-blocks><span class=me-2>Code blocks</span>
|
||||
<a href=#code-blocks class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=common id=common><span class=me-2>Common</span>
|
||||
<a href=#common class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Text><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>This is a common code snippet, without syntax highlight and line number.</span></span></code></pre></td></tr></table></div></div></div><h3 id=specific-language id=specific-language><span class=me-2>Specific Language</span>
|
||||
<a href=#specific-language class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Shell><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl><span class=k>if</span> <span class=o>[</span> <span class=nv>$?</span> -ne <span class=m>0</span> <span class=o>]</span><span class=p>;</span> <span class=k>then</span>
|
||||
</span></span><span class=line><span class=cl> <span class=nb>echo</span> <span class=s2>"The command was not successful."</span><span class=p>;</span>
|
||||
</span></span><span class=line><span class=cl> <span class=c1>#do the needful / exit</span>
|
||||
</span></span><span class=line><span class=cl><span class=k>fi</span><span class=p>;</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=specific-filename id=specific-filename><span class=me-2>Specific filename</span>
|
||||
<a href=#specific-filename class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=_sass/jekyll-theme-chirpy.scss><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=_sass/jekyll-theme-chirpy.scss><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-sass data-lang=sass><span class=line><span class=cl><span class=k>@import</span>
|
||||
</span></span><span class=line><span class=cl> <span class=s2>"colors/light-typography"</span><span class=o>,</span>
|
||||
</span></span><span class=line><span class=cl> <span class=s2>"colors/dark-typography"</span><span class=o>;</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=mathematics id=mathematics><span class=me-2>Mathematics</span>
|
||||
<a href=#mathematics class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>The mathematics powered by <a href=https://www.mathjax.org/><strong>MathJax</strong></a>:</p><p>$$
|
||||
\begin{equation}
|
||||
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
|
||||
\label{eq:series}
|
||||
\end{equation}
|
||||
$$</p><p>We can reference the equation as \eqref{eq:series}.</p><p>When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are</p><p>$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</p><h2 id=images id=images><span class=me-2>Images</span>
|
||||
<a href=#images class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=default-with-caption id=default-with-caption><span class=me-2>Default (with caption)</span>
|
||||
<a href=#default-with-caption class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" caption="Full screen width and center alignment" height=589 width=972>
|
||||
</a><em>Full screen width and center alignment</em><h3 id=left-aligned id=left-aligned><span class=me-2>Left aligned</span>
|
||||
<a href=#left-aligned class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-75 normal"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><h3 id=float-to-left id=float-to-left><span class=me-2>Float to left</span>
|
||||
<a href=#float-to-left class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 left"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><p>Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id=float-to-right id=float-to-right><span class=me-2>Float to right</span>
|
||||
<a href=#float-to-right class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 right"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><p>Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id=darklight-mode--shadow id=darklight-mode--shadow><span class=me-2>Dark/Light mode & Shadow</span>
|
||||
<a href=#darklight-mode--shadow class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The image below will toggle dark/light mode based on theme preference, notice it has shadows.</p><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png class="popup img-link light w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png alt="light mode only" h=668 w=1212>
|
||||
</a><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png class="popup img-link dark w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png alt="dark mode only" h=668 w=1212></a><h2 id=video id=video><span class=me-2>Video</span>
|
||||
<a href=#video class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><iframe class=embed-video loading=lazy src=https://www.youtube.com/embed/Balreaj8Yqs title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><h2 id=reverse-footnote id=reverse-footnote><span class=me-2>Reverse Footnote</span>
|
||||
<a href=#reverse-footnote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>The footnote source <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p></li><li id=fn:2><p>The 2nd footnote source <a href=#fnref:2 class=footnote-backref role=doc-backlink>↩︎</a></p></li></ol></div></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<a href=/categories/blogging/>Blogging</a>
|
||||
,
|
||||
<a href=/categories/blogging/demo/>Demo</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||||
<a href=/tags/typography/ class="post-tag no-text-decoration">typography</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Writing a New Post</h4><div class=text-muted><p>This tutorial will guide you how to write a post in the Chirpy template, and it&rsquo;s worth reading even if you&rsquo;ve used Hugo before, as many features require specific variables to be set. …</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Getting Started</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><div class="btn btn-outline-primary disabled" aria-label=Older><p>-</p></div><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="btn btn-outline-primary" aria-label=Newer><p>Writing a New Post</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
BIN
post/2019-08-08-text-and-typography/mockup.png
Normal file
BIN
post/2019-08-08-text-and-typography/mockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
316
post/2019-08-08-write-a-new-post/index.html
Normal file
316
post/2019-08-08-write-a-new-post/index.html
Normal file
@ -0,0 +1,316 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-08-write-a-new-post/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Writing a New Post"><meta property="og:description" content="This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Hugo before, as many features require specific variables to be set.
|
||||
Naming and Path Create a new file using hugo new content/post/YYYY-MM-DD-TITLE.md. You can change the path as you like, but note that all the posts should be placed in content/post of the root directory.
|
||||
Front Matter Basically, you need to fill the Front Matter as below at the top of the post:"><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-08T14:10:00+08:00"><meta property="article:modified_time" content="2019-08-08T14:10:00+08:00"><meta property="article:tag" content="Writing"><meta name=twitter:card content="summary"><meta name=twitter:title content="Writing a New Post"><meta name=twitter:description content="This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Hugo before, as many features require specific variables to be set.
|
||||
Naming and Path Create a new file using hugo new content/post/YYYY-MM-DD-TITLE.md. You can change the path as you like, but note that all the posts should be placed in content/post of the root directory.
|
||||
Front Matter Basically, you need to fill the Front Matter as below at the top of the post:"><meta itemprop=name content="Writing a New Post"><meta itemprop=description content="This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Hugo before, as many features require specific variables to be set.
|
||||
Naming and Path Create a new file using hugo new content/post/YYYY-MM-DD-TITLE.md. You can change the path as you like, but note that all the posts should be placed in content/post of the root directory.
|
||||
Front Matter Basically, you need to fill the Front Matter as below at the top of the post:"><meta itemprop=datePublished content="2019-08-08T14:10:00+08:00"><meta itemprop=dateModified content="2019-08-08T14:10:00+08:00"><meta itemprop=wordCount content="1958"><meta itemprop=keywords content="Writing"><title>Writing a New Post |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Writing a New Post</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Writing a New Post</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Writing a New Post</h1><div class="post-meta text-muted"><span>Posted
|
||||
<time data-ts=1565244600 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="d-flex justify-content-between"><span>By
|
||||
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="4316 words"><em>23 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Writing a New Post</span>
|
||||
<button type=button class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">Contents</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Writing a New Post</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#naming-and-path>Naming and Path</a></li><li><a href=#front-matter>Front Matter</a><ul><li><a href=#categories-and-tags>Categories and Tags</a></li><li><a href=#author-information>Author Information</a></li><li><a href=#post-description>Post Description</a></li></ul></li><li><a href=#table-of-contents>Table of Contents</a></li><li><a href=#comments>Comments</a></li><li><a href=#media>Media</a><ul><li><a href=#url-prefix>URL Prefix</a></li><li><a href=#images>Images</a></li><li><a href=#video>Video</a></li><li><a href=#audios>Audios</a></li></ul></li><li><a href=#pinned-posts>Pinned Posts</a></li><li><a href=#prompts>Prompts</a></li><li><a href=#syntax>Syntax</a><ul><li><a href=#inline-code>Inline Code</a></li><li><a href=#filepath-highlight>Filepath Highlight</a></li><li><a href=#code-block>Code Block</a></li></ul></li><li><a href=#mathematics>Mathematics</a></li><li><a href=#mermaid>Mermaid</a></li><li><a href=#learn-more>Learn More</a></li></ul></nav></div></dialog><div class=content><p>This tutorial will guide you how to write a post in the <em>Chirpy</em> template, and it’s worth reading even if you’ve used Hugo before, as many features require specific variables to be set.</p><h2 id=naming-and-path id=naming-and-path><span class=me-2>Naming and Path</span>
|
||||
<a href=#naming-and-path class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Create a new file using <code>hugo new content/post/YYYY-MM-DD-TITLE.md</code>. You can change the path as you like, but note that all the posts should be placed in <code class=filepath>content/post</code> of the root directory.</p><h2 id=front-matter id=front-matter><span class=me-2>Front Matter</span>
|
||||
<a href=#front-matter class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Basically, you need to fill the <a href=https://gohugo.io/content-management/front-matter/>Front Matter</a> as below at the top of the post:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span><span class=lnt>5
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=l>TITLE</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=l>YYYY-MM-DD HH:MM:SS +/-TTTT</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>draft</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>You can add the following fields as needed:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>categories</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>TOP_CATEGORY, SUB_CATEGORY]</span><span class=w> </span><span class=c># only two categories are supported</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>tags</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>TAG] </span><span class=w> </span><span class=c># TAG names should always be lowercase</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>pin</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span><span class=c># it means this post will show at the top of the home page.</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=l>Hello, World!</span><span class=w> </span><span class=c># description of this post</span></span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-tip><p>The posts’ <em>layout</em> has been set to <code>post</code> by default, so there is no need to add the variable <em>layout</em> in the Front Matter block.</p></blockquote><h3 id=categories-and-tags id=categories-and-tags><span class=me-2>Categories and Tags</span>
|
||||
<a href=#categories-and-tags class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The <code>categories</code> of each post are designed to contain up to two elements, and the number of elements in <code>tags</code> can be zero to infinity. For instance:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>categories</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>Animal, Insect]</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>tags</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>bee]</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=author-information id=author-information><span class=me-2>Author Information</span>
|
||||
<a href=#author-information class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The author information of the post usually does not need to be filled in the <em>Front Matter</em> , they will be obtained from variables <code>social.name</code> and the first entry of <code>social.links</code> of the configuration file by default. But you can also override it as follows:</p><p>Adding author information in <code>data/authors.yaml</code> (If your website doesn’t have this file, don’t hesitate to create one).</p><div class=code-block><div class=code-header><span data-label-text=data/authors.yml><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=data/authors.yml><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt><author_id></span><span class=p>:</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l><full name></span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l><homepage_of_author></span></span></span></code></pre></td></tr></table></div></div></div><p>And then use <code>author</code> to specify a single entry or <code>authors</code> to specify multiple entries:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span><span class=lnt>5
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>author</span><span class=p>:</span><span class=w> </span><span class=l><author_id> </span><span class=w> </span><span class=c># for single entry</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=c># or</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>authors</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l><author1_id>, <author2_id>] </span><span class=w> </span><span class=c># for multiple entries</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>If you don’t want to specify the author in the frontmatter of every article, you can set a global author in <code class=filepath>config/_default/params.toml</code>.</p><div class=code-block><div class=code-header><span data-label-text=config/_default/params.toml><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=config/_default/params.toml><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>author</span><span class=p>:</span><span class=w> </span><span class=l><author_id></span></span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-info><p>The author specified in each article’s frontmatter will override the global author setting. So if any article has a different author than the global one, feel free to add the author directly in its frontmatter.</p></blockquote><p>To support multilingual author information on an i18n-enabled site, you can organize author data in language-specific YAML files under <code class=filepath>data/authors/</code>. For instance:</p><ul><li>English: <code class=filepath>data/authors/en.yaml</code></li><li>Simplified Chinese: <code class=filepath>data/authors/zh-CN.yaml</code></li></ul><p>Simply populate each file with the respective author details:</p><div class=code-block><div class=code-header><span data-label-text=" data/authors/en.yaml"><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=" data/authors/en.yaml"><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt><author_id></span><span class=p>:</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l><author_name_en></span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l><homepage_of_author></span></span></span></code></pre></td></tr></table></div></div></div><div class=code-block><div class=code-header><span data-label-text=" data/authors/zh-CN.yaml"><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=" data/authors/zh-CN.yaml"><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt><author_id></span><span class=p>:</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l><author_name_zh_CN></span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l><homepage_of_author></span></span></span></code></pre></td></tr></table></div></div></div><h3 id=post-description id=post-description><span class=me-2>Post Description</span>
|
||||
<a href=#post-description class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>By default, the first words of the post are used to display on the home page for a list of posts, in the <em>Further Reading</em> section, and in the XML of the RSS feed. If you don’t want to display the auto-generated description for the post, you can customize it using the <code>description</code> field in the <em>Front Matter</em> as follows:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=l>Short summary of the post.</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>Additionally, the <code>description</code> text will also be displayed under the post title on the post’s page.</p><h2 id=table-of-contents id=table-of-contents><span class=me-2>Table of Contents</span>
|
||||
<a href=#table-of-contents class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>By default, the <strong>T</strong>able <strong>o</strong>f <strong>C</strong>ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to <code class=filepath>config/_default/params.toml</code> and set the value of variable <code>toc</code> to <code>false</code>. If you want to turn off TOC for a specific post, add the following to the post’s <a href=https://gohugo.io/content-management/front-matter/>Front Matter</a>:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>toc</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=comments id=comments><span class=me-2>Comments</span>
|
||||
<a href=#comments class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>The global setting for comments is defined by the <code>comments.provider</code> option in the <code class=filepath>config/_default/params.toml</code> file. Once a comment system is selected for this variable, comments will be enabled for all posts.</p><p>If you want to close the comment for a specific post, add the following to the <strong>Front Matter</strong> of the post:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>comments</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=media id=media><span class=me-2>Media</span>
|
||||
<a href=#media class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>We refer to images, audio and video as media resources in <em>Chirpy</em>.</p><h3 id=url-prefix id=url-prefix><span class=me-2>URL Prefix</span>
|
||||
<a href=#url-prefix class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><blockquote class=prompt-warning><p>URL prefix is under development.</p></blockquote><p>From time to time we have to define duplicate URL prefixes for multiple resources in a post, which is a boring task that you can avoid by setting two parameters.</p><ul><li><p>If you are using a CDN to host media files, you can specify the <code>cdn</code> in <code class=filepath>config/_default/params.toml</code>. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name.</p><div class=code-block><div class=code-header><span data-label-text=config/_default/params.toml><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=config/_default/params.toml><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>cdn</span><span class=p>:</span><span class=w> </span><span class=l>https://cdn.com</span></span></span></code></pre></td></tr></table></div></div></div></li><li><p>To specify the resource path prefix for the current post/page range, set <code>media_subpath</code> in the <em>front matter</em> of the post:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>media_subpath</span><span class=p>:</span><span class=w> </span><span class=l>/path/to/media/</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div></li></ul><p>The option <code>site.cdn</code> and <code>page.media_subpath</code> can be used individually or in combination to flexibly compose the final resource URL: <code>[site.cdn/][page.media_subpath/]file.ext</code></p><h3 id=images id=images><span class=me-2>Images</span>
|
||||
<a href=#images class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id=caption id=caption><span class=me-2>Caption</span>
|
||||
<a href=#caption class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>Add an html attribute <code>caption</code> to the next line of an image, then it will become the caption and appear at the bottom of the image:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ caption="Your caption of images" }</span></span></code></pre></td></tr></table></div></div></div><h4 id=size id=size><span class=me-2>Size</span>
|
||||
<a href=#size class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ width="700" height="400" }</span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-info><p>For an SVG, you have to at least specify its <em>width</em>, otherwise it won’t be rendered.</p></blockquote><h4 id=position id=position><span class=me-2>Position</span>
|
||||
<a href=#position class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>By default, the image is centered, but you can specify the position by using one of the classes <code>normal</code>, <code>left</code>, and <code>right</code>.</p><blockquote class=prompt-warning><p>Once the position is specified, the image caption should not be added.</p></blockquote><ul><li><p><strong>Normal position</strong></p><p>Image will be left aligned in below sample:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .normal }</span></span></code></pre></td></tr></table></div></div></div></li><li><p><strong>Float to the left</strong></p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .left }</span></span></code></pre></td></tr></table></div></div></div></li><li><p><strong>Float to the right</strong></p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .right }</span></span></code></pre></td></tr></table></div></div></div></li></ul><h4 id=darklight-mode id=darklight-mode><span class=me-2>Dark/Light mode</span>
|
||||
<a href=#darklight-mode class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (<code>dark</code> or <code>light</code>):</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .light }
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .dark }</span></span></code></pre></td></tr></table></div></div></div><h4 id=shadow id=shadow><span class=me-2>Shadow</span>
|
||||
<a href=#shadow class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>The screenshots of the program window can be considered to show the shadow effect:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>{ .shadow }</span></span></code></pre></td></tr></table></div></div></div><h4 id=preview-image id=preview-image><span class=me-2>Preview Image</span>
|
||||
<a href=#preview-image class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>If you want to add an image at the top of the post, please provide an image with a resolution of <code>1200 x 630</code>. Please note that if the image aspect ratio does not meet <code>1.91 : 1</code>, the image will be scaled and cropped.</p><p>Knowing these prerequisites, you can start setting the image’s attribute:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span><span class=lnt>5
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>image</span><span class=p>:</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>path</span><span class=p>:</span><span class=w> </span><span class=l>/path/to/image</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>alt</span><span class=p>:</span><span class=w> </span><span class=l>image alternative text</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>Note that the <a href=/chirpy-starter/post/2019-08-08-write-a-new-post/#url-prefix><code>media_subpath</code></a> can also be passed to the preview image, that is, when it has been set, the attribute <code>path</code> only needs the image file name.</p><h3 id=video id=video><span class=me-2>Video</span>
|
||||
<a href=#video class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id=social-media-platform id=social-media-platform><span class=me-2>Social Media Platform</span>
|
||||
<a href=#social-media-platform class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You can embed videos from social media platforms with the following syntax:</p><div class=code-block><div class=code-header><span data-label-text=Hugo><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{< embed/{Platform}.html id="{ID}" >}}</span></span></code></pre></td></tr></table></div></div></div><p>Where <code>Platform</code> is the lowercase of the platform name, and <code>ID</code> is the video ID.</p><p>The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.</p><div class=table-wrapper><table><thead><tr><th>Video URL</th><th>Platform</th><th style=text-align:left>ID</th></tr></thead><tbody><tr><td><a href="https://www.youtube.com/watch?v=H-B46URT4mg">https://www.<strong>youtube</strong>.com/watch?v=<strong>H-B46URT4mg</strong></a></td><td><code>youtube</code></td><td style=text-align:left><code>H-B46URT4mg</code></td></tr><tr><td><a href=https://www.twitch.tv/videos/1634779211>https://www.<strong>twitch</strong>.tv/videos/<strong>1634779211</strong></a></td><td><code>twitch</code></td><td style=text-align:left><code>1634779211</code></td></tr><tr><td><a href=https://www.bilibili.com/video/BV1Q44y1B7Wf>https://www.<strong>bilibili</strong>.com/video/<strong>BV1Q44y1B7Wf</strong></a></td><td><code>bilibili</code></td><td style=text-align:left><code>BV1Q44y1B7Wf</code></td></tr></tbody></table></div><h4 id=video-files id=video-files><span class=me-2>Video Files</span>
|
||||
<a href=#video-files class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>If you want to embed a video file directly, use the following syntax:</p><div class=code-block><div class=code-header><span data-label-text=Hugo><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{< embed/video.html src="{URL}" >}}</span></span></code></pre></td></tr></table></div></div></div><p>Where <code>URL</code> is a URL to a video file e.g. <code>/path/to/sample/video.mp4</code>.</p><p>You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.</p><ul><li><code>poster='/path/to/poster.png'</code> — poster image for a video that is shown while video is downloading</li><li><code>title='Text'</code> — title for a video that appears below the video and looks same as for images</li><li><code>autoplay=true</code> — video automatically begins to play back as soon as it can</li><li><code>loop=true</code> — automatically seek back to the start upon reaching the end of the video</li><li><code>muted=true</code> — audio will be initially silenced</li><li><code>types</code> — specify the extensions of additional video formats separated by <code>|</code>. Ensure these files exist in the same directory as your primary video file.</li></ul><p>Consider an example using all of the above:</p><div class=code-block><div class=code-header><span data-label-text=Liquid><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
|
||||
</span><span class=lnt> 2
|
||||
</span><span class=lnt> 3
|
||||
</span><span class=lnt> 4
|
||||
</span><span class=lnt> 5
|
||||
</span><span class=lnt> 6
|
||||
</span><span class=lnt> 7
|
||||
</span><span class=lnt> 8
|
||||
</span><span class=lnt> 9
|
||||
</span><span class=lnt>10
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{<
|
||||
</span></span><span class=line><span class=cl> embed/video.html
|
||||
</span></span><span class=line><span class=cl> src="/path/to/video.mp4"
|
||||
</span></span><span class=line><span class=cl> types="ogg|mov"
|
||||
</span></span><span class=line><span class=cl> poster="poster.png"
|
||||
</span></span><span class=line><span class=cl> title="Demo video"
|
||||
</span></span><span class=line><span class=cl> autoplay=true
|
||||
</span></span><span class=line><span class=cl> loop=true
|
||||
</span></span><span class=line><span class=cl> muted=true
|
||||
</span></span><span class=line><span class=cl>>}}</span></span></code></pre></td></tr></table></div></div></div><h3 id=audios id=audios><span class=me-2>Audios</span>
|
||||
<a href=#audios class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>If you want to embed an audio file directly, use the following syntax:</p><div class=code-block><div class=code-header><span data-label-text=Liquid><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{< embed/audio.html src="{URL}" >}}</span></span></code></pre></td></tr></table></div></div></div><p>Where <code>URL</code> is a URL to an audio file e.g. <code>/path/to/audio.mp3</code>.</p><p>You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.</p><ul><li><code>title='Text'</code> — title for an audio that appears below the audio and looks same as for images</li><li><code>types</code> — specify the extensions of additional audio formats separated by <code>|</code>. Ensure these files exist in the same directory as your primary audio file.</li></ul><p>Consider an example using all of the above:</p><div class=code-block><div class=code-header><span data-label-text=Hugo><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span><span class=lnt>5
|
||||
</span><span class=lnt>6
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{<
|
||||
</span></span><span class=line><span class=cl> include embed/audio.html
|
||||
</span></span><span class=line><span class=cl> src='/path/to/audio.mp3'
|
||||
</span></span><span class=line><span class=cl> types='ogg|wav|aac'
|
||||
</span></span><span class=line><span class=cl> title='Demo audio'
|
||||
</span></span><span class=line><span class=cl>>}}</span></span></code></pre></td></tr></table></div></div></div><h2 id=pinned-posts id=pinned-posts><span class=me-2>Pinned Posts</span>
|
||||
<a href=#pinned-posts class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>pin</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=prompts id=prompts><span class=me-2>Prompts</span>
|
||||
<a href=#prompts class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>There are several types of prompts: <code>tip</code>, <code>info</code>, <code>warning</code>, and <code>danger</code>. They can be generated by adding the class <code>prompt-{type}</code> to the blockquote. For example, define a prompt of type <code>info</code> as follows:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl><span class=k>> </span><span class=ge>Example line for prompt.
|
||||
</span></span></span><span class=line><span class=cl><span class=ge></span>{ .prompt-info }</span></span></code></pre></td></tr></table></div></div></div><h2 id=syntax id=syntax><span class=me-2>Syntax</span>
|
||||
<a href=#syntax class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=inline-code id=inline-code><span class=me-2>Inline Code</span>
|
||||
<a href=#inline-code class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl><span class=sb>`inline code part`</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=filepath-highlight id=filepath-highlight><span class=me-2>Filepath Highlight</span>
|
||||
<a href=#filepath-highlight class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Hugo><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>{{< /path/to/a/file.extend >}}</span></span></code></pre></td></tr></table></div></div></div><h3 id=code-block id=code-block><span class=me-2>Code Block</span>
|
||||
<a href=#code-block class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Markdown symbols <code>```</code> can easily create a code block as follows:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl><span class=s>```
|
||||
</span></span></span><span class=line><span class=cl><span class=s></span>This is a plaintext code snippet.
|
||||
</span></span><span class=line><span class=cl><span class=s>```</span></span></span></code></pre></td></tr></table></div></div></div><h4 id=specifying-language id=specifying-language><span class=me-2>Specifying Language</span>
|
||||
<a href=#specifying-language class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>Using <code>```{language}</code> you will get a code block with syntax highlight:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl><span class=s>```yaml
|
||||
</span></span></span><span class=line><span class=cl><span class=s></span><span class=nt>key</span><span class=p>:</span><span class=w> </span><span class=l>value</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=s>```</span></span></span></code></pre></td></tr></table></div></div></div><h4 id=specifying-the-filename id=specifying-the-filename><span class=me-2>Specifying the Filename</span>
|
||||
<a href=#specifying-the-filename class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute <code>file</code> to achieve this:</p><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>``<span class=sb>`shell { file="path/to/file" }
|
||||
</span></span></span><span class=line><span class=cl><span class=sb># content
|
||||
</span></span></span><span class=line><span class=cl><span class=sb>`</span>``</span></span></code></pre></td></tr></table></div></div></div><h2 id=mathematics id=mathematics><span class=me-2>Mathematics</span>
|
||||
<a href=#mathematics class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>We use <a href=https://www.mathjax.org/><strong>MathJax</strong></a> to generate mathematics. For website performance reasons, the mathematical feature won’t be loaded by default. But it can be enabled by:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>math</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>After enabling the mathematical feature, you can add math equations with the following syntax:</p><ul><li><strong>Block math</strong> should be added with <code>$$ math $$</code> with <strong>mandatory</strong> blank lines before and after <code>$$</code><ul><li><strong>Inserting equation numbering</strong> should be added with <code>$$\begin{equation} math \end{equation}$$</code></li><li><strong>Referencing equation numbering</strong> should be done with <code>\label{eq:label_name}</code> in the equation block and <code>\eqref{eq:label_name}</code> inline with text (see example below)</li></ul></li><li><strong>Inline math</strong> (in lines) should be added with <code>$$ math $$</code> without any blank line before or after <code>$$</code></li><li><strong>Inline math</strong> (in lists) should be added with <code>\$$ math $$</code></li></ul><div class=code-block><div class=code-header><span data-label-text=Markdown><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
|
||||
</span><span class=lnt> 2
|
||||
</span><span class=lnt> 3
|
||||
</span><span class=lnt> 4
|
||||
</span><span class=lnt> 5
|
||||
</span><span class=lnt> 6
|
||||
</span><span class=lnt> 7
|
||||
</span><span class=lnt> 8
|
||||
</span><span class=lnt> 9
|
||||
</span><span class=lnt>10
|
||||
</span><span class=lnt>11
|
||||
</span><span class=lnt>12
|
||||
</span><span class=lnt>13
|
||||
</span><span class=lnt>14
|
||||
</span><span class=lnt>15
|
||||
</span><span class=lnt>16
|
||||
</span><span class=lnt>17
|
||||
</span><span class=lnt>18
|
||||
</span><span class=lnt>19
|
||||
</span><span class=lnt>20
|
||||
</span><span class=lnt>21
|
||||
</span><span class=lnt>22
|
||||
</span><span class=lnt>23
|
||||
</span><span class=lnt>24
|
||||
</span><span class=lnt>25
|
||||
</span><span class=lnt>26
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl><span class=c><!-- Block math, keep all blank lines --></span>
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>$$
|
||||
</span></span><span class=line><span class=cl>LaTeX_math_expression
|
||||
</span></span><span class=line><span class=cl>$$
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl><span class=c><!-- Equation numbering, keep all blank lines --></span>
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>$$
|
||||
</span></span><span class=line><span class=cl>\begin{equation}
|
||||
</span></span><span class=line><span class=cl> LaTeX_math_expression
|
||||
</span></span><span class=line><span class=cl> \label{eq:label_name}
|
||||
</span></span><span class=line><span class=cl>\end{equation}
|
||||
</span></span><span class=line><span class=cl>$$
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>Can be referenced as \eqref{eq:label_name}.
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl><span class=c><!-- Inline math in lines, NO blank lines --></span>
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl>"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl><span class=c><!-- Inline math in lists, escape the first </span><span class=sb>`$`</span><span class=c> --></span>
|
||||
</span></span><span class=line><span class=cl>
|
||||
</span></span><span class=line><span class=cl><span class=k>1.</span> \$$ LaTeX_math_expression $$
|
||||
</span></span><span class=line><span class=cl><span class=k>2.</span> \$$ LaTeX_math_expression $$
|
||||
</span></span><span class=line><span class=cl>3. \$$ LaTeX_math_expression $$</span></span></code></pre></td></tr></table></div></div></div><h2 id=mermaid id=mermaid><span class=me-2>Mermaid</span>
|
||||
<a href=#mermaid class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote class=prompt-warning><p>Mermaid support is under development</p></blockquote><p><a href=https://github.com/mermaid-js/mermaid><strong>Mermaid</strong></a> is a great diagram generation tool. To enable it on your post, add the following to the YAML block:</p><div class=code-block><div class=code-header><span data-label-text=YAML><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>mermaid</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span></span></span></code></pre></td></tr></table></div></div></div><p>Then you can use it like other markdown languages: surround the graph code with <code>```mermaid</code> and <code>```</code>.</p><h2 id=learn-more id=learn-more><span class=me-2>Learn More</span>
|
||||
<a href=#learn-more class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>For more knowledge about writing Hugo posts, visit the <a href=https://gohugo.io/documentation/>Hugo Documentation</a>.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<a href=/categories/blogging/>Blogging</a>
|
||||
,
|
||||
<a href=/categories/blogging/tutorial/>Tutorial</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||||
<a href=/tags/writing/ class="post-tag no-text-decoration">writing</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Getting Started</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-08-text-and-typography/ class="post-preview card h-100"><div class=card-body><time data-ts=1565235180 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Text and Typography</h4><div class=text-muted><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/ class="btn btn-outline-primary" aria-label=Older><p>Text and Typography</p></a><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="btn btn-outline-primary" aria-label=Newer><p>Getting Started</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
78
post/2019-08-09-getting-started/index.html
Normal file
78
post/2019-08-09-getting-started/index.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-09-getting-started/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Getting Started"><meta property="og:description" content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-09T20:55:00+08:00"><meta property="article:modified_time" content="2019-08-09T20:55:00+08:00"><meta property="article:tag" content="Getting Started"><meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=name content="Getting Started"><meta itemprop=description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=datePublished content="2019-08-09T20:55:00+08:00"><meta itemprop=dateModified content="2019-08-09T20:55:00+08:00"><meta itemprop=wordCount content="808"><meta itemprop=keywords content="Getting Started"><title>Getting Started |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Getting Started</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Getting Started</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Getting Started</h1><p class="post-desc fw-light mb-4">Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p><div class="post-meta text-muted"><span>Posted
|
||||
<time data-ts=1565355300 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="d-flex justify-content-between"><span>By
|
||||
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="1193 words"><em>6 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Getting Started</span>
|
||||
<button type=button class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">Contents</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Getting Started</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#creating-a-site-repository>Creating a Site Repository</a><ul><li><a href=#option-1-using-the-starter-recommended>Option 1. Using the Starter (Recommended)</a></li><li><a href=#option-2-forking-the-theme>Option 2. Forking the Theme</a></li></ul></li><li><a href=#setting-up-the-environment>Setting up the Environment</a><ul><li><a href=#using-dev-containers-recommended-for-windows>Using Dev Containers (Recommended for Windows)</a></li><li><a href=#setting-up-natively-recommended-for-unix-like-os>Setting up Natively (Recommended for Unix-like OS)</a></li></ul></li><li><a href=#usage>Usage</a><ul><li><a href=#start-the-jekyll-server>Start the Jekyll Server</a></li><li><a href=#configuration>Configuration</a></li><li><a href=#social-contact-options>Social Contact Options</a></li><li><a href=#customizing-the-stylesheet>Customizing the Stylesheet</a></li><li><a href=#customizing-static-assets>Customizing Static Assets</a></li></ul></li><li><a href=#deployment>Deployment</a><ul><li><a href=#deploy-using-github-actions>Deploy Using Github Actions</a></li><li><a href=#manual-build-and-deployment>Manual Build and Deployment</a></li></ul></li></ul></nav></div></dialog><div class=content><blockquote class=prompt-warning><p><strong>NOTE:</strong> This tutorial is not fully migrated from the Jekyll version – please reference with caution.</p></blockquote><h2 id=creating-a-site-repository id=creating-a-site-repository><span class=me-2>Creating a Site Repository</span>
|
||||
<a href=#creating-a-site-repository class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>When creating your site repository, you have two options depending on your needs:</p><h3 id=option-1-using-the-starter-recommended id=option-1-using-the-starter-recommended><span class=me-2>Option 1. Using the Starter (Recommended)</span>
|
||||
<a href=#option-1-using-the-starter-recommended class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.</p><ol><li>Sign in to GitHub and navigate to the <a href=https://github.com/geekifan/chirpy-starter><strong>starter</strong></a>.</li><li>Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.</li><li>Name the new repository <code><username>.github.io</code>, replacing <code>username</code> with your lowercase GitHub username.</li></ol><h3 id=option-2-forking-the-theme id=option-2-forking-the-theme><span class=me-2>Option 2. Forking the Theme</span>
|
||||
<a href=#option-2-forking-the-theme class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don’t try this unless you are familiar with Jekyll and plan to heavily modify this theme.</p><ol><li>Sign in to GitHub.</li><li><a href=https://github.com/geekifan/jekyll-theme-chirpy/fork>Fork the theme repository</a>.</li><li>Name the new repository <code><username>.github.io</code>, replacing <code>username</code> with your lowercase GitHub username.</li></ol><h2 id=setting-up-the-environment id=setting-up-the-environment><span class=me-2>Setting up the Environment</span>
|
||||
<a href=#setting-up-the-environment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Once your repository is created, it’s time to set up your development environment. There are two primary methods:</p><h3 id=using-dev-containers-recommended-for-windows id=using-dev-containers-recommended-for-windows><span class=me-2>Using Dev Containers (Recommended for Windows)</span>
|
||||
<a href=#using-dev-containers-recommended-for-windows class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.</p><p><strong>Steps</strong>:</p><ol><li>Install Docker:<ul><li>On Windows/macOS, install <a href=https://www.docker.com/products/docker-desktop/>Docker Desktop</a>.</li><li>On Linux, install <a href=https://docs.docker.com/engine/install/>Docker Engine</a>.</li></ul></li><li>Install <a href=https://code.visualstudio.com/>VS Code</a> and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers">Dev Containers extension</a>.</li><li>Clone your repository:<ul><li>For Docker Desktop: Start VS Code and <a href=https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume>clone your repo in a container volume</a>.</li><li>For Docker Engine: Clone your repo locally, then <a href=https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container>open it in a container</a> via VS Code.</li></ul></li><li>Wait for the Dev Containers setup to complete.</li></ol><h3 id=setting-up-natively-recommended-for-unix-like-os id=setting-up-natively-recommended-for-unix-like-os><span class=me-2>Setting up Natively (Recommended for Unix-like OS)</span>
|
||||
<a href=#setting-up-natively-recommended-for-unix-like-os class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.</p><p><strong>Steps</strong>:</p><ol><li>Follow the <a href=https://gohugo.io/installation/>Hugo installation guide</a> to install Hugo and ensure <a href=https://git-scm.com/>Git</a> is installed.</li><li>Clone your repository to your local machine.</li><li>Run command <code>hugo mod get</code> to install the dependencies.</li></ol><h2 id=usage id=usage><span class=me-2>Usage</span>
|
||||
<a href=#usage class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=start-the-jekyll-server id=start-the-jekyll-server><span class=me-2>Start the Jekyll Server</span>
|
||||
<a href=#start-the-jekyll-server class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To run the site locally, use the following command:</p><div class=code-block><div class=code-header><span data-label-text=Terminal><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>hugo serve</span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-info><p>If you are using Dev Containers, you must run that command in the <strong>VS Code</strong> Terminal.</p></blockquote><p>After a few seconds, the local server will be available at <a href=http://127.0.0.1:1313>http://127.0.0.1:1313</a>.</p><h3 id=configuration id=configuration><span class=me-2>Configuration</span>
|
||||
<a href=#configuration class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Update the variables in <code class=filepath>_config.yml</code> as needed. Some typical options include:</p><ul><li><code>url</code></li><li><code>avatar</code></li><li><code>timezone</code></li><li><code>lang</code></li></ul><h3 id=social-contact-options id=social-contact-options><span class=me-2>Social Contact Options</span>
|
||||
<a href=#social-contact-options class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the <code class=filepath>_data/contact.yml</code> file.</p><h3 id=customizing-the-stylesheet id=customizing-the-stylesheet><span class=me-2>Customizing the Stylesheet</span>
|
||||
<a href=#customizing-the-stylesheet class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To customize the stylesheet, copy the theme’s <code class=filepath>assets/css/jekyll-theme-chirpy.scss</code> file to the same path in your Jekyll site, and add your custom styles at the end of the file.</p><h3 id=customizing-static-assets id=customizing-static-assets><span class=me-2>Customizing Static Assets</span>
|
||||
<a href=#customizing-static-assets class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Static assets configuration was introduced in version <code>5.1.0</code>. The CDN of the static assets is defined in <code class=filepath>_data/origin/cors.ymll</code>. You can replace some of them based on the network conditions in the region where your website is published.</p><p>If you prefer to self-host the static assets, modify <code class=filepath>config/_default/params.toml</code> and turn <code>self_host</code> on. The static files are from <a href=https://github.com/geekifan/chirpy-static-assets#readme>geekifan/chirpy-static-assets</a> which is a fork of <a href=https://github.com/cotes2020/chirpy-static-assets#readme>cotes2020/chirpy-static-assets</a> with minimal changes to make it work with hugo.</p><h2 id=deployment id=deployment><span class=me-2>Deployment</span>
|
||||
<a href=#deployment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Before deploying, check the <code class=filepath>_config.yml</code> file and ensure the <code>url</code> is configured correctly. If you prefer a <a href=https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites><strong>project site</strong></a> and don’t use a custom domain, or if you want to visit your website with a base URL on a web server other than <strong>GitHub Pages</strong>, remember to set the <code>baseurl</code> to your project name, starting with a slash, e.g., <code>/project-name</code>.</p><p>Now you can choose <em>ONE</em> of the following methods to deploy your Jekyll site.</p><h3 id=deploy-using-github-actions id=deploy-using-github-actions><span class=me-2>Deploy Using Github Actions</span>
|
||||
<a href=#deploy-using-github-actions class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Prepare the following:</p><ul><li><p>If you’re on the GitHub Free plan, keep your site repository public.</p></li><li><p>If you have committed <code class=filepath>Gemfile.lockl</code> to the repository, and your local machine is not running Linux, update the platform list of the lock file:</p><div class=code-block><div class=code-header><span data-label-text=Console><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-console data-lang=console><span class=line><span class=cl><span class=gp>$</span> bundle lock --add-platform x86_64-linux
|
||||
</span></span></code></pre></td></tr></table></div></div></div></li></ul><p>Next, configure the <em>Pages</em> service:</p><ol><li>Go to your repository on GitHub. Select the <em>Settings</em> tab, then click <em>Pages</em> in the left navigation bar. In the <strong>Source</strong> section (under <em>Build and deployment</em>), select <a href=https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow><strong>GitHub Actions</strong></a> from the dropdown menu.</li></ol><a href=/chirpy-starter/post/2019-08-09-getting-started/pages-source-light.png class="popup img-link light border normal"><img src=/chirpy-starter/post/2019-08-09-getting-started/pages-source-light.png alt="Build source" height=140 width=375>
|
||||
</a><a href=/chirpy-starter/post/2019-08-09-getting-started/pages-source-dark.png class="popup img-link dark normal"><img src=/chirpy-starter/post/2019-08-09-getting-started/pages-source-dark.png alt="Build source" height=140 width=375></a><ol start=2><li>Push any commits to GitHub to trigger the <em>Actions</em> workflow. In the <em>Actions</em> tab of your repository, you should see the workflow <em>Build and Deploy</em> running. Once the build is complete and successful, the site will be deployed automatically.</li></ol><p>You can now visit the URL provided by GitHub to access your site.</p><h3 id=manual-build-and-deployment id=manual-build-and-deployment><span class=me-2>Manual Build and Deployment</span>
|
||||
<a href=#manual-build-and-deployment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.</p><p>Navigate to the root of the source project, and build your site with the following command:</p><div class=code-block><div class=code-header><span data-label-text=Console><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-console data-lang=console><span class=line><span class=cl><span class=gp>$</span> <span class=nv>JEKYLL_ENV</span><span class=o>=</span>production bundle <span class=nb>exec</span> jekyll b
|
||||
</span></span></code></pre></td></tr></table></div></div></div><p>Unless you specified the output path, the generated site files will be placed in the <code class=filepath>_site</code>folder of the project’s root directory. Upload these files to your target server.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<a href=/categories/blogging/>Blogging</a>
|
||||
,
|
||||
<a href=/categories/blogging/tutorial/>Tutorial</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||||
<a href=/tags/getting-started/ class="post-tag no-text-decoration">getting started</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Writing a New Post</h4><div class=text-muted><p>This tutorial will guide you how to write a post in the Chirpy template, and it&rsquo;s worth reading even if you&rsquo;ve used Hugo before, as many features require specific variables to be set. …</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-08-text-and-typography/ class="post-preview card h-100"><div class=card-body><time data-ts=1565235180 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Text and Typography</h4><div class=text-muted><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="btn btn-outline-primary" aria-label=Older><p>Writing a New Post</p></a><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="btn btn-outline-primary" aria-label=Newer><p>Customize the Favicon</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
BIN
post/2019-08-09-getting-started/pages-source-dark.png
Normal file
BIN
post/2019-08-09-getting-started/pages-source-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
post/2019-08-09-getting-started/pages-source-light.png
Normal file
BIN
post/2019-08-09-getting-started/pages-source-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
59
post/2019-08-11-customize-the-favicon/index.html
Normal file
59
post/2019-08-11-customize-the-favicon/index.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-11-customize-the-favicon/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Customize the Favicon"><meta property="og:description" content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-11T00:34:00+08:00"><meta property="article:modified_time" content="2019-08-11T00:34:00+08:00"><meta property="article:tag" content="Favicon"><meta name=twitter:card content="summary"><meta name=twitter:title content="Customize the Favicon"><meta name=twitter:description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=name content="Customize the Favicon"><meta itemprop=description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=datePublished content="2019-08-11T00:34:00+08:00"><meta itemprop=dateModified content="2019-08-11T00:34:00+08:00"><meta itemprop=wordCount content="212"><meta itemprop=keywords content="Favicon"><title>Customize the Favicon |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Customize the Favicon</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Customize the Favicon</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Customize the Favicon</h1><p class="post-desc fw-light mb-4">Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p><div class="post-meta text-muted"><span>Posted
|
||||
<time data-ts=1565454840 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="d-flex justify-content-between"><span>By
|
||||
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="433 words"><em>2 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Customize the Favicon</span>
|
||||
<button type=button class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">Contents</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Customize the Favicon</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#generate-the-favicon>Generate the favicon</a></li><li><a href=#download--replace>Download & Replace</a></li></ul></nav></div></dialog><div class=content><p>The <a href=https://www.favicon-generator.org/about/>favicons</a> of <a href=https://github.com/cotes2020/jekyll-theme-chirpy/><strong>Chirpy</strong></a> are placed in the directory <code class=filepath>assets/img/favicons/</code>. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.</p><h2 id=generate-the-favicon id=generate-the-favicon><span class=me-2>Generate the favicon</span>
|
||||
<a href=#generate-the-favicon class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool <a href=https://realfavicongenerator.net/><strong>Real Favicon Generator</strong></a> and click the button <kbd>Select your Favicon image</kbd> to upload your image file.</p><p>In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.</p><h2 id=download--replace id=download--replace><span class=me-2>Download & Replace</span>
|
||||
<a href=#download--replace class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Download the generated package, unzip and delete the following two from the extracted files:</p><ul><li><code class=filepath>browserconfig.xml</code></li><li><code class=filepath>site.webmanifest</code></li></ul><p>And then copy the remaining image files (<code class=filepath>.PNG</code> and <code class=filepath>.ICO</code>) to cover the original files in the directory <code class=filepath>assets/img/favicons/</code> of your Hugo site. If your Hugo site doesn’t have this directory yet, just create one.</p><p>The following table will help you understand the changes to the favicon files:</p><div class=table-wrapper><table><thead><tr><th>File(s)</th><th style=text-align:center>From Online Tool</th><th style=text-align:center>From Chirpy</th></tr></thead><tbody><tr><td><code>*.PNG</code></td><td style=text-align:center>✓</td><td style=text-align:center>✗</td></tr><tr><td><code>*.ICO</code></td><td style=text-align:center>✓</td><td style=text-align:center>✗</td></tr></tbody></table></div><blockquote class=prompt-info><p>✓ means keep, ✗ means delete.</p></blockquote><p>The next time you build the site, the favicon will be replaced with a customized edition.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<a href=/categories/blogging/>Blogging</a>
|
||||
,
|
||||
<a href=/categories/blogging/tutorial/>Tutorial</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||||
<a href=/tags/favicon/ class="post-tag no-text-decoration">favicon</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Writing a New Post</h4><div class=text-muted><p>This tutorial will guide you how to write a post in the Chirpy template, and it&rsquo;s worth reading even if you&rsquo;ve used Hugo before, as many features require specific variables to be set. …</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Getting Started</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-08-text-and-typography/ class="post-preview card h-100"><div class=card-body><time data-ts=1565235180 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Text and Typography</h4><div class=text-muted><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="btn btn-outline-primary" aria-label=Older><p>Getting Started</p></a><div class="btn btn-outline-primary disabled" aria-label=Newer><p>-</p></div></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
44
post/index.html
Normal file
44
post/index.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Posts"><meta property="og:locale" content="en"><meta property="og:type" content="website"><meta name=twitter:card content="summary"><meta name=twitter:title content="Posts"><meta itemprop=name content="Posts"><meta itemprop=datePublished content="2019-08-11T00:34:00+08:00"><meta itemprop=dateModified content="2019-08-11T00:34:00+08:00"><title>Posts |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script defer src=/chirpy-starter/js/post.js></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Posts</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title></div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><main class=section-page><header class=section-header><h1>Posts</h1></header><div class=section-content></div><div class=section-pages><h2>Subsections & Pages</h2><ul class=page-list><li><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a><p class=page-description>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></li><li><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a><p class=page-description>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></li><li><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a><p class=page-description>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></li></ul></div></main></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
63
post/index.xml
Normal file
63
post/index.xml
Normal file
@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Posts on Chirpy</title><link>https://geekifan.github.io/chirpy-starter/post/</link><description>Recent content in Posts on Chirpy</description><generator>Hugo</generator><language>en</language><lastBuildDate>Sun, 11 Aug 2019 00:34:00 +0800</lastBuildDate><atom:link href="https://geekifan.github.io/chirpy-starter/post/index.xml" rel="self" type="application/rss+xml"/><item><title>Customize the Favicon</title><link>https://geekifan.github.io/chirpy-starter/post/2019-08-11-customize-the-favicon/</link><pubDate>Sun, 11 Aug 2019 00:34:00 +0800</pubDate><guid>https://geekifan.github.io/chirpy-starter/post/2019-08-11-customize-the-favicon/</guid><description><p>The <a href="https://www.favicon-generator.org/about/">favicons</a> of <a href="https://github.com/cotes2020/jekyll-theme-chirpy/"><strong>Chirpy</strong></a> are placed in the directory <code class="filepath">assets/img/favicons/</code>. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.</p>
|
||||
<h2 id="generate-the-favicon" id=generate-the-favicon>
|
||||
|
||||
<span class="me-2">Generate the favicon</span>
|
||||
<a href="#generate-the-favicon" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><p>Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool <a href="https://realfavicongenerator.net/"><strong>Real Favicon Generator</strong></a> and click the button <kbd>Select your Favicon image</kbd> to upload your image file.</p></description></item><item><title>Getting Started</title><link>https://geekifan.github.io/chirpy-starter/post/2019-08-09-getting-started/</link><pubDate>Fri, 09 Aug 2019 20:55:00 +0800</pubDate><guid>https://geekifan.github.io/chirpy-starter/post/2019-08-09-getting-started/</guid><description><blockquote class="prompt-warning"><p><strong>NOTE:</strong> This tutorial is not fully migrated from the Jekyll version &ndash; please reference with caution.</p></blockquote>
|
||||
<h2 id="creating-a-site-repository" id=creating-a-site-repository>
|
||||
|
||||
<span class="me-2">Creating a Site Repository</span>
|
||||
<a href="#creating-a-site-repository" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><p>When creating your site repository, you have two options depending on your needs:</p>
|
||||
<h3 id="option-1-using-the-starter-recommended" id=option-1-using-the-starter-recommended>
|
||||
|
||||
<span class="me-2">Option 1. Using the Starter (Recommended)</span>
|
||||
<a href="#option-1-using-the-starter-recommended" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h3><p>This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.</p>
|
||||
<ol>
|
||||
<li>Sign in to GitHub and navigate to the <a href="https://github.com/geekifan/chirpy-starter"><strong>starter</strong></a>.</li>
|
||||
<li>Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.</li>
|
||||
<li>Name the new repository <code>&lt;username&gt;.github.io</code>, replacing <code>username</code> with your lowercase GitHub username.</li>
|
||||
</ol>
|
||||
<h3 id="option-2-forking-the-theme" id=option-2-forking-the-theme>
|
||||
|
||||
<span class="me-2">Option 2. Forking the Theme</span>
|
||||
<a href="#option-2-forking-the-theme" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h3><p>This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don&rsquo;t try this unless you are familiar with Jekyll and plan to heavily modify this theme.</p></description></item><item><title>Writing a New Post</title><link>https://geekifan.github.io/chirpy-starter/post/2019-08-08-write-a-new-post/</link><pubDate>Thu, 08 Aug 2019 14:10:00 +0800</pubDate><guid>https://geekifan.github.io/chirpy-starter/post/2019-08-08-write-a-new-post/</guid><description><p>This tutorial will guide you how to write a post in the <em>Chirpy</em> template, and it&rsquo;s worth reading even if you&rsquo;ve used Hugo before, as many features require specific variables to be set.</p>
|
||||
<h2 id="naming-and-path" id=naming-and-path>
|
||||
|
||||
<span class="me-2">Naming and Path</span>
|
||||
<a href="#naming-and-path" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><p>Create a new file using <code>hugo new content/post/YYYY-MM-DD-TITLE.md</code>. You can change the path as you like, but note that all the posts should be placed in <code class="filepath">content/post</code> of the root directory.</p>
|
||||
<h2 id="front-matter" id=front-matter>
|
||||
|
||||
<span class="me-2">Front Matter</span>
|
||||
<a href="#front-matter" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><p>Basically, you need to fill the <a href="https://gohugo.io/content-management/front-matter/">Front Matter</a> as below at the top of the post:</p></description></item><item><title>Text and Typography</title><link>https://geekifan.github.io/chirpy-starter/post/2019-08-08-text-and-typography/</link><pubDate>Thu, 08 Aug 2019 11:33:00 +0800</pubDate><guid>https://geekifan.github.io/chirpy-starter/post/2019-08-08-text-and-typography/</guid><description><h2 id="headings" id=headings>
|
||||
|
||||
<span class="me-2">Headings</span>
|
||||
<a href="#headings" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><!-- markdownlint-capture -->
|
||||
<!-- markdownlint-disable -->
|
||||
<h1 id="h1--heading" class=mt-4 mb-0 data-toc-skip=true id=h1--heading>
|
||||
H1 — heading
|
||||
</h1><h2 id="h2--heading" class=mt-4 mb-0 data-toc-skip=true id=h2--heading>
|
||||
H2 — heading
|
||||
</h2><h3 id="h3--heading" class=mt-4 mb-0 data-toc-skip=true id=h3--heading>
|
||||
H3 — heading
|
||||
</h3><h4 id="h4--heading" class=mt-4 data-toc-skip=true id=h4--heading>
|
||||
H4 — heading
|
||||
</h4><!-- markdownlint-restore -->
|
||||
<h2 id="paragraph" id=paragraph>
|
||||
|
||||
<span class="me-2">Paragraph</span>
|
||||
<a href="#paragraph" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>
|
||||
|
||||
</h2><p>Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.</p></description></item></channel></rss>
|
||||
Reference in New Issue
Block a user