本篇示例专用于验证与测试博客主题在正文栏中的 Callouts / Admonitions / 告示框 渲染能力。
基于 GitHub Alerts 规范与安知鱼设计美学，本主题原生支持 13 种不同语义的彩色提示卡片，所有卡片均在客户端自动适配明亮与暗黑模式的高对比度色彩。
基础标准告示框（Standard Callouts）
在引用块第一行使用 [!TYPE] 语法即可声明对应卡片。
1. Note（常规注意）
[!NOTE] 这是标准的 Note 提示框，用于交代背景上下文与常规提示。
> [!NOTE]
> 这是标准的 **Note** 提示框，用于交代背景上下文与常规提示。2. Tip（实用技巧）
[!TIP] 快捷搜索技巧：按下 Ctrl + K 即可快速唤起全局文章搜索调色板！
> [!TIP]
> **快捷搜索技巧**：按下 <kbd>Ctrl</kbd> + <kbd>K</kbd> 即可快速唤起全局文章搜索调色板！3. Important（重点关注）
[!IMPORTANT] 在构建生产版本前，必须确认环境变量
BLOG_BUILD_TARGET=static已正确生效。
> [!IMPORTANT]
> 在构建生产版本前，必须确认环境变量 `BLOG_BUILD_TARGET=static` 已正确生效。4. Warning（风险警告）
[!WARNING] 请勿在公开代码仓库中提交数据库私钥或云服务 AccessKey。
> [!WARNING]
> 请勿在公开代码仓库中提交数据库私钥或云服务 AccessKey。5. Caution & Danger（危险警示）
[!CAUTION] 执行数据库重构操作前请务必完成数据全量备份。
[!DANGER] 直接删除生产数据库将导致全部评论与用户资产永久损毁。
> [!CAUTION]
> 执行数据库重构操作前请务必完成数据全量备份。
> [!DANGER]
> 直接删除生产数据库将导致全部评论与用户资产永久损毁。6. Success（操作成功）
[!SUCCESS] 静态构建已顺利完成，所有静态路由生成完毕！
> [!SUCCESS]
> 静态构建已顺利完成，所有静态路由生成完毕！7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] 如何在零服务端依赖的前提下实现毫秒级全文检索？
[!QUOTE] “优雅的代码不仅能被机器执行，更能像诗歌一样向人类传达思想。”
[!INFO] 本博客基于 Astro 6 与 Tailwind 4 构建，全站纯静态导出。
[!TODO] 计划在下一个版本引入 WebAssembly 客户端分词检索。
[!BUG] 已修复旧版本在极端窄屏设备下表格横向截断的排版问题。
[!EXAMPLE] 示例数据已就绪，可直接复制源码进行二次开发。
> [!QUESTION]
> 如何在零服务端依赖的前提下实现毫秒级全文检索？
> [!QUOTE]
> “优雅的代码不仅能被机器执行，更能像诗歌一样向人类传达思想。”
> [!INFO]
> 本博客基于 Astro 6 与 Tailwind 4 构建，全站纯静态导出。
> [!TODO]
> 计划在下一个版本引入 WebAssembly 客户端分词检索。
> [!BUG]
> 已修复旧版本在极端窄屏设备下表格横向截断的排版问题。
> [!EXAMPLE]
> 示例数据已就绪，可直接复制源码进行二次开发。可折叠告示框（Collapsible Details Admonitions）
在标记类型后紧跟 -（默认收起）或 +（默认展开）即可生成原生折叠卡片：
1. 默认收起的折叠告示框（[!TIP]-）
[!TIP]- 点击展开查看：生产环境 Nginx 长效缓存配置
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- 点击展开查看：生产环境 Nginx 长效缓存配置
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. 默认展开的折叠告示框（[!NOTE]+）
[!NOTE]+ 默认展开的架构设计说明 该区域默认处于展开状态，点击标题栏可以将其平滑收起以节省屏幕空间。
> [!NOTE]+ 默认展开的架构设计说明
> 该区域默认处于展开状态，点击标题栏可以将其平滑收起以节省屏幕空间。Dieses Beispiel dient ausschließlich der Verifikation und dem Test der Callout-/Admonition-/Hinweisboxen-Rendering-Fähigkeiten des Blog-Themas im Inhaltsbereich.
Basierend auf der GitHub-Alerts-Spezifikation und der Designästhetik von Anzhiyu unterstützt dieses Theme nativ 13 verschiedene semantische farbige Hinweisboxen. Alle Boxen passen ihre hochkontrastigen Farben automatisch auf der Client-Seite an den hellen und dunklen Modus an.
Standard-Hinweisboxen (Standard Callouts)
Verwenden Sie die [!TYPE]-Syntax in der ersten Zeile eines Zitatblocks, um die entsprechende Box zu deklarieren.
1. Note (Allgemeine Hinweise)
[!NOTE] Dies ist eine Standard-Note-Hinweisbox, die zur Erläuterung von Hintergrundkontext und allgemeinen Hinweisen dient.
> [!NOTE]
> Dies ist eine Standard-**Note**-Hinweisbox, die zur Erläuterung von Hintergrundkontext und allgemeinen Hinweisen dient.2. Tip (Praktische Tipps)
[!TIP] Schnellsuch-Tipp: Drücken Sie Strg + K, um die globale Artikel-Suchpalette schnell aufzurufen!
> [!TIP]
> **Schnellsuch-Tipp**: Drücken Sie <kbd>Strg</kbd> + <kbd>K</kbd>, um die globale Artikel-Suchpalette schnell aufzurufen!3. Important (Wichtige Hinweise)
[!IMPORTANT] Stellen Sie vor dem Build der Produktionsversion sicher, dass die Umgebungsvariable
BLOG_BUILD_TARGET=statickorrekt aktiviert ist.
> [!IMPORTANT]
> Stellen Sie vor dem Build der Produktionsversion sicher, dass die Umgebungsvariable `BLOG_BUILD_TARGET=static` korrekt aktiviert ist.4. Warning (Risikowarnungen)
[!WARNING] Commiten Sie niemals Datenbank-Private Keys oder Cloud-Service-AccessKeys in öffentliche Code-Repositories.
> [!WARNING]
> Commiten Sie niemals Datenbank-Private Keys oder Cloud-Service-AccessKeys in öffentliche Code-Repositories.5. Caution & Danger (Gefahrenwarnungen)
[!CAUTION] Führen Sie vor der Durchführung von Datenbank-Migrationen unbedingt eine vollständige Datensicherung durch.
[!DANGER] Das direkte Löschen der Produktionsdatenbank führt zum unwiederbringlichen Verlust aller Kommentare und Benutzerdaten.
> [!CAUTION]
> Führen Sie vor der Durchführung von Datenbank-Migrationen unbedingt eine vollständige Datensicherung durch.
> [!DANGER]
> Das direkte Löschen der Produktionsdatenbank führt zum unwiederbringlichen Verlust aller Kommentare und Benutzerdaten.6. Success (Erfolgsbestätigung)
[!SUCCESS] Der statische Build wurde erfolgreich abgeschlossen, alle statischen Routen wurden generiert!
> [!SUCCESS]
> Der statische Build wurde erfolgreich abgeschlossen, alle statischen Routen wurden generiert!7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] Wie lässt sich eine Volltextsuche in Millisekunden ohne Server-Abhängigkeiten implementieren?
[!QUOTE] „Eleganter Code kann nicht nur von Maschinen ausgeführt werden, sondern vermittelt Menschen wie ein Gedicht Gedanken.“
[!INFO] Dieser Blog basiert auf Astro 6 und Tailwind 4 und wird vollständig statisch exportiert.
[!TODO] Geplant ist die Einführung einer WebAssembly-basierten Client-Side-Tokenisierung für die Suche in der nächsten Version.
[!BUG] Das Layout-Problem mit dem horizontalen Abschneiden von Tabellen auf extrem schmalen Bildschirmen wurde in der alten Version behoben.
[!EXAMPLE] Die Beispieldaten sind bereit, der Quellcode kann direkt kopiert und weiterentwickelt werden.
> [!QUESTION]
> Wie lässt sich eine Volltextsuche in Millisekunden ohne Server-Abhängigkeiten implementieren?
> [!QUOTE]
> „Eleganter Code kann nicht nur von Maschinen ausgeführt werden, sondern vermittelt Menschen wie ein Gedicht Gedanken.“
> [!INFO]
> Dieser Blog basiert auf Astro 6 und Tailwind 4 und wird vollständig statisch exportiert.
> [!TODO]
> Geplant ist die Einführung einer WebAssembly-basierten Client-Side-Tokenisierung für die Suche in der nächsten Version.
> [!BUG]
> Das Layout-Problem mit dem horizontalen Abschneiden von Tabellen auf extrem schmalen Bildschirmen wurde in der alten Version behoben.
> [!EXAMPLE]
> Die Beispieldaten sind bereit, der Quellcode kann direkt kopiert und weiterentwickelt werden.Aufklappbare Hinweisboxen (Collapsible Details Admonitions)
Fügen Sie nach dem Markierungstyp ein - (standardmäßig eingeklappt) oder + (standardmäßig aufgeklappt) hinzu, um native aufklappbare Karten zu generieren:
1. Standardmäßig eingeklappte Hinweisbox ([!TIP]-)
[!TIP]- Klicken Sie zum Aufklappen: Nginx-Long-Term-Cache-Konfiguration für die Produktionsumgebung
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- Klicken Sie zum Aufklappen: Nginx-Long-Term-Cache-Konfiguration für die Produktionsumgebung
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. Standardmäßig aufgeklappte Hinweisbox ([!NOTE]+)
[!NOTE]+ Standardmäßig aufgeklappte Architekturbeschreibung Dieser Bereich ist standardmäßig im aufgeklappten Zustand. Klicken Sie auf die Titelleiste, um ihn sanft einzuklappen und Bildschirmplatz zu sparen.
> [!NOTE]+ Standardmäßig aufgeklappte Architekturbeschreibung
> Dieser Bereich ist standardmäßig im aufgeklappten Zustand. Klicken Sie auf die Titelleiste, um ihn sanft einzuklappen und Bildschirmplatz zu sparen.This example is dedicated to verifying and testing the blog theme’s rendering capabilities for Callouts / Admonitions in the main content area.
Based on the GitHub Alerts specification and AnzhiFish design aesthetics, this theme natively supports 13 different semantic colored cards, all of which automatically adapt to high‑contrast colors in both light and dark modes on the client side.
Standard Callouts
Declare the corresponding card by using the [!TYPE] syntax on the first line of a blockquote.
1. Note (General Note)
[!NOTE] This is the standard Note callout, used to provide background context and general tips.
> [!NOTE]
> This is the standard **Note** callout, used to provide background context and general tips.2. Tip (Practical Tip)
[!TIP] Quick Search Tip: Press Ctrl + K to instantly summon the global article search palette!
> [!TIP]
> **Quick Search Tip**: Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to instantly summon the global article search palette!3. Important (Key Focus)
[!IMPORTANT] Before building a production version, ensure the environment variable
BLOG_BUILD_TARGET=staticis correctly applied.
> [!IMPORTANT]
> Before building a production version, ensure the environment variable `BLOG_BUILD_TARGET=static` is correctly applied.4. Warning (Risk Warning)
[!WARNING] Do not commit database private keys or cloud service AccessKeys to a public code repository.
> [!WARNING]
> Do not commit database private keys or cloud service AccessKeys to a public code repository.5. Caution & Danger (Hazard Alerts)
[!CAUTION] Be sure to complete a full data backup before performing any database restructuring operations.
[!DANGER] Deleting the production database directly will permanently destroy all comments and user assets.
> [!CAUTION]
> Be sure to complete a full data backup before performing any database restructuring operations.
> [!DANGER]
> Deleting the production database directly will permanently destroy all comments and user assets.6. Success (Operation Successful)
[!SUCCESS] Static build completed successfully; all static routes have been generated!
> [!SUCCESS]
> Static build completed successfully; all static routes have been generated!7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] How can millisecond‑level full‑text search be achieved without any server‑side dependencies?
[!QUOTE] “Elegant code not only runs on machines but also conveys ideas to humans like poetry.”
[!INFO] This blog is built with Astro 6 and Tailwind 4, and the entire site is exported as pure static files.
[!TODO] Plan to introduce WebAssembly client‑side tokenized search in the next version.
[!BUG] Fixed a layout issue in older versions where tables were horizontally truncated on extremely narrow screens.
[!EXAMPLE] Sample data is ready; you can copy the source code directly for further development.
> [!QUESTION]
> How can millisecond‑level full‑text search be achieved without any server‑side dependencies?
> [!QUOTE]
> “Elegant code not only runs on machines but also conveys ideas to humans like poetry.”
> [!INFO]
> This blog is built with Astro 6 and Tailwind 4, and the entire site is exported as pure static files.
> [!TODO]
> Plan to introduce WebAssembly client‑side tokenized search in the next version.
> [!BUG]
> Fixed a layout issue in older versions where tables were horizontally truncated on extremely narrow screens.
> [!EXAMPLE]
> Sample data is ready; you can copy the source code directly for further development.Collapsible Details Admonitions
Add - (collapsed by default) or + (expanded by default) immediately after the type marker to generate a native collapsible card:
1. Collapsible Callout Collapsed by Default ([!TIP]-)
[!TIP]- Click to expand: Production‑environment Nginx long‑term cache configuration
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- Click to expand: Production‑environment Nginx long‑term cache configuration
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. Collapsible Callout Expanded by Default ([!NOTE]+)
[!NOTE]+ Architecture design description (expanded by default) This section is expanded by default; clicking the title bar will smoothly collapse it to save screen space.
> [!NOTE]+ Architecture design description (expanded by default)
> This section is expanded by default; clicking the title bar will smoothly collapse it to save screen space.Este ejemplo está diseñado específicamente para verificar y probar la capacidad de renderizado de Callouts / Admonitions / Cuadros de aviso en la columna de contenido del tema del blog.
Basado en la especificación de GitHub Alerts y la estética de diseño de Anzhifu, este tema admite nativamente 13 tipos de tarjetas de aviso de colores con diferentes semánticas. Todas las tarjetas adaptan automáticamente sus colores de alto contraste para los modos claro y oscuro en el cliente.
Cuadros de aviso estándar (Standard Callouts)
Para declarar la tarjeta correspondiente, utiliza la sintaxis [!TYPE] en la primera línea de un bloque de cita.
1. Note (Nota general)
[!NOTE] Este es el cuadro de aviso estándar Note, utilizado para proporcionar contexto de fondo y notas generales.
> [!NOTE]
> Este es el cuadro de aviso estándar **Note**, utilizado para proporcionar contexto de fondo y notas generales.2. Tip (Consejo práctico)
[!TIP] Truco de búsqueda rápida: presiona Ctrl + K para invocar rápidamente la paleta de búsqueda global de artículos.
> [!TIP]
> **Truco de búsqueda rápida**: presiona <kbd>Ctrl</kbd> + <kbd>K</kbd> para invocar rápidamente la paleta de búsqueda global de artículos.3. Important (Importante)
[!IMPORTANT] Antes de construir la versión de producción, asegúrate de que la variable de entorno
BLOG_BUILD_TARGET=staticesté correctamente establecida.
> [!IMPORTANT]
> Antes de construir la versión de producción, asegúrate de que la variable de entorno `BLOG_BUILD_TARGET=static` esté correctamente establecida.4. Warning (Advertencia de riesgo)
[!WARNING] No subas claves privadas de bases de datos ni AccessKeys de servicios en la nube en repositorios de código públicos.
> [!WARNING]
> No subas claves privadas de bases de datos ni AccessKeys de servicios en la nube en repositorios de código públicos.5. Caution & Danger (Precaución y Peligro)
[!CAUTION] Asegúrate de realizar una copia de seguridad completa de los datos antes de ejecutar operaciones de reestructuración de la base de datos.
[!DANGER] Eliminar directamente la base de datos de producción causará la destrucción permanente de todos los comentarios y activos de los usuarios.
> [!CAUTION]
> Asegúrate de realizar una copia de seguridad completa de los datos antes de ejecutar operaciones de reestructuración de la base de datos.
> [!DANGER]
> Eliminar directamente la base de datos de producción causará la destrucción permanente de todos los comentarios y activos de los usuarios.6. Success (Operación exitosa)
[!SUCCESS] La construcción estática se ha completado con éxito; todas las rutas estáticas han sido generadas.
> [!SUCCESS]
> La construcción estática se ha completado con éxito; todas las rutas estáticas han sido generadas.7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] ¿Cómo implementar una búsqueda de texto completo en milisegundos sin dependencias de servidor?
[!QUOTE] “El código elegante no solo puede ser ejecutado por máquinas, sino que también puede transmitir ideas a los humanos como un poema.”
[!INFO] Este blog se construye con Astro 6 y Tailwind 4, con una exportación completamente estática de todo el sitio.
[!TODO] Se planea introducir la búsqueda de tokenización en el cliente mediante WebAssembly en la próxima versión.
[!BUG] Se corrigió el problema de maquetación de truncamiento horizontal de tablas en dispositivos con pantallas extremadamente estrechas en versiones anteriores.
[!EXAMPLE] Los datos de ejemplo están listos; puedes copiar el código fuente directamente para el desarrollo secundario.
> [!QUESTION]
> ¿Cómo implementar una búsqueda de texto completo en milisegundos sin dependencias de servidor?
> [!QUOTE]
> "El código elegante no solo puede ser ejecutado por máquinas, sino que también puede transmitir ideas a los humanos como un poema."
> [!INFO]
> Este blog se construye con Astro 6 y Tailwind 4, con una exportación completamente estática de todo el sitio.
> [!TODO]
> Se planea introducir la búsqueda de tokenización en el cliente mediante WebAssembly en la próxima versión.
> [!BUG]
> Se corrigió el problema de maquetación de truncamiento horizontal de tablas en dispositivos con pantallas extremadamente estrechas en versiones anteriores.
> [!EXAMPLE]
> Los datos de ejemplo están listos; puedes copiar el código fuente directamente para el desarrollo secundario.Cuadros de aviso plegables (Collapsible Details Admonitions)
Para generar tarjetas plegables nativas, agrega - (colapsado por defecto) o + (expandido por defecto) inmediatamente después del tipo de etiqueta:
1. Cuadro de aviso plegable colapsado por defecto ([!TIP]-)
[!TIP]- Haz clic para expandir y ver: Configuración de caché a largo plazo de Nginx para producción
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- Haz clic para expandir y ver: Configuración de caché a largo plazo de Nginx para producción
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. Cuadro de aviso plegable expandido por defecto ([!NOTE]+)
[!NOTE]+ Descripción del diseño de arquitectura expandida por defecto Esta área está en estado expandido por defecto; haz clic en la barra de título para colapsarla suavemente y ahorrar espacio en pantalla.
> [!NOTE]+ Descripción del diseño de arquitectura expandida por defecto
> Esta área está en estado expandido por defecto; haz clic en la barra de título para colapsarla suavemente y ahorrar espacio en pantalla.Cet exemple est spécifiquement conçu pour vérifier et tester la capacité de rendu des Callouts / Admonitions / Encadrés d’alerte dans la colonne de contenu du thème de blog.
Basé sur la spécification GitHub Alerts et l’esthétique de conception d’Anzhiyu, ce thème prend nativement en charge 13 types de cartes d’information colorées aux sémantiques distinctes. Toutes les cartes s’adaptent automatiquement côté client aux couleurs à fort contraste des modes clair et sombre.
Encadrés d’alerte standards (Standard Callouts)
Utilisez la syntaxe [!TYPE] sur la première ligne d’un bloc de citation pour déclarer la carte correspondante.
1. Note (Remarque standard)
[!NOTE] C’est un encadré Note standard, utilisé pour fournir le contexte et les remarques courantes.
> [!NOTE]
> C'est un encadré **Note** standard, utilisé pour fournir le contexte et les remarques courantes.2. Tip (Astuce pratique)
[!TIP] Astuce de recherche rapide : appuyez sur Ctrl + K pour invoquer instantanément la palette de recherche globale des articles !
> [!TIP]
> **Astuce de recherche rapide** : appuyez sur <kbd>Ctrl</kbd> + <kbd>K</kbd> pour invoquer instantanément la palette de recherche globale des articles !3. Important (Point crucial)
[!IMPORTANT] Avant de générer la version de production, assurez-vous que la variable d’environnement
BLOG_BUILD_TARGET=staticest correctement appliquée.
> [!IMPORTANT]
> Avant de générer la version de production, assurez-vous que la variable d'environnement `BLOG_BUILD_TARGET=static` est correctement appliquée.4. Warning (Avertissement de risque)
[!WARNING] Ne commitez jamais de clés privées de base de données ou de clés d’accès (AccessKey) de services cloud dans un dépôt de code public.
> [!WARNING]
> Ne commitez jamais de clés privées de base de données ou de clés d'accès (AccessKey) de services cloud dans un dépôt de code public.5. Caution & Danger (Alertes de danger)
[!CAUTION] Effectuez impérativement une sauvegarde complète des données avant d’exécuter toute opération de refactoring de la base de données.
[!DANGER] La suppression directe de la base de données de production entraînera la destruction permanente de tous les commentaires et des actifs des utilisateurs.
> [!CAUTION]
> Effectuez impérativement une sauvegarde complète des données avant d'exécuter toute opération de refactoring de la base de données.
> [!DANGER]
> La suppression directe de la base de données de production entraînera la destruction permanente de tous les commentaires et des actifs des utilisateurs.6. Success (Opération réussie)
[!SUCCESS] La génération statique s’est terminée avec succès, toutes les routes statiques ont été générées !
> [!SUCCESS]
> La génération statique s'est terminée avec succès, toutes les routes statiques ont été générées !7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] Comment implémenter une recherche plein texte en millisecondes sans aucune dépendance côté serveur ?
[!QUOTE] « Un code élégant ne se contente pas d’être exécuté par des machines, il transmet des idées aux humains comme un poème. »
[!INFO] Ce blog est construit avec Astro 6 et Tailwind 4, avec une exportation entièrement statique du site.
[!TODO] Il est prévu d’introduire la recherche par tokenisation côté client via WebAssembly dans la prochaine version.
[!BUG] Le problème de mise en page entraînant la troncature horizontale des tableaux sur les écrans extrêmement étroits a été corrigé dans les anciennes versions.
[!EXAMPLE] Les données d’exemple sont prêtes, vous pouvez copier le code source directement pour le réutiliser.
> [!QUESTION]
> Comment implémenter une recherche plein texte en millisecondes sans aucune dépendance côté serveur ?
> [!QUOTE]
> « Un code élégant ne se contente pas d'être exécuté par des machines, il transmet des idées aux humains comme un poème. »
> [!INFO]
> Ce blog est construit avec Astro 6 et Tailwind 4, avec une exportation entièrement statique du site.
> [!TODO]
> Il est prévu d'introduire la recherche par tokenisation côté client via WebAssembly dans la prochaine version.
> [!BUG]
> Le problème de mise en page entraînant la troncature horizontale des tableaux sur les écrans extrêmement étroits a été corrigé dans les anciennes versions.
> [!EXAMPLE]
> Les données d'exemple sont prêtes, vous pouvez copier le code source directement pour le réutiliser.Encadrés d’alerte repliables (Collapsible Details Admonitions)
Ajoutez un - (replié par défaut) ou un + (déplié par défaut) immédiatement après le type de marqueur pour générer une carte repliable native :
1. Encadré replié par défaut ([!TIP]-)
[!TIP]- Cliquez pour déplier : Configuration de cache long terme Nginx pour l’environnement de production
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- Cliquez pour déplier : Configuration de cache long terme Nginx pour l'environnement de production
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. Encadré déplié par défaut ([!NOTE]+)
[!NOTE]+ Explication de la conception architecturale dépliée par défaut Cette zone est dépliée par défaut. Cliquez sur la barre de titre pour la replier en douceur et économiser de l’espace à l’écran.
> [!NOTE]+ Explication de la conception architecturale dépliée par défaut
> Cette zone est dépliée par défaut. Cliquez sur la barre de titre pour la replier en douceur et économiser de l'espace à l'écran.本篇範例專用於驗證與測試部落格主題在正文欄中的 Callouts / Admonitions / 告示框 渲染能力。
基於 GitHub Alerts 規範與安知魚設計美學，本主題原生支援 13 種不同語意的彩色提示卡片，所有卡片均在客戶端自動適配明亮與暗黑模式的高對比度色彩。
基礎標準告示框（Standard Callouts）
在引用塊第一行使用 [!TYPE] 語法即可宣告對應卡片。
1. Note（一般注意）
[!NOTE] 這是標準的 Note 提示框，用於交代背景上下文與一般提示。
> [!NOTE]
> 這是標準的 **Note** 提示框，用於交代背景上下文與一般提示。2. Tip（實用技巧）
[!TIP] 快速搜尋技巧：按下 Ctrl + K 即可快速喚起全域文章搜尋調色盤！
> [!TIP]
> **快速搜尋技巧**：按下 <kbd>Ctrl</kbd> + <kbd>K</kbd> 即可快速喚起全域文章搜尋調色盤！3. Important（重點關注）
[!IMPORTANT] 在建置生產版本前，必須確認環境變數
BLOG_BUILD_TARGET=static已正確生效。
> [!IMPORTANT]
> 在建置生產版本前，必須確認環境變數 `BLOG_BUILD_TARGET=static` 已正確生效。4. Warning（風險警告）
[!WARNING] 請勿在公開程式碼儲存庫中提交資料庫私鑰或雲端服務 AccessKey。
> [!WARNING]
> 請勿在公開程式碼儲存庫中提交資料庫私鑰或雲端服務 AccessKey。5. Caution & Danger（危險警示）
[!CAUTION] 執行資料庫重構操作前請務必完成資料全量備份。
[!DANGER] 直接刪除生產資料庫將導致所有評論與用戶資產永久損毀。
> [!CAUTION]
> 執行資料庫重構操作前請務必完成資料全量備份。
> [!DANGER]
> 直接刪除生產資料庫將導致所有評論與用戶資產永久損毀。6. Success（操作成功）
[!SUCCESS] 靜態建置已順利完成，所有靜態路由生成完畢！
> [!SUCCESS]
> 靜態建置已順利完成，所有靜態路由生成完畢！7. Question, Quote, Info, Todo, Bug, Example
[!QUESTION] 如何在零伺服器端依賴的前提下實現毫秒級全文檢索？
[!QUOTE] 「優雅的程式碼不僅能被機器執行，更能像詩歌一樣向人類傳達思想。」
[!INFO] 本部落格基於 Astro 6 與 Tailwind 4 建置，全站純靜態匯出。
[!TODO] 計劃在下一個版本引入 WebAssembly 客戶端分詞檢索。
[!BUG] 已修復舊版本在極端窄螢幕裝置下表格橫向截斷的排版問題。
[!EXAMPLE] 範例資料已就緒，可直接複製原始碼進行二次開發。
> [!QUESTION]
> 如何在零伺服器端依賴的前提下實現毫秒級全文檢索？
> [!QUOTE]
> 「優雅的程式碼不僅能被機器執行，更能像詩歌一樣向人類傳達思想。」
> [!INFO]
> 本部落格基於 Astro 6 與 Tailwind 4 建置，全站純靜態匯出。
> [!TODO]
> 計劃在下一個版本引入 WebAssembly 客戶端分詞檢索。
> [!BUG]
> 已修復舊版本在極端窄螢幕裝置下表格橫向截斷的排版問題。
> [!EXAMPLE]
> 範例資料已就緒，可直接複製原始碼進行二次開發。可摺疊告示框（Collapsible Details Admonitions）
在標記類型後緊跟 -（預設收合）或 +（預設展開）即可生成原生摺疊卡片：
1. 預設收合的摺疊告示框（[!TIP]-）
[!TIP]- 點擊展開查看：生產環境 Nginx 長效快取設定
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; }
> [!TIP]- 點擊展開查看：生產環境 Nginx 長效快取設定
> ```nginx
> location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
> expires 1y;
> add_header Cache-Control "public, immutable";
> access_log off;
> }
> ```2. 預設展開的摺疊告示框（[!NOTE]+）
[!NOTE]+ 預設展開的架構設計說明 該區域預設處於展開狀態，點擊標題欄可以將其平滑收合以節省螢幕空間。
> [!NOTE]+ 預設展開的架構設計說明
> 該區域預設處於展開狀態，點擊標題欄可以將其平滑收合以節省螢幕空間。
评论