congo

9.8 KiB

Raw Blame History

title

date

draft

description

summary

slug

アラート

alert は、その内容をスタイル化されたメッセージボックスとして記事内に出力します。読者に見逃してほしくない重要な情報に注意を促すのに便利です。

入力はMarkdownで書かれているので、好きなようにフォーマットできます。

デフォルトでは、警告の三角形アイコンで表示されます。アイコンを変更するには、アイコン名をショートコードに含めます。アイコンの使い方については、アイコンをご覧ください。

例:

{{</* alert */>}}
**警告！** この行為は破壊的です！
{{</* /alert */>}}

{{</* alert "twitter" */>}}
Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！
{{</* /alert */>}}

{{< alert >}} 警告！ この行為は破壊的です！ {{< /alert >}} {{< alert "twitter" >}} Twitterで私をフォローすることをお忘れなく！ {{< /alert >}}

バッジ

badge は、メタデータを表示するのに便利なスタイル付きバッジコンポーネントを出力します。

例:

{{</* badge */>}}
新着記事！
{{</* /badge */>}}

{{< badge >}} 新着記事！ {{< /badge >}}

ボタン

button は主要なアクションを強調するために使用できるスタイル付きボタンコンポーネントを出力します。オプションで3つのパラメーターを持ちます:

Parameter	Description
`href`	ボタンがリンクするURL。
`target`	リンクのターゲット。
`download`	ブラウザがURLに移動するのではなく、リソースをダウンロードするかどうか。このパラメーターの値はダウンロードされるファイルの名前になります。

例:

{{</* button href="#button" target="_self" */>}}
Click!
{{</* /button */>}}

{{< button href="#button" target="_self" >}} Click! {{< /button >}}

チャート

chart は、Chart.jsライブラリを使用して、単純な構造化データを使用して記事にチャートを埋め込みます。多くの異なるチャートスタイルをサポートしており、全てはショートコード内から設定することができます。ショートコードのタグの間にチャートのパラメーターを指定するだけで、あとはChart.jsがやってくれます。

構文とサポートされるチャート・タイプの詳細については、Chart.js公式ドキュメントを参照してください。

例:

{{</* chart */>}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{</* /chart */>}}

{{< chart >}} type: 'bar', data: { labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], datasets: [{ label: '# of votes', data: [12, 19, 3, 5, 3], }] } {{< /chart >}}

[サンプル - チャート]({{< ref "charts" >}})で、他のサンプルを見るこができます。

図

Congoには、コンテンツに画像を追加するための figure ショートコードが含まれています。このショートコードは、Hugoの基本機能を置き換えることで、さらなるパフォーマンス上の利点を提供します。

提供された画像がページリソースである場合、Hugo Pipesを使用して最適化され、さまざまなデバイスの解像度に適した画像が提供されるように拡大縮小されます。静的アセットや外部画像へのURLが提供された場合は、Hugoによる画像処理は行われず、そのまま含まれます。

figure は6つのパラメーターを受け入れます:

Parameter	Description
`src`	必須画像のローカルパス/ファイル名またはURL。パスとファイル名を指定すると、テーマは次の順番で画像を探します: まず、ページにバンドルされているページリソース、次に `assets/` ディレクトリ、最後に `static/` ディレクトリ。
`alt`	画像の代替テキスト説明。
`caption`	画像の下に表示される画像キャプションのMarkdown文字列。
`class`	画像に適用する追加のCSSクラス。
`href`	画像のリンク先URL。
`default`	デフォルトのHugo `figure` の動作に戻す際には `default=true` を指定し、通常のHugo ショートコード構文を参照してください。

Congoは、標準的なMarkdown構文を使用した場合の画像についても自動変換をサポートしています。以下のフォーマットを使用するだけで処理します:

![Alt text](image.jpg "Image caption")

例:

{{</* 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 on Unsplash" >}}

アイコン

icon はアイコンの名前を唯一のパラメーターとして受け取り、SVGアイコンを出力します。アイコンは現在のテキストサイズに合わせて自動的に拡大縮小されます。

例:

{{</* icon "github" */>}}

出力: {{< icon "github" >}}

アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、[サンプル - アイコン]({{< ref "samples/icons" >}})ページをチェックしてください。

カスタムアイコンは、プロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 .svg を除いたSVGファイル名でショートコードから参照できます。

アイコンは[パーシャル - アイコン]({{< ref "partials#アイコン" >}})を呼び出すことでパーシャルでも使用できます。

Katex

数式は katexblock (ブロック表現用) または katexinline (インライン表現用) ショートコードを使用してレンダリングすることができます。KaTeXライブラリを使用して、記事内の数学表記をレンダリングします。

利用可能な構文についてはサポートされているTeX関数のオンラインリファレンスを参照してください。

例:

インライン記法: {{</* katexinline */>}}f(a,b,c) = (a^2+b^2+c^2)^3{{</* /katexinline */>}}

インライン記法: {{< katexinline >}}f(a,b,c) = (a^2+b^2+c^2)^3{{< /katexinline >}}

ブロック表記

{{</* katexblock */>}}
f(a,b,c) = (a^2+b^2+c^2)^3
{{</* /katexblock */>}}

{{< katexblock>}} f(a,b,c) = (a^2+b^2+c^2)^3 {{< /katexblock>}}

[数学的表記のサンプル]({{< ref "mathematical-notation" >}})でより多くの例をチェックしてください。

リード

lead は記事の冒頭を強調するために使われます。導入部のスタイルや、重要な情報を呼び出すために使用することができます。Markdownのコンテンツを lead で囲むだけです。

例:

{{</* lead */>}}
人生があなたにレモンを与えるなら、それでレモネードを作りなさい。
{{</* /lead */>}}

{{< lead >}} 人生があなたにレモンを与えるなら、それでレモネードを作りなさい。 {{< /lead >}}

Mermaid

mermaid を使えば、テキストを使って詳細なダイアグラムやビジュアライゼーションを描くことができます。Mermaidを使用しており、様々なダイアグラム、チャート、その他の出力形式をサポートしています。

mermaid 内にMermaid構文を記述するだけで、あとはプラグインにおまかせです。

構文とサポートされている図の種類の詳細については、Mermaid公式ドキュメントを参照してください。

例:

{{</* mermaid */>}}
graph LR;
A[レモン]-->B[レモネード];
B-->C[利益]
{{</* /mermaid */>}}

{{< mermaid >}} graph LR; A[レモン]-->B[レモネード]; B-->C[利益] {{< /mermaid >}}

[ダイアグラムとフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}})で、他の例を見ることができます。

9.8 KiB Raw Blame History