支持字体大小调节 (close #13)

Author: qianmoQ

docs/content/setup/font-size.md

@@ -0,0 +1,20 @@
+---
+title: 字体设置
+icon: type
+status:
+    type: new
+---
+
+PageForge 支持设置字体大小。默认是禁用的，需要在 `pageforge.yaml` 配置文件中启用。
+
+## 基本用法
+
+---
+
+```yaml
+feature:
+  fontSize:
+    enable: true
+```
+
+启用后会在页面标题右侧出现一个字体调整按钮，可以调整字体大小。

docs/content/setup/i18n.md

@@ -5,6 +5,10 @@ icon: globe
 
 PageForge 支持用户自定义的国际化设置，需要启用后才能使用国际化。
 
+### 启用国际化
+
+---
+
 ```yaml
 i18n:
     enable: true
@@ -37,6 +41,10 @@ i18n:
 
 系统会通过 `pageforge.yaml` 中配置的语言来自动加载对应的翻译，如果没有找到翻译，则会返回原 key
 
+### 使用国际化
+
+---
+
 在 `pageforge.yaml` 中配置国际化后，可以在 `nav` 中使用以下方式来获取翻译的结果。
 
 ```yaml

docs/pageforge.yaml

@@ -67,6 +67,8 @@ feature:
       weibo: true
   sitemap:
     enable: true
+  fontSize:
+    enable: true
 
 i18n:
   default: zh-CN
@@ -144,6 +146,7 @@ nav:
       - /setup/share
       - /setup/sitemap
       - /setup/banner
+      - /setup/font-size
       - InlineTemplate:
           - /setup/template/home
           - /setup/template/enterprise

templates/assets/js/pageforge.js

@@ -8,8 +8,12 @@ const DOMUtils = {
 // GitHub Stats 模块
 const GitHubStats = {
     formatNumber(num) {
-        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'm';
-        if (num >= 1000) return (num / 1000).toFixed(1) + 'k';
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'm';
+        }
+        if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'k';
+        }
         return num.toString();
     },
 
@@ -65,7 +69,9 @@ const GitHubStats = {
                 fetch(`https://api.github.com/repos/${owner}/${repo}/tags`, {headers})
             ]);
 
