添加 404 模版

devlive-community · Jan 1, 2025 · b6bfbf4 · b6bfbf4
1 parent c952735
commit b6bfbf4
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 5 deletions.
diff --git a/docs/content/setup/site.md b/docs/content/setup/site.md
@@ -26,14 +26,14 @@ site:
 
 ```markdown
 theme:
-  extra_css:
+  extraCss:
     - /assets/extra.css
-  extra_js:
+  extraJs:
     - /assets/extra.js
 ```
 
-- `extra_css`: 附加的 CSS 文件路径
-- `extra_js`: 附加的 JavaScript 文件路径
+- `extraCss`: 附加的 CSS 文件路径
+- `extraJs`: 附加的 JavaScript 文件路径
 
 ## CDN 设置
 

diff --git a/lib/directory-processor.js b/lib/directory-processor.js
@@ -9,6 +9,7 @@ class DirectoryProcessor {
         this.language = language;
         this.outputPath = outputPath;
         this.pages = new Map();
+
         this.fileProcessor = new FileProcessor(this.config, this.pages, config.sourcePath, config.outputPath);
     }
 
@@ -69,10 +70,67 @@ class DirectoryProcessor {
         console.log('✓ 创建根目录重定向页面:', rootIndexPath);
     }
 
+    async create404Pages() {
+        if (this.isFeatureEnabled('i18n')) {
+            for (const locale of this.getAvailableLocales()) {
+                const metadata = {
+                    config: {
+                        toc: false,
+                        sidebar: false
+                    },
+                    title: locale.key === 'zh-CN' ? '页面未找到' : 'Page Not Found',
+                    message: locale.key === 'zh-CN'
+                        ? '抱歉，您访问的页面不存在。'
+                        : 'Sorry, the page you are looking for does not exist.',
+                    backLink: locale.key === 'zh-CN' ? '返回首页' : 'Back to Home',
+                    language: locale.key,
+                    noLocalePath: `/404.html`,
+                    layout: 'layouts/404'
+                };
+
+                const html = await this.fileProcessor.processLayoutFile(metadata, locale.key);
+                const outputDir = path.join(this.outputPath, locale.key);
+                const outputPath = path.join(outputDir, '404.html');
+
+                if (!fs.existsSync(outputDir)) {
+                    fs.mkdirSync(outputDir, {recursive: true});
+                }
+                fs.writeFileSync(outputPath, html);
+                console.log(`✓ 创建 404 页面: ${outputPath}`);
+            }
+        }
+        else {
+            const metadata = {
+                config: {
+                    toc: false,
+                    sidebar: false
+                },
+                title: '页面未找到',
+                message: '抱歉，您访问的页面不存在。',
+                backLink: '返回首页',
+                noLocalePath: `/404.html`,
+                layout: 'layouts/404'
+            };
+
+            const html = await this.fileProcessor.processLayoutFile(metadata, '');
+            const outputDir = path.join(this.outputPath, '');
+            const outputPath = path.join(outputDir, '404.html');
+
+            if (!fs.existsSync(outputDir)) {
+                fs.mkdirSync(outputDir, {recursive: true});
+            }
+            fs.writeFileSync(outputPath, html);
+            console.log(`✓ 创建 404 页面: ${outputPath}`);
+        }
+    }
+
     async processLanguageDirectory(sourceDir, baseDir = '') {
         // 预加载所有页面数据
         await this.preloadPages(this.config.sourcePath);
 
+        // 创建 404 页面
+        await this.create404Pages();
+
         if (this.isFeatureEnabled('i18n')) {
             console.log("\n📂  正在处理国际化");
 

diff --git a/lib/file-processor.js b/lib/file-processor.js
@@ -73,6 +73,9 @@ class FileProcessor {
             // 配置的国际化
             this.config.languages = getAvailableLocales(this.config)
             const localPath = appendHtml(pagePath, this.config, locale);
+            const noLocalePath = isFeatureEnabled(this.config, 'i18n')
+                ? localPath.replace(`/${locale}`, '')
+                : localPath;
 
             const pageData = {
                 pageData: {
@@ -81,7 +84,7 @@ class FileProcessor {
                     title: translatedTitle,
                     content: content,
                     path: localPath,
-                    noLocalePath: isFeatureEnabled(this.config, 'i18n') ? localPath.replace(`/${locale}`, '') : localPath,
+                    noLocalePath: noLocalePath,
                     language: locale,
                     basePath: getRelativeBasePath(baseDir),
                     layout: metadata.layout || 'layouts/content',
@@ -107,6 +110,30 @@ class FileProcessor {
             console.error(`✗ 编译 ${relativePath} 失败 ${error.message}`);
         }
     }
+
+    async processLayoutFile(metadata, locale) {
+        const translatedTitle = metadata.title
+            ? getTranslation(this.config, metadata.title, locale)
+            : metadata.title;
+        metadata.title = translatedTitle;
+
+        this.config.languages = getAvailableLocales(this.config)
+
+        const pageData = {
+            pageData: {
+                config: metadata.config,
+                basePath: getRelativeBasePath('/'),
+                ...metadata
+            },
+            siteData: {
+                nav: this.config.nav,
+                ...this.config
+            }
+        }
+        pageData.siteData.nav = transformNavigation(this.config.nav, this.pages, this.config, locale);
+
+        return await this.templateEngine.renderWithLayout('layouts/page', pageData);
+    }
 }
 
 module.exports = FileProcessor
diff --git a/templates/layouts/404.ejs b/templates/layouts/404.ejs
@@ -0,0 +1,16 @@
+<div class="w-full h-[calc(100vh-30rem)] flex items-center justify-center px-4">
+    <div class="max-w-md w-full space-y-8">
+        <div class="text-center">
+            <h1 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2"><%- pageData.title %></h1>
+            <p class="text-xl text-gray-600 dark:text-gray-400 mb-8"><%- pageData.message %></p>
+            <a id="homeLink"
+               href="/<%- pageData.language ? pageData.language : '' %>"
+               class="inline-flex items-center px-4 py-2 border border-transparent
+                      text-base font-medium rounded-md text-white
+                      bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
+                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                <%- pageData.backLink %>
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/templates/layouts/base.ejs b/templates/layouts/base.ejs
@@ -141,6 +141,19 @@
 <% } %>
 </body>
 
+<!-- 处理 404 -->
+<script>
+    (function () {
+        const i18nEnable = `<%- locals?.siteData?.feature?.i18n?.enable %>`;
+        if (!i18nEnable) return;
+
+        const hasRule = `<%= (locals?.pageData?.rules || []).includes(pageData.noLocalePath) %>`;
+        if (!hasRule) {
+            window.location.href = `/<%= pageData.language %>/404.html` || `/404.html`;
+        }
+    })();
+</script>
+
 <!-- 基础脚本文件 -->
 <script src="/assets/pageforge.min.js"></script>