支持元数据设置标签 (close #56)

Author: qianmoQ

docs/content/setup/banner.md

@@ -22,4 +22,19 @@ banner:
 banner:
     content: |
         <h1>PageForge 2025.1.2</h1>
-```
+```
+
+## 多个 Banner
+
+---
+
+```yaml
+banner:
+    content:
+        - PageForge 2025.1.2
+        - PageForge 2025.1.1
+```
+
+!!! note
+    多个 Banner 的情况下，系统会自动加载依赖的外部 CSS 和 JS 文件。同时也可以在 `pageforge.yaml` 中配置自定义的 CSS 和 JS 文件的 CDN。
+!!!

docs/content/setup/page.md

@@ -174,4 +174,18 @@ status:
 
     自定义状态情况下如果 `feature.lucide.enable` 为 `true` 时，`icon` 将使用 Lucide 图标。否则需要传递自定义图标，比如完整的 svg。
 
-!!!
+!!!
+
+### 设置 `tags`
+
+---
+
+PageForge 支持设置当前页面的标签，格式如下：
+
+```markdown
+---
+tags:
+  - tag-1
+  - tag-2
+---
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pageforge",
-  "version": "2025.1.6",
+  "version": "2025.1.7",
   "description": "PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。",
   "homepage": "https://pageforge.devlive.org",
   "repository": {

templates/includes/page-title.ejs

@@ -23,4 +23,30 @@
             <%- pageData.description %>
         </p>
     <% } %>
+
+    <!-- 标签展示区域 -->
+    <% if (pageData.tags && pageData.tags.length > 0) { %>
+        <div class="flex flex-wrap gap-2 mt-4">
+            <%
+                const colorClasses = [
+                    "bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100",
+                    "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100",
+                    "bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100",
+                    "bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100",
+                    "bg-purple-100 text-purple-800 dark:bg-purple-700 dark:text-purple-100",
+                    "bg-pink-100 text-pink-800 dark:bg-pink-700 dark:text-pink-100",
+                    "bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100",
+                    "bg-teal-100 text-teal-800 dark:bg-teal-700 dark:text-teal-100"
+                ];
+
+            pageData.tags.forEach(function(tag, index) {
+                // 使用模运算选择颜色，确保颜色循环使用
+                const colorClass = colorClasses[index % colorClasses.length];
+            %>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium <%= colorClass %>">
+                <%= tag %>
+            </span>
+            <% }); %>
+        </div>
+    <% } %>
 <% } %>