diff --git a/content/about/index.en.md b/content/about/index.en.md index 1950adc..a62f4fc 100644 --- a/content/about/index.en.md +++ b/content/about/index.en.md @@ -1,5 +1,5 @@ --- -title: "About Us" +title: "About" date: 2023-04-20 draft: false layout: page @@ -10,4 +10,17 @@ menu: pre: fa-info-circle --- -# About Us +[Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy) is a blog theme originally based on [Jekyll](https://jekyllrb.com/). Due to Jekyll's design limitations, it does not natively support internationalization (i18n) and requires third-party plugins for i18n functionality. To enable i18n support for Chirpy without the hassle of relying on third-party plugins, the [hugo-theme-chirpy](https://github.com/geekifan/hugo-theme-chirpy) project migrated the Chirpy theme to [Hugo](https://gohugo.io/) with minimal adaptations. All features of Chirpy are available in hugo-theme-chirpy (though some functionalities may operate differently within the Hugo framework). + +Follow the posts in the demo site to quickly set up a free personal blog! +## Features + +- **Dark Mode**: Enhanced readability in low-light environments. +- **Multilingual UI:** Easily switch between different languages. +- **Efficient Post Organization:** Use hierarchical categories, trending tags, recommended reading, and search functionalities. +- **Optimized Layout:** Includes TOC, syntax highlighting, prompts, and more. +- **Rich Writing Extensions:** Support for mathematical formulas, charts, flowcharts, and embedded media. +- **Multiple Comment Systems:** Choose from various commenting options. +- **Web Analysis Tools:** Integrated with multiple analytics tools. +- **Modern Web Technologies:** Built for SEO and web performance. +- **RSS Feed Support:** Keep your readers updated with RSS feeds. diff --git a/content/about/index.zh-CN.md b/content/about/index.zh-CN.md index f60a9fa..2368a55 100644 --- a/content/about/index.zh-CN.md +++ b/content/about/index.zh-CN.md @@ -1,5 +1,5 @@ --- -title: "关于我们" +title: "关于" date: 2023-04-20 draft: false layout: page @@ -10,4 +10,17 @@ menu: pre: fa-info-circle --- -# About Us +[Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy) 是一个基于 [Jekyll](https://jekyllrb.com/) 的博客主题。由于 Jekyll 的设计限制,它本身不支持国际化(i18n),需要依赖第三方插件来实现 i18n 功能。为了让 Chirpy 在不依赖第三方插件的情况下支持 i18n,[hugo-theme-chirpy](https://github.com/geekifan/hugo-theme-chirpy) 项目将 Chirpy 主题迁移至 [Hugo](https://gohugo.io/),并进行了最小化的适配。Chirpy 的所有功能在 hugo-theme-chirpy 中均可使用(不过在 Hugo 框架下,部分功能的操作方式可能有所不同)。 + +跟随示例站点的文章,快速搭建一个免费的个人博客吧! +## 功能特点 + +- **深色模式**:在低光环境下提升阅读体验。 +- **多语言界面**:轻松切换不同语言。 +- **高效的文章管理**:支持层级分类、热门标签、推荐阅读和搜索功能。 +- **优化的布局**:包含目录、语法高亮、提示框等。 +- **丰富的写作扩展**:支持数学公式、图表、流程图和嵌入式媒体。 +- **多种评论系统**:提供多种评论方案可选。 +- **网站分析工具**:集成多种分析工具。 +- **现代 Web 技术**:优化 SEO 和网页性能。 +- **RSS 订阅支持**:通过 RSS 让读者获取最新内容。 diff --git a/content/post/2019-08-08-text-and-typography/index.en.md b/content/post/2019-08-08-text-and-typography/index.en.md index cb28ce3..b3732fc 100644 --- a/content/post/2019-08-08-text-and-typography/index.en.md +++ b/content/post/2019-08-08-text-and-typography/index.en.md @@ -106,7 +106,7 @@ This is an example of `Inline Code`. ## Filepath -Here is the {{< markdown/filepath src="/path/to/the/file.extend" >}}. +Here is the {{< filepath src="/path/to/the/file.extend" >}}. ## Code blocks @@ -156,8 +156,7 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ ### Default (with caption) ![Desktop View](mockup.png) -{ width="972" height="589" } -_Full screen width and center alignment_ +{ width="972" height="589" caption="Full screen width and center alignment"} ### Left aligned diff --git a/content/post/2019-08-08-text-and-typography/index.zh-CN.md b/content/post/2019-08-08-text-and-typography/index.zh-CN.md index be3348f..a10f988 100644 --- a/content/post/2019-08-08-text-and-typography/index.zh-CN.md +++ b/content/post/2019-08-08-text-and-typography/index.zh-CN.md @@ -14,7 +14,7 @@ math: true image: path: devices-mockup.png lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA - alt: Chirpy主题在多个设备上的响应式渲染。 + alt: Chirpy 主题在多个设备上的响应式渲染。 --- ## 标题 @@ -32,7 +32,7 @@ image: ## 段落 -这是一个段落示例。在这里,我们可以看到段落是如何在Markdown中呈现的。段落是由一个或多个连续的文本行组成,它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素,良好的排版可以提高可读性和美观度。 +这是一个段落示例。在这里,我们可以看到段落是如何在 Markdown 中呈现的。段落是由一个或多个连续的文本行组成,它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素,良好的排版可以提高可读性和美观度。 ## 列表 @@ -65,22 +65,22 @@ image: ## 引用块 -> 这行显示*引用块*。 +> 这行显示 *引用块*。 ## 提示框 -> 这是一个显示`tip`类型提示的例子。 +> 这是一个显示 `tip` 类型提示的例子。 {.prompt-tip } -> 这是一个显示`info`类型提示的例子。 +> 这是一个显示 `info` 类型提示的例子。 {.prompt-info } -> 这是一个显示`warning`类型提示的例子。 +> 这是一个显示 `warning` 类型提示的例子。 {.prompt-warning } -> 这是一个显示`danger`类型提示的例子。 +> 这是一个显示 `danger` 类型提示的例子。 {.prompt-danger } @@ -98,15 +98,15 @@ image: ## 脚注 -点击钩子将定位到脚注[^footnote],这里是另一个脚注[^fn-nth-2]。 +点击钩子将定位到脚注 [^footnote],这里是另一个脚注 [^fn-nth-2]。 ## 内联代码 -这是`内联代码`的一个例子。 +这是 `内联代码` 的一个例子。 ## 文件路径 -这里是 {{< markdown/filepath src="/path/to/the/file.extend" >}}。 +这里是 {{< filepath src="/path/to/the/file.extend" >}}。 ## 代码块 @@ -135,7 +135,7 @@ fi; ## 数学公式 -数学公式由[**MathJax**](https://www.mathjax.org/)提供支持: +数学公式由 [**MathJax**](https://www.mathjax.org/) 提供支持: $$ \begin{equation} @@ -144,9 +144,9 @@ $$ \end{equation} $$ -我们可以引用公式如\eqref{eq:series}。 +我们可以引用公式如 \eqref{eq:series}。 -当$a \ne 0$时,$ax^2 + bx + c = 0$有两个解,它们是 +当 $a \ne 0$ 时,$ax^2 + bx + c = 0$ 有两个解,它们是 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ @@ -155,8 +155,7 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ ### 默认(带标题) ![桌面视图](mockup.png) -{ width="972" height="589" } -_全屏宽度和居中对齐_ +{ width="972" height="589" caption="全屏宽度和居中对齐" } ### 左对齐 diff --git a/content/post/2019-08-08-write-a-new-post/index.en.md b/content/post/2019-08-08-write-a-new-post/index.en.md index 8f792bb..e88a403 100644 --- a/content/post/2019-08-08-write-a-new-post/index.en.md +++ b/content/post/2019-08-08-write-a-new-post/index.en.md @@ -1,28 +1,23 @@ --- title: Writing a New Post date: 2019-08-08 14:10:00 +0800 -description: >- - Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more. categories: - Blogging - Tutorial tags: - writing -pin: True --- -> **NOTE:** This tutorial is not fully migrated from the Jekyll version -- please reference with caution. -{ .prompt-warning } -This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set. +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 {{< markdown/filepath src="content/post" >}} of the root directory. +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 {{< filepath src="content/post" >}} of the root directory. ## Front Matter -Basically, the [Front Matter](https://jekyllrb.com/docs/front-matter/) is initialized by hugo as below at the top of the post: +Basically, you need to fill the [Front Matter](https://gohugo.io/content-management/front-matter/) as below at the top of the post: ```yaml --- @@ -56,7 +51,53 @@ tags: [bee] ### Author Information -The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it in the configuration. +The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows: + +Adding author information in `data/authors.yaml` (If your website doesn't have this file, don't hesitate to create one). + +```yaml { file="data/authors.yml" } +: + name: + url: +``` + +And then use `author` to specify a single entry or `authors` to specify multiple entries: + +```yaml +--- +author: # for single entry +# or +authors: [, ] # for multiple entries +--- +``` + +If you don't want to specify the author in the frontmatter of every article, you can set a global author in {{< filepath src="config/_default/params.toml" >}}. + +```yaml { file="config/_default/params.toml" } +author: +``` + +> 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. +{ .prompt-info } + +To support multilingual author information on an i18n-enabled site, you can organize author data in language-specific YAML files under {{< filepath src="data/authors/" >}}. For instance: + +- English: {{< filepath src="data/authors/en.yaml" >}} +- Simplified Chinese: {{< filepath src="data/authors/zh-CN.yaml" >}} + +Simply populate each file with the respective author details: + +```yaml { file=" data/authors/en.yaml" } +: + name: + url: +``` + +```yaml { file=" data/authors/zh-CN.yaml" } +: + name: + url: +``` ### Post Description @@ -72,7 +113,7 @@ Additionally, the `description` text will also be displayed under the post title ## Table of Contents -By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/): +By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to {{< filepath src="config/_default/params.toml" >}} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://gohugo.io/content-management/front-matter/): ```yaml --- @@ -82,7 +123,7 @@ toc: false ## Comments -The global setting for comments is defined by the `comments.provider` option in the `_config.yml`{: .filepath} file. Once a comment system is selected for this variable, comments will be enabled for all posts. +The global setting for comments is defined by the `comments.provider` option in the {{< filepath src="config/_default/params.toml" >}} file. Once a comment system is selected for this variable, comments will be enabled for all posts. If you want to close the comment for a specific post, add the following to the **Front Matter** of the post: @@ -98,14 +139,17 @@ We refer to images, audio and video as media resources in _Chirpy_. ### URL Prefix +> URL prefix is under development. +{ .prompt-warning } + 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. -- If you are using a CDN to host media files, you can specify the `cdn` in `_config.yml`{: .filepath }. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name. +- If you are using a CDN to host media files, you can specify the `cdn` in {{< filepath src="config/_default/params.toml" >}}. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name. - ```yaml + ```yaml { file="config/_default/params.toml" } cdn: https://cdn.com ``` - {: file='_config.yml' .nolineno } + - To specify the resource path prefix for the current post/page range, set `media_subpath` in the _front matter_ of the post: @@ -114,7 +158,6 @@ From time to time we have to define duplicate URL prefixes for multiple resource media_subpath: /path/to/media/ --- ``` - {: .nolineno } The option `site.cdn` and `page.media_subpath` can be used individually or in combination to flexibly compose the final resource URL: `[site.cdn/][page.media_subpath/]file.ext` @@ -122,70 +165,65 @@ The option `site.cdn` and `page.media_subpath` can be used individually or in co #### Caption -Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image: +Add an html attribute `caption` to the next line of an image, then it will become the caption and appear at the bottom of the image: ```markdown ![img-description](/path/to/image) -_Image Caption_ +{ caption="Your caption of images" } ``` -{: .nolineno} #### Size To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image. ```markdown -![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" } +![Desktop View](/assets/img/sample/mockup.png) +{ width="700" height="400" } ``` -{: .nolineno} > For an SVG, you have to at least specify its _width_, otherwise it won't be rendered. -{: .prompt-info } +{ .prompt-info } -Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above: - -```markdown -![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" } -``` -{: .nolineno} #### Position By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. > Once the position is specified, the image caption should not be added. -{: .prompt-warning } +{ .prompt-warning } - **Normal position** Image will be left aligned in below sample: ```markdown - ![Desktop View](/assets/img/sample/mockup.png){: .normal } + ![Desktop View](/assets/img/sample/mockup.png) + { .normal } ``` - {: .nolineno} - **Float to the left** ```markdown - ![Desktop View](/assets/img/sample/mockup.png){: .left } + ![Desktop View](/assets/img/sample/mockup.png) + { .left } ``` - {: .nolineno} - **Float to the right** ```markdown - ![Desktop View](/assets/img/sample/mockup.png){: .right } + ![Desktop View](/assets/img/sample/mockup.png) + { .right } ``` - {: .nolineno} #### Dark/Light mode 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 (`dark` or `light`): ```markdown -![Light mode only](/path/to/light-mode.png){: .light } -![Dark mode only](/path/to/dark-mode.png){: .dark } +![Light mode only](/path/to/light-mode.png) +{ .light } +![Dark mode only](/path/to/dark-mode.png) +{ .dark } ``` #### Shadow @@ -193,9 +231,9 @@ You can make images follow theme preferences in dark/light mode. This requires y The screenshots of the program window can be considered to show the shadow effect: ```markdown -![Desktop View](/assets/img/sample/mockup.png){: .shadow } +![Desktop View](/assets/img/sample/mockup.png) +{ .shadow } ``` -{: .nolineno} #### Preview Image @@ -213,33 +251,6 @@ image: Note that the [`media_subpath`](#url-prefix) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name. -For simple use, you can also just use `image` to define the path. - -```yml ---- -image: /path/to/image ---- -``` - -#### LQIP - -For preview images: - -```yaml ---- -image: - lqip: /path/to/lqip-file # or base64 URI ---- -``` - -> You can observe LQIP in the preview image of post \"[Text and Typography](../text-and-typography/)\". - -For normal images: - -```markdown -![Image description](/path/to/image){: lqip="/path/to/lqip-file" } -``` -{: .nolineno } ### Video @@ -247,8 +258,8 @@ For normal images: You can embed videos from social media platforms with the following syntax: -```liquid -{% include embed/{Platform}.html id='{ID}' %} +```hugo +{{}} ``` Where `Platform` is the lowercase of the platform name, and `ID` is the video ID. @@ -265,8 +276,8 @@ The following table shows how to get the two parameters we need in a given video If you want to embed a video file directly, use the following syntax: -```liquid -{% include embed/video.html src='{URL}' %} +```hugo +{{}} ``` Where `URL` is a URL to a video file e.g. `/path/to/sample/video.mp4`. @@ -283,16 +294,16 @@ You can also specify additional attributes for the embedded video file. Here is Consider an example using all of the above: ```liquid -{% - include embed/video.html - src='/path/to/video.mp4' - types='ogg|mov' - poster='poster.png' - title='Demo video' +{{}} ``` ### Audios @@ -300,7 +311,7 @@ Consider an example using all of the above: If you want to embed an audio file directly, use the following syntax: ```liquid -{% include embed/audio.html src='{URL}' %} +{{}} ``` Where `URL` is a URL to an audio file e.g. `/path/to/audio.mp3`. @@ -312,13 +323,13 @@ You can also specify additional attributes for the embedded audio file. Here is Consider an example using all of the above: -```liquid -{% +```hugo +{{}} ``` ## Pinned Posts @@ -337,9 +348,8 @@ There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They ```md > Example line for prompt. -{: .prompt-info } +{ .prompt-info } ``` -{: .nolineno } ## Syntax @@ -348,14 +358,12 @@ There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They ```md `inline code part` ``` -{: .nolineno } ### Filepath Highlight -```md -`/path/to/a/file.extend`{: .filepath} +```hugo +{{}} ``` -{: .nolineno } ### Code Block @@ -377,47 +385,17 @@ key: value ``` ```` -> The Jekyll tag `{% highlight %}` is not compatible with this theme. -{: .prompt-danger } - -#### Line Number - -By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it: - -````markdown -```shell -echo 'No more line numbers!' -``` -{: .nolineno } -```` #### Specifying the Filename 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 `file` to achieve this: ````markdown -```shell +```shell { file="path/to/file" } # content ``` -{: file="path/to/file" } ```` -#### Liquid Codes - -If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`: - -````markdown -{% raw %} -```liquid -{% if product.title contains 'Pack' %} - This product's title contains the word Pack. -{% endif %} -``` -{% endraw %} -```` - -Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block. - ## Mathematics We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by: @@ -467,14 +445,13 @@ Can be referenced as \eqref{eq:label_name}. 3. \$$ LaTeX_math_expression $$ ``` -> Starting with `v7.0.0`, configuration options for **MathJax** have been moved to file `assets/js/data/mathjax.js`{: .filepath }, and you can change the options as needed, such as adding [extensions][mathjax-exts]. -> If you are building the site via `chirpy-starter`, copy that file from the gem installation directory (check with command `bundle info --path jekyll-theme-chirpy`) to the same directory in your repository. -{: .prompt-tip } - [mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html ## Mermaid +> Mermaid support is under development +{ .prompt-warning } + [**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block: ```yaml @@ -487,4 +464,4 @@ Then you can use it like other markdown languages: surround the graph code with ## Learn More -For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/). +For more knowledge about writing Hugo posts, visit the [Hugo Documentation](https://gohugo.io/documentation/). diff --git a/content/post/2019-08-08-write-a-new-post/index.zh-CN.md b/content/post/2019-08-08-write-a-new-post/index.zh-CN.md index 785175f..e082958 100644 --- a/content/post/2019-08-08-write-a-new-post/index.zh-CN.md +++ b/content/post/2019-08-08-write-a-new-post/index.zh-CN.md @@ -1,43 +1,41 @@ --- title: 撰写新文章 date: 2019-08-08 14:10:00 +0800 -description: >- - 文本、排版、数学公式、图表、流程图、图片、视频等示例。 categories: - 博客 - 教程 tags: - 写作 -pin: True --- -> **NOTE:** 该教程还没有完成从 Jekyll 版本的迁移,请谨慎参考。 -{ .prompt-warning } -本教程将指导您如何在 _Chirpy_ 模板中撰写文章,即使您以前使用过Jekyll,也值得阅读,因为许多功能需要设置特定变量。 +本教程将指导您如何在 _Chirpy_ 模板中撰写文章,即使您以前使用过 Hugo,也值得阅读,因为许多功能需要设置特定变量。 ## 命名和路径 -创建一个名为 `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} 的新文件,并将其放在根目录的 `_posts`{: .filepath} 中。请注意,`EXTENSION`{: .filepath} 必须是 `md`{: .filepath} 和 `markdown`{: .filepath} 之一。如果您想节省创建文件的时间,请考虑使用插件 [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) 来完成此操作。 +创建一个新文件,使用 `hugo new content/post/YYYY-MM-DD-TITLE.md`。您可以根据自己的喜好更改路径,但请注意,所有文章都应该放在根目录的 {{< filepath src="content/post" >}} 中。 ## 前言 -基本上,您需要在文章顶部填写[前言](https://jekyllrb.com/docs/front-matter/),如下所示: +基本上,您需要在文章顶部填写[前言](https://gohugo.io/content-management/front-matter/),如下所示: ```yaml --- title: 标题 date: YYYY-MM-DD HH:MM:SS +/-TTTT -categories: [主分类, 子分类] -tags: [标签] # 标签名称应始终为小写 +draft: true --- ``` +您可以根据需要添加以下字段: +```yaml +categories: [主分类, 子分类] # 只支持两个分类 +tags: [标签] # 标签名称应始终为小写 +pin: true # 表示这篇文章将显示在首页顶部 +description: 文章描述 # 该文章的描述 +``` + > 文章的_布局_默认已设置为`post`,因此无需在前言块中添加变量_layout_。 -{: .prompt-tip } - -### 日期的时区 - -为了准确记录文章的发布日期,您不仅应该设置 `_config.yml`{: .filepath} 的 `timezone`,还应在其前言块的 `date` 变量中提供文章的时区。格式:`+/-TTTT`,例如 `+0800`。 +{ .prompt-tip } ### 分类和标签 @@ -54,15 +52,13 @@ tags: [蜜蜂] 文章的作者信息通常不需要在 _前言_ 中填写,默认情况下,它们将从配置文件的 `social.name` 和 `social.links` 的第一个条目中获取。但您也可以按如下方式覆盖它: -在 `_data/authors.yml` 中添加作者信息(如果您的网站没有此文件,请创建一个)。 +在 `data/authors.yaml` 中添加作者信息(如果您的网站没有此文件,请创建一个)。 -```yaml +```yaml { file="data/authors.yml" } <作者ID>: name: <全名> - twitter: <作者的推特> url: <作者的主页> ``` -{: file="_data/authors.yml" } 然后使用 `author` 指定单个条目或 `authors` 指定多个条目: @@ -74,10 +70,33 @@ authors: [<作者1ID>, <作者2ID>] # 多个条目 --- ``` -话虽如此,键 `author` 也可以识别多个条目。 +如果您不想在每篇文章的前言中指定作者,可以在 {{< filepath src="config/_default/params.toml" >}} 中设置全局作者。 -> 从文件 `_data/authors.yml`{: .filepath } 读取作者信息的好处是页面将有元标签 `twitter:creator`,这丰富了 [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) 并有利于SEO。 -{: .prompt-info } +```yaml { file="config/_default/params.toml" } +author: <作者ID> +``` + +> 在每篇文章前言中指定的作者将覆盖全局作者设置。因此,如果任何文章的作者与全局作者不同,可以直接在其前言中添加作者。 +{ .prompt-info } + +要在启用 i18n 的站点上支持多语言作者信息,您可以在 {{< filepath src="data/authors/" >}} 下组织特定语言的 YAML 文件中的作者数据。例如: + +- 英语:{{< filepath src="data/authors/en.yaml" >}} +- 简体中文:{{< filepath src="data/authors/zh-CN.yaml" >}} + +只需用相应的作者详细信息填充每个文件: + +```yaml { file="data/authors/en.yaml" } +<作者ID>: + name: <作者英文名> + url: <作者的主页> +``` + +```yaml { file="data/authors/zh-CN.yaml" } +<作者ID>: + name: <作者中文名> + url: <作者的主页> +``` ### 文章描述 @@ -93,7 +112,7 @@ description: 文章的简短摘要。 ## 目录 -默认情况下,目录(TOC)显示在文章的右侧面板上。如果您想全局关闭它,请转到 `_config.yml`{: .filepath} 并将变量 `toc` 的值设置为 `false`。如果您想为特定文章关闭TOC,请将以下内容添加到文章的[前言](https://jekyllrb.com/docs/front-matter/)中: +默认情况下,目录(TOC)显示在文章的右侧面板上。如果您想全局关闭它,请转到 {{< filepath src="config/_default/params.toml" >}} 并将变量 `toc` 的值设置为 `false`。如果您想为特定文章关闭TOC,请将以下内容添加到文章的[前言](https://gohugo.io/content-management/front-matter/)中: ```yaml --- @@ -103,7 +122,7 @@ toc: false ## 评论 -评论的全局设置由 `_config.yml`{: .filepath} 文件中的 `comments.provider` 选项定义。一旦为此变量选择了评论系统,所有文章将启用评论。 +评论的全局设置由 {{< filepath src="config/_default/params.toml" >}} 文件中的 `comments.provider` 选项定义。一旦为此变量选择了评论系统,所有文章将启用评论。 如果您想关闭特定文章的评论,请将以下内容添加到文章的**前言**中: @@ -119,14 +138,16 @@ comments: false ### URL前缀 +> URL 前缀功能正在开发中。 +{ .prompt-warning } + 有时,我们必须为一篇文章中的多个资源定义重复的URL前缀,这是一项可以通过设置两个参数来避免的繁琐任务。 -- 如果您使用CDN托管媒体文件,可以在 `_config.yml`{: .filepath } 中指定 `cdn`。然后,站点头像和文章的媒体资源的URL将以CDN域名为前缀。 +- 如果您使用CDN托管媒体文件,可以在 {{< filepath src="config/_default/params.toml" >}} 中指定 `cdn`。然后,站点头像和文章的媒体资源的URL将以CDN域名为前缀。 - ```yaml + ```yaml { file="config/_default/params.toml" } cdn: https://cdn.com ``` - {: file='_config.yml' .nolineno } - 要为当前文章/页面范围指定资源路径前缀,请在文章的 _前言_ 中设置 `media_subpath`: @@ -135,7 +156,6 @@ comments: false media_subpath: /path/to/media/ --- ``` - {: .nolineno } 选项 `site.cdn` 和 `page.media_subpath` 可以单独使用或组合使用,以灵活组合最终的资源URL:`[site.cdn/][page.media_subpath/]file.ext` @@ -143,70 +163,64 @@ comments: false #### 标题 -在图片的下一行添加斜体,然后它将成为标题并显示在图片底部: +在图片的下一行添加 HTML 属性 `caption`,然后它将作为标题显示在图片底部: ```markdown ![图片描述](/path/to/image) -_图片标题_ +{ caption="图片的标题" } ``` -{: .nolineno} #### 尺寸 为防止图片加载时页面内容布局发生偏移,我们应该为每张图片设置宽度和高度。 ```markdown -![桌面视图](/assets/img/sample/mockup.png){: width="700" height="400" } +![桌面视图](/assets/img/sample/mockup.png) +{ width="700" height="400" } ``` -{: .nolineno} > 对于SVG,您至少必须指定其 _宽度_,否则它不会被渲染。 -{: .prompt-info } - -从 _Chirpy v5.0.0_ 开始,`height` 和 `width` 支持缩写(`height` → `h`,`width` → `w`)。以下示例与上述效果相同: - -```markdown -![桌面视图](/assets/img/sample/mockup.png){: w="700" h="400" } -``` -{: .nolineno} +{ .prompt-info } #### 位置 默认情况下,图片居中,但您可以使用 `normal`、`left` 和 `right` 类之一指定位置。 > 一旦指定了位置,就不应添加图片标题。 -{: .prompt-warning } +{ .prompt-warning } - **普通位置** 在下面的示例中,图片将左对齐: ```markdown - ![桌面视图](/assets/img/sample/mockup.png){: .normal } + ![桌面视图](/assets/img/sample/mockup.png) + { .normal } ``` - {: .nolineno} - **向左浮动** ```markdown - ![桌面视图](/assets/img/sample/mockup.png){: .left } + ![桌面视图](/assets/img/sample/mockup.png) + { .left } ``` - {: .nolineno} - **向右浮动** ```markdown - ![桌面视图](/assets/img/sample/mockup.png){: .right } + ![桌面视图](/assets/img/sample/mockup.png) + { .right } ``` - {: .nolineno} #### 暗/亮模式 您可以使图片跟随暗/亮模式的主题偏好。这需要您准备两张图片,一张用于暗模式,一张用于亮模式,然后为它们分配特定的类(`dark` 或 `light`): ```markdown -![仅亮模式](/path/to/light-mode.png){: .light } -![仅暗模式](/path/to/dark-mode.png){: .dark } +![仅亮模式](/path/to/light-mode.png) +{ .light } +![仅暗模式](/path/to/dark-mode.png) +{ .dark } ``` #### 阴影 @@ -214,9 +228,9 @@ _图片标题_ 程序窗口的截图可以考虑显示阴影效果: ```markdown -![桌面视图](/assets/img/sample/mockup.png){: .shadow } +![桌面视图](/assets/img/sample/mockup.png) +{ .shadow } ``` -{: .nolineno} #### 预览图片 @@ -234,20 +248,215 @@ image: 请注意,[`media_subpath`](#url前缀) 也可以传递给预览图片,也就是说,当它已经设置好时,属性 `path` 只需要图片文件名。 -为了简单使用,您也可以只使用 `image` 来定义路径。 +### 视频 -```yml ---- -image: /path/to/image ---- +#### 社交媒体平台 + +您可以使用以下语法嵌入来自社交媒体平台的视频: + +```hugo +{{}} ``` -#### LQIP +其中 `Platform` 是平台名称的小写形式,`ID` 是视频 ID。 -对于预览图片: +下表显示了如何从给定的视频 URL 中获取我们需要的两个参数,您还可以了解当前支持的视频平台。 + +| 视频 URL | 平台 | ID | +| -------------------------------------------------------------------------------------------------- | ---------- | :------------- | +| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` | +| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` | +| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` | + +#### 视频文件 + +如果您想直接嵌入视频文件,请使用以下语法: + +```hugo +{{}} +``` + +其中 `URL` 是指向视频文件的 URL,例如 `/path/to/sample/video.mp4`。 + +您还可以为嵌入的视频文件指定其他属性。以下是允许的属性的完整列表。 + +- `poster='/path/to/poster.png'` — 视频的海报图片,在视频下载时显示 +- `title='文本'` — 显示在视频下方的标题,外观与图片标题相同 +- `autoplay=true` — 视频在准备好后自动开始播放 +- `loop=true` — 在视频播放结束时自动回到起点 +- `muted=true` — 音频最初将被静音 +- `types` — 指定其他视频格式的扩展名,用 `|` 分隔。确保这些文件与您的主视频文件存在于同一目录中。 + +考虑使用上述所有内容的示例: + +```liquid +{{}} +``` + +### 音频 + +如果您想直接嵌入音频文件,请使用以下语法: + +```liquid +{{}} +``` + +其中 `URL` 是指向音频文件的 URL,例如 `/path/to/audio.mp3`。 + +您还可以为嵌入的音频文件指定其他属性。以下是允许的属性的完整列表。 + +- `title='文本'` — 显示在音频下方的标题,外观与图片标题相同 +- `types` — 指定其他音频格式的扩展名,用 `|` 分隔。确保这些文件与您的主音频文件存在于同一目录中。 + +考虑使用上述所有内容的示例: + +```hugo +{{}} +``` + +## 置顶文章 + +您可以将一篇或多篇文章置顶到首页顶部,置顶的文章按照它们的发布日期以倒序排序。通过以下方式启用: ```yaml --- -image: - lqip: /path/to/lqip-file # 或base64 URI -``` \ No newline at end of file +pin: true +--- +``` + +## 提示框 + +有几种类型的提示框:`tip`、`info`、`warning` 和 `danger`。它们可以通过向引用块添加类 `prompt-{type}` 来生成。例如,按如下方式定义 `info` 类型的提示框: + +```md +> 提示框示例文本。 +{ .prompt-info } +``` + +## 语法 + +### 内联代码 + +```md +`内联代码部分` +``` + +### 文件路径高亮 + +```hugo +{{}} +``` + +### 代码块 + +Markdown 符号 ```` ``` ```` 可以轻松创建代码块,如下所示: + +````md +``` +这是一个纯文本代码片段。 +``` +```` + +#### 指定语言 + +使用 ```` ```{language} ```` 您将获得带有语法高亮的代码块: + +````markdown +```yaml +key: value +``` +```` + +#### 指定文件名 + +您可能已经注意到代码语言将显示在代码块的顶部。如果您想用文件名替换它,可以添加 `file` 属性来实现: + +````markdown +```shell { file="path/to/file" } +# content +``` +```` + +## 数学公式 + +我们使用 [**MathJax**][mathjax] 来生成数学公式。出于网站性能的原因,默认情况下不会加载数学功能。但可以通过以下方式启用: + +[mathjax]: https://www.mathjax.org/ + +```yaml +--- +math: true +--- +``` + +启用数学功能后,您可以使用以下语法添加数学公式: + +- **块级数学公式** 应该使用 `$$ math $$` 添加,**必须** 在 `$$` 之前和之后留有空行 + - **插入方程编号** 应该使用 `$$\begin{equation} math \end{equation}$$` 添加 + - **引用方程编号** 应该在方程块中使用 `\label{eq:label_name}` 和在文本中使用 `\eqref{eq:label_name}` 内联引用(见下面的示例) +- **内联数学公式**(在行中)应该使用 `$$ math $$` 添加,在 `$$` 之前或之后不要有任何空行 +- **内联数学公式**(在列表中)应该使用 `\$$ math $$` 添加 + +```markdown + + +$$ +LaTeX_数学表达式 +$$ + + + +$$ +\begin{equation} + LaTeX_数学表达式 + \label{eq:label_name} +\end{equation} +$$ + +可以引用为 \eqref{eq:label_name}。 + + + +"Lorem ipsum dolor sit amet, $$ LaTeX_数学表达式 $$ consectetur adipiscing elit." + + + +1. \$$ LaTeX_数学表达式 $$ +2. \$$ LaTeX_数学表达式 $$ +3. \$$ LaTeX_数学表达式 $$ +``` + +[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html + +## Mermaid + +> Mermaid 支持正在开发中 +{ .prompt-warning } + +[**Mermaid**](https://github.com/mermaid-js/mermaid) 是一个很棒的图表生成工具。要在您的文章中启用它,请将以下内容添加到 YAML 块中: + +```yaml +--- +mermaid: true +--- +``` + +然后您可以像其他 markdown 语言一样使用它:将图表代码用 ```` ```mermaid ```` 和 ```` ``` ```` 包围起来。 + +## 了解更多 + +要了解更多关于撰写 Hugo 文章的知识,请访问 [Hugo 文档](https://gohugo.io/documentation/)。 \ No newline at end of file diff --git a/content/post/2019-08-11-customize-the-favicon/index.en.md b/content/post/2019-08-11-customize-the-favicon/index.en.md index 04f8c2f..b88db3f 100644 --- a/content/post/2019-08-11-customize-the-favicon/index.en.md +++ b/content/post/2019-08-11-customize-the-favicon/index.en.md @@ -9,10 +9,9 @@ categories: - Tutorial tags: - favicon -pin: true --- -The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory {{< markdown/filepath src="assets/img/favicons/" >}}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons. +The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory {{< filepath src="assets/img/favicons/" >}}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons. ## Generate the favicon @@ -24,10 +23,10 @@ In the next step, the webpage will show all usage scenarios. You can keep the de Download the generated package, unzip and delete the following two from the extracted files: -- {{< markdown/filepath src="browserconfig.xml" >}} -- {{< markdown/filepath src="site.webmanifest" >}} +- {{< filepath src="browserconfig.xml" >}} +- {{< filepath src="site.webmanifest" >}} -And then copy the remaining image files ({{< markdown/filepath src=".PNG" >}} and {{< markdown/filepath src=".ICO" >}}) to cover the original files in the directory {{< markdown/filepath src="assets/img/favicons/" >}} of your Hugo site. If your Hugo site doesn't have this directory yet, just create one. +And then copy the remaining image files ({{< filepath src=".PNG" >}} and {{< filepath src=".ICO" >}}) to cover the original files in the directory {{< filepath src="assets/img/favicons/" >}} of your Hugo site. If your Hugo site doesn't have this directory yet, just create one. The following table will help you understand the changes to the favicon files: @@ -38,6 +37,6 @@ The following table will help you understand the changes to the favicon files: > ✓ means keep, ✗ means delete. -{.prompt-info } +{ .prompt-info } The next time you build the site, the favicon will be replaced with a customized edition. diff --git a/content/post/2019-08-11-customize-the-favicon/index.zh-CN.md b/content/post/2019-08-11-customize-the-favicon/index.zh-CN.md index 794c860..2de0c5a 100644 --- a/content/post/2019-08-11-customize-the-favicon/index.zh-CN.md +++ b/content/post/2019-08-11-customize-the-favicon/index.zh-CN.md @@ -2,42 +2,41 @@ title: 自定义网站图标 date: 2019-08-11 00:34:00 +0800 description: >- - 通过这个全面概述开始学习Chirpy的基础知识。 - 您将学习如何安装、配置和使用您的第一个基于Chirpy的网站,以及如何将其部署到网络服务器。 + 通过这个全面概述开始学习 Chirpy 的基础知识。 + 您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站,以及如何将其部署到网络服务器。 categories: - 博客 - 教程 tags: - 网站图标 -pin: true --- -[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/)的[网站图标](https://www.favicon-generator.org/about/)放置在{{< markdown/filepath src="assets/img/favicons/" >}}目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。 +[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) 的[网站图标](https://www.favicon-generator.org/about/)放置在 {{< filepath src="assets/img/favicons/" >}} 目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。 ## 生成网站图标 -准备一张尺寸为512x512或更大的正方形图像(PNG、JPG或SVG),然后前往在线工具[**Real Favicon Generator**](https://realfavicongenerator.net/),点击Select your Favicon image按钮上传您的图像文件。 +准备一张尺寸为 512x512 或更大的正方形图像(PNG、JPG 或 SVG),然后前往在线工具 [**Real Favicon Generator**](https://realfavicongenerator.net/),点击 Select your Favicon image 按钮上传您的图像文件。 -在下一步中,网页将显示所有使用场景。您可以保留默认选项,滚动到页面底部,点击Generate your Favicons and HTML code按钮生成网站图标。 +在下一步中,网页将显示所有使用场景。您可以保留默认选项,滚动到页面底部,点击 Generate your Favicons and HTML code 按钮生成网站图标。 ## 下载与替换 下载生成的包,解压并从提取的文件中删除以下两个文件: -- {{< markdown/filepath src="browserconfig.xml" >}} -- {{< markdown/filepath src="site.webmanifest" >}} +- {{< filepath src="browserconfig.xml" >}} +- {{< filepath src="site.webmanifest" >}} -然后将剩余的图像文件({{< markdown/filepath src=".PNG" >}}和{{< markdown/filepath src=".ICO" >}})复制到您的Hugo站点的{{< markdown/filepath src="assets/img/favicons/" >}}目录中,覆盖原始文件。如果您的Hugo站点还没有这个目录,只需创建一个。 +然后将剩余的图像文件({{< filepath src=".PNG" >}} 和 {{< filepath src=".ICO" >}})复制到您的 Hugo 站点的 {{< filepath src="assets/img/favicons/" >}} 目录中,覆盖原始文件。如果您的 Hugo 站点还没有这个目录,只需创建一个。 下表将帮助您理解网站图标文件的变化: -| 文件 | 来自在线工具 | 来自Chirpy | +| 文件 | 来自在线工具 | 来自 Chirpy | |---------------------|:---------------------------------:|:-----------:| | `*.PNG` | ✓ | ✗ | | `*.ICO` | ✓ | ✗ | > ✓ 表示保留,✗ 表示删除。 -{.prompt-info } +{ .prompt-info } 下次构建站点时,网站图标将被自定义版本替换。 \ No newline at end of file