From 6ef8b9fe41b88c23378783859cae796e684acd04 Mon Sep 17 00:00:00 2001 From: jingrow Date: Wed, 3 Sep 2025 15:33:19 +0800 Subject: [PATCH] =?UTF-8?q?Presentation=E5=A2=9E=E5=8A=A0=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/presentation/Presentation.css | 114 +--------------- components/presentation/Presentation.jsx | 28 +++- components/presentation/themes/jingrow.css | 151 +++++++++++++++++++++ data/presentation.js | 3 +- data/presentation/jingrow.md | 4 +- 5 files changed, 182 insertions(+), 118 deletions(-) create mode 100644 components/presentation/themes/jingrow.css 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
一站式通用企业数字化平台 ### 下一代智能工作平台