优化文档

Author: EndlessPixel

docs/index.html

@@ -604,14 +604,23 @@ <h2 class="version-title">版本 1.0</h2>
             <p>CSSTextLib 1.0 提供了基础的文本样式类，包括颜色、字体大小、字重、文本装饰等基本功能。</p>
 
             <div class="import-section">
-                <h3 class="import-title">导入方式</h3>
+                <h3 class="import-title">导入方式1 (Github Raw)</h3>
                 <div class="code-block">
                     <button class="copy-btn" data-clipboard-target="#import-v1">复制</button>
                     <code
                         id="import-v1">&lt;link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/1.0/text.css"&gt;</code>
                 </div>
             </div>
 
+            <div class="import-section">
+                <h3 class="import-title">导入方式2 (JsDelivr)</h3>
+                <div class="code-block">
+                    <button class="copy-btn" data-clipboard-target="#import-v2">复制</button>
+                    <code
+                        id="import-v2">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/1.0/text.css"&gt;</code>
+                </div>
+            </div>
+
             <div class="example-section">
                 <h3 class="example-title">使用示例</h3>
 
@@ -622,9 +631,9 @@ <h3 class="example-title">使用示例</h3>
                 </div>
 
                 <div class="example-code">
-                    &lt;p class="text-color-red text-bold text-size-large"&gt;这是一个红色、粗体、大号文本&lt;/p&gt;
-                    &lt;p class="text-color-blue text-underline text-size-medium"&gt;这是一个蓝色、下划线、中号文本&lt;/p&gt;
-                    &lt;p class="text-color-green text-italic text-highlight-yellow"&gt;这是一个绿色、斜体、黄色高亮文本&lt;/p&gt;
+&lt;p class="text-color-red text-bold text-size-large"&gt;这是一个红色、粗体、大号文本&lt;/p&gt;
+&lt;p class="text-color-blue text-underline text-size-medium"&gt;这是一个蓝色、下划线、中号文本&lt;/p&gt;
+&lt;p class="text-color-green text-italic text-highlight-yellow"&gt;这是一个绿色、斜体、黄色高亮文本&lt;/p&gt;
                 </div>
             </div>
 
@@ -670,7 +679,7 @@ <h2 class="version-title">版本 2.0</h2>
             <p>CSSTextLib 2.0 使用SCSS重构，增加了响应式设计、暗色模式支持、动画效果和打印优化等高级功能。</p>
 
             <div class="import-section">
-                <h3 class="import-title">导入方式</h3>
+                <h3 class="import-title">导入方式1 (Github Raw)</h3>
                 <div class="code-block">
                     <button class="copy-btn" data-clipboard-target="#import-v2-css">复制</button>
                     <code
@@ -683,6 +692,20 @@ <h3 class="import-title">导入方式</h3>
                         id="import-v2-min">&lt;link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/2.0/csstextlib.min.css"&gt;</code>
                 </div>
             </div>
+             <div class="import-section">
+                <h3 class="import-title">导入方式2 (JsDelivr)</h3>
+                <div class="code-block">
+                    <button class="copy-btn" data-clipboard-target="#import-v2-jsdelivr">复制</button>
+                    <code
+                        id="import-v2-jsdelivr">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/2.0/csstextlib.css"&gt;</code>
+                </div>
+                <p>或使用压缩版本：</p>
+                <div class="code-block">
+                    <button class="copy-btn" data-clipboard-target="#import-v2-min-jsdelivr">复制</button>
+                    <code
+                        id="import-v2-min-jsdelivr">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/2.0/csstextlib.min.css"&gt;</code>
+                </div>
+            </div>
 
             <div class="example-section">
                 <h3 class="example-title">新增功能示例</h3>
@@ -697,19 +720,19 @@ <h3 class="example-title">新增功能示例</h3>
                 </div>
 
                 <div class="example-code">
-                    &lt;!-- 响应式文本 --&gt;
-                    &lt;p class="text-responsive text-color-purple"&gt;这是一个响应式文本&lt;/p&gt;
+&lt;!-- 响应式文本 --&gt;
+&lt;p class="text-responsive text-color-purple"&gt;这是一个响应式文本&lt;/p&gt;
 
-                    &lt;!-- 动画文本 --&gt;
-                    &lt;p class="text-animate-fade text-color-orange"&gt;这是一个淡入动画文本&lt;/p&gt;
+ &lt;!-- 动画文本 --&gt;
+&lt;p class="text-animate-fade text-color-orange"&gt;这是一个淡入动画文本&lt;/p&gt;
 
