Merge pull request #34 from devlive-community/dev

qianmoQ · web-flow · commit 424336edac13 · 2025-02-06T11:30:50.000+08:00
发布 2025.1.3
diff --git a/docs/content/release/2025.1.3.md b/docs/content/release/2025.1.3.md
@@ -0,0 +1,70 @@
+---
+title: 2025.1.3
+status:
+    type: new
+---
+
+我们很高兴地宣布 PageForge 2025.1.3 正式发布。PageForge 是一款现代化的静态页面生成与部署平台，致力于为用户提供从创建到部署的一站式解决方案。
+
+## 新增功能
+
+- 支持页面 SEO 优化 (#7)
+- 添加评论功能 (#9)
+- 支持字体大小调节 (#13)
+- 新增菜单顶部 Banner (#21)
+- 支持页面分享功能 (#17)
+- 支持站点地图生成 (#5)
+- 支持 HTML 压缩 (#19)
+- 支持 Dark 模式主题切换
+- 支持图标功能与自定义按钮
+- 新增多个主页模板
+
+## 界面优化
+
+- 支持包含子项的导航项展开/收缩
+- 优化顶部菜单布局
+- 添加代码复制 hover 效果
+- 支持 diff 代码复制
+- 添加图标加载视觉效果
+- 添加 git 贡献者头像加载状态和占位符
+- 支持自定义页面状态显示
+- 修复页面状态提示被容器遮挡问题
+
+## 架构改进
+
+- 拆分主模版部分功能为独立组件
+- 拆分查看源码和修改源码为独立组件
+- 拆分移动端语言选择器
+- 优化导航获取方式
+- 支持国际化不存在的文件使用默认语言
+
+## 问题修复
+
+- 修复缩进情况下代码片段无法解析
+- 修复站点地图无法新页面打开问题
+- 修复未启用国际化时构建站点地图错误
+- 修复标题过长导致内容自动换行问题
+- 修复嵌套路径导致跳转异常
+
+## 其他更新
+
+- 添加 Google 广告代码支持
+- 新增站点地图文档
+- 添加压缩配置文档
+
+## 链接
+
+- GitHub: https://github.com/devlive-community/pageforge
+- 官网: https://pageforge.devlive.org
+
+## 后续计划
+
+我们将持续优化用户体验，提升文档展示效果，欢迎社区贡献者参与项目开发。
+
+## 反馈与支持
+
+如果您在使用过程中遇到任何问题，请通过 GitHub Issues 向我们反馈。您的建议对我们至关重要！
+
+---
+
+此版本带来了多项重要功能更新，包括 Dark 模式、SEO 优化、评论功能等重要特性，同时优化了用户界面和架构设计，建议所有用户升级到此版本。
diff --git a/docs/content/setup/comment.md b/docs/content/setup/comment.md
@@ -1,6 +1,8 @@
 ---
 title: 评论设置
 icon: message-circle
+status:
+    type: new
 ---
 
 PageForge 支持将您选择的第三方评论系统添加到任何页面的页脚。例如，我们将集成 [Giscus](https://giscus.app "Giscus" "_blank")，它是开源的、免费的，并使用 GitHub 讨论作为后端。
diff --git a/docs/content/setup/seo.md b/docs/content/setup/seo.md
@@ -0,0 +1,46 @@
+---
+title: SEO 设置
+icon: search
+status:
+    type: new
+---
+
+PageForge 支持 SEO 设置，可以帮助你优化网站的搜索引擎优化（SEO）。
+
+## 基本用法
+
+---
+
+PageForge 支持 SEO 设置，可以帮助你优化网站的搜索引擎优化（SEO），包括标题、关键字和描述等。
+
+```yaml
+site:
+  description: PageForge 是一个简单的静态网站生成器，可以将 Markdown 文档转换为静态 HTML 页面。
+  keywords: PageForge, Markdown, Static Site Generator
+  author: devlive-community
+```
+
+- `description`: 网站描述
+- `keywords`: 网站关键字
+- `author`: 网站作者，默认为 PageForge
+
+> PageForge 支持的 SEO 设置包括标题、关键字和描述等，可以帮助你优化网站的搜索引擎优化（SEO），提高网站的排名。
+
+## 页面配置
+
+---
+
+PageForge 支持设置页面的 SEO 设置，可方便为不同的页面设置不同的 SEO 设置。只需要设置 markdown 文件的元数据即可。
+
+```yaml
+---
+description: PageForge 是一个简单的静态网站生成器，可以将 Markdown 文档转换为静态 HTML 页面。
+keywords: PageForge, Markdown, Static Site Generator
+---
+```
+
+!!! danger "注意"
+
+    页面配置文件的元数据会覆盖全局的 SEO 设置，即使你设置了全局的 SEO 设置，也会被覆盖，页面 SEO 无法设置 `author`。
+
+!!!
diff --git a/docs/content/setup/sitemap.md b/docs/content/setup/sitemap.md
@@ -1,5 +1,5 @@
 ---
-title: 站点地图
+title: 站点地图设置
 icon: map
 ---
 
diff --git a/docs/pageforge.yaml b/docs/pageforge.yaml
@@ -2,6 +2,7 @@ site:
   title: PageForge
   hiddenTitle: true
   description: PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。
+  keywords: PageForge, Markdown, Static Site Generator, GitHub Pages, GitLab Pages, Vercel, Netlify, GitHub Actions, Cloudflare Pages, Vercel Pages, Netlify Pages, 静态网站生成器, 静态网站部署器
   logo: /assets/logo.svg
   favicon: assets/logo.svg
   baseUrl: https://pageforge.devlive.org
@@ -167,6 +168,7 @@ nav:
       - /setup/banner
       - /setup/font-size
       - /setup/comment
+      - /setup/seo
       - InlineTemplate:
           - /setup/template/home
           - /setup/template/enterprise
@@ -187,6 +189,7 @@ nav:
       - /usage/button
       - /usage/icon
   - ReleaseNotes:
+      - /release/2025.1.3
       - /release/2025.1.2
       - /release/2025.1.1
       - /release/2025.1.0
diff --git a/templates/includes/feature-backTop.ejs b/templates/includes/feature-backTop.ejs
@@ -0,0 +1,22 @@
+<% if (locals.siteData.feature?.backTop?.enable) { %>
+    <button id="back-to-top"
+            class="fixed right-4 bottom-24 lg:bottom-4 z-20 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 transition-opacity duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
+            onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
+        <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
+        </svg>
+    </button>
+
+    <script>
+        // 控制返回顶部按钮的显示和隐藏
+        window.addEventListener('scroll', function () {
+            const backToTop = document.getElementById('back-to-top');
+            if (window.scrollY > 300) {
+                backToTop.style.opacity = '1';
+            }
+            else {
+                backToTop.style.opacity = '0';
+            }
+        });
+    </script>
+<% } %>
diff --git a/templates/includes/feature-lucide.ejs b/templates/includes/feature-lucide.ejs
@@ -0,0 +1,23 @@
+<% if (locals.siteData.feature?.lucide?.enable) { %>
+    <script src="<%= locals.siteData.feature.lucide.cdn || 'https://unpkg.com/lucide@latest/dist/umd/lucide.js' %>"></script>
+    <script>
+        // 在页面加载完成后执行
+        window.addEventListener('load', () => {
+            // 初始化图标
+            lucide.createIcons();
+
+            // 延迟检查图标是否加载完成
+            setTimeout(() => {
+                document.querySelectorAll('[data-lucide]').forEach(icon => {
+                    if (icon.children.length > 0) {
+                        icon.style.display = 'block';
+                        const skeleton = icon.previousElementSibling;
+                        if (skeleton) {
+                            skeleton.style.display = 'none';
+                        }
+                    }
+                });
+            }, 100);
+        });
+    </script>
+<% } %>
diff --git a/templates/includes/page-status.ejs b/templates/includes/page-status.ejs
@@ -20,19 +20,19 @@ const getDefaultText = (type) => {
 const renderDefaultIcon = (type) => {
     switch (type) {
         case 'draft':
-            return `<svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer peer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            return `<svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
       </svg>`;
         case 'new':
-            return `<svg class="w-4 h-4 text-green-500 hover:opacity-80 cursor-pointer peer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            return `<svg class="w-4 h-4 text-green-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
       </svg>`;
         case 'deprecated':
-            return `<svg class="w-4 h-4 text-red-500 hover:opacity-80 cursor-pointer peer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            return `<svg class="w-4 h-4 text-red-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
       </svg>`;
         case 'updated':
-            return `<svg class="w-4 h-4 text-blue-500 hover:opacity-80 cursor-pointer peer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            return `<svg class="w-4 h-4 text-blue-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
       </svg>`;
         default:
@@ -43,30 +43,94 @@ const renderDefaultIcon = (type) => {
 
 <% if (item.status?.type) { %>
     <div class="inline-flex items-center">
-        <div class="relative">
+        <div data-tooltip="<%= item.status.text || getDefaultText(item.status.type) %>" class="relative status-container">
             <% if (item.status.type === 'custom') { %>
                 <% if (locals.siteData.feature?.lucide?.enable && item.status.icon) { %>
                     <!-- Lucide 图标 -->
-                    <i data-lucide="<%= item.status.icon %>" class="w-4 h-4 text-gray-600 hover:opacity-80 cursor-pointer peer"></i>
+                    <i data-lucide="<%= item.status.icon %>" class="w-4 h-4 text-gray-600 hover:opacity-80 cursor-pointer status-icon"></i>
                 <% } else if (item.status.icon && item.status.icon.includes('<svg')) { %>
                     <!-- 自定义 SVG 图标 -->
-                    <span class="inline-block w-4 h-4 hover:opacity-80 cursor-pointer peer">
+                    <span class="inline-block w-4 h-4 hover:opacity-80 cursor-pointer status-icon">
                         <%- item.status.icon %>
                     </span>
                 <% } else { %>
                     <!-- 默认图标，当没有提供有效的图标时 -->
-                    <svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer peer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    <svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                          stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                     </svg>
                 <% } %>
             <% } else { %>
                 <%- renderDefaultIcon(item.status.type) %>
             <% } %>
-
-            <span class="absolute left-1/2 -translate-x-1/2 -top-8 px-2 py-1 bg-gray-900 text-white text-xs rounded scale-0 peer-hover:scale-100 transition-transform duration-100 origin-bottom pointer-events-none">
-                <%= item.status.text || getDefaultText(item.status.type) %>
-            </span>
         </div>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // 创建或获取 tooltips 容器
+            let tooltipContainer = document.getElementById('tooltip-container');
+            if (!tooltipContainer) {
+                tooltipContainer = document.createElement('div');
+                tooltipContainer.id = 'tooltip-container';
+                document.body.appendChild(tooltipContainer);
+            }
+
+            // 创建单个 tooltip 元素
+            const tooltip = document.createElement('div');
+            tooltip.className = 'fixed hidden px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-[9999] pointer-events-none transition-opacity duration-200';
+            tooltipContainer.appendChild(tooltip);
+
+            // 监听所有状态图标
+            document.querySelectorAll('.status-container').forEach(container => {
+                const icon = container.querySelector('.status-icon');
+                const text = container.dataset.tooltip;
+
+                container.addEventListener('mouseenter', () => {
+                    const rect = container.getBoundingClientRect();
+                    tooltip.textContent = text;
+                    tooltip.style.display = 'block';
+
+                    // 获取 tooltip 的尺寸
+                    const tooltipRect = tooltip.getBoundingClientRect();
+
+                    // 计算位置
+                    let top = rect.top - tooltipRect.height - 8;
+                    const left = rect.left + (rect.width - tooltipRect.width) / 2;
+
+                    // 如果顶部空间不足，显示在底部
+                    if (top < 8) {
+                        top = rect.bottom + 8;
+                    }
+
+                    tooltip.style.top = `${top}px`;
+                    tooltip.style.left = `${left}px`;
+                });
+
+                container.addEventListener('mouseleave', () => {
+                    tooltip.style.display = 'none';
+                });
+            });
+
+            // 处理页面滚动时更新位置
+            window.addEventListener('scroll', () => {
+                const visibleTooltip = document.querySelector('#tooltip-container div[style*="display: block"]');
+                if (visibleTooltip) {
+                    const container = document.querySelector('.status-container:hover');
+                    if (container) {
+                        const rect = container.getBoundingClientRect();
+                        const tooltipRect = visibleTooltip.getBoundingClientRect();
+
+                        let top = rect.top - tooltipRect.height - 8;
+                        if (top < 8) {
+                            top = rect.bottom + 8;
+                        }
+
+                        visibleTooltip.style.top = `${top}px`;
+                        visibleTooltip.style.left = `${rect.left + (rect.width - tooltipRect.width) / 2}px`;
+                    }
+                }
+            }, {passive: true});
+        });
+    </script>
 <% } %>
diff --git a/templates/includes/seo.ejs b/templates/includes/seo.ejs
@@ -0,0 +1,4 @@
+<!-- 基础 SEO meta 标签 -->
+<meta name="description" content="<%= pageData.description || siteData.site.description %>">
+<meta name="keywords" content="<%= pageData.keywords || siteData.site.keywords %>">
+<meta name="author" content="<%= siteData.site.author || 'PageForge' %>">
diff --git a/templates/layouts/base.ejs b/templates/layouts/base.ejs
