diff --git a/components/presentation/Presentation.css b/components/presentation/Presentation.css
index 775cb84..3f38233 100644
--- a/components/presentation/Presentation.css
+++ b/components/presentation/Presentation.css
@@ -15,6 +15,7 @@
height: 2em;
}
+/* 容器布局样式 */
.reveal-container {
height: 100vh;
width: 100%;
@@ -22,7 +23,6 @@
top: 0;
left: 0;
z-index: 1000;
- background: black;
}
.reveal-container .reveal {
@@ -42,116 +42,4 @@
align-items: center !important;
text-align: center !important;
padding: 2rem !important;
- color: white !important;
-}
-
-/* 带背景的幻灯片文字颜色 */
-.reveal-container .reveal .slides section[data-background] {
- color: white !important;
-}
-
-.reveal-container .reveal .slides section[data-background] h1,
-.reveal-container .reveal .slides section[data-background] h2,
-.reveal-container .reveal .slides section[data-background] h3,
-.reveal-container .reveal .slides section[data-background] h4,
-.reveal-container .reveal .slides section[data-background] h5,
-.reveal-container .reveal .slides section[data-background] h6 {
- color: white !important;
-}
-
-.reveal-container .reveal .slides section[data-background] p,
-.reveal-container .reveal .slides section[data-background] li {
- color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.reveal-container .reveal .slides section h1,
-.reveal-container .reveal .slides section h2,
-.reveal-container .reveal .slides section h3,
-.reveal-container .reveal .slides section h4,
-.reveal-container .reveal .slides section h5,
-.reveal-container .reveal .slides section h6 {
- margin-bottom: 1rem !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section p {
- margin-bottom: 0.5rem !important;
- line-height: 1.6 !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section ul,
-.reveal-container .reveal .slides section ol {
- text-align: left !important;
- margin: 1rem 0 !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section li {
- margin-bottom: 0.5rem !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section code {
- background: #333 !important;
- color: #fff !important;
- padding: 0.2rem 0.4rem !important;
- border-radius: 3px !important;
- font-family: 'Courier New', monospace !important;
-}
-
-.reveal-container .reveal .slides section pre {
- background: #333 !important;
- color: #fff !important;
- padding: 1rem !important;
- border-radius: 5px !important;
- text-align: left !important;
- overflow-x: auto !important;
-}
-
-.reveal-container .reveal .slides section blockquote {
- border-left: 4px solid #666 !important;
- padding-left: 1rem !important;
- margin: 1rem 0 !important;
- text-align: left !important;
- color: #ccc !important;
-}
-
-.reveal-container .reveal .slides section table {
- border-collapse: collapse !important;
- width: 100% !important;
- margin: 1rem 0 !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section th,
-.reveal-container .reveal .slides section td {
- border: 1px solid #666 !important;
- padding: 0.5rem !important;
- text-align: left !important;
- color: white !important;
-}
-
-.reveal-container .reveal .slides section th {
- background: #444 !important;
-}
-
-.reveal-container .reveal .slides section img {
- max-width: 100% !important;
- height: auto !important;
- margin: 1rem 0 !important;
-}
-
-.reveal-container .reveal .slides section .btn {
- display: inline-block !important;
- padding: 0.5rem 1rem !important;
- background: #007bff !important;
- color: white !important;
- text-decoration: none !important;
- border-radius: 0.25rem !important;
- margin: 0.5rem !important;
-}
-
-.reveal-container .reveal .slides section .btn:hover {
- background: #0056b3 !important;
}
diff --git a/components/presentation/Presentation.jsx b/components/presentation/Presentation.jsx
index 8717e4f..01f45e1 100644
--- a/components/presentation/Presentation.jsx
+++ b/components/presentation/Presentation.jsx
@@ -3,10 +3,30 @@
import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
-import 'reveal.js/dist/theme/black.css';
import { marked } from 'marked';
import './Presentation.css';
+// 简单的动态主题加载器
+const loadTheme = async (themeName) => {
+ if (!themeName) return;
+
+ try {
+ // 1. 优先尝试加载自定义主题
+ await import(`./themes/${themeName}.css`);
+ console.log(`加载自定义主题: ${themeName}`);
+ } catch (error) {
+ try {
+ // 2. 尝试加载 Reveal.js 内置主题
+ await import(`reveal.js/dist/theme/${themeName}.css`);
+ console.log(`加载内置主题: ${themeName}`);
+ } catch (error2) {
+ // 3. 如果都失败，使用默认主题
+ console.warn(`主题 ${themeName} 未找到，使用默认主题`);
+ await import('reveal.js/dist/theme/black.css');
+ }
+ }
+};
+
// Reveal.js配置
const REVEAL_CONFIG = {
hash: true,
@@ -171,7 +191,7 @@ export default function Presentation({ data }) {
};
// 初始化Reveal.js
- const initializeReveal = useCallback(() => {
+ const initializeReveal = useCallback(async () => {
if (!deckRef.current || !data) return;
try {
@@ -180,6 +200,10 @@ export default function Presentation({ data }) {
revealRef.current.destroy();
}
+ // 动态加载主题
+ const themeName = data.theme || 'default';
+ await loadTheme(themeName);
+
// 创建新实例
revealRef.current = new Reveal(deckRef.current, REVEAL_CONFIG);
revealRef.current.initialize();
diff --git a/components/presentation/themes/jingrow.css b/components/presentation/themes/jingrow.css
new file mode 100644
index 0000000..487b328
--- /dev/null
+++ b/components/presentation/themes/jingrow.css
@@ -0,0 +1,151 @@
+/* Jingrow 自定义主题 */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
+
+.reveal {
+ font-family: 'Manrope', sans-serif;
+ font-size: 24px;
+ color: #ffffff;
+}
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+ font-family: 'Manrope', sans-serif;
+ font-weight: 600;
+ color: #1fc76f;
+ text-transform: none;
+ text-shadow: none;
+ margin: 0 0 20px 0;
+}
+
+.reveal h1 {
+ font-size: 3.5em;
+ color: #1fc76f;
+}
+
+.reveal h2 {
+ font-size: 2.5em;
+ color: #8fe3b1;
+}
+
+.reveal h3 {
+ font-size: 1.8em;
+ color: #8fe3b1;
+}
+
+.reveal p {
+ margin: 20px 0;
+ line-height: 1.6;
+}
+
+.reveal ul,
+.reveal ol {
+ display: block;
+ margin: 20px 0;
+ padding-left: 40px;
+}
+
+.reveal li {
+ margin: 10px 0;
+ line-height: 1.6;
+}
+
+.reveal blockquote {
+ display: block;
+ position: relative;
+ width: 70%;
+ margin: 20px auto;
+ padding: 5px 20px;
+ font-style: italic;
+ background: rgba(31, 199, 111, 0.1);
+ border-left: 4px solid #1fc76f;
+}
+
+.reveal table {
+ margin: auto;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+.reveal table th {
+ font-weight: bold;
+ color: #1fc76f;
+}
+
+.reveal table th,
+.reveal table td {
+ text-align: left;
+ padding: 0.2em 0.5em 0.2em 0.5em;
+ border-bottom: 1px solid #666;
+}
+
+.reveal img {
+ margin: 15px 0px;
+ background: rgba(255, 255, 255, 0.12);
+ border: 4px solid #1fc76f;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
+
+.reveal a {
+ color: #8fe3b1;
+ text-decoration: none;
+ transition: color 0.15s ease;
+}
+
+.reveal a:hover {
+ color: #1fc76f;
+ text-shadow: none;
+ border: none;
+}
+
+.reveal pre {
+ display: block;
+ position: relative;
+ width: 90%;
+ margin: 15px auto;
+ text-align: left;
+ font-size: 0.55em;
+ font-family: 'Courier New', monospace;
+ line-height: 1.2em;
+ word-wrap: break-word;
+ box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+}
+
+.reveal code {
+ font-family: 'Courier New', monospace;
+ text-transform: none;
+ color: #1fc76f;
+ background: rgba(31, 199, 111, 0.1);
+ padding: 2px 4px;
+ border-radius: 3px;
+}
+
+.reveal pre code {
+ display: block;
+ padding: 5px;
+ overflow: auto;
+ max-height: 400px;
+ word-wrap: normal;
+ background: #2d2d2d;
+ color: #f8f8f2;
+}
+
+.reveal .slides section {
+ text-align: center;
+}
+
+.reveal .slides section[data-background] {
+ color: #fff;
+}
+
+.reveal .slides section[data-background] h1,
+.reveal .slides section[data-background] h2,
+.reveal .slides section[data-background] h3,
+.reveal .slides section[data-background] h4,
+.reveal .slides section[data-background] h5,
+.reveal .slides section[data-background] h6 {
+ color: #fff;
+}
diff --git a/data/presentation.js b/data/presentation.js
index 2941065..2103ba4 100644
--- a/data/presentation.js
+++ b/data/presentation.js
@@ -26,7 +26,8 @@ export async function getLocalPageData(slugArr) {
const pageData = {
content: content,
slug: '/' + slugArr.join('/'),
- slug_list: slugArr
+ slug_list: slugArr,
+ ...frontMatter // 添加 frontmatter 数据
};
return { data: pageData };
diff --git a/data/presentation/jingrow.md b/data/presentation/jingrow.md
index 3e61969..2b42488 100644
--- a/data/presentation/jingrow.md
+++ b/data/presentation/jingrow.md
@@ -1,10 +1,10 @@
---
-theme: default
+theme: white
backgroundTransition: slide
transition: slide
---
-# Jingrow
一站式通用企业数字化平台
+# Jingrow
一站式通用企业数字化平台
### 下一代智能工作平台