diff --git a/exampleSite/content/docs/guide/shortcodes/_index.md b/exampleSite/content/docs/guide/shortcodes/_index.md
index e594563..0c5790a 100644
--- a/exampleSite/content/docs/guide/shortcodes/_index.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.md
@@ -26,4 +26,5 @@ Additional shortcodes provided by Hugo and Hextra:
{{< cards >}}
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="Others" icon="view-grid" >}}
+ {{< card link="hextra" title="Hextra" icon="view-grid" >}}
{{< /cards >}}
diff --git a/exampleSite/content/docs/guide/shortcodes/hextra.fa.md b/exampleSite/content/docs/guide/shortcodes/hextra.fa.md
new file mode 100644
index 0000000..7cd5a71
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/hextra.fa.md
@@ -0,0 +1,175 @@
+---
+title: Hextra Shortcodes
+linkTitle: Hextra
+sidebar:
+ exclude: true
+next: /docs/guide/deploy-site
+---
+
+الاستخدام الرئيسي لهذه الرموز المختصرة هو داخل التخطيط `hextra-home`.
+
+## `hextra/feature-card`
+
+رمز مختصر لعرض بطاقة مميزة.
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|--------------|-------------------------|
+| `title` | عنوان البطاقة. |
+| `subtitle` | العنوان الفرعي للبطاقة. |
+| `class` | فئة البطاقة. |
+| `image` | صورة البطاقة. |
+| `imageClass` | فئة الصورة. |
+| `style` | نمط البطاقة. |
+| `icon` | أيقونة البطاقة. |
+| `link` | رابط البطاقة. |
+
+## `hextra/feature-grid`
+
+رمز مختصر لعرض شبكة الميزات.
+
+### Usage
+
+```
+{{}}
+ {{}}
+ {{}}
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|--------------|
+| `cols` | عدد الأعمدة. |
+| `style` | نمط الشبكة. |
+
+## `hextra/hero-badge`
+
+رمز مختصر لعرض شارة تحتوي على رابط.
+
+### Usage
+
+```
+{{}}
+
+ Free, open source
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|--------------|
+| `link` | رابط الشارة. |
+| `class` | فئة الشارة. |
+| `style` | شكل الشارة. |
+
+## `hextra/hero-button`
+
+رمز مختصر لعرض زر يحتوي على رابط.
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `link` | رابط الزر. |
+| `text` | نص الزر. |
+| `style` | شكل الزر. |
+
+## `hextra/hero-container`
+
+حاوية بطل بسيطة مع صورة على الجانب الأيسر.
+
+### Usage
+
+```
+{{}}
+ Content
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|---------------|-----------------------------------------|
+| `class` | فئة الحاوية. |
+| `cols` | عدد الأعمدة (الافتراضي: `2`). |
+| `image` | صورة الحاوية. |
+| `imageCard` | عرض الصورة كبطاقة (الافتراضي: `false`). |
+| `imageClass` | فئة الصورة. |
+| `imageLink` | رابط الصورة. |
+| `imageStyle` | شكل الصورة. |
+| `imageTitle` | عنوان الصورة. |
+| `imageWidth` | عرض الصورة (الافتراضي: `350`). |
+| `imageHeight` | ارتفاع الصورة (الافتراضي: `350`). |
+| `style` | شكل الحاوية. |
+
+## `hextra/hero-headline`
+
+رمز مختصر لعرض عنوان رئيسي.
+
+### Usage
+
+```
+{{}}
+ Build modern websites
with Markdown and Hugo
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|----------------|
+| `style` | أسلوب العنوان. |
+
+## `hextra/hero-section`
+
+قسم بطل بسيط مع عنوان ونمط اختياري.
+
+### Usage
+
+```
+{{}}Title{{}}>
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|--------------------------------|
+| `heading` | مستوى العنوان (افتراضي: `h2`). |
+| `style` | نمط العنوان. |
+| `content` | محتوى العنوان. |
+
+## `hextra/hero-subtitle`
+
+رمز مختصر لعرض عنوان فرعي للبطل.
+
+### Usage
+
+```
+{{}}
+ Fast, batteries-included Hugo theme
for creating beautiful static websites
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|----------------|
+| `style` | أسلوب الترجمة. |
diff --git a/exampleSite/content/docs/guide/shortcodes/hextra.ja.md b/exampleSite/content/docs/guide/shortcodes/hextra.ja.md
new file mode 100644
index 0000000..21ba343
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/hextra.ja.md
@@ -0,0 +1,175 @@
+---
+title: Hextra Shortcodes
+linkTitle: Hextra
+sidebar:
+ exclude: true
+next: /docs/guide/deploy-site
+---
+
+これらのショートコードの主な使用場所は、レイアウト `hextra-home` 内です。
+
+## `hextra/feature-card`
+
+機能カードを表示するためのショートコード。
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|--------------|-------------|
+| `title` | カードのタイトル。 |
+| `subtitle` | カードのサブタイトル。 |
+| `class` | カードのクラス。 |
+| `image` | カードの画像。 |
+| `imageClass` | 画像のクラス。 |
+| `style` | カードのスタイル。 |
+| `icon` | カードのアイコン。 |
+| `link` | カードのリンク。 |
+
+## `hextra/feature-grid`
+
+機能グリッドを表示するためのショートコード。
+
+### Usage
+
+```
+{{}}
+ {{}}
+ {{}}
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `cols` | 列の数。 |
+| `style` | グリッドのスタイル。 |
+
+## `hextra/hero-badge`
+
+リンク付きのバッジをレンダリングするためのショートコード。
+
+### Usage
+
+```
+{{}}
+
+ Free, open source
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `link` | バッジのリンク。 |
+| `class` | バッジのクラス。 |
+| `style` | バッジのスタイル。 |
+
+## `hextra/hero-button`
+
+リンク付きのボタンをレンダリングするためのショートコード。
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `link` | ボタンのリンク。 |
+| `text` | ボタンのテキスト。 |
+| `style` | ボタンのスタイル。 |
+
+## `hextra/hero-container`
+
+左側に画像があるシンプルなヒーロー コンテナー。
+
+### Usage
+
+```
+{{}}
+ Content
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|---------------|-----------------------------------|
+| `class` | コンテナのクラス。 |
+| `cols` | 列数（デフォルト：`2`）。 |
+| `image` | コンテナの画像。 |
+| `imageCard` | 画像をカードとして表示するかどうか（デフォルト：`false`）。 |
+| `imageClass` | 画像のクラス。 |
+| `imageLink` | 画像のリンク。 |
+| `imageStyle` | 画像のスタイル。 |
+| `imageTitle` | 画像のタイトル。 |
+| `imageWidth` | 画像の幅（デフォルト：`350`）。 |
+| `imageHeight` | 画像の高さ（デフォルト：`350`）。 |
+| `style` | コンテナのスタイル。 |
+
+## `hextra/hero-headline`
+
+ヒーローの見出しを表示するためのショートコード。
+
+### Usage
+
+```
+{{}}
+ Build modern websites
with Markdown and Hugo
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `style` | 見出しのスタイル。 |
+
+## `hextra/hero-section`
+
+見出しとオプションのスタイルを備えたシンプルなヒーロー セクション。
+
+### Usage
+
+```
+{{}}Title{{}}>
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|----------------------|
+| `heading` | 見出しレベル（デフォルト: `h2`）。 |
+| `style` | 見出しのスタイル。 |
+| `content` | 見出しの内容。 |
+
+## `hextra/hero-subtitle`
+
+ヒーローのサブタイトルを表示するためのショートコード。
+
+### Usage
+
+```
+{{}}
+ Fast, batteries-included Hugo theme
for creating beautiful static websites
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `style` | 字幕のスタイル。 |
diff --git a/exampleSite/content/docs/guide/shortcodes/hextra.md b/exampleSite/content/docs/guide/shortcodes/hextra.md
new file mode 100644
index 0000000..2003a8f
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/hextra.md
@@ -0,0 +1,175 @@
+---
+title: Hextra Shortcodes
+linkTitle: Hextra
+sidebar:
+ exclude: true
+next: /docs/guide/deploy-site
+---
+
+The main usage of these shortcodes are within the layout `hextra-home`.
+
+## `hextra/feature-card`
+
+A shortcode for displaying a feature card.
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|--------------|---------------------------|
+| `title` | The title of the card. |
+| `subtitle` | The subtitle of the card. |
+| `class` | The class of the card. |
+| `image` | The image of the card. |
+| `imageClass` | The class of the image. |
+| `style` | The style of the card. |
+| `icon` | The icon of the card. |
+| `link` | The link of the card. |
+
+## `hextra/feature-grid`
+
+A shortcode for displaying a feature grid.
+
+### Usage
+
+```
+{{}}
+ {{}}
+ {{}}
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|------------------------|
+| `cols` | The number of columns. |
+| `style` | The style of the grid. |
+
+## `hextra/hero-badge`
+
+A shortcode for rendering a badge with a link.
+
+### Usage
+
+```
+{{}}
+
+ Free, open source
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------------------|
+| `link` | The link of the badge. |
+| `class` | The class of the badge. |
+| `style` | The style of the badge. |
+
+## `hextra/hero-button`
+
+A shortcode for rendering a button with a link.
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|--------------------------|
+| `link` | The link of the button. |
+| `text` | The text of the button. |
+| `style` | The style of the button. |
+
+## `hextra/hero-container`
+
+A simple hero container with an image on the left side.
+
+### Usage
+
+```
+{{}}
+ Content
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|---------------|------------------------------------------------------------|
+| `class` | The class of the container. |
+| `cols` | The number of columns (default: `2`). |
+| `image` | The image of the container. |
+| `imageCard` | Whether to display the image as a card (default: `false`). |
+| `imageClass` | The class of the image. |
+| `imageLink` | The link of the image. |
+| `imageStyle` | The style of the image. |
+| `imageTitle` | The title of the image. |
+| `imageWidth` | The width of the image (default: `350`). |
+| `imageHeight` | The height of the image (default: `350`). |
+| `style` | The style of the container. |
+
+## `hextra/hero-headline`
+
+A shortcode for displaying a hero headline.
+
+### Usage
+
+```
+{{}}
+ Build modern websites
with Markdown and Hugo
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|----------------------------|
+| `style` | The style of the headline. |
+
+## `hextra/hero-section`
+
+A simple hero section with a heading and optional style.
+
+### Usage
+
+```
+{{}}Title{{}}>
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|------------------------------------|
+| `heading` | The heading level (default: `h2`). |
+| `style` | The style of the heading. |
+| `content` | The content of the heading. |
+
+## `hextra/hero-subtitle`
+
+A shortcode for displaying a hero subtitle.
+
+### Usage
+
+```
+{{}}
+ Fast, batteries-included Hugo theme
for creating beautiful static websites
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|----------------------------|
+| `style` | The style of the subtitle. |
diff --git a/exampleSite/content/docs/guide/shortcodes/hextra.zh-cn.md b/exampleSite/content/docs/guide/shortcodes/hextra.zh-cn.md
new file mode 100644
index 0000000..daeeb08
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/hextra.zh-cn.md
@@ -0,0 +1,175 @@
+---
+title: Hextra Shortcodes
+linkTitle: Hextra
+sidebar:
+ exclude: true
+next: /docs/guide/deploy-site
+---
+
+这些短代码的主要用途是在布局`hextra-home`内。
+
+## `hextra/feature-card`
+
+显示功能卡的短代码。
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|--------------|-------------|
+| `title` | 卡片的标题。 |
+| `subtitle` | 卡片的副标题。 |
+| `class` | 卡片的类别。 |
+| `image` | 卡片的图片。 |
+| `imageClass` | 图片的类别。 |
+| `style` | 卡片的样式。 |
+| `icon` | 卡片的图标。 |
+| `link` | 卡片的链接。 |
+
+## `hextra/feature-grid`
+
+用于显示特征网格的短代码。
+
+### Usage
+
+```
+{{}}
+ {{}}
+ {{}}
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `cols` | 列数。 |
+| `style` | 网格的样式。 |
+
+## `hextra/hero-badge`
+
+用于呈现带有链接的徽章的短代码。
+
+### Usage
+
+```
+{{}}
+
+ Free, open source
+ {{}}
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `link` | 徽章的链接。 |
+| `class` | 徽章的类别。 |
+| `style` | 徽章的样式。 |
+
+## `hextra/hero-button`
+
+用于呈现带有链接的按钮的短代码。
+
+### Usage
+
+```
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `link` | 按钮的链接。 |
+| `text` | 按钮的文本。 |
+| `style` | 按钮的样式。 |
+
+## `hextra/hero-container`
+
+一个简单的英雄容器，左侧有一个图像。
+
+### Usage
+
+```
+{{}}
+ Content
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|---------------|--------------------------|
+| `class` | 容器的类。 |
+| `cols` | 列数（默认值：`2`）。 |
+| `image` | 容器的图片。 |
+| `imageCard` | 是否将图片显示为卡片（默认值：`false`）。 |
+| `imageClass` | 图片的类。 |
+| `imageLink` | 图片的链接。 |
+| `imageStyle` | 图片的样式。 |
+| `imageTitle` | 图片的标题。 |
+| `imageWidth` | 图片的宽度（默认值：`350`）。 |
+| `imageHeight` | 图片的高度（默认值：`350`）。 |
+| `style` | 容器的样式。 |
+
+## `hextra/hero-headline`
+
+显示英雄标题的短代码。
+
+### Usage
+
+```
+{{}}
+ Build modern websites
with Markdown and Hugo
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `style` | 标题的样式。 |
+
+## `hextra/hero-section`
+
+带有标题和可选样式的简单英雄部分。
+
+### Usage
+
+```
+{{}}Title{{}}>
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-----------------|
+| `heading` | 标题级别（默认值：`h2`）。 |
+| `style` | 标题的样式。 |
+| `content` | 标题的内容。 |
+
+## `hextra/hero-subtitle`
+
+显示英雄字幕的短代码。
+
+### Usage
+
+```
+{{}}
+ Fast, batteries-included Hugo theme
for creating beautiful static websites
+{{}}
+```
+
+### Options
+
+| Parameter | Description |
+|-----------|-------------|
+| `style` | 字幕的样式。 |