Presentation增加自定义主题功能
This commit is contained in:
parent
efd3a20459
commit
6ef8b9fe41
@ -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;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
151
components/presentation/themes/jingrow.css
Normal file
151
components/presentation/themes/jingrow.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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 };
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
theme: default
|
||||
theme: white
|
||||
backgroundTransition: slide
|
||||
transition: slide
|
||||
---
|
||||
|
||||
# <span class="jingrow-icon jingrow-icon-large"></span> Jingrow<br>一站式通用企业数字化平台
|
||||
# <span class="jingrow-icon"></span> Jingrow<br>一站式通用企业数字化平台
|
||||
|
||||
### 下一代智能工作平台
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user