313 lines
71 KiB
HTML
313 lines
71 KiB
HTML
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=zh-CN><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/zh-cn/post/2019-08-08-write-a-new-post/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="撰写新文章"><meta property="og:description" content="本教程将指导您如何在 Chirpy 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。
|
||
命名和路径 创建一个新文件，使用 hugo new content/post/YYYY-MM-DD-TITLE.md。您可以根据自己的喜好更改路径，但请注意，所有文章都应该放在根目录的 content/post 中。"><meta property="og:locale" content="zh_CN"><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="写作"><meta name=twitter:card content="summary"><meta name=twitter:title content="撰写新文章"><meta name=twitter:description content="本教程将指导您如何在 Chirpy 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。
|
||
命名和路径 创建一个新文件，使用 hugo new content/post/YYYY-MM-DD-TITLE.md。您可以根据自己的喜好更改路径，但请注意，所有文章都应该放在根目录的 content/post 中。"><meta itemprop=name content="撰写新文章"><meta itemprop=description content="本教程将指导您如何在 Chirpy 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。
|
||
命名和路径 创建一个新文件，使用 hugo new content/post/YYYY-MM-DD-TITLE.md。您可以根据自己的喜好更改路径，但请注意，所有文章都应该放在根目录的 content/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="3713"><meta itemprop=keywords content="写作"><title>撰写新文章 |
|
||
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/zh-cn.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/zh-cn/ 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/zh-cn/>Chirpy</a><p class="site-subtitle fst-italic mb-0">一个专注于文本的博客主题</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/zh-cn/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||
<span>主页</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||
<span>分类</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||
<span>标签</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||
<span>归档</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||
<span>关于</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/ selected>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/>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/zh-cn/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/zh-cn/>首页</a>
|
||
</span><span>撰写新文章</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><button type=button class="btn btn-link text-decoration-none" id=search-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>撰写新文章</h1><div class="post-meta text-muted"><span>发表于
|
||
<time data-ts=1565244600 data-df=YYYY/MM/DD data-bs-toggle=tooltip data-bs-placement=bottom>%Y/%m/%d</time></span><div class="d-flex justify-content-between"><span>作者
|
||
<em><a href=https://github.com/geekifan>一凡</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="3007 字"><em>16 分钟</em> 阅读</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">撰写新文章</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">文章内容</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">撰写新文章</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=#命名和路径>命名和路径</a></li><li><a href=#前言>前言</a><ul><li><a href=#分类和标签>分类和标签</a></li><li><a href=#作者信息>作者信息</a></li><li><a href=#文章描述>文章描述</a></li></ul></li><li><a href=#目录>目录</a></li><li><a href=#评论>评论</a></li><li><a href=#媒体>媒体</a><ul><li><a href=#url前缀>URL前缀</a></li><li><a href=#图片>图片</a></li><li><a href=#视频>视频</a></li><li><a href=#音频>音频</a></li></ul></li><li><a href=#置顶文章>置顶文章</a></li><li><a href=#提示框>提示框</a></li><li><a href=#语法>语法</a><ul><li><a href=#内联代码>内联代码</a></li><li><a href=#文件路径高亮>文件路径高亮</a></li><li><a href=#代码块>代码块</a></li></ul></li><li><a href=#数学公式>数学公式</a></li><li><a href=#mermaid>Mermaid</a></li><li><a href=#了解更多>了解更多</a></li></ul></nav></div></dialog><div class=content><p>本教程将指导您如何在 <em>Chirpy</em> 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。</p><h2 id=命名和路径 id=命名和路径><span class=me-2>命名和路径</span>
|
||
<a href=#%e5%91%bd%e5%90%8d%e5%92%8c%e8%b7%af%e5%be%84 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>创建一个新文件，使用 <code>hugo new content/post/YYYY-MM-DD-TITLE.md</code>。您可以根据自己的喜好更改路径，但请注意，所有文章都应该放在根目录的 <code class=filepath>content/post</code> 中。</p><h2 id=前言 id=前言><span class=me-2>前言</span>
|
||
<a href=#%e5%89%8d%e8%a8%80 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>基本上，您需要在文章顶部填写<a href=https://gohugo.io/content-management/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><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>标题</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>您可以根据需要添加以下字段：</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>主分类, 子分类]</span><span class=w> </span><span class=c># 只支持两个分类</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>标签] </span><span class=w> </span><span class=c># 标签名称应始终为小写</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># 表示这篇文章将显示在首页顶部</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>文章描述</span><span class=w> </span><span class=c># 该文章的描述</span></span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-tip><p>文章的_布局_默认已设置为<code>post</code>，因此无需在前言块中添加变量_layout_。</p></blockquote><h3 id=分类和标签 id=分类和标签><span class=me-2>分类和标签</span>
|
||
<a href=#%e5%88%86%e7%b1%bb%e5%92%8c%e6%a0%87%e7%ad%be class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>每篇文章的 <code>categories</code> 设计为最多包含两个元素，而 <code>tags</code> 中的元素数量可以从零到无穷大。例如：</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>动物, 昆虫]</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>蜜蜂]</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=作者信息 id=作者信息><span class=me-2>作者信息</span>
|
||
<a href=#%e4%bd%9c%e8%80%85%e4%bf%a1%e6%81%af class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>文章的作者信息通常不需要在 <em>前言</em> 中填写，默认情况下，它们将从配置文件的 <code>social.name</code> 和 <code>social.links</code> 的第一个条目中获取。但您也可以按如下方式覆盖它：</p><p>在 <code>data/authors.yaml</code> 中添加作者信息（如果您的网站没有此文件，请创建一个）。</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><作者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><全名></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><作者的主页></span></span></span></code></pre></td></tr></table></div></div></div><p>然后使用 <code>author</code> 指定单个条目或 <code>authors</code> 指定多个条目：</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><作者ID> </span><span class=w> </span><span class=c># 单个条目</span><span class=w>
|
||
</span></span></span><span class=line><span class=cl><span class=w></span><span class=c># 或</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><作者1ID>, <作者2ID>] </span><span class=w> </span><span class=c># 多个条目</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>如果您不想在每篇文章的前言中指定作者，可以在 <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><作者ID></span></span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-info><p>在每篇文章前言中指定的作者将覆盖全局作者设置。因此，如果任何文章的作者与全局作者不同，可以直接在其前言中添加作者。</p></blockquote><p>要在启用 i18n 的站点上支持多语言作者信息，您可以在 <code class=filepath>data/authors/</code> 下组织特定语言的 YAML 文件中的作者数据。例如：</p><ul><li>英语：<code class=filepath>data/authors/en.yaml</code></li><li>简体中文：<code class=filepath>data/authors/zh-CN.yaml</code></li></ul><p>只需用相应的作者详细信息填充每个文件：</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><作者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><作者英文名></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><作者的主页></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><作者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><作者中文名></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><作者的主页></span></span></span></code></pre></td></tr></table></div></div></div><h3 id=文章描述 id=文章描述><span class=me-2>文章描述</span>
|
||
<a href=#%e6%96%87%e7%ab%a0%e6%8f%8f%e8%bf%b0 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>默认情况下，文章的第一句话用于在首页的文章列表、<em>进一步阅读</em> 部分以及RSS源的XML中显示。如果您不想为文章显示自动生成的描述，可以使用 <em>前言</em> 中的 <code>description</code> 字段自定义它，如下所示：</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>文章的简短摘要。</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>此外，<code>description</code> 文本也将显示在文章页面的文章标题下方。</p><h2 id=目录 id=目录><span class=me-2>目录</span>
|
||
<a href=#%e7%9b%ae%e5%bd%95 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>默认情况下，目录（TOC）显示在文章的右侧面板上。如果您想全局关闭它，请转到 <code class=filepath>config/_default/params.toml</code> 并将变量 <code>toc</code> 的值设置为 <code>false</code>。如果您想为特定文章关闭TOC，请将以下内容添加到文章的<a href=https://gohugo.io/content-management/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=评论 id=评论><span class=me-2>评论</span>
|
||
<a href=#%e8%af%84%e8%ae%ba class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>评论的全局设置由 <code class=filepath>config/_default/params.toml</code> 文件中的 <code>comments.provider</code> 选项定义。一旦为此变量选择了评论系统，所有文章将启用评论。</p><p>如果您想关闭特定文章的评论，请将以下内容添加到文章的<strong>前言</strong>中：</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=媒体 id=媒体><span class=me-2>媒体</span>
|
||
<a href=#%e5%aa%92%e4%bd%93 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>在 <em>Chirpy</em> 中，我们将图片、音频和视频称为媒体资源。</p><h3 id=url前缀 id=url前缀><span class=me-2>URL前缀</span>
|
||
<a href=#url%e5%89%8d%e7%bc%80 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><blockquote class=prompt-warning><p>URL 前缀功能正在开发中。</p></blockquote><p>有时，我们必须为一篇文章中的多个资源定义重复的URL前缀，这是一项可以通过设置两个参数来避免的繁琐任务。</p><ul><li><p>如果您使用CDN托管媒体文件，可以在 <code class=filepath>config/_default/params.toml</code> 中指定 <code>cdn</code>。然后，站点头像和文章的媒体资源的URL将以CDN域名为前缀。</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>要为当前文章/页面范围指定资源路径前缀，请在文章的 <em>前言</em> 中设置 <code>media_subpath</code>：</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>选项 <code>site.cdn</code> 和 <code>page.media_subpath</code> 可以单独使用或组合使用，以灵活组合最终的资源URL：<code>[site.cdn/][page.media_subpath/]file.ext</code></p><h3 id=图片 id=图片><span class=me-2>图片</span>
|
||
<a href=#%e5%9b%be%e7%89%87 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id=标题 id=标题><span class=me-2>标题</span>
|
||
<a href=#%e6%a0%87%e9%a2%98 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>在图片的下一行添加 HTML 属性 <code>caption</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></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="图片的标题" }</span></span></code></pre></td></tr></table></div></div></div><h4 id=尺寸 id=尺寸><span class=me-2>尺寸</span>
|
||
<a href=#%e5%b0%ba%e5%af%b8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>为防止图片加载时页面内容布局发生偏移，我们应该为每张图片设置宽度和高度。</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>对于SVG，您至少必须指定其 <em>宽度</em>，否则它不会被渲染。</p></blockquote><h4 id=位置 id=位置><span class=me-2>位置</span>
|
||
<a href=#%e4%bd%8d%e7%bd%ae class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>默认情况下，图片居中，但您可以使用 <code>normal</code>、<code>left</code> 和 <code>right</code> 类之一指定位置。</p><blockquote class=prompt-warning><p>一旦指定了位置，就不应添加图片标题。</p></blockquote><ul><li><p><strong>普通位置</strong></p><p>在下面的示例中，图片将左对齐：</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>向左浮动</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>向右浮动</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=暗亮模式 id=暗亮模式><span class=me-2>暗/亮模式</span>
|
||
<a href=#%e6%9a%97%e4%ba%ae%e6%a8%a1%e5%bc%8f class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>您可以使图片跟随暗/亮模式的主题偏好。这需要您准备两张图片，一张用于暗模式，一张用于亮模式，然后为它们分配特定的类（<code>dark</code> 或 <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=阴影 id=阴影><span class=me-2>阴影</span>
|
||
<a href=#%e9%98%b4%e5%bd%b1 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>程序窗口的截图可以考虑显示阴影效果：</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=预览图片 id=预览图片><span class=me-2>预览图片</span>
|
||
<a href=#%e9%a2%84%e8%a7%88%e5%9b%be%e7%89%87 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>如果您想在文章顶部添加图片，请提供分辨率为 <code>1200 x 630</code> 的图片。请注意，如果图片的宽高比不符合 <code>1.91 : 1</code>，图片将被缩放和裁剪。</p><p>了解这些先决条件后，您可以开始设置图片的属性：</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>图片替代文本</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>请注意，<a href=/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/#url%e5%89%8d%e7%bc%80><code>media_subpath</code></a> 也可以传递给预览图片，也就是说，当它已经设置好时，属性 <code>path</code> 只需要图片文件名。</p><h3 id=视频 id=视频><span class=me-2>视频</span>
|
||
<a href=#%e8%a7%86%e9%a2%91 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id=社交媒体平台 id=社交媒体平台><span class=me-2>社交媒体平台</span>
|
||
<a href=#%e7%a4%be%e4%ba%a4%e5%aa%92%e4%bd%93%e5%b9%b3%e5%8f%b0 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>您可以使用以下语法嵌入来自社交媒体平台的视频：</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>其中 <code>Platform</code> 是平台名称的小写形式，<code>ID</code> 是视频 ID。</p><p>下表显示了如何从给定的视频 URL 中获取我们需要的两个参数，您还可以了解当前支持的视频平台。</p><div class=table-wrapper><table><thead><tr><th>视频 URL</th><th>平台</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=视频文件 id=视频文件><span class=me-2>视频文件</span>
|
||
<a href=#%e8%a7%86%e9%a2%91%e6%96%87%e4%bb%b6 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>如果您想直接嵌入视频文件，请使用以下语法：</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>其中 <code>URL</code> 是指向视频文件的 URL，例如 <code>/path/to/sample/video.mp4</code>。</p><p>您还可以为嵌入的视频文件指定其他属性。以下是允许的属性的完整列表。</p><ul><li><code>poster='/path/to/poster.png'</code> — 视频的海报图片，在视频下载时显示</li><li><code>title='文本'</code> — 显示在视频下方的标题，外观与图片标题相同</li><li><code>autoplay=true</code> — 视频在准备好后自动开始播放</li><li><code>loop=true</code> — 在视频播放结束时自动回到起点</li><li><code>muted=true</code> — 音频最初将被静音</li><li><code>types</code> — 指定其他视频格式的扩展名，用 <code>|</code> 分隔。确保这些文件与您的主视频文件存在于同一目录中。</li></ul><p>考虑使用上述所有内容的示例：</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="演示视频"
|
||
</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=音频 id=音频><span class=me-2>音频</span>
|
||
<a href=#%e9%9f%b3%e9%a2%91 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>如果您想直接嵌入音频文件，请使用以下语法：</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>其中 <code>URL</code> 是指向音频文件的 URL，例如 <code>/path/to/audio.mp3</code>。</p><p>您还可以为嵌入的音频文件指定其他属性。以下是允许的属性的完整列表。</p><ul><li><code>title='文本'</code> — 显示在音频下方的标题，外观与图片标题相同</li><li><code>types</code> — 指定其他音频格式的扩展名，用 <code>|</code> 分隔。确保这些文件与您的主音频文件存在于同一目录中。</li></ul><p>考虑使用上述所有内容的示例：</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='演示音频'
|
||
</span></span><span class=line><span class=cl>>}}</span></span></code></pre></td></tr></table></div></div></div><h2 id=置顶文章 id=置顶文章><span class=me-2>置顶文章</span>
|
||
<a href=#%e7%bd%ae%e9%a1%b6%e6%96%87%e7%ab%a0 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>您可以将一篇或多篇文章置顶到首页顶部，置顶的文章按照它们的发布日期以倒序排序。通过以下方式启用：</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=提示框 id=提示框><span class=me-2>提示框</span>
|
||
<a href=#%e6%8f%90%e7%a4%ba%e6%a1%86 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>有几种类型的提示框：<code>tip</code>、<code>info</code>、<code>warning</code> 和 <code>danger</code>。它们可以通过向引用块添加类 <code>prompt-{type}</code> 来生成。例如，按如下方式定义 <code>info</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></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>提示框示例文本。
|
||
</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=语法 id=语法><span class=me-2>语法</span>
|
||
<a href=#%e8%af%ad%e6%b3%95 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=内联代码 id=内联代码><span class=me-2>内联代码</span>
|
||
<a href=#%e5%86%85%e8%81%94%e4%bb%a3%e7%a0%81 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>`内联代码部分`</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=文件路径高亮 id=文件路径高亮><span class=me-2>文件路径高亮</span>
|
||
<a href=#%e6%96%87%e4%bb%b6%e8%b7%af%e5%be%84%e9%ab%98%e4%ba%ae 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>{{< filepath src="/path/to/a/file.extend" >}}</span></span></code></pre></td></tr></table></div></div></div><h3 id=代码块 id=代码块><span class=me-2>代码块</span>
|
||
<a href=#%e4%bb%a3%e7%a0%81%e5%9d%97 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Markdown 符号 <code>```</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></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>这是一个纯文本代码片段。
|
||
</span></span><span class=line><span class=cl><span class=s>```</span></span></span></code></pre></td></tr></table></div></div></div><h4 id=指定语言 id=指定语言><span class=me-2>指定语言</span>
|
||
<a href=#%e6%8c%87%e5%ae%9a%e8%af%ad%e8%a8%80 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>使用 <code>```{language}</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></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=指定文件名 id=指定文件名><span class=me-2>指定文件名</span>
|
||
<a href=#%e6%8c%87%e5%ae%9a%e6%96%87%e4%bb%b6%e5%90%8d class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>您可能已经注意到代码语言将显示在代码块的顶部。如果您想用文件名替换它，可以添加 <code>file</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></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=数学公式 id=数学公式><span class=me-2>数学公式</span>
|
||
<a href=#%e6%95%b0%e5%ad%a6%e5%85%ac%e5%bc%8f class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>我们使用 <a href=https://www.mathjax.org/><strong>MathJax</strong></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>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>启用数学功能后，您可以使用以下语法添加数学公式：</p><ul><li><strong>块级数学公式</strong> 应该使用 <code>$$ math $$</code> 添加，<strong>必须</strong> 在 <code>$$</code> 之前和之后留有空行<ul><li><strong>插入方程编号</strong> 应该使用 <code>$$\begin{equation} math \end{equation}$$</code> 添加</li><li><strong>引用方程编号</strong> 应该在方程块中使用 <code>\label{eq:label_name}</code> 和在文本中使用 <code>\eqref{eq:label_name}</code> 内联引用（见下面的示例）</li></ul></li><li><strong>内联数学公式</strong>（在行中）应该使用 <code>$$ math $$</code> 添加，在 <code>$$</code> 之前或之后不要有任何空行</li><li><strong>内联数学公式</strong>（在列表中）应该使用 <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><!-- 块级数学公式，保留所有空行 --></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_数学表达式
|
||
</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><!-- 方程编号，保留所有空行 --></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_数学表达式
|
||
</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>可以引用为 \eqref{eq:label_name}。
|
||
</span></span><span class=line><span class=cl>
|
||
</span></span><span class=line><span class=cl><span class=c><!-- 行内数学公式，不要有空行 --></span>
|
||
</span></span><span class=line><span class=cl>
|
||
</span></span><span class=line><span class=cl>"Lorem ipsum dolor sit amet, $$ LaTeX_数学表达式 $$ consectetur adipiscing elit."
|
||
</span></span><span class=line><span class=cl>
|
||
</span></span><span class=line><span class=cl><span class=c><!-- 列表中的内联数学公式，第一个 </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_数学表达式 $$
|
||
</span></span><span class=line><span class=cl><span class=k>2.</span> \$$ LaTeX_数学表达式 $$
|
||
</span></span><span class=line><span class=cl>3. \$$ LaTeX_数学表达式 $$</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 支持正在开发中</p></blockquote><p><a href=https://github.com/mermaid-js/mermaid><strong>Mermaid</strong></a> 是一个很棒的图表生成工具。要在您的文章中启用它，请将以下内容添加到 YAML 块中：</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>然后您可以像其他 markdown 语言一样使用它：将图表代码用 <code>```mermaid</code> 和 <code>```</code> 包围起来。</p><h2 id=了解更多 id=了解更多><span class=me-2>了解更多</span>
|
||
<a href=#%e4%ba%86%e8%a7%a3%e6%9b%b4%e5%a4%9a class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>要了解更多关于撰写 Hugo 文章的知识，请访问 <a href=https://gohugo.io/documentation/>Hugo 文档</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=/zh-cn/categories/%E5%8D%9A%E5%AE%A2/>博客</a>
|
||
,
|
||
<a href=/zh-cn/categories/%E5%8D%9A%E5%AE%A2/%E6%95%99%E7%A8%8B/>教程</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||
<a href=/zh-cn/tags/%E5%86%99%E4%BD%9C/ class="post-tag no-text-decoration">写作</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>本文由作者按照 <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> 进行授权</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>最近更新</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-11-customize-the-favicon/>自定义网站图标</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-09-getting-started/>开始使用</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/>撰写新文章</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/>文本和排版</a></li></ul></section><section><h2 class=panel-heading>热门标签</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/zh-cn/tags/%E6%8E%92%E7%89%88/>排版</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/>入门指南</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87/>网站图标</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%86%99%E4%BD%9C/>写作</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">文章内容</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>相关文章</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/zh-cn/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">开始使用</h4><div class=text-muted><p>通过这个全面概述开始学习Chirpy的基础知识。 您将学习如何安装、配置和使用您的第一个基于Chirpy的网站，以及如何将其部署到网络服务器。</p></div></div></a></article><article class=col><a href=/chirpy-starter/zh-cn/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">自定义网站图标</h4><div class=text-muted><p>通过这个全面概述开始学习 Chirpy 的基础知识。 您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站，以及如何将其部署到网络服务器。</p></div></div></a></article><article class=col><a href=/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/ class="post-preview card h-100"><div class=card-body><time data-ts=1565235180 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">文本和排版</h4><div class=text-muted><p>文本、排版、数学公式、图表、流程图、图片、视频等示例。</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><a href=/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/ class="btn btn-outline-primary" aria-label=上一篇><p>文本和排版</p></a><a href=/chirpy-starter/zh-cn/post/2019-08-09-getting-started/ class="btn btn-outline-primary" aria-label=下一篇><p>开始使用</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="除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。">保留部分权利。</span></p><p>本站采用 <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a> 主题 <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></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>热门标签</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/zh-cn/tags/%E6%8E%92%E7%89%88/>排版</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/>入门指南</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87/>网站图标</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%86%99%E4%BD%9C/>写作</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">搜索结果为空</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/zh-cn/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> |