|
|
@@ -10,6 +10,7 @@
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">
|
|
|
<style>
|
|
|
+ /* --- 1. 现有样式保持不变 --- */
|
|
|
/* 语言切换按钮样式 */
|
|
|
.lang-switch {
|
|
|
position: fixed;
|
|
|
@@ -95,11 +96,108 @@
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
margin: 0;
|
|
|
}
|
|
|
+
|
|
|
+ /* --- 2. 新增：暗黑模式核心样式 --- */
|
|
|
+ :root {
|
|
|
+ --dark-bg: #1a1a1a;
|
|
|
+ --dark-text: #c4c4c4;
|
|
|
+ --dark-sidebar: #141414;
|
|
|
+ --dark-code-bg: #2b2b2b;
|
|
|
+ --dark-border: #333;
|
|
|
+ --theme-color: #42b983;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 基础反色 */
|
|
|
+ body.dark-mode {
|
|
|
+ background-color: var(--dark-bg);
|
|
|
+ color: var(--dark-text);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 侧边栏适配 */
|
|
|
+ body.dark-mode .sidebar {
|
|
|
+ background-color: var(--dark-sidebar);
|
|
|
+ border-right: 1px solid var(--dark-border);
|
|
|
+ color: var(--dark-text);
|
|
|
+ }
|
|
|
+ body.dark-mode .sidebar-nav li a {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ body.dark-mode .sidebar-nav li.active > a {
|
|
|
+ color: var(--theme-color);
|
|
|
+ border-right: 2px solid var(--theme-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 代码块适配 (关键) */
|
|
|
+ body.dark-mode pre {
|
|
|
+ background-color: var(--dark-code-bg) !important;
|
|
|
+ }
|
|
|
+ body.dark-mode code {
|
|
|
+ background-color: var(--dark-code-bg) !important;
|
|
|
+ color: #e0e0e0 !important;
|
|
|
+ }
|
|
|
+ body.dark-mode .markdown-section code {
|
|
|
+ color: #f08d49;
|
|
|
+ background-color: rgba(255,255,255,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标题和引用适配 */
|
|
|
+ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 {
|
|
|
+ color: #e0e0e0;
|
|
|
+ }
|
|
|
+ body.dark-mode blockquote {
|
|
|
+ color: #999;
|
|
|
+ background: rgba(255,255,255,0.05);
|
|
|
+ border-left-color: var(--theme-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 表格适配 */
|
|
|
+ body.dark-mode .markdown-section tr:nth-child(2n) {
|
|
|
+ background-color: rgba(255,255,255,0.03);
|
|
|
+ }
|
|
|
+ body.dark-mode .markdown-section td,
|
|
|
+ body.dark-mode .markdown-section th {
|
|
|
+ border-color: var(--dark-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Mermaid 图表适配 (颜色反转) */
|
|
|
+ body.dark-mode .mermaid {
|
|
|
+ filter: invert(1) hue-rotate(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Giscus 区域在暗黑模式下的微调 */
|
|
|
+ body.dark-mode .giscus-container {
|
|
|
+ border-top: 1px solid var(--dark-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* --- 3. 新增：侧边栏开关按钮样式 --- */
|
|
|
+ .sidebar-toggle-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin: 0 15px 10px 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(0,0,0,0.05);
|
|
|
+ color: #505d6b;
|
|
|
+ border: 1px solid rgba(0,0,0,0.05);
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+ body.dark-mode .sidebar-toggle-btn {
|
|
|
+ background-color: rgba(255,255,255,0.1);
|
|
|
+ color: #ccc;
|
|
|
+ border: 1px solid #444;
|
|
|
+ }
|
|
|
+ .sidebar-toggle-btn:hover {
|
|
|
+ background-color: var(--theme-color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <!-- 语言切换按钮 -->
|
|
|
+ <!-- 语言切换按钮 (保持原有) -->
|
|
|
<div class="lang-switch">
|
|
|
<button id="langBtn" onclick="switchLanguage()">English</button>
|
|
|
</div>
|
|
|
@@ -139,15 +237,48 @@
|
|
|
'/en/': '#/en/',
|
|
|
'/': '#/'
|
|
|
},
|
|
|
- // 使用钩子动态处理侧边栏
|
|
|
+ // --- 插件系统 ---
|
|
|
plugins: [
|
|
|
+ // 1. 暗黑模式开关 (新增)
|
|
|
+ function(hook, vm) {
|
|
|
+ hook.doneEach(function() {
|
|
|
+ const sidebar = document.querySelector('.sidebar-nav');
|
|
|
+ if (!sidebar || document.querySelector('.sidebar-toggle-btn')) return;
|
|
|
+
|
|
|
+ const btn = document.createElement('div');
|
|
|
+ btn.className = 'sidebar-toggle-btn';
|
|
|
+
|
|
|
+ // 初始化状态
|
|
|
+ const savedTheme = localStorage.getItem('theme-mode');
|
|
|
+ if (savedTheme === 'dark') {
|
|
|
+ document.body.classList.add('dark-mode');
|
|
|
+ btn.textContent = '🌙 Switch to Light';
|
|
|
+ } else {
|
|
|
+ btn.textContent = '☀️ Switch to Dark';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击切换
|
|
|
+ btn.onclick = function() {
|
|
|
+ document.body.classList.toggle('dark-mode');
|
|
|
+ const isDark = document.body.classList.contains('dark-mode');
|
|
|
+ localStorage.setItem('theme-mode', isDark ? 'dark' : 'light');
|
|
|
+ btn.textContent = isDark ? '🌙 Switch to Light' : '☀️ Switch to Dark';
|
|
|
+
|
|
|
+ // 可选：在这里重新加载 Giscus 以适应主题 (需要刷新 iframe，略复杂，暂时保持现状)
|
|
|
+ };
|
|
|
+
|
|
|
+ // 插入到侧边栏顶部
|
|
|
+ sidebar.insertBefore(btn, sidebar.firstChild);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 2. 原有的语言偏好与评论区逻辑
|
|
|
function(hook, vm) {
|
|
|
// 在每次路由变化时检查语言偏好
|
|
|
hook.beforeEach(function(content) {
|
|
|
const preferredLang = localStorage.getItem('preferredLanguage');
|
|
|
const currentPath = vm.route.path;
|
|
|
|
|
|
- // 根据当前路径或语言偏好更新分页文本
|
|
|
if (currentPath.includes('/en/') || preferredLang === 'en') {
|
|
|
window.$docsify.pagination.previousText = 'Previous';
|
|
|
window.$docsify.pagination.nextText = 'Next';
|
|
|
@@ -161,31 +292,26 @@
|
|
|
|
|
|
// 在页面渲染后添加 Giscus 评论区
|
|
|
hook.doneEach(function() {
|
|
|
- // 检查是否是章节页面(排除首页和前言)
|
|
|
const currentPath = vm.route.path;
|
|
|
const isChapterPage = currentPath.includes('chapter') ||
|
|
|
currentPath.includes('Chapter') ||
|
|
|
currentPath.includes('第') && currentPath.includes('章');
|
|
|
|
|
|
if (!isChapterPage) {
|
|
|
- return; // 非章节页面不显示评论区
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- // 移除旧的评论区
|
|
|
const oldGiscus = document.querySelector('.giscus-container');
|
|
|
if (oldGiscus) {
|
|
|
oldGiscus.remove();
|
|
|
}
|
|
|
|
|
|
- // 创建评论区容器
|
|
|
const giscusContainer = document.createElement('div');
|
|
|
giscusContainer.className = 'giscus-container';
|
|
|
|
|
|
- // 获取语言设置
|
|
|
const preferredLang = localStorage.getItem('preferredLanguage');
|
|
|
const isEnglish = currentPath.includes('/en/') || preferredLang === 'en';
|
|
|
|
|
|
- // 创建可折叠的标题栏
|
|
|
const toggleButton = document.createElement('div');
|
|
|
toggleButton.className = 'giscus-toggle';
|
|
|
|
|
|
@@ -212,11 +338,9 @@
|
|
|
toggleButton.appendChild(titleWrapper);
|
|
|
toggleButton.appendChild(iconSpan);
|
|
|
|
|
|
- // 创建评论内容容器
|
|
|
const contentDiv = document.createElement('div');
|
|
|
contentDiv.className = 'giscus-content';
|
|
|
|
|
|
- // 创建 Giscus 脚本
|
|
|
const giscusScript = document.createElement('script');
|
|
|
giscusScript.src = 'https://giscus.app/client.js';
|
|
|
giscusScript.setAttribute('data-repo', 'datawhalechina/hello-agents');
|
|
|
@@ -228,7 +352,11 @@
|
|
|
giscusScript.setAttribute('data-reactions-enabled', '1');
|
|
|
giscusScript.setAttribute('data-emit-metadata', '0');
|
|
|
giscusScript.setAttribute('data-input-position', 'top');
|
|
|
+
|
|
|
+ // 让 Giscus 自动跟随系统/浏览器偏好，或强制指定
|
|
|
+ // 这里使用 preferred_color_scheme，它通常能检测到 OS 设置
|
|
|
giscusScript.setAttribute('data-theme', 'preferred_color_scheme');
|
|
|
+
|
|
|
giscusScript.setAttribute('data-lang', isEnglish ? 'en' : 'zh-CN');
|
|
|
giscusScript.setAttribute('data-loading', 'lazy');
|
|
|
giscusScript.crossOrigin = 'anonymous';
|
|
|
@@ -236,11 +364,9 @@
|
|
|
|
|
|
contentDiv.appendChild(giscusScript);
|
|
|
|
|
|
- // 组装评论区
|
|
|
giscusContainer.appendChild(toggleButton);
|
|
|
giscusContainer.appendChild(contentDiv);
|
|
|
|
|
|
- // 添加折叠/展开功能
|
|
|
let isExpanded = false;
|
|
|
toggleButton.addEventListener('click', function() {
|
|
|
isExpanded = !isExpanded;
|
|
|
@@ -253,7 +379,6 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // 将评论区添加到内容区域
|
|
|
const article = document.querySelector('article.markdown-section');
|
|
|
if (article) {
|
|
|
article.appendChild(giscusContainer);
|
|
|
@@ -271,6 +396,9 @@
|
|
|
<script src="//cdn.jsdelivr.net/npm/docsify-pagination@latest/dist/docsify-pagination.min.js"></script>
|
|
|
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
|
|
|
|
|
|
+ <!-- 新增：图片放大插件 (官方) -->
|
|
|
+ <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
|
|
|
+
|
|
|
<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
|
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
|
|
|
@@ -279,7 +407,7 @@
|
|
|
<!-- 字数统计 -->
|
|
|
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
|
|
|
|
|
|
- <!-- 语言切换脚本 -->
|
|
|
+ <!-- 语言切换脚本 (完整保留) -->
|
|
|
<script>
|
|
|
// 章节文件名映射
|
|
|
const chapterMapping = {
|
|
|
@@ -434,4 +562,4 @@
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
-</html>
|
|
|
+</html>
|
柯慕灵