-                    &lt;!-- 带阴影文本 --&gt;
-                    &lt;p class="text-shadow text-color-deep-blue"&gt;这是一个带阴影的文本&lt;/p&gt;
+&lt;!-- 带阴影文本 --&gt;
+&lt;p class="text-shadow text-color-deep-blue"&gt;这是一个带阴影的文本&lt;/p&gt;
 
-                    &lt;!-- 响应式隐藏 --&gt;
-                    &lt;div class="text-hide-sm"&gt;
-                    这个元素在小于768px的屏幕上会隐藏
-                    &lt;/div&gt;
+&lt;!-- 响应式隐藏 --&gt;
+&lt;div class="text-hide-sm"&gt;
+    这个元素在小于768px的屏幕上会隐藏
+    lt;/div&gt;
                 </div>
             </div>
 
@@ -755,7 +778,7 @@ <h2 class="version-title">版本 3.0</h2>
             <p>CSSTextLib 3.0 是最完整的版本，增加了多档位字重、多种文本阴影、多行文本省略、光标样式、交互效果等大量新功能。</p>
 
             <div class="import-section">
-                <h3 class="import-title">导入方式</h3>
+                <h3 class="import-title">导入方式1 (Github Raw)</h3>
                 <div class="code-block">
                     <button class="copy-btn" data-clipboard-target="#import-v3-css">复制</button>
                     <code
@@ -769,6 +792,21 @@ <h3 class="import-title">导入方式</h3>
                 </div>
             </div>
 
+            <div class="import-section">
+                <h3 class="import-title">导入方式2 (JsDelivr)</h3>
+                <div class="code-block">
+                    <button class="copy-btn" data-clipboard-target="#import-v3-jsdelivr">复制</button>
+                    <code
+                        id="import-v3-jsdelivr">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/3.0/csstextlib.css"&gt;</code>
+                </div>
+                <p>或使用压缩版本：</p>
+                <div class="code-block">
+                    <button class="copy-btn" data-clipboard-target="#import-v3-min-jsdelivr">复制</button>
+                    <code
+                        id="import-v3-min-jsdelivr">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/3.0/csstextlib.min.css"&gt;</code>
+                </div>
+            </div>
+
             <div class="example-section">
                 <h3 class="example-title">新增功能示例</h3>
 
@@ -783,26 +821,26 @@ <h3 class="example-title">新增功能示例</h3>
                 </div>
 
                 <div class="example-code">
-                    &lt;!-- 多档位字重 --&gt;
-                    &lt;p class="text-weight-black text-color-deep-red"&gt;超粗体字重示例&lt;/p&gt;
-
-                    &lt;!-- 多种阴影 --&gt;
-                    &lt;p class="text-shadow-medium text-color-purple"&gt;中等阴影文本&lt;/p&gt;
-
-                    &lt;!-- 多行省略 --&gt;
-                    &lt;p class="text-overflow-ellipsis-2" style="width: 300px;"&gt;
-                    这是一个多行文本省略示例...
-                    &lt;/p&gt;
-
-                    &lt;!-- 悬停效果 --&gt;
-                    &lt;p class="text-cursor-pointer text-color-blue text-hover-bold"&gt;
-                    鼠标悬停时变粗体
-                    &lt;/p&gt;
-
-                    &lt;!-- 装饰线样式 --&gt;
-                    &lt;p class="text-decoration-underline-wavy text-color-green"&gt;
-                    波浪下划线文本
-                    &lt;/p&gt;
+&lt;!-- 多档位字重 --&gt;
+&lt;p class="text-weight-black text-color-deep-red"&gt;超粗体字重示例&lt;/p&gt;
+
+&lt;!-- 多种阴影 --&gt;
+&lt;p class="text-shadow-medium text-color-purple"&gt;中等阴影文本&lt;/p&gt;
+
+&lt;!-- 多行省略 --&gt;
+&lt;p class="text-overflow-ellipsis-2" style="width: 300px;"&gt;
+这是一个多行文本省略示例...
+&lt;/p&gt;
+
+&lt;!-- 悬停效果 --&gt;
+&lt;p class="text-cursor-pointer text-color-blue text-hover-bold"&gt;
+鼠标悬停时变粗体
+&lt;/p&gt;
+
+&lt;!-- 装饰线样式 --&gt;
+&lt;p class="text-decoration-underline-wavy text-color-green"&gt;
+波浪下划线文本
+&lt;/p&gt;
                 </div>
             </div>