[{"categories":null,"contents":"Chirpy 是一个基于 Jekyll 的博客主题。由于 Jekyll 的设计限制，它本身不支持国际化（i18n），需要依赖第三方插件来实现 i18n 功能。为了让 Chirpy 在不依赖第三方插件的情况下支持 i18n，hugo-theme-chirpy 项目将 Chirpy 主题迁移至 Hugo，并进行了最小化的适配。Chirpy 的所有功能在 hugo-theme-chirpy 中均可使用（不过在 Hugo 框架下，部分功能的操作方式可能有所不同）。\n跟随示例站点的文章，快速搭建一个免费的个人博客吧！\n功能特点 深色模式：在低光环境下提升阅读体验。 多语言界面：轻松切换不同语言。 高效的文章管理：支持层级分类、热门标签、推荐阅读和搜索功能。 优化的布局：包含目录、语法高亮、提示框等。 丰富的写作扩展：支持数学公式、图表、流程图和嵌入式媒体。 多种评论系统：提供多种评论方案可选。 网站分析工具：集成多种分析工具。 现代 Web 技术：优化 SEO 和网页性能。 RSS 订阅支持：通过 RSS 让读者获取最新内容。 ","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/about/","tags":null,"title":"关于"},{"categories":["博客","教程"],"contents":"Chirpy 的网站图标放置在 assets/img/favicons/ 目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。\n生成网站图标 准备一张尺寸为 512x512 或更大的正方形图像（PNG、JPG 或 SVG），然后前往在线工具 Real Favicon Generator，点击 Select your Favicon image 按钮上传您的图像文件。\n在下一步中，网页将显示所有使用场景。您可以保留默认选项，滚动到页面底部，点击 Generate your Favicons and HTML code 按钮生成网站图标。\n下载与替换 下载生成的包，解压并从提取的文件中删除以下两个文件：\nbrowserconfig.xml site.webmanifest 然后将剩余的图像文件（.PNG 和 .ICO）复制到您的 Hugo 站点的 assets/img/favicons/ 目录中，覆盖原始文件。如果您的 Hugo 站点还没有这个目录，只需创建一个。\n下表将帮助您理解网站图标文件的变化：\n文件 来自在线工具 来自 Chirpy *.PNG ✓ ✗ *.ICO ✓ ✗ ✓ 表示保留，✗ 表示删除。\n下次构建站点时，网站图标将被自定义版本替换。\n","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/post/2019-08-11-customize-the-favicon/","tags":["网站图标"],"title":"自定义网站图标"},{"categories":["博客","教程"],"contents":"NOTE: 该教程还没有完成从 Jekyll 版本的迁移，请谨慎参考。\n创建站点仓库 创建站点仓库时，根据您的需求有两种选择：\n选项1. 使用起始模板（推荐） 这种方法简化了升级过程，隔离了不必要的文件，非常适合那些想专注于写作而不需要太多配置的用户。\n登录GitHub并导航到起始模板。 点击Use this template按钮，然后选择Create a new repository。 将新仓库命名为\u0026lt;username\u0026gt;.github.io，其中username替换为您的小写GitHub用户名。 选项2. 复刻主题 这种方法便于修改功能或UI设计，但在升级时会遇到挑战。除非您熟悉Jekyll并计划对此主题进行大量修改，否则不要尝试这种方法。\n登录GitHub。 复刻主题仓库。 将新仓库命名为\u0026lt;username\u0026gt;.github.io，其中username替换为您的小写GitHub用户名。 设置环境 创建仓库后，是时候设置您的开发环境了。主要有两种方法：\n使用开发容器（Windows系统推荐） 开发容器使用Docker提供隔离环境，这可以防止与您的系统冲突，并确保所有依赖项都在容器内管理。\n步骤:\n安装Docker： 在Windows/macOS上，安装Docker Desktop。 在Linux上，安装Docker Engine。 安装VS Code和Dev Containers扩展。 克隆您的仓库： 对于Docker Desktop：启动VS Code并在容器卷中克隆您的仓库。 对于Docker Engine：在本地克隆您的仓库，然后通过VS Code在容器中打开它。 等待开发容器设置完成。 本地设置（类Unix操作系统推荐） 对于类Unix系统，您可以本地设置环境以获得最佳性能，不过您也可以使用开发容器作为替代方案。\n步骤:\n按照Jekyll安装指南安装Jekyll，并确保已安装Git。 将您的仓库克隆到本地机器。 如果您复刻了主题，安装Node.js并在根目录中运行bash tools/init.sh来初始化仓库。 在仓库根目录中运行命令bundle来安装依赖项。 使用方法 启动Jekyll服务器 要在本地运行站点，请使用以下命令：\n1 $ bundle exec jekyll serve 如果您使用的是开发容器，必须在VS Code终端中运行该命令。 {: .prompt-info }\n几秒钟后，本地服务器将在http://127.0.0.1:4000上可用。\n配置 根据需要更新_config.yml{: .filepath}中的变量。一些典型选项包括：\nurl avatar timezone lang 社交联系选项 社交联系选项显示在侧边栏底部。您可以在_data/contact.yml{: .filepath}文件中启用或禁用特定联系方式。\n自定义样式表 要自定义样式表，请将主题的assets/css/jekyll-theme-chirpy.scss{: .filepath}文件复制到Jekyll站点的相同路径中，并在文件末尾添加您的自定义样式。\n自定义静态资源 静态资源配置在版本5.1.0中引入。静态资源的CDN在_data/origin/cors.yml{: .filepath}中定义。您可以根据您的网站发布地区的网络状况替换其中一些。\n如果您更喜欢自托管静态资源，请参考chirpy-static-assets仓库。\n部署 部署前，检查_config.yml{: .filepath}文件并确保正确配置了url。如果您更喜欢项目站点且不使用自定义域名，或者您想通过GitHub Pages以外的Web服务器上的基本URL访问您的网站，请记得将baseurl设置为项目名称，以斜杠开头，例如/project-name。\n现在您可以选择以下方法之一来部署您的Jekyll站点。\n使用Github Actions部署 准备以下内容：\n如果您使用的是GitHub免费计划，请保持站点仓库公开。\n如果您已将Gemfile.lock{: .filepath}提交到仓库，并且您的本地机器不是运行Linux，请更新锁定文件的平台列表：\n1 $ bundle lock --add-platform x86_64-linux 接下来，配置_Pages_服务：\n在GitHub上进入您的仓库。选择_Settings_标签，然后点击左侧导航栏中的_Pages_。在Source部分（_Build and deployment_下），从下拉菜单中选择GitHub Actions。 将任何提交推送到GitHub以触发_Actions_工作流。在仓库的_Actions_标签中，您应该看到正在运行的_Build and Deploy_工作流。一旦构建完成并成功，站点将自动部署。 现在您可以访问GitHub提供的URL来访问您的站点。\n手动构建和部署 对于自托管服务器，您需要在本地机器上构建站点，然后将站点文件上传到服务器。\n导航到源项目的根目录，并使用以下命令构建您的站点：\n1 $ JEKYLL_ENV=production bundle exec jekyll b 除非您指定了输出路径，否则生成的站点文件将放置在项目根目录的_site{: .filepath}文件夹中。将这些文件上传到您的目标服务器。\n","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/post/2019-08-09-getting-started/","tags":["入门指南"],"title":"开始使用"},{"categories":["博客","教程"],"contents":"本教程将指导您如何在 Chirpy 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。\n命名和路径 创建一个新文件，使用 hugo new content/post/YYYY-MM-DD-TITLE.md。您可以根据自己的喜好更改路径，但请注意，所有文章都应该放在根目录的 content/post 中。\n前言 基本上，您需要在文章顶部填写前言，如下所示：\n1 2 3 4 5 --- title: 标题 date: YYYY-MM-DD HH:MM:SS +/-TTTT draft: true --- 您可以根据需要添加以下字段：\n1 2 3 4 categories: [主分类, 子分类] # 只支持两个分类 tags: [标签] # 标签名称应始终为小写 pin: true # 表示这篇文章将显示在首页顶部 description: 文章描述 # 该文章的描述 文章的_布局_默认已设置为post，因此无需在前言块中添加变量_layout_。\n分类和标签 每篇文章的 categories 设计为最多包含两个元素，而 tags 中的元素数量可以从零到无穷大。例如：\n1 2 3 4 --- categories: [动物, 昆虫] tags: [蜜蜂] --- 作者信息 文章的作者信息通常不需要在 前言 中填写，默认情况下，它们将从配置文件的 social.name 和 social.links 的第一个条目中获取。但您也可以按如下方式覆盖它：\n在 data/authors.yaml 中添加作者信息（如果您的网站没有此文件，请创建一个）。\n1 2 3 \u0026lt;作者ID\u0026gt;: name: \u0026lt;全名\u0026gt; url: \u0026lt;作者的主页\u0026gt; 然后使用 author 指定单个条目或 authors 指定多个条目：\n1 2 3 4 5 --- author: \u0026lt;作者ID\u0026gt; # 单个条目 # 或 authors: [\u0026lt;作者1ID\u0026gt;, \u0026lt;作者2ID\u0026gt;] # 多个条目 --- 如果您不想在每篇文章的前言中指定作者，可以在 config/_default/params.toml 中设置全局作者。\n1 author: \u0026lt;作者ID\u0026gt; 在每篇文章前言中指定的作者将覆盖全局作者设置。因此，如果任何文章的作者与全局作者不同，可以直接在其前言中添加作者。\n要在启用 i18n 的站点上支持多语言作者信息，您可以在 data/authors/ 下组织特定语言的 YAML 文件中的作者数据。例如：\n英语：data/authors/en.yaml 简体中文：data/authors/zh-CN.yaml 只需用相应的作者详细信息填充每个文件：\n1 2 3 \u0026lt;作者ID\u0026gt;: name: \u0026lt;作者英文名\u0026gt; url: \u0026lt;作者的主页\u0026gt; 1 2 3 \u0026lt;作者ID\u0026gt;: name: \u0026lt;作者中文名\u0026gt; url: \u0026lt;作者的主页\u0026gt; 文章描述 默认情况下，文章的第一句话用于在首页的文章列表、进一步阅读 部分以及RSS源的XML中显示。如果您不想为文章显示自动生成的描述，可以使用 前言 中的 description 字段自定义它，如下所示：\n1 2 3 --- description: 文章的简短摘要。 --- 此外，description 文本也将显示在文章页面的文章标题下方。\n目录 默认情况下，目录（TOC）显示在文章的右侧面板上。如果您想全局关闭它，请转到 config/_default/params.toml 并将变量 toc 的值设置为 false。如果您想为特定文章关闭TOC，请将以下内容添加到文章的前言中：\n1 2 3 --- toc: false --- 评论 评论的全局设置由 config/_default/params.toml 文件中的 comments.provider 选项定义。一旦为此变量选择了评论系统，所有文章将启用评论。\n如果您想关闭特定文章的评论，请将以下内容添加到文章的前言中：\n1 2 3 --- comments: false --- 媒体 在 Chirpy 中，我们将图片、音频和视频称为媒体资源。\nURL前缀 URL 前缀功能正在开发中。\n有时，我们必须为一篇文章中的多个资源定义重复的URL前缀，这是一项可以通过设置两个参数来避免的繁琐任务。\n如果您使用CDN托管媒体文件，可以在 config/_default/params.toml 中指定 cdn。然后，站点头像和文章的媒体资源的URL将以CDN域名为前缀。\n1 cdn: https://cdn.com 要为当前文章/页面范围指定资源路径前缀，请在文章的 前言 中设置 media_subpath：\n1 2 3 --- media_subpath: /path/to/media/ --- 选项 site.cdn 和 page.media_subpath 可以单独使用或组合使用，以灵活组合最终的资源URL：[site.cdn/][page.media_subpath/]file.ext\n图片 标题 在图片的下一行添加 HTML 属性 caption，然后它将作为标题显示在图片底部：\n1 2 ![图片描述](/path/to/image) { caption=\u0026#34;图片的标题\u0026#34; } 尺寸 为防止图片加载时页面内容布局发生偏移，我们应该为每张图片设置宽度和高度。\n1 2 ![桌面视图](/assets/img/sample/mockup.png) { width=\u0026#34;700\u0026#34; height=\u0026#34;400\u0026#34; } 对于SVG，您至少必须指定其 宽度，否则它不会被渲染。\n位置 默认情况下，图片居中，但您可以使用 normal、left 和 right 类之一指定位置。\n一旦指定了位置，就不应添加图片标题。\n普通位置\n在下面的示例中，图片将左对齐：\n1 2 ![桌面视图](/assets/img/sample/mockup.png) { .normal } 向左浮动\n1 2 ![桌面视图](/assets/img/sample/mockup.png) { .left } 向右浮动\n1 2 ![桌面视图](/assets/img/sample/mockup.png) { .right } 暗/亮模式 您可以使图片跟随暗/亮模式的主题偏好。这需要您准备两张图片，一张用于暗模式，一张用于亮模式，然后为它们分配特定的类（dark 或 light）：\n1 2 3 4 ![仅亮模式](/path/to/light-mode.png) { .light } ![仅暗模式](/path/to/dark-mode.png) { .dark } 阴影 程序窗口的截图可以考虑显示阴影效果：\n1 2 ![桌面视图](/assets/img/sample/mockup.png) { .shadow } 预览图片 如果您想在文章顶部添加图片，请提供分辨率为 1200 x 630 的图片。请注意，如果图片的宽高比不符合 1.91 : 1，图片将被缩放和裁剪。\n了解这些先决条件后，您可以开始设置图片的属性：\n1 2 3 4 5 --- image: path: /path/to/image alt: 图片替代文本 --- 请注意，media_subpath 也可以传递给预览图片，也就是说，当它已经设置好时，属性 path 只需要图片文件名。\n视频 社交媒体平台 您可以使用以下语法嵌入来自社交媒体平台的视频：\n1 {{\u0026lt; embed/{Platform}.html id=\u0026#34;{ID}\u0026#34; \u0026gt;}} 其中 Platform 是平台名称的小写形式，ID 是视频 ID。\n下表显示了如何从给定的视频 URL 中获取我们需要的两个参数，您还可以了解当前支持的视频平台。\n视频 URL 平台 ID https://www.youtube.com/watch?v=H-B46URT4mg youtube H-B46URT4mg https://www.twitch.tv/videos/1634779211 twitch 1634779211 https://www.bilibili.com/video/BV1Q44y1B7Wf bilibili BV1Q44y1B7Wf 视频文件 如果您想直接嵌入视频文件，请使用以下语法：\n1 {{\u0026lt; embed/video.html src=\u0026#34;{URL}\u0026#34; \u0026gt;}} 其中 URL 是指向视频文件的 URL，例如 /path/to/sample/video.mp4。\n您还可以为嵌入的视频文件指定其他属性。以下是允许的属性的完整列表。\nposter='/path/to/poster.png' — 视频的海报图片，在视频下载时显示 title='文本' — 显示在视频下方的标题，外观与图片标题相同 autoplay=true — 视频在准备好后自动开始播放 loop=true — 在视频播放结束时自动回到起点 muted=true — 音频最初将被静音 types — 指定其他视频格式的扩展名，用 | 分隔。确保这些文件与您的主视频文件存在于同一目录中。 考虑使用上述所有内容的示例：\n1 2 3 4 5 6 7 8 9 10 {{\u0026lt; embed/video.html src=\u0026#34;/path/to/video.mp4\u0026#34; types=\u0026#34;ogg|mov\u0026#34; poster=\u0026#34;poster.png\u0026#34; title=\u0026#34;演示视频\u0026#34; autoplay=true loop=true muted=true \u0026gt;}} 音频 如果您想直接嵌入音频文件，请使用以下语法：\n1 {{\u0026lt; embed/audio.html src=\u0026#34;{URL}\u0026#34; \u0026gt;}} 其中 URL 是指向音频文件的 URL，例如 /path/to/audio.mp3。\n您还可以为嵌入的音频文件指定其他属性。以下是允许的属性的完整列表。\ntitle='文本' — 显示在音频下方的标题，外观与图片标题相同 types — 指定其他音频格式的扩展名，用 | 分隔。确保这些文件与您的主音频文件存在于同一目录中。 考虑使用上述所有内容的示例：\n1 2 3 4 5 6 {{\u0026lt; include embed/audio.html src=\u0026#39;/path/to/audio.mp3\u0026#39; types=\u0026#39;ogg|wav|aac\u0026#39; title=\u0026#39;演示音频\u0026#39; \u0026gt;}} 置顶文章 您可以将一篇或多篇文章置顶到首页顶部，置顶的文章按照它们的发布日期以倒序排序。通过以下方式启用：\n1 2 3 --- pin: true --- 提示框 有几种类型的提示框：tip、info、warning 和 danger。它们可以通过向引用块添加类 prompt-{type} 来生成。例如，按如下方式定义 info 类型的提示框：\n1 2 \u0026gt; 提示框示例文本。 { .prompt-info } 语法 内联代码 1 `内联代码部分` 文件路径高亮 1 {{\u0026lt; filepath src=\u0026#34;/path/to/a/file.extend\u0026#34; \u0026gt;}} 代码块 Markdown 符号 ``` 可以轻松创建代码块，如下所示：\n1 2 3 ``` 这是一个纯文本代码片段。 ``` 指定语言 使用 ```{language} 您将获得带有语法高亮的代码块：\n1 2 3 ```yaml key: value ``` 指定文件名 您可能已经注意到代码语言将显示在代码块的顶部。如果您想用文件名替换它，可以添加 file 属性来实现：\n1 2 3 ```shell { file=\u0026#34;path/to/file\u0026#34; } # content ``` 数学公式 我们使用 MathJax 来生成数学公式。出于网站性能的原因，默认情况下不会加载数学功能。但可以通过以下方式启用：\n1 2 3 --- math: true --- 启用数学功能后，您可以使用以下语法添加数学公式：\n块级数学公式 应该使用 $$ math $$ 添加，必须 在 $$ 之前和之后留有空行 插入方程编号 应该使用 $$\\begin{equation} math \\end{equation}$$ 添加 引用方程编号 应该在方程块中使用 \\label{eq:label_name} 和在文本中使用 \\eqref{eq:label_name} 内联引用（见下面的示例） 内联数学公式（在行中）应该使用 $$ math $$ 添加，在 $$ 之前或之后不要有任何空行 内联数学公式（在列表中）应该使用 \\$$ math $$ 添加 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 \u0026lt;!-- 块级数学公式，保留所有空行 --\u0026gt; $$ LaTeX_数学表达式 $$ \u0026lt;!-- 方程编号，保留所有空行 --\u0026gt; $$ \\begin{equation} LaTeX_数学表达式 \\label{eq:label_name} \\end{equation} $$ 可以引用为 \\eqref{eq:label_name}。 \u0026lt;!-- 行内数学公式，不要有空行 --\u0026gt; \u0026#34;Lorem ipsum dolor sit amet, $$ LaTeX_数学表达式 $$ consectetur adipiscing elit.\u0026#34; \u0026lt;!-- 列表中的内联数学公式，第一个 `$` 需要转义 --\u0026gt; 1. \\$$ LaTeX_数学表达式 $$ 2. \\$$ LaTeX_数学表达式 $$ 3. \\$$ LaTeX_数学表达式 $$ Mermaid Mermaid 支持正在开发中\nMermaid 是一个很棒的图表生成工具。要在您的文章中启用它，请将以下内容添加到 YAML 块中：\n1 2 3 --- mermaid: true --- 然后您可以像其他 markdown 语言一样使用它：将图表代码用 ```mermaid 和 ``` 包围起来。\n了解更多 要了解更多关于撰写 Hugo 文章的知识，请访问 Hugo 文档。\n","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/","tags":["写作"],"title":"撰写新文章"},{"categories":["博客","演示"],"contents":" 标题 H1 — 标题 H2 — 标题 H3 — 标题 H4 — 标题 段落 这是一个段落示例。在这里，我们可以看到段落是如何在 Markdown 中呈现的。段落是由一个或多个连续的文本行组成，它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素，良好的排版可以提高可读性和美观度。\n列表 有序列表 第一点 第二点 第三点 无序列表 章节 节 段落 待办列表 任务 步骤 1 步骤 2 步骤 3 描述列表 太阳 地球绕其运行的恒星 月亮 地球的天然卫星，通过反射太阳光可见 引用块 这行显示 引用块。\n提示框 这是一个显示 tip 类型提示的例子。\n这是一个显示 info 类型提示的例子。\n这是一个显示 warning 类型提示的例子。\n这是一个显示 danger 类型提示的例子。\n表格 公司 联系人 国家 Alfreds Futterkiste Maria Anders 德国 Island Trading Helen Bennett 英国 Magazzini Alimentari Riuniti Giovanni Rovelli 意大利 链接 http://127.0.0.1:4000\n脚注 点击钩子将定位到脚注 1，这里是另一个脚注 2。\n内联代码 这是 内联代码 的一个例子。\n文件路径 这里是 /path/to/the/file.extend。\n代码块 通用 1 这是一个通用代码片段，没有语法高亮和行号。 特定语言 1 2 3 4 if [ $? -ne 0 ]; then echo \u0026#34;命令执行不成功。\u0026#34;; #执行必要操作 / 退出 fi; 特定文件名 1 2 3 @import \u0026#34;colors/light-typography\u0026#34;, \u0026#34;colors/dark-typography\u0026#34;; 数学公式 数学公式由 MathJax 提供支持：\n$$ \\begin{equation} \\sum_{n=1}^\\infty 1/n^2 = \\frac{\\pi^2}{6} \\label{eq:series} \\end{equation} $$\n我们可以引用公式如 \\eqref{eq:series}。\n当 $a \\ne 0$ 时，$ax^2 + bx + c = 0$ 有两个解，它们是\n$$ x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a} $$\n图片 默认（带标题） 全屏宽度和居中对齐 左对齐 向左浮动 这是一段文本示例，用于演示图片向左浮动时的效果。在这种情况下，文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用，特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术，可以有效利用空间并增强内容的可读性。\n向右浮动 这是一段文本示例，用于演示图片向右浮动时的效果。在这种情况下，文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人，并引导读者的视线在页面上流畅移动。记住，浮动元素需要适当的空间才能发挥最佳效果。\n暗/亮模式 \u0026amp; 阴影 下面的图片将根据主题偏好切换暗/亮模式，注意它有阴影效果。\n视频 反向脚注 脚注源\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n第二个脚注源\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/","tags":["排版"],"title":"文本和排版"},{"categories":null,"contents":"","permalink":"https://geekifan.github.io/chirpy-starter/zh-cn/archives/","tags":null,"title":"归档"}]