支持页面分享功能 (close #17)

Author: qianmoQ

docs/content/setup/share.md

@@ -0,0 +1,51 @@
+---
+title: 分享设置
+icon: share
+---
+
+PageForge 的分享设置包含了一些用于在网站上分享文档的选项。您可以在文档的顶部设置是否启用分享，以及选择要分享的平台。
+
+PageForge 的分享功能是使用 [social-share.js](https://github.com/overtrue/share.js "social-share.js" "_blank") 进行实现的。
+
+## 启用分享
+
+---
+
+```yaml
+feature:
+    share:
+        enable: true
+```
+
+- `enable`: 是否启用分享
+
+## 分享设置
+
+---
+
+可以配置分享平台的选项，可以参考它来设置怎么分享
+
+```yaml
+feature:
+    share:
+        enable: true
+        options:
+            facebook: true
+            weibo: true
+            linkedin: true
+```
+
+支持的分享平台可参考 [social-share.js](https://github.com/overtrue/share.js "social-share.js" "_blank") 
+
+## 配置 CDN
+
+---
+
+```yaml
+feature:
+    share:
+        enable: true
+        cdn: https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/
+```
+
+- `cdn`: CDN 链接，可以根据自己的需求进行配置，这里要填写完整的 CDN 链接，例如 `https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16`，这里要填写前面部分，会自动拼接后面的 js 和 css。

docs/pageforge.yaml

@@ -44,6 +44,12 @@ feature:
     enable: true
   button:
     enable: true
+  share:
+    enable: true
+    options:
+      qq: true
+      wechat: true
+      weibo: true
 
 i18n:
   default: zh-CN
@@ -118,6 +124,7 @@ nav:
       - /setup/feature
       - /setup/i18n
       - /setup/compress
+      - /setup/share
       - InlineTemplate:
           - /setup/template/home
           - /setup/template/enterprise

templates/includes/page-share.ejs

@@ -0,0 +1,93 @@
+<% if (locals.siteData.feature?.share?.enable) { %>
+    <button type="button" id="share-btn" class="text-gray-400 hover:text-blue-700 dark:text-gray-400 dark:hover:text-gray-300">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round" class="w-4 h-4">
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+            <polyline points="16 6 12 2 8 6"/>
+            <line x1="12" y1="2" x2="12" y2="15"/>
+        </svg>
+    </button>
+
+    <div id="share-popup" class="hidden fixed inset-0 z-50" onclick="handleClickOutside(event)">
+        <div class="absolute inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>
+        <div class="relative z-10 flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+            <div class="relative transform overflow-visible rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-fit">
+                <div class="social-share text-center"
+                     data-sites="<%= Object.entries(locals.siteData.feature?.share?.options || {})
+                             .filter(([_, enabled]) => enabled)
+                             .map(([platform]) => platform)
+                             .join(',') %>"
+                     data-mobile-sites="<%= Object.entries(locals.siteData.feature?.share?.options || {})
+                             .filter(([_, enabled]) => enabled)
+                             .map(([platform]) => platform)
+                             .join(',') %>"
+                     data-wechat-qrcode-title="微信扫一扫：分享"
+                     data-wechat-qrcode-helper="微信扫一扫后点击右上角分享">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <link rel="stylesheet" href="<%= locals.siteData.feature?.share?.cdn || 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16' %>/css/share.min.css">
+    <script src="<%= locals.siteData.feature?.share?.cdn || 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16' %>/js/social-share.min.js"></script>
+
+    <style>
+        /* 修复微信二维码显示被遮挡的问题 */
+        .social-share .wechat-qrcode {
+            z-index: 9999;
+            width: fit-content;
+        }
+    </style>
+
+    <script>
+        document.getElementById('share-btn')?.addEventListener('click', function () {
+            document.getElementById('share-popup')?.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+
+        function handleClickOutside(event) {
+            const sharePopup = document.getElementById('share-popup');
+            const shareContent = sharePopup?.querySelector('.transform');
+
+            // 如果点击的是弹窗内容之外的区域
+            if (event.target === sharePopup || !shareContent?.contains(event.target)) {
+                hideSharePopup();
+            }
+        }
+
+        function hideSharePopup() {
+            document.getElementById('share-popup')?.classList.add('hidden');
+            document.body.style.overflow = '';
+        }
+
+        // 处理 ESC 键关闭
+        document.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape') {
+                hideSharePopup();
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // 初始化 social share
+            socialShare('.social-share', {
+                wechatQrcodeTitle: '微信扫一扫：分享',
+                wechatQrcodeHelper: '微信扫一扫后点击右上角分享',
+                url: window.location.href,
+                source: document.title,
+                wechat: function (elem, data) {
+                    // 自定义微信点击行为
+                    if (elem.classList.contains('icon-wechat')) {
+                        return false;  // 阻止默认跳转
+                    }
+                }
+            });
+
+            // 防止微信图标点击跳转
+            document.querySelector('.icon-wechat')?.addEventListener('click', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }, true);
+        });
+    </script>
+<% } %>

templates/includes/page-title.ejs

@@ -5,12 +5,15 @@
         </h1>
 
         <div class="flex items-center gap-4">
+            <!-- 分享按钮 -->
+            <%- include('./page-share') %>
+
             <!-- 编辑源码 -->
             <% if (locals.siteData.feature?.edit?.enable) { %>
                 <a href="<%= `${locals.siteData?.repo?.url}/edit/${locals.siteData?.repo?.branch || 'main'}/docs/content/${pageData.relativePath}` %>"
                    target="_blank"
                    rel="noopener noreferrer"
-                   class="ml-4 text-gray-400 hover:text-blue-700 dark:text-gray-400 dark:hover:text-gray-300">
+                   class="text-gray-400 hover:text-blue-700 dark:text-gray-400 dark:hover:text-gray-300">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-edit w-4 h-4">
                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>