-            if (!repoResponse.ok || !tagsResponse.ok) throw new Error('GitHub API request failed');
+            if (!repoResponse.ok || !tagsResponse.ok) {
+                throw new Error('GitHub API request failed');
+            }
 
             const [repoData, tagsData] = await Promise.all([
                 repoResponse.json(),
@@ -83,18 +89,21 @@ const GitHubStats = {
 
             this.updateUI(stats);
             return stats;
-        } catch (error) {
+        }
+        catch (error) {
             console.error('🤯 获取 GitHub Stats 失败', error);
-            const fallbackStats = { stars: '-', forks: '-', tag: '-' };
+            const fallbackStats = {stars: '-', forks: '-', tag: '-'};
             this.updateUI(fallbackStats);
             return fallbackStats;
         }
     },
 
     updateUI(stats) {
-        if (!stats) return;
+        if (!stats) {
+            return;
+        }
 
-        const { findAll } = DOMUtils;
+        const {findAll} = DOMUtils;
         const containers = {
             tag: findAll('.tag-container'),
             stars: findAll('.stars-container'),
@@ -115,7 +124,9 @@ const GitHubStats = {
     },
 
     init(owner, repo) {
-        if (!owner || !repo) return;
+        if (!owner || !repo) {
+            return;
+        }
         this.showLoading();
         const updateStats = async () => await this.fetchStats(owner, repo);
         updateStats();
@@ -126,9 +137,11 @@ const GitHubStats = {
 // 代码复制模块
 const CodeCopy = {
     copy(button) {
-        const { find, toggleClass } = DOMUtils;
+        const {find, toggleClass} = DOMUtils;
         const codeBlock = find('code', button.closest('div'));
-        if (!codeBlock) return;
+        if (!codeBlock) {
+            return;
+        }
 
         navigator.clipboard.writeText(codeBlock.textContent)
             .then(() => {
@@ -153,7 +166,9 @@ const Header = {
         observer: null,
 
         initObserver() {
-            if (this.observer) return;
+            if (this.observer) {
+                return;
+            }
 
             this.observer = new MutationObserver(mutations => {
                 mutations.forEach(mutation => {
@@ -180,7 +195,8 @@ const Header = {
             if (isDark) {
                 html.classList.add('dark');
                 html.setAttribute('data-theme', 'dark');
-            } else {
+            }
+            else {
                 html.classList.remove('dark');
                 html.setAttribute('data-theme', 'light');
             }
@@ -191,7 +207,8 @@ const Header = {
                         if (e.matches) {
                             html.classList.add('dark');
                             html.setAttribute('data-theme', 'dark');
-                        } else {
+                        }
+                        else {
                             html.classList.remove('dark');
                             html.setAttribute('data-theme', 'light');
                         }
@@ -275,16 +292,67 @@ const Header = {
     }
 };
 
+// 字体大小控制
+const FontSizeControl = {
+    init() {
+        const proseContent = document.querySelectorAll('.prose *:not(h1):not(.text-3xl)');
+        if (!proseContent.length) {
+            return;
+        }
+
+        const sizes = ['text-sm', 'text-base', 'text-lg', 'text-xl'];
+        let currentSizeIndex = 1;
+
+        const savedSize = localStorage.getItem('content-font-size');
+        if (savedSize) {
+            proseContent.forEach(el => {
+                el.classList.remove(...sizes);
+                el.classList.add(savedSize);
+            });
+            currentSizeIndex = sizes.indexOf(savedSize);
+        }
+
+        const updateFontSize = (newIndex) => {
+            if (newIndex >= 0 && newIndex < sizes.length) {
+                proseContent.forEach(el => {
+                    el.classList.remove(...sizes);
+                    el.classList.add(sizes[newIndex]);
+                });
+                localStorage.setItem('content-font-size', sizes[newIndex]);
+                currentSizeIndex = newIndex;
+            }
+        };
+
+        document.getElementById('increase-font')?.addEventListener('click', () => {
+            updateFontSize(currentSizeIndex + 1);
+        });
+
+        document.getElementById('decrease-font')?.addEventListener('click', () => {
+            updateFontSize(currentSizeIndex - 1);
+        });
+
+        document.getElementById('reset-font')?.addEventListener('click', () => {
+            updateFontSize(1);
+        });
+    }
+};
+
 // 暴露到全局
 window.PageForge = {
     GitHubStats,
     CodeCopy,
-    Header
+    Header,
+    FontSizeControl
 };
 
 // DOM 加载完成后初始化
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => Header.init());
-} else {
+    document.addEventListener('DOMContentLoaded', () => {
+        Header.init();
+        FontSizeControl.init();
+    });
+}
+else {
     Header.init();
+    FontSizeControl.init();
 }

templates/includes/page-font.ejs

@@ -0,0 +1,15 @@
+<% if (locals.siteData.feature?.fontSize?.enable) { %>
+    <div class="flex items-center gap-2 p-0.5 bg-white dark:bg-gray-800 rounded-lg dark:border-gray-700">
+        <button id="decrease-font" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="减小字体">
+            <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"/>
+            </svg>
+        </button>
+        <button id="reset-font" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm" title="重置字体">A</button>
+        <button id="increase-font" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="增大字体">
+            <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"/>
+            </svg>
+        </button>
+    </div>
+<% } %>

templates/includes/page-title.ejs

@@ -5,6 +5,9 @@
         </h1>
 
         <div class="flex items-center gap-4">
+            <!-- 字体大小控制按钮 -->
+            <%- include('./page-font') %>
+
             <!-- 分享按钮 -->
             <%- include('./page-share') %>
 

templates/layouts/content.ejs

@@ -8,7 +8,7 @@
         </div>
 
         <!-- 主要内容部分 -->
-        <div class="prose prose-gray dark:prose-invert max-w-none">
+        <div class="prose prose-gray dark:prose-invert max-w-none text-base">
             <%- pageData.content %>
         </div>