Merge pull request #40 from devlive-community/feature-dev

支持多个扩展

Author: qianmoQ

docs/content/getting-started/create-site/index.en.md

@@ -11,6 +11,12 @@ icon: folder-plus
 pageforge init
 ```
 
+!!! warning "注意"
+
+    如果使用的是 init 命令，即使后面指定了文件夹目录，也不会创建文件夹，只会在当前目录下初始化。
+
+!!!
+
 或者
 
 ```bash

docs/content/getting-started/create-site/index.md

@@ -11,6 +11,12 @@ icon: folder-plus
 pageforge init
 ```
 
+!!! warning "注意"
+
+    如果使用的是 init 命令，即使后面指定了文件夹目录，也不会创建文件夹，只会在当前目录下初始化。
+
+!!!
+
 或者
 
 ```bash

docs/content/usage/grid.md

@@ -0,0 +1,177 @@
+---
+title: Grid
+icon: grid
+---
+
+PageForge 支持网格布局语法。
+
+!!! danger "注意"
+
+    该功能需要在配置文件中启用，可以在 `pageforge.yaml` 中配置 `feature.grid.enable: true`
+
+!!!
+
+## 基本语法
+
+---
+
+- 源代码
+
+```markdown
+::: grid
+- 第一个网格项
+- 第二个网格项
+- 第三个网格项
+- 第四个网格项
+:::
+```
+
+- 显示效果
+
+::: grid
+- 第一个网格项
+- 第二个网格项
+- 第三个网格项
+- 第四个网格项
+:::
+
+## 设置列数
+
+---
+
+- 源代码
+
+```markdown
+::: grid cols-3
+- 第一列内容
+- 第二列内容
+- 第三列内容
+- 第四列内容（自动换行）
+- 第五列内容
+- 第六列内容
+:::
+```
+
+- 显示效果
+
+::: grid cols-3
+- 第一列内容
+- 第二列内容
+- 第三列内容
+- 第四列内容（自动换行）
+- 第五列内容
+- 第六列内容
+:::
+
+## 设置间距
+
+---
+
+- 源代码
+
+```markdown
+::: grid cols-2 gap-8
+- 这是第一个网格项
+  可以包含多行内容
+- 这是第二个网格项
+  间距设置为 8 (2rem)
+- 这是第三个网格项
+- 这是第四个网格项
+:::
+```
+
+- 显示效果
+
+::: grid cols-2 gap-8
+- 这是第一个网格项
+  可以包含多行内容
+- 这是第二个网格项
+  间距设置为 8 (2rem)
+- 这是第三个网格项
+- 这是第四个网格项
+:::
+
+## 禁用响应式
+
+---
+
+默认情况下，网格布局是响应式的：
+- 移动设备：1列
+- 平板设备：最多2列
+- 桌面设备：完整列数
+
+使用 `no-responsive` 可以禁用响应式布局：
+
+```markdown
+::: grid cols-4 no-responsive
+- 第一列
+- 第二列
+- 第三列
+- 第四列
+:::
+```
+
+## 完整选项
+
+---
+
+网格布局支持以下选项：
+
+1. `cols-{number}`: 设置列数（默认：2）
+    - 例如：`cols-3`、`cols-4`、`cols-6`
+
+2. `gap-{number}`: 设置网格间距（默认：4）
+    - 例如：`gap-4`、`gap-6`、`gap-8`
+
+3. `no-responsive`: 禁用响应式布局
+    - 默认启用响应式
+
+可以组合使用这些选项：
+
+```markdown
+::: grid cols-3 gap-6 no-responsive
+- 内容1
+- 内容2
+- 内容3
+:::
+```
+
+## 实际应用示例
+
+---
+
+创建特色卡片布局：
+
+```markdown
+::: grid cols-3 gap-6
+- ### 🚀 快速上手
+  零配置，开箱即用，
+  支持 Markdown 所有基础语法。
+
+- ### 📦 功能丰富
+  内置大量扩展组件，
+  支持自定义扩展。
+
+- ### 🎨 主题系统
+  提供多套主题，
+  支持自定义主题。
+:::
+```
+
+::: grid cols-3 gap-6
+- ### 🚀 快速上手
+  零配置，开箱即用，
+  支持 Markdown 所有基础语法。
+
+- ### 📦 功能丰富
+  内置大量扩展组件，
+  支持自定义扩展。
+
+- ### 🎨 主题系统
+提供多套主题，
+支持自定义主题。
+
+```java
+console.log(1)
+```
+:::

docs/content/usage/tab.md

@@ -3,50 +3,55 @@ title: 选项卡
 icon: pill
 ---
 
-PageForge 支持使用 markdown 实现了选项卡相关信息。
+PageForge 支持使用 Markdown 实现了选项卡相关信息。
+
+!!! danger "注意"
+
+    该功能需要在配置文件中启用，可以在 `pageforge.yaml` 中配置 `feature.tabs.enable: true`
+
+!!!
 
 ### 基本语法
 
 ---
 
 ```markdown
 ::: tabs
-
     === "Tab 1"
-        这是第一个 Tab 的内容
-        支持多行内容
-    
-    === "Tab 2"
+        这是第一个标签页的内容
+        可以包含多行内容
 
-        这是第二个 Tab 的内容
-        也支持 **Markdown** 语法
-    
+        也可以包含 Markdown 格式
+        - 列表项 1
+        - 列表项 2
+        
+    === "Tab 2"
+        这是第二个标签页的内容
+        
     === "Tab 3"
-
-        第三个 Tab 的内容
-
-        - 支持列表
-        - 支持其他 Markdown 内容
-
+        第三个标签页的内容
 :::
 ```
 
 ::: tabs
-
     === "Tab 1"
-        这是第一个 Tab 的内容
-        支持多行内容
-        这是 `dd` 哈哈
+        这是第一个标签页的内容
+        可以包含多行内容
 
+        也可以包含 Markdown 格式
+        - 列表项 1
+        - 列表项 2
+        
     === "Tab 2"
-        这是第二个 Tab 的内容
-
-        也支持 **Markdown** 语法
-    
+        这是第二个标签页的内容
+        
+        ### 可以使用标题
+        
+        ```javascript
+        // 甚至可以包含代码块
+        const x = 1;
+        ```
+        
     === "Tab 3"
-        第三个 Tab 的内容
-
-        - 支持列表
-        - 支持其他 **Markdown** 内容
-
+        第三个标签页的内容
 :::

docs/pageforge.yaml

@@ -91,6 +91,10 @@ feature:
       </script>
   search:
     enable: true
+  tabs:
+    enable: true
+  grid:
+    enable: true
 
 i18n:
   default: zh-CN
@@ -189,6 +193,7 @@ nav:
       - /usage/diff
       - /usage/button
       - /usage/icon
+      - /usage/grid
   - Template:
       - /template/home
       - /template/team

lib/extension/marked/pageforge-code-block.js

@@ -40,6 +40,7 @@ require('prismjs/components/prism-powershell');
 // Config & markup
 require('prismjs/components/prism-docker');
 require('prismjs/components/prism-nginx');
+require('prismjs/components/prism-properties')
 
 const PageForgeCodeBlockExtension = {
     name: 'pageforgeCodeBlock',