Initial commit for Hugo site.

2025-02-20 08:28:31 -05:00
parent 737c448252
commit 045d0c24f3
696 changed files with 91218 additions and 0 deletions
@@ -0,0 +1,236 @@
+---
+title: "ショートコード"
+date: 2020-08-11
+draft: false
+description: "Congoで利用できるすべてのショートコードについて"
+summary: Congoには、画像、図表、ボタンなどのリッチコンテンツを記事に追加するショートコードが含まれています。
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+---
+
+すべての[デフォルトのHugoショートコード](https://gohugo.io/content-management/shortcodes/)に加えて、Congoは追加機能のためにいくつか追加しています。
+
+## アラート
+
+`alert` は、その内容をスタイル化されたメッセージボックスとして記事内に出力します。読者に見逃してほしくない重要な情報に注意を促すのに便利です。
+
+入力はMarkdownで書かれているので、好きなようにフォーマットできます。
+
+デフォルトでは、警告の三角形アイコンで表示されます。アイコンを変更するには、アイコン名をショートコードに含めます。アイコンの使い方については、[アイコン](#アイコン)をご覧ください。
+
+**例:**
+
+```md
+{{</* alert */>}}
+**警告！** この行為は破壊的です！
+{{</* /alert */>}}
+
+{{</* alert "twitter" */>}}
+Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**警告！** この行為は破壊的です！
+{{< /alert >}}
+&nbsp;
+{{< alert "twitter" >}}
+Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！
+{{< /alert >}}
+
+## バッジ
+
+`badge` は、メタデータを表示するのに便利なスタイル付きバッジコンポーネントを出力します。
+
+**例:**
+
+```md
+{{</* badge */>}}
+新着記事！
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+新着記事！
+{{< /badge >}}
+
+## ボタン
+
+`button` は主要なアクションを強調するために使用できるスタイル付きボタンコンポーネントを出力します。オプションで3つのパラメーターを持ちます:
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`href`|ボタンがリンクするURL。|
+|`target`|リンクのターゲット。|
+|`download`|ブラウザがURLに移動するのではなく、リソースをダウンロードするかどうか。このパラメーターの値はダウンロードされるファイルの名前になります。|
+<!-- prettier-ignore-end -->
+
+**例:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Click!
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Click!
+{{< /button >}}
+
+## チャート
+
+`chart` は、Chart.jsライブラリを使用して、単純な構造化データを使用して記事にチャートを埋め込みます。多くの[異なるチャートスタイル](https://www.chartjs.org/docs/latest/samples/)をサポートしており、全てはショートコード内から設定することができます。ショートコードのタグの間にチャートのパラメーターを指定するだけで、あとはChart.jsがやってくれます。
+
+構文とサポートされるチャート・タイプの詳細については、[Chart.js公式ドキュメント](https://www.chartjs.org/docs/latest/general/)を参照してください。
+
+**例:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+[サンプル - チャート]({{< ref "charts" >}})で、他のサンプルを見るこができます。
+
+## 図
+
+Congoには、コンテンツに画像を追加するための `figure` ショートコードが含まれています。このショートコードは、Hugoの基本機能を置き換えることで、さらなるパフォーマンス上の利点を提供します。
+
+提供された画像がページリソースである場合、Hugo Pipesを使用して最適化され、さまざまなデバイスの解像度に適した画像が提供されるように拡大縮小されます。静的アセットや外部画像へのURLが提供された場合は、Hugoによる画像処理は行われず、そのまま含まれます。
+
+`figure` は6つのパラメーターを受け入れます:
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`src`| **必須** 画像のローカルパス/ファイル名またはURL。パスとファイル名を指定すると、テーマは次の順番で画像を探します: まず、ページにバンドルされている[ページリソース](https://gohugo.io/content-management/page-resources/)、次に `assets/` ディレクトリ、最後に `static/` ディレクトリ。|
+|`alt`|画像の[代替テキスト説明](https://moz.com/learn/seo/alt-text)。|
+|`caption`|画像の下に表示される画像キャプションのMarkdown文字列。|
+|`class`|画像に適用する追加のCSSクラス。|
+|`href`|画像のリンク先URL。|
+|`default`|デフォルトのHugo `figure` の動作に戻す際には `default=true` を指定し、通常の[Hugo ショートコード構文](https://gohugo.io/content-management/shortcodes/#figure)を参照してください。|
+<!-- prettier-ignore-end -->
+
+Congoは、標準的なMarkdown構文を使用した場合の画像についても自動変換をサポートしています。以下のフォーマットを使用するだけで処理します:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**例:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="抽象的な紫色のアートワーク"
+    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- OR -->
+
+![抽象的な紫色のアートワーク](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="抽象的な紫色のアートワーク" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
+
+## アイコン
+
+`icon` はアイコンの名前を唯一のパラメーターとして受け取り、SVGアイコンを出力します。アイコンは現在のテキストサイズに合わせて自動的に拡大縮小されます。
+
+**例:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**出力:** {{< icon "github" >}}
+
+アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、[サンプル - アイコン]({{< ref "samples/icons" >}})ページをチェックしてください。
+
+カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 `.svg` を除いたSVGファイル名でショートコードから参照できます。
+
+アイコンは[パーシャル - アイコン]({{< ref "partials#アイコン" >}})を呼び出すことでパーシャルでも使用できます。
+
+## Katex
+
+`katex` を使うと、KaTeXパッケージを使って記事の内容に数式を追加することができます。利用可能な構文については[supported TeX functions](https://katex.org/docs/supported.html)のオンラインリファレンスを参照してください。
+
+記事中に数式を含めるには、コンテンツ内の任意の場所にショートコードを配置するだけです。記事ごとに一度記述するだけで、KaTeXが自動的にそのページのマークアップをレンダリングします。インライン表記とブロック表記の両方がサポートされています。
+
+インライン記法は、式を区切り記号 `\\(` と `\\)` で囲むことで生成できます。ブロック記法の場合は `$$` です。
+
+**例:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+[数学的表記のサンプル]({{< ref "mathematical-notation" >}})でより多くの例をチェックしてください。
+
+## リード
+
+`lead` は記事の冒頭を強調するために使われます。導入部のスタイルや、重要な情報を呼び出すために使用することができます。Markdownのコンテンツを `lead` で囲むだけです。
+
+**例:**
+
+```md
+{{</* lead */>}}
+人生があなたにレモンを与えるなら、それでレモネードを作りなさい。
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+人生があなたにレモンを与えるなら、それでレモネードを作りなさい。
+{{< /lead >}}
+
+## Mermaid
+
+`mermaid` を使えば、テキストを使って詳細なダイアグラムやビジュアライゼーションを描くことができます。Mermaidを使用しており、様々なダイアグラム、チャート、その他の出力形式をサポートしています。
+
+`mermaid` 内にMermaid構文を記述するだけで、あとはプラグインにおまかせです。
+
+構文とサポートされている図の種類の詳細については、[Mermaid公式ドキュメント](https://mermaid-js.github.io/)を参照してください。
+
+**例:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[レモン]-->B[レモネード];
+B-->C[利益]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[レモン]-->B[レモネード];
+B-->C[利益]
+{{< /mermaid >}}
+
+[ダイアグラムとフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}})で、他の例を見ることができます。
@@ -0,0 +1,236 @@
+---
+title: "Shortcodes"
+date: 2020-08-11
+draft: false
+description: "All the shortcodes available in Congo."
+summary: Congo includes several shortcodes for adding rich content to articles including images, charts, diagrams, buttons and more.
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+---
+
+In addition to all the [default Hugo shortcodes](https://gohugo.io/content-management/shortcodes/), Congo adds a few extras for additional functionality.
+
+## Alert
+
+`alert` outputs its contents as a stylised message box within your article. It's useful for drawing attention to important information that you don't want the reader to miss.
+
+The input is written in Markdown so you can format it however you please.
+
+By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the [icon shortcode](#icon) for more details on using icons.
+
+**Example:**
+
+```md
+{{</* alert */>}}
+**Warning!** This action is destructive!
+{{</* /alert */>}}
+
+{{</* alert "twitter" */>}}
+Don't forget to [follow me](https://twitter.com/jpanther) on Twitter.
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**Warning!** This action is destructive!
+{{< /alert >}}
+&nbsp;
+{{< alert "twitter" >}}
+Don't forget to [follow me](https://twitter.com/jpanther) on Twitter.
+{{< /alert >}}
+
+## Badge
+
+`badge` outputs a styled badge component which is useful for displaying metadata.
+
+**Example:**
+
+```md
+{{</* badge */>}}
+New article!
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+New article!
+{{< /badge >}}
+
+## Button
+
+`button` outputs a styled button component which can be used to highlight a primary action. It has three optional parameters:
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`href`|The URL that the button should link to.|
+|`target`|The target of the link.|
+|`download`|Whether browser should download the resource rather than navigate to the URL. The value of this parameter will be the name of the downloaded file.|
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Call to action
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Call to action
+{{< /button >}}
+
+## Chart
+
+`chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.
+
+Refer to the [official Chart.js docs](https://www.chartjs.org/docs/latest/general/) for details on syntax and supported chart types.
+
+**Example:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
+
+## Figure
+
+Congo includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
+
+When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
+
+The `figure` shortcode accepts six parameters:
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`src`| **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory.|
+|`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
+|`caption`|Markdown for the image caption, which will be displayed below the image.|
+|`class`|Additional CSS classes to apply to the image.|
+|`href`|URL that the image should be linked to.|
+|`default`|Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).|
+<!-- prettier-ignore-end -->
+
+Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**Example:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="Abstract purple artwork"
+    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- OR -->
+
+![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
+
+## Icon
+
+`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
+
+**Example:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**Output:** {{< icon "github" >}}
+
+Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
+
+Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the `.svg` extension.
+
+Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
+
+## Katex
+
+The `katex` shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of [supported TeX functions](https://katex.org/docs/supported.html) for the available syntax.
+
+To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.
+
+Inline notation can be generated by wrapping the expression in `\\(` and `\\)` delimiters. Alternatively, block notation can be generated using `$$` delimiters.
+
+**Example:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
+
+## Lead
+
+`lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
+
+**Example:**
+
+```md
+{{</* lead */>}}
+When life gives you lemons, make lemonade.
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+When life gives you lemons, make lemonade.
+{{< /lead >}}
+
+## Mermaid
+
+`mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.
+
+Simply write your Mermaid syntax within the `mermaid` shortcode and let the plugin do the rest.
+
+Refer to the [official Mermaid docs](https://mermaid-js.github.io/) for details on syntax and supported diagram types.
+
+**Example:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{< /mermaid >}}
+
+You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
@@ -0,0 +1,236 @@
+---
+title: "短代码"
+date: 2020-08-11
+draft: false
+description: "Congo提供的所有短代码"
+summary: Congo提供了多个短代码，可用于向文章添加丰富的内容，包括图像、图表、图表、按钮等。
+slug: "shortcodes"
+tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
+---
+
+除了[默认的 Hugo 短代码](https://gohugo.io/content-management/shortcodes/)外，Congo 还额外添加了一些功能。
+
+## Alert
+
+`alert`以样式化的消息框形式输出其内容在文章中。它对于引起读者注意的重要信息很有用。
+
+输入是用Markdown编写的，因此您可以按照自己的喜好进行格式化。
+
+默认情况下，警报将以感叹号三角形图标的形式呈现。要更改图标，请在短代码中包含图标名称。有关使用图标的更多详细信息，请查看[图标短代码](#icon)。
+
+**示例:**
+
+```md
+{{</* alert */>}}
+**警告！** 这个操作是破坏性的！
+{{</* /alert */>}}
+
+{{</* alert "twitter" */>}}
+别忘了在Twitter上[关注我](https://twitter.com/jpanther)。
+{{</* /alert */>}}
+```
+
+{{< alert >}}
+**警告！** 这个操作是破坏性的！
+{{< /alert >}}
+&nbsp;
+{{< alert "twitter" >}}
+别忘了在Twitter上[关注我](https://twitter.com/jpanther)。
+{{< /alert >}}
+
+## Badge
+
+`badge`输出一个带有样式的徽章组件，用于显示元数据。
+
+**示例:**
+
+```md
+{{</* badge */>}}
+新文章！
+{{</* /badge */>}}
+```
+
+{{< badge >}}
+新文章！
+{{< /badge >}}
+
+## Button
+
+`button` 输出一个样式化的按钮组件，用于突出显示主要操作。它有三个可选参数：
+
+<!-- prettier-ignore-start -->
+|参数|描述|
+|---|---|
+|`href`|按钮应链接到的 URL。|
+|`target`|链接的目标。|
+|`download`|浏览器是否应下载资源而不是导航到 URL。此参数的值将是下载文件的名称。|
+<!-- prettier-ignore-end -->
+
+**示例:**
+
+```md
+{{</* button href="#button" target="_self" */>}}
+Call to action
+{{</* /button */>}}
+```
+
+{{< button href="#button" target="_self" >}}
+Call to action
+{{< /button >}}
+
+## Chart
+
+`chart` 使用 Chart.js 库通过简单的结构化数据嵌入图表到文章中。它支持多种[不同的图表样式](https://www.chartjs.org/docs/latest/samples/)，并且一切都可以通过短代码内部进行配置。只需在短代码标签之间提供图表参数，Chart.js 将完成其余工作。
+
+有关语法和支持的图表类型的详细信息，请参阅[官方 Chart.js 文档](https://www.chartjs.org/docs/latest/general/)。
+
+**示例:**
+
+```js
+{{</* chart */>}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{</* /chart */>}}
+```
+
+<!-- prettier-ignore-start -->
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}
+<!-- prettier-ignore-end -->
+
+你可以在 [图表示例]({{< ref "charts" >}}) 页面看到一些额外的 Chart.js 示例。
+
+## Figure
+
+Congo 包含一个 `figure` 短代码，用于向内容添加图片。该短代码替代了基本的 Hugo 功能，以提供额外的性能优势。
+
+当提供的图像是页面资源时，它将使用 Hugo Pipes 进行优化，并进行缩放，以提供适用于不同设备分辨率的图像。如果提供的是静态资源或指向外部图像的 URL，则将其原样包含，Hugo 不会对其进行任何图像处理。
+
+`figure` 短代码接受六个参数：
+
+<!-- prettier-ignore-start -->
+|参数|描述|
+|---|---|
+|`src`| **必需。** 图像的本地路径/文件名或 URL。当提供路径和文件名时，主题将尝试使用以下查找顺序定位图像：首先，作为[页面资源](https://gohugo.io/content-management/page-resources/)与页面捆绑；然后是 `assets/` 目录中的资源；最后是 `static/` 目录中的静态图像。|
+|`alt`|图像的[替代文本描述](https://moz.com/learn/seo/alt-text)。|
+|`caption`|图像说明的 Markdown，将显示在图像下方。|
+|`class`|应用于图像的额外 CSS 类。|
+|`href`|图像应链接到的 URL。|
+|`default`|特殊参数，用于恢复默认的 Hugo `figure` 行为。只需提供 `default=true`，然后使用正常的[Hugo 短代码语法](https://gohugo.io/content-management/shortcodes/#figure)。|
+<!-- prettier-ignore-end -->
+
+Congo 还支持使用标准 Markdown 语法包含的图像的自动转换。只需使用以下格式，主题将处理其余部分：
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+**示例:**
+
+```md
+{{</* figure
+    src="abstract.jpg"
+    alt="抽象紫色艺术品"
+    caption="照片由[Jr Korpa](https://unsplash.com/@jrkorpa)拍摄，来自[Unsplash](https://unsplash.com/)"
+    */>}}
+
+<!-- 或 -->
+
+![抽象紫色艺术品](abstract.jpg "照片由[Jr Korpa](https://unsplash.com/@jrkorpa)拍摄，来自[Unsplash](https://unsplash.com/)")
+```
+
+{{< figure src="abstract.jpg" alt="抽象紫色艺术品" caption="照片由[Jr Korpa](https://unsplash.com/@jrkorpa)拍摄，来自[Unsplash](https://unsplash.com/)" >}}
+
+## Icon
+
+`icon` 输出一个 SVG 图标，并将图标名称作为其唯一参数。图标的大小会根据当前文本大小进行缩放。
+
+**示例:**
+
+```md
+{{</* icon "github" */>}}
+```
+
+**输出:** {{< icon "github" >}}
+
+图标是使用 Hugo 管道填充的，这使它们非常灵活。Congo 包含许多用于社交、链接和其他用途的内置图标。请查看 [图标示例]({{< ref "samples/icons" >}}) 页面以获取支持的图标的完整列表。
+
+通过在项目的 `assets/icons/` 目录中提供自己的图标资产，可以添加自定义图标。然后，可以通过在短代码中使用不带 `.svg` 扩展名的 SVG 文件名来引用图标。
+
+图标还可以通过调用 [图标部分]({{< ref "partials#icon" >}}) 在局部中使用。
+
+## Katex
+
+`katex` 短代码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法，请参阅[支持的 TeX 函数](https://katex.org/docs/supported.html)的在线参考。
+
+要在文章中包含数学表达式，只需在内容中的任何位置放置短代码。它只需要在每篇文章中包含一次，KaTeX 将自动呈现页面上的任何标记。支持行内和块表示法。
+
+可以通过将表达式包装在 `\\(` 和 `\\)` 定界符中来生成行内表示法。或者，可以使用 `$$` 定界符生成块表示法。
+
+**示例:**
+
+```md
+{{</* katex */>}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+```
+
+{{< katex >}}
+\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
+
+查看 [数学符号示例]({{< ref "mathematical-notation" >}}) 页面以获取更多示例。
+
+## Lead
+
+`lead` 用于突出显示文章开头的内容。它可用于设计引言，或者强调重要信息。只需将任何 Markdown 内容包装在 `lead` 短代码中即可。
+
+**示例:**
+
+```md
+{{</* lead */>}}
+当生活给你柠檬时，做柠檬水。
+{{</* /lead */>}}
+```
+
+{{< lead >}}
+当生活给你柠檬时，做柠檬水。
+{{< /lead >}}
+
+## Mermaid
+
+`mermaid` 允许您使用文本绘制详细的图表和可视化效果。它在幕后使用 Mermaid，并支持各种图表、图表和其他输出格式。
+
+只需在 `mermaid` 短代码中编写您的 Mermaid 语法，然后让插件处理剩下的工作。
+
+有关语法和支持的图表类型的详细信息，请参阅 [官方 Mermaid 文档](https://mermaid-js.github.io/)。
+
+**示例:**
+
+```md
+{{</* mermaid */>}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph LR;
+A[Lemons]-->B[Lemonade];
+B-->C[Profit]
+{{< /mermaid >}}
+
+您可以在 [图表和流程图示例]({{< ref "diagrams-flowcharts" >}}) 页面上看到一些额外的 Mermaid 示例。