Merge remote-tracking branch 'origin/main' into jupyter

2025-07-16 18:11:33 -04:00 · 2024-09-03 21:53:35 +01:00
parent 4d03e35bf2 c6de4b5b6b
commit e094e30384
85 changed files with 3616 additions and 1291 deletions
--- a/exampleSite/content/blog/_index.zh-cn.md
+++ b/exampleSite/content/blog/_index.zh-cn.md
@ -1,3 +1,10 @@
 ---
 title: "博客"
---
+---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS 订阅</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>
--- a/exampleSite/content/docs/guide/configuration.md
+++ b/exampleSite/content/docs/guide/configuration.md
@ -161,7 +161,7 @@ To modify the copyright text displayed in your website's footer, you'll need to
 In this file, specify your new copyright text as shown below:

 ```yaml {filename="i18n/en.yaml"}
-copyright: "© 2023 YOUR TEXT HERE"
+copyright: "© 2024 YOUR TEXT HERE"
 ```

 For your reference, an example [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) file can be found in the GitHub repository. Additionally, you could use Markdown format in the copyright text.
@ -251,6 +251,23 @@ Options for `flexsearch.index`:
 - `heading` - level 1 and level 2 headings
 - `title` - only include the page title

+To customize the search tokenize, set the `params.search.flexsearch.tokenize` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+Options for [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search):
+
+- `strict` - index whole words
+- `forward` - incrementally index words in forward direction
+- `reverse` - incrementally index words in both directions
+- `full` - index every possible combination
+
 To exclude a page from the search index, set the `excludeSearch: true` in the front matter of the page:

 ```yaml {filename="content/docs/guide/configuration.md"}
--- a/exampleSite/content/docs/guide/configuration.zh-cn.md
+++ b/exampleSite/content/docs/guide/configuration.zh-cn.md
@ -130,7 +130,7 @@ editURL: "https://example.com/edit/this/page"
 在此文件中，填写新的版权文本，像这样：

 ```yaml {filename="i18n/en.yaml"}
