feat:美化引用样式

2025-12-12 14:30:44 +08:00
parent c68d66f01a
commit 8b2c289833
6 changed files with 222 additions and 14 deletions
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -211,6 +211,13 @@ export default defineConfig({
  lastUpdated: true,

  markdown: {
-    lineNumbers: true
+    lineNumbers: true,
+    container: {
+      tipLabel: '提示',
+      warningLabel: '注意',
+      dangerLabel: '警告',
+      infoLabel: '信息',
+      detailsLabel: '详细信息'
+    }
  },
 })
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -7,6 +7,7 @@ import mediumZoom from 'medium-zoom'
 import '../theme/style.css'
 import './style/var.css'
 import './style/vp-code.css'
+import './style/custom-block.css'

 export default {
  extends: DefaultTheme,
--- a/docs/.vitepress/theme/style/custom-block.css
+++ b/docs/.vitepress/theme/style/custom-block.css
@@ -0,0 +1,193 @@
+/* .vitepress/theme/style/custom-block.css */
+/* 深浅色卡 */
+:root {
+    --custom-block-info-left: #cccccc;
+    --custom-block-info-bg: #fafafa;
+
+    --custom-block-tip-left: #009400;
+    --custom-block-tip-bg: #e6f6e6;
+
+    --custom-block-warning-left: #e6a700;
+    --custom-block-warning-bg: #fff8e6;
+
+    --custom-block-danger-left: #e13238;
+    --custom-block-danger-bg: #ffebec;
+
+    --custom-block-note-left: #4cb3d4;
+    --custom-block-note-bg: #eef9fd;
+
+    --custom-block-important-left: #a371f7;
+    --custom-block-important-bg: #f4eefe;
+
+    --custom-block-caution-left: #e0575b;
+    --custom-block-caution-bg: #fde4e8;
+}
+
+.dark {
+    --custom-block-info-left: #cccccc;
+    --custom-block-info-bg: #474748;
+
+    --custom-block-tip-left: #009400;
+    --custom-block-tip-bg: #003100;
+
+    --custom-block-warning-left: #e6a700;
+    --custom-block-warning-bg: #4d3800;
+
+    --custom-block-danger-left: #e13238;
+    --custom-block-danger-bg: #4b1113;
+
+    --custom-block-note-left: #4cb3d4;
+    --custom-block-note-bg: #193c47;
+
+    --custom-block-important-left: #a371f7;
+    --custom-block-important-bg: #230555;
+
+    --custom-block-caution-left: #e0575b;
+    --custom-block-caution-bg: #391c22;
+}
+
+
+/* 标题字体大小 */
+.custom-block-title {
+    font-size: 16px;
+}
+
+/* info容器:背景色、左侧 */
+.custom-block.info {
+    border-left: 5px solid var(--custom-block-info-left);
+    background-color: var(--custom-block-info-bg);
+}
+
+/* info容器:svg图 */
+.custom-block.info [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%23ccc'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -1px;
+}
+
+/* 提示容器:边框色、背景色、左侧 */
+.custom-block.tip {
+    /* border-color: var(--custom-block-tip); */ 
+    border-left: 5px solid var(--custom-block-tip-left);
+    background-color: var(--custom-block-tip-bg);
+}
+
+/* 提示容器:svg图 */
+.custom-block.tip [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -2px;
+}
+
+/* 警告容器:背景色、左侧 */
+.custom-block.warning {
+    border-left: 5px solid var(--custom-block-warning-left);
+    background-color: var(--custom-block-warning-bg);
+}
+
+/* 警告容器:svg图 */
+.custom-block.warning [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+}
+
+/* 危险容器:背景色、左侧 */
+.custom-block.danger {
+    border-left: 5px solid var(--custom-block-danger-left);
+    background-color: var(--custom-block-danger-bg);
+}
+
+/* 危险容器:svg图 */
+.custom-block.danger [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -1px;
+}
+
+/* 提醒容器:背景色、左侧 */
+.custom-block.note {
+    border-left: 5px solid var(--custom-block-note-left);
+    background-color: var(--custom-block-note-bg);
+}
+
+/* 提醒容器:svg图 */
+.custom-block.note [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -1px;
+}
+
+/* 重要容器:背景色、左侧 */
+.custom-block.important {
+    border-left: 5px solid var(--custom-block-important-left);
+    background-color: var(--custom-block-important-bg);
+}
+
+/* 重要容器:svg图 */
+.custom-block.important [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z' fill='%23a371f7'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -1px;
+}
+
+/* 注意容器:背景色、左侧 */
+.custom-block.caution {
+    border-left: 5px solid var(--custom-block-caution-left);
+    background-color: var(--custom-block-caution-bg);
+}
+
+/* 注意容器:svg图 */
+.custom-block.caution [class*="custom-block-title"]::before {
+    content: '';
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin-right: 4px;
+    left: -5px;
+    top: -1px;
+}
--- a/docs/Flutter/Practice.md
+++ b/docs/Flutter/Practice.md
@@ -66,5 +66,7 @@ android {
 ```

 &emsp;&emsp;打包为release包时即可生效签名。     
-> [!CAUTION]
-> 禁止将签名文件上传到Git仓库中。 
+
+::: danger
+禁止将签名文件上传到Git仓库中。 
+:::
--- a/docs/Web-Backend/FastAPI/FastAPI-Guide.md
+++ b/docs/Web-Backend/FastAPI/FastAPI-Guide.md
@@ -57,8 +57,9 @@ def get_db() -> Generator[Session, None, None]:
        db.close()
 ```

->[!WARNING]
->需要把pool_pre_ping=True打开，否则会出现超过pool_recycle时间后，数据库断线。  
+::: warning
+需要把pool_pre_ping=True打开，否则会出现超过pool_recycle时间后，数据库断线。 
+:::

 ### 2.1.2 数据库基类
 ```python
@@ -548,8 +549,9 @@ def add_blog(db: Session, blog: BlogCreate) -> bool:
 ```

 &emsp;&emsp;这里的`db_blog.content`可以直接赋值`BlogContent`对象实现级联新增，不用传`content_id`。  
->[!WARNING]
->这里的category和blog是多对一的关系，且需要一定的逻辑处理，不能直接赋值`BlogCategory`对象，否则每新增一条博客都会新增一个`category`。   
+::: warning
+这里的category和blog是多对一的关系，且需要一定的逻辑处理，不能直接赋值`BlogCategory`对象，否则每新增一条博客都会新增一个`category`。 
+:::

 ## 3.3 更新操作
 ```python
@@ -649,8 +651,9 @@ def add_blog_comment(
 &emsp;&emsp;`db: Session = Depends(get_db)`表示获取数据库连接，`_=Depends(verify_token)`表示验证用户身份。   
 &emsp;&emsp;`request: Request`可以获取到HTTP请求的完整上下文信息。  

->[!TIP]
->这里的`query: BlogQuery = Depends()`会从查询参数中自动实例化`BlogQuery`对象，并进行数据验证和类型转换。   
+::: tip
+这里的`query: BlogQuery = Depends()`会从查询参数中自动实例化`BlogQuery`对象，并进行数据验证和类型转换。   
+:::  

 &emsp;&emsp;注册路由：
 ```python
--- a/docs/Web-Front/Vue/Vue3-Common.md
+++ b/docs/Web-Front/Vue/Vue3-Common.md
@@ -18,11 +18,13 @@
 | `qs` | ^6.13.0 | URL 查询字符串解析和序列化库 |
 | `v-calendar` | ^3.1.2 | Vue.js 的日历和日期选择器组件 |  

->[!TIP]
->如果使用pnpm安装，会传递peerDependencies部分。
+::: tip
+如果使用pnpm安装，会传递peerDependencies部分。
+:::

->[!WARNING]
->建议将Vite、Typescript、@types等构建工具依赖放在devDependencies中。
+::: warning
+建议将Vite、Typescript、@types等构建工具依赖放在devDependencies中。
+:::

 # 二、vite.config.ts配置
 ## 2.1 生成Typescript类型文件