316 lines
72 KiB
HTML
316 lines
72 KiB
HTML
<!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> |