-copyright: "© 2023 YOUR TEXT HERE"
+copyright: "© 2024 YOUR TEXT HERE"
 ```
 你可以在 GitHub 存储库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。另外，你可以在版权文本中使用 Markdown 格式。

@ -219,6 +219,25 @@ params:
 - `heading` - 一级和二级标题
 - `title` - 仅搜索标题

+要自定义检索分词，请在配置文件中设置`params.search.flexsearch.tokenize`：
+
+```hugo.yaml
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)的可选项:
+
+- `strict` - 严格单词匹配
+- `forward` - 单词前缀匹配
+- `reverse` - 单词前后缀匹配
+- `full` - 单词子串匹配。
+
+> 在默认的分词逻辑下，中文一句话就是一个“单词”
+
 要从搜索索引中排除页面，更改 front matter 中的 `excludeSearch: true`:

 ```yaml {filename="content/docs/guide/configuration.md"}
--- a/exampleSite/content/docs/guide/deploy-site.md
+++ b/exampleSite/content/docs/guide/deploy-site.md
@ -54,7 +54,7 @@ jobs:
  build:
    runs-on: ubuntu-latest
    env:
-      HUGO_VERSION: 0.121.2
+      HUGO_VERSION: 0.131.0
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@ -64,7 +64,7 @@ jobs:
      - name: Setup Go
        uses: actions/setup-go@v5
        with:
-          go-version: '1.21'
+          go-version: '1.22'
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4
@ -146,7 +146,7 @@ For more details, check out:
 3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
   - Configure the Build command to `hugo --gc --minify`
   - Specify the Publish directory to `public`
-   - Add Environment variable `HUGO_VERSION` and set to `0.119.0`
+   - Add Environment variable `HUGO_VERSION` and set to `0.132.2`
 4. Deploy!

 Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
--- a/exampleSite/content/docs/guide/deploy-site.zh-cn.md
+++ b/exampleSite/content/docs/guide/deploy-site.zh-cn.md
@ -0,0 +1,164 @@
+---
+title: 部署站点
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo 生成静态站点，允许多种托管方式，你可以自由选择
+本页将给出部署你的 Hextra 站点的方法
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages) 是免费部署和托管网站的推荐方法
+
+如果您使用以下方式引导该网站 [hextra-starter-template](https://github.com/imfing/hextra-starter-template), 它提供了开箱即用的 GitHub Actions 工作流程，有助于自动部署到 GitHub Pages
+
+{{% details title="GitHub Actions Configuration" closed="true" %}}
+
+以下是配置来自 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 的 Workflow 的示例：
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# 用于构建 Hugo 站点并将其部署到 GitHub Pages 的示例工作流程
+name: Deploy Hugo site to Pages
+
+on:
+  # 由默认分支触发
+  push:
+    branches: ["main"]
+
+  # 允许手动运行
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 仅允许一项并发部署，跳过正在进行的运行和最新排队的运行之间排队的运行
+# 但是，不要取消正在进行的运行，因为我们希望完成这些生产部署
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# 默认为 bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # 开始构建
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.121.2
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # 获取 .GitInfo 和 .Lastmod 的所有历史记录
+          submodules: recursive
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.21'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: Setup Hugo
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Build with Hugo
+        env:
+          # 最大程度地向后兼容 Hugo 模块
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # 开始部署
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  在仓库设置中将 **Pages** > **Build and deployment** > **Source** 调整为 **GitHub Actions**:
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+默认情况下，上述 GitHub Actions 工作流程 `.github/workflows/pages.yaml` 假定站点部署到 `https://<USERNAME>.github.io/<REPO>/`
+
+如需部署到 `https://<USERNAME>.github.io/` 修改参数 `--baseURL`:
+
+```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
+run: |
+  hugo \
+    --gc --minify \
+    --baseURL "https://${{ github.repository_owner }}.github.io/"
+```
+
+如需部署到自己的域，请对应修改 `--baseURL`
+
+
+## Cloudflare Pages
+
+1. 将您的网站托管在 Git 存储库（例如 GitHub）
+2. 登录到 [Cloudflare dashboard](https://dash.cloudflare.com/) 并选择你的账户
+3. 转至在账户主页面中 **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
+4. 选择你的仓库 **Set up builds and deployments** 提供以下信息：
+
+| Configuration     | Value                |
+| ----------------- | -------------------- |
+| Production branch | `main`               |
+| Build command     | `hugo --gc --minify` |
+| Build directory   | `public`             |
+
+如需了解更多内容，见：
+- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
+- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
+
+
+## Netlify
+
+1. 将代码推送到 Git 存储库 (如 GitHub, GitLab)
+2. [导入项目](https://app.netlify.com/start)
+3. 如果您不使用[hextra-starter-template][hextra-starter-template], 手动配置以下内容：
+   - C 将构建命令配置为 `hugo --gc --minify`
+   - 指定发布目录为 `public`
+   - 添加环境变量 `HUGO_VERSION` 并设定为 `0.119.0`
+4. 部署
+
+转至 [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) 获得更多信息
+
+
+## Vercel
+
+1. 将代码推送到 Git 存储库（GitHub、GitLab 等）
+2. 转至 [Vercel Dashboard](https://vercel.com/dashboard) 并导入你的 Hugo 项目
+3. 配置项目，选择 Hugo 作为 Framework Preset
+4. 覆盖构建命令和安装命令：
+   1. 设置构建命令为 `hugo --gc --minify`
+   2. 将安装命令设置为 `yum install golang`
+
+![Vercel Deployment Configuration](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)
--- a/exampleSite/content/docs/guide/markdown.fa.md
+++ b/exampleSite/content/docs/guide/markdown.fa.md
@ -28,14 +28,28 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd

 [^1]: نقل‌قول بالا گزیده‌ای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.

+```markdown {filename=Markdown}
+> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
+> — <cite>راب پایک[^1]</cite>
+
+[^1]: نقل‌قول بالا گزیده‌ای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
+```
+
 ### جدول‌ها

 جدول‌ها بخشی از مشخصات اصلی مارک‌داون نیستند، اما Hugo از آنها در خارج از جعبه پشتیبانی می‌کند.

-   نام | سن
--------|------
-    گودرز | ۳۰
-  آصف | ۳۴
+|     نام | سن  |
+|--------|------|
+|    گودرز |  ۳۰|
+|  آصف |    ۳۴  |
+
+```markdown {filename=Markdown}
+|     نام | سن  |
+|--------|------|
+|    گودرز |  ۳۰|
+|  آصف |    ۳۴  |
+```

 #### مارک‌داون درون‌خطی درون جدول‌ها

@ -43,6 +57,12 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
 | --------  | -------- | ------ |
 | *کج* | **توپر** | `کد` |

+```markdown {filename=Markdown}
+| کج   | توپر     | کد   |
+| --------  | -------- | ------ |
+| *کج* | **توپر** | `کد` |
+```
+
 ### بلوک‌های کد

 {{< cards >}}
@ -57,12 +77,24 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
 2. دومین آیتم
 3. سومین آیتم

+```markdown {filename=Markdown}
+1. اولین آیتم
+2. دومین آیتم
+3. سومین آیتم
+```
+
 #### فهرست مرتب‌نشده

 * فهرست آیتم
 * یک آیتم دیگه
 * و یک آیتم دیگه

+```markdown {filename=Markdown}
+* فهرست آیتم
+* یک آیتم دیگه
+* و یک آیتم دیگه
+```
+
 #### فهرست تو در تو

 * میوه
@ -73,13 +105,31 @@ Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markd
  * شیر
  * پنیر

+```markdown {filename=Markdown}
+* میوه
+  * سیب
+  * پرتقال
+  * موز
+* لبنیات
+  * شیر
+  * پنیر
+```
+
 ### عکس‌ها

-![](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```

 با توضیحات:

-![](https://source.unsplash.com/featured/800x600?landscape "یک چشم‌انداز Unsplash")
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash")
+```

 ## پیکربندی

--- a/exampleSite/content/docs/guide/markdown.md
+++ b/exampleSite/content/docs/guide/markdown.md
@ -14,7 +14,7 @@ Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for form
 | Style   | Syntax     | Example   | Output   |
 | --------  | -------- | ------ | ------ |
 | Bold | `**bold text**` | `**bold text**` | **bold text** |
-| Italic | `*italicized text*` | `*italicized text* | *italicized text* |
+| Italic | `*italicized text*` | `*italicized text*` | *italicized text* |
 | Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
 | Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
 | Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
@ -28,14 +28,28 @@ Blockquote with attribution

 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

+```markdown {filename=Markdown}
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+```
+
 ### Tables

 Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.

-   Name | Age
--------|------
-    Bob | 27
-  Alice | 23
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+
+```markdown {filename=Markdown}
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+```

 #### Inline Markdown within tables

@ -43,6 +57,12 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |

+```markdown {filename=Markdown}
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+```
+
 ### Code Blocks

 {{< cards >}}
@ -57,12 +77,24 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 2. Second item
 3. Third item

+```markdown {filename=Markdown}
+1. First item
+2. Second item
+3. Third item
+```
+
 #### Unordered List

 * List item
 * Another item
 * And another item

+```markdown {filename=Markdown}
+* List item
+* Another item
+* And another item
+```
+
 #### Nested list

 * Fruit
@ -73,13 +105,31 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
  * Milk
  * Cheese

+```markdown {filename=Markdown}
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+```
+
 ### Images

-![](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```

 With caption:

-![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+```

 ## Configuration

--- a/exampleSite/content/docs/guide/markdown.zh-cn.md
+++ b/exampleSite/content/docs/guide/markdown.zh-cn.md
@ -28,14 +28,28 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容

 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

+```markdown {filename=Markdown}
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+```
+
 ### 表格

 表格并非核心 Markdown 规范，但 Hugo 支持开箱即用的表格：

-   Name | Age
--------|------
-    Bob | 27
-  Alice | 23
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+
+```markdown {filename=Markdown}
+|   Name | Age  |
+|--------|------|
+|    Bob | 27   |
+|  Alice | 23   |
+```

 #### Markdown 表格中的内联

@ -43,6 +57,12 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |

+```markdown {filename=Markdown}
+| Italics   | Bold     | Code   |
+| --------  | -------- | ------ |
+| *italics* | **bold** | `code` |
+```
+
 ### 代码块

 {{< cards >}}
@ -57,12 +77,24 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容
 2. Second item
 3. Third item

+```markdown {filename=Markdown}
+1. First item
+2. Second item
+3. Third item
+```
+
 #### 无序列表

 * List item
 * Another item
 * And another item

+```markdown {filename=Markdown}
+* List item
+* Another item
+* And another item
+```
+
 #### 嵌套列表

 * Fruit
@ -73,13 +105,31 @@ Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容
  * Milk
  * Cheese

+```markdown {filename=Markdown}
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+```
+
 ### 图片

-![](https://source.unsplash.com/featured/800x600?landscape)
+![landscape](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600)
+```

 带有标题：

-![](https://source.unsplash.com/featured/800x600?landscape "Unsplash Landscape")
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+
+```markdown {filename=Markdown}
+![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
+```

 ## 配置

--- a/exampleSite/content/docs/guide/organize-files.md
+++ b/exampleSite/content/docs/guide/organize-files.md
@ -82,6 +82,45 @@ weight: 2
  It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
 {{< /callout >}}

+## Breadcrumb Navigation
+
+Breadcrumbs are auto-generated based on the directory structure of `/content`.
+
+For example, consider the file structure [demonstrated above](#directory-structure). Given that structure, the breadcrumbs atop the page at `/docs/guide/organize-files/` would appear automatically as follows:
+
+```
+Documentation > Guide > Organize Files
+```
+
+### Customizing Breadcrumb Link Titles
+
+By default, each breadcrumb link is generated based on that page's `title` parameter. You can customize this by specifying a `linkTitle`.
+
+For example, if instead of `Organize Files` we wanted the breadcrumb to be `Foo Bar`:
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+linkTitle: Foo Bar
+title: Organize Files
+---
+```
+
+This would now generate the following breadcrumbs:
+```
+Documentation > Guide > Foo Bar
+```
+
+### Hiding Breadcrumbs
+
+You can hide breadcrumbs completely from a page by specfying `breadcrumbs: false` in its front matter:
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+breadcrumbs: false
+title: Organize Files
+---
+```
+
 ## Configure Content Directory

 By default, the root `content/` directory is used by Hugo to build the site.
--- a/exampleSite/content/docs/guide/organize-files.zh-cn.md
+++ b/exampleSite/content/docs/guide/organize-files.zh-cn.md
@ -6,7 +6,7 @@ prev: /docs/guide

 ## 目录结构

-默认情况下，Hugo 在 `context` 目录中搜索 Markdown 文件，目录的结构决定了网站的最终输出结构。
+默认情况下，Hugo 在 `content` 目录中搜索 Markdown 文件，目录的结构决定了网站的最终输出结构。
 以示例网站为例：

 <!--more-->
--- a/exampleSite/content/docs/guide/shortcodes/_index.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.md
@ -9,7 +9,6 @@ next: /docs/guide/shortcodes/callout

 Hextra provides a collection of beautiful shortcodes to enhance your content.

-
 {{< cards >}}
  {{< card link="callout" title="Callout" icon="warning" >}}
  {{< card link="cards" title="Cards" icon="card" >}}
@ -19,3 +18,11 @@ Hextra provides a collection of beautiful shortcodes to enhance your content.
  {{< card link="steps" title="Steps" icon="one" >}}
  {{< card link="tabs" title="Tabs" icon="collection" >}}
 {{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Additional shortcodes provided by Hugo and Hextra:
+
+{{< cards >}}
+  {{< card link="others" title="Others" icon="view-grid" >}}
+{{< /cards >}}
--- a/exampleSite/content/docs/guide/shortcodes/callout.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/callout.zh-cn.md
@ -0,0 +1,78 @@
+---
+title: 标注
+aliases:
+- callouts
+prev: /docs/guide/shortcodes
+---
+
+向读者显示重要信息的内置组件。
+
+<!--more-->
+
+## Example
+
+{{< callout emoji="👾">}}
+  **标注**是一段旨在吸引注意力的短文本
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **标注**是一段旨在吸引注意力的短文本。
+{{< /callout >}}
+
+## Usage
+
+### Default
+
+{{< callout emoji="🌐">}}
+  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
+{{</* /callout */>}}
+```
+
+### Info
+
+{{< callout type="info" >}}
+  请访问 GitHub 查看最新版本
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  请访问 GitHub 查看最新版本
+{{</* /callout */>}}
+```
+
+### Warning
+
+{{< callout type="warning" >}}
+  该 API 将在下一版本中弃用
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  **标注**是一段旨在吸引注意力的简短文字
+{{</* /callout */>}}
+```
+
+### Error
+
+{{< callout type="error" >}}
+  出问题了，要爆炸了
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  出问题了，要爆炸了
+{{</* /callout */>}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/cards.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.md
@ -7,11 +7,12 @@ linkTitle: Cards

 {{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
  {{< card link="/" title="No Icon" >}}
 {{< /cards >}}

 {{< cards >}}
-  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}}
  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
 {{< /cards >}}
@ -21,6 +22,7 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
  {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="warning" tag= "A custom tag" */>}}
  {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
@ -35,13 +37,15 @@ linkTitle: Cards

 ## Card Parameters

-| Parameter  | Description                           |
-|----------- |---------------------------------------|
-| `link`     | URL (internal or external).           |
-| `title`    | Title heading for the card.           |
-| `subtitle` | Subtitle heading (supports Markdown). |
-| `icon`     | Name of the icon.                     |
-
+| Parameter  | Description                                                     |
+|----------- |-----------------------------------------------------------------|
+| `link`     | URL (internal or external).                                     |
+| `title`    | Title heading for the card.                                     |
+| `subtitle` | Subtitle heading (supports Markdown).                           |
+| `icon`     | Name of the icon.                                               |
+| `tag`      | Text in tag.                                                    |
+| `tagColor` | Color of the tag: `gray` (default), `yellow`, `red` and `blue`. |
+  
 ## Image Card

 Additionally, the card supports adding image and processing through these parameters:
@ -62,3 +66,24 @@ Hextra auto-detects if image processing is needed during build and applies the `
 It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.

 For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
+
+## Tags
+
+Card supports adding tags which could be useful to show extra status information.
+
+{{< cards >}}
+  {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
+  {{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
+  {{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
+  {{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
+  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
+{{< /cards >}}
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
+  {{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
+  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
+  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
+{{</* /cards */>}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/cards.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.zh-cn.md
@ -0,0 +1,65 @@
+---
+title: 卡片
+linkTitle: Cards
+---
+
+## 示例
+
+{{< cards >}}
+  {{< card link="../callout" title="Callout" icon="warning" >}}
+  {{< card link="/" title="No Icon" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
+  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## 使用
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="Callout" icon="warning" */>}}
+  {{</* card link="/" title="No Icon" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
+  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## 卡片参数
+
+| Parameter  | Description                           |
+|----------- |---------------------------------------|
+| `link`     | URL（内部或外部）          |
+| `title`    | 卡片的标题           |
+| `subtitle` | 字幕标题（支持 Markdown） |
+| `icon`     | 图标的名称                    |
+
+## Image Card
+
+此外，该卡还支持通过以下参数添加图像和处理：
+
+| Parameter  | Description                                 |
+|----------- |---------------------------------------------|
+| `image`    | 指定卡片的图像 URL.       |
+| `method`   | 设置 Hugo 的图像处理方法。       |
+| `options`  | 配置 Hugo 的图像处理选项。|
+
+卡片支持三种图像：
+
+1. 远程图片：完整网址应放置在 image 参数中
+2. 静态图片：使用 Hugo 的 static/ 目录中的相对路径
+3. 处理过的图片：使用 Hugo 的 assets/ 目录中的相对路径
+
+Hextra 在构建过程中会自动检测图片是否需要处理，并根据需要应用 options 参数或默认设置（缩放，800x，质量 80，WebP 格式）。
+
+它目前支持以下处理方法：Resize（缩放）、Fit（适应）、Fill（填充）和 Crop（裁剪）。
+
+有关 Hugo 内置图像处理命令、方法和选项的更多信息，请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
--- a/exampleSite/content/docs/guide/shortcodes/details.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/details.zh-cn.md
@ -0,0 +1,43 @@
+---
+title: 详情
+---
+
+用于显示可折叠内容的内置组件。
+
+<!--more-->
+
+## 示例
+
+{{% details title="Details" %}}
+
+这是细节的内容
+
+Markdown is **supported**.
+
+{{% /details %}}
+
+{{% details title="Click me to reveal" closed="true" %}}
+
+默认情况下这将被隐藏
+
+{{% /details %}}
+
+## Usage
+
+````markdown
+{{%/* details title="Details" */%}}
+
+这是细节的内容
+
+**支持** Markdown
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="Click me to reveal" closed="true" */%}}
+
+默认情况下这将被隐藏
+
+{{%/* /details */%}}
+````
--- a/exampleSite/content/docs/guide/shortcodes/filetree.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/filetree.zh-cn.md
@ -0,0 +1,33 @@
+---
+title: 文件树
+---
+
+## 示例
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fr.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## 用法
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fr.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/icon.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/icon.zh-cn.md
@ -0,0 +1,46 @@
+---
+title: 图标
+---
+
+要内联使用此短代码，需要在配置中启用内联短代码：
+
+```yaml {filename="hugo.yaml"}
+enableInlineShortcodes: true
+```
+
+可用图标列表可以在以下位置找到 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
+
+<!--more-->
+
+## 示例
+
+{{< icon "academic-cap" >}}
+{{< icon "cake" >}}
+{{< icon "gift" >}}
+{{< icon "sparkles" >}}
+
+## 用法
+
+```
+{{</* icon "github" */>}}
+```
+
+[Heroicons](https://v1.heroicons.com/) v1 轮廓图标开箱即用
+
+### 如何添加自己的图标
+
+创建 `data/icons.yaml` 文件，然后按以下格式添加您自己的 SVG 图标：
+
+```yaml {filename="data/icons.yaml"}
+your-icon: <svg>your icon svg content</svg>
+```
+
+然后可以在短代码中使用它，如下所示：
+
+```
+{{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
+```
+
+提示：[Iconify Design](https://iconify.design/) 是为您的网站查找 SVG 图标的好地方
--- a/exampleSite/content/docs/guide/shortcodes/others.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.md
@ -0,0 +1,43 @@
+---
+title: Other Shortcodes
+linkTitle: Others
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  Some of these are Hugo built-in shortcodes.
+  These shortcodes are considered less stable and may be changed anytime.
+{{< /callout >}}
+
+## YouTube
+
+Embed a YouTube video.
+
+```
+{{</* youtube VIDEO_ID */>}}
+```
+
+Result:
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+For more information, see [Hugo's YouTube Shortcode](https://gohugo.io/content-management/shortcodes/#youtube).
+
+## PDF
+
+With PDF shortcode, you can embed a PDF file in your content.
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+You can also place the PDF file in your project directory and use the relative path.
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+Example:
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
--- a/exampleSite/content/docs/guide/shortcodes/steps.md
+++ b/exampleSite/content/docs/guide/shortcodes/steps.md
@ -25,6 +25,11 @@ This is the third step.

 ## Usage

+{{< callout emoji="ℹ️" >}}
+  Please note that this shortcode is intended **only for Markdown content**.
+  If you put HTML content or other shortcodes as step content, it may not render as expected.
+{{< /callout >}}
+
 Put Markdown h3 header within `steps` shortcode.

 ```
--- a/exampleSite/content/docs/guide/shortcodes/steps.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/steps.zh-cn.md
@ -0,0 +1,42 @@
+---
+title: 步骤
+---
+
+A built-in component to display a series of steps.
+
+## 示例
+
+{{% steps %}}
+
+### 第一步
+
+这是第一步。
+
+### 第二步
+
+这是第二步。
+
+### 第三步
+
+这是第三步。
+
+{{% /steps %}}
+
+
+## 使用
+
+将 Markdown h3 标题放入 `steps` 短代码中。
+
+```
+{{%/* steps */%}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+{{%/* /steps */%}}
+```
--- a/exampleSite/content/docs/guide/shortcodes/tabs.zh-cn.md
+++ b/exampleSite/content/docs/guide/shortcodes/tabs.zh-cn.md
@ -0,0 +1,93 @@
+---
+title: 标签页
+next: /docs/guide/deploy-site
+---
+
+## 示例
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+## 使用
+
+### 默认情况下
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### 指定索引
+
+使用 `defaultIndex` 属性指定选定的选项卡。索引从 0 开始。
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+默认为 `YAML`
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### 使用 Markdown
+
+还支持包括代码块的 Markdown 语法：
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{</* /tab */>}}
+
+  ... add other tabs similarly
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  hello: world
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  hello = "world"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}
--- a/exampleSite/content/docs/guide/syntax-highlighting.md
+++ b/exampleSite/content/docs/guide/syntax-highlighting.md
@ -78,11 +78,18 @@ def main():
    say_hello()
 ```

-
 ### Copy Button

-By default, copy button is enabled for code blocks.
+By default, copy button is enabled for code blocks. Its behavior can changed by modifying the site configuration file:

+```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
+params:
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+```

 ## Supported Languages

--- a/exampleSite/content/showcase/index.md
+++ b/exampleSite/content/showcase/index.md
@ -1,6 +1,6 @@
 ---
 title: Showcase
-description: "Open source projects powered by Hextra."
+description: "Open source projects powered by Hextra"
 toc: false
 layout: wide
 ---
@ -8,13 +8,77 @@ layout: wide
 <div class="hx-mt-4"></div>

 <p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
-Open source projects powered by Hextra.
+Open source projects powered by Hextra
 </p>

 {{< cards >}}
-  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://porter.sh/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+
+  {{< card
+        link="https://github.com/axivo/website"
+        title="AXIVO Docs"
+        image="https://github.com/imfing/hextra/assets/19806136/f22f0710-23a0-430b-8bad-616283b8a3e5"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/infracourse/web"
+        title="Stanford CS 40"
+        image="https://github.com/imfing/hextra/assets/5097752/8c29470b-3994-41c8-be9a-5b41476e6f3c"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/helixml/docs"
+        title="Helix Docs"
+        image="https://github.com/imfing/hextra/assets/5097752/78045af0-4922-4358-ae73-624770909db6"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://developers.clever-cloud.com/"
+        title="Clever Cloud Documentation"
+        image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://owaspai.org/"
+        title="OWASP AI Security and Privacy Guide"
+        image="https://github.com/imfing/hextra/assets/5097752/fbb1d3a5-a0e8-4cfc-88cf-3523b0176c89"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://developers.osuny.org"
+        title="Osuny"
+        image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card link="https://porter.sh/"
+        title="Porter"
+        image="https://github.com/imfing/hextra/assets/5097752/401abc3a-b4c3-4336-b95a-a6dd9afbc1de"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://hoa.moe/"
+        title="HITSZ OpenAuto"
+        image="https://raw.githubusercontent.com/HITSZ-OpenAuto/hoa.moe/main/static/images/showcase-new.png"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;" 
+  >}}
+
+  {{< card
+        link="https://lutheranconfessions.org/"
+        title="LutheranConfessions"
+        image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/imfing/hextra-starter-template/"
+        title="Hextra Starter Template"
+        image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
 {{< /cards >}}
--- a/exampleSite/content/showcase/index.zh-cn.md
+++ b/exampleSite/content/showcase/index.zh-cn.md
@ -12,8 +12,73 @@ layout: wide
 </p>

 {{< cards >}}
-  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://porter.sh/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+
+  {{< card
+        link="https://github.com/axivo/website"
+        title="AXIVO Docs"
+        image="https://github.com/imfing/hextra/assets/19806136/f22f0710-23a0-430b-8bad-616283b8a3e5"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/infracourse/web"
+        title="Stanford CS 40"
+        image="https://github.com/imfing/hextra/assets/5097752/8c29470b-3994-41c8-be9a-5b41476e6f3c"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/helixml/docs"
+        title="Helix Docs"
+        image="https://github.com/imfing/hextra/assets/5097752/78045af0-4922-4358-ae73-624770909db6"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://developers.clever-cloud.com/"
+        title="Clever Cloud Documentation"
+        image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://owaspai.org/"
+        title="OWASP AI Security and Privacy Guide"
+        image="https://github.com/imfing/hextra/assets/5097752/fbb1d3a5-a0e8-4cfc-88cf-3523b0176c89"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://developers.osuny.org"
+        title="Osuny"
+        image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card link="https://porter.sh/"
+        title="Porter"
+        image="https://github.com/imfing/hextra/assets/5097752/401abc3a-b4c3-4336-b95a-a6dd9afbc1de"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://hoa.moe/"
+        title="HITSZ OpenAuto"
+        image="https://raw.githubusercontent.com/HITSZ-OpenAuto/hoa.moe/main/static/images/showcase-new.png"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;" 
+  >}}
+
+  {{< card
+        link="https://lutheranconfessions.org/"
+        title="LutheranConfessions"
+        image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
+  {{< card
+        link="https://github.com/imfing/hextra-starter-template/"
+        title="Hextra Starter Template"
+        image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
 {{< /cards >}}
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -136,7 +136,7 @@ params:
    flexsearch:
      # index page by: content | summary | heading | title
      index: content
-      # full | forward | reverse | strict 
+      # full | forward | reverse | strict
      # https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search
      tokenize: forward

@ -147,6 +147,15 @@ params:
  blog:
    list:
      displayTags: true
+      # date | lastmod | publishDate | title | weight
+      sortBy: date
+      sortOrder: desc # or "asc"
+
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover

  comments:
    enable: false
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -27,6 +27,7 @@
      "head",
      "hr",
      "html",
+      "iframe",
      "img",
      "input",
      "kbd",
@ -208,20 +209,24 @@
      "group-open:before:hx-rotate-90",
      "hamburger-menu",
      "hextra-card",
+      "hextra-card-icon",
+      "hextra-card-image",
+      "hextra-card-subtitle",
+      "hextra-card-tag",
      "hextra-cards",
      "hextra-code-block",
      "hextra-code-copy-btn",
      "hextra-code-copy-btn-container",
      "hextra-feature-card",
+      "hextra-feature-grid",
      "hextra-filetree",
      "hextra-filetree-folder",
      "hextra-footer",
-      "hextra-jupyter-code-cell",
-      "hextra-jupyter-code-cell-outputs",
-      "hextra-jupyter-code-cell-outputs-container",
-      "hextra-jupyter-code-cell-source",
+      "hextra-pdf",
      "hextra-scrollbar",
      "hextra-sidebar-collapsible-button",
+      "hextra-tabs-panel",
+      "hextra-tabs-toggle",
      "hextra-toc",
      "highlight",
      "hover:dark:hx-bg-primary-500/10",
@ -304,7 +309,6 @@
      "hx-gap-x-1.5",
      "hx-gap-y-2",
      "hx-grid",
-      "hx-grid-cols-1",
      "hx-group",
      "hx-group/code",
      "hx-group/copybtn",
@ -393,7 +397,9 @@
      "hx-overflow-x-auto",
      "hx-overflow-x-hidden",
      "hx-overflow-y-auto",
+      "hx-overflow-y-hidden",
      "hx-overscroll-contain",
+      "hx-overscroll-x-contain",
      "hx-p-0.5",
      "hx-p-1",
      "hx-p-1.5",
@ -415,6 +421,7 @@
      "hx-pt-8",
      "hx-px-1.5",
      "hx-px-2",
+      "hx-px-2.5",
      "hx-px-3",
      "hx-px-4",
      "hx-px-6",
@ -477,6 +484,7 @@
      "hx-text-white",
      "hx-text-xl",
      "hx-text-xs",
+      "hx-text-xxs",
      "hx-text-yellow-900",
      "hx-to-gray-600",
      "hx-top-0",
@ -510,7 +518,6 @@
      "language-options",
      "language-switcher",
      "last-of-type:hx-mb-0",
-      "lg:hx-grid-cols-3",
      "lntable",
      "lntd",
      "ltr:before:hx-left-0",
@ -540,6 +547,7 @@
      "max-md:[transform:translate3d(0,-100%,0)]",
      "max-md:hx-hidden",
      "max-md:hx-min-h-[340px]",
+      "max-sm:hx-grid-cols-1",
      "max-xl:hx-hidden",
      "md:hx-aspect-[1.1/1]",
      "md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
@ -597,15 +605,13 @@
      "sidebar-container",
      "sm:hx-block",
      "sm:hx-flex",
-      "sm:hx-grid-cols-2",
      "sm:hx-items-start",
      "sm:hx-text-xl",
      "sm:hx-w-[110%]",
+      "sm:max-lg:hx-grid-cols-2",
      "steps",
      "subheading-anchor",
      "success-icon",
-      "tabs-panel",
-      "tabs-toggle",
      "theme-toggle",
      "xl:hx-block"
    ],
--- a/exampleSite/layouts/partials/custom/head-end.html
+++ b/exampleSite/layouts/partials/custom/head-end.html
@ -0,0 +1,6 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.3.0/quicklink.umd.js"></script>
+<script>
+  window.addEventListener("load", () => {
+    quicklink.listen();
+  });
+</script>