oooooii-npm/webook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract HTML template into separate views file

Browse Source
This commit is contained in:
wu2kong
2026-05-29 14:18:59 +08:00
parent f9e323f70a
commit cf2d5fc77b
15 changed files with 862 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+58 -16
View File
@@ -7,7 +7,7 @@
- **双栏布局** — 左侧文件导航树 + 右侧内容预览
- **自动导航** — 启动时递归扫描目录结构，生成可折叠的文件树
- **元信息展示** — 显示笔记标题、创建时间、修改时间、字数统计
- **浅/暗主题** — 一键切换，主题偏好自动保存到 localStorage
- **主题包机制** — 内置多套主题，主题与明暗模式分离，方便后续扩展
- **可隐藏侧边栏** — 专注于阅读内容
- **搜索过滤** — 侧边栏顶部搜索框，快速过滤文件（快捷键 `Ctrl+K` / `Cmd+K`）
- **代码高亮** — 基于 highlight.js，支持 190+ 编程语言
@@ -56,7 +56,7 @@ webook ~/my-notes --host=0.0.0.0 --title="我的知识库"
| `--port, -p <number>` | 监听端口（被占用时自动递增） | `8000` |
| `--host, -h <address>` | 监听地址 | `127.0.0.1` |
| `--title, -t <title>` | 网站标题 | 根目录名 |
| `--theme <path>` | 自定义 CSS 主题文件路径 | 无 |
| `--theme <path>` | 额外叠加的自定义 CSS 文件路径 | 无 |
| `--open` | 启动后自动打开浏览器 | `false` |
| `--version, -V` | 显示版本号 | — |
@@ -89,8 +89,9 @@ webook ./docs --theme=./my-theme.css
### 主题切换
- 点击工具栏 `🌙` / `☀️` 按钮切换浅/暗主题
- 选择会自动保存，下次打开保持
- 顶部下拉框可切换内置主题包
- 点击工具栏 `🌙` / `☀︎` 按钮切换浅/暗模式
- 主题包与明暗模式都会自动保存，下次打开保持
### 移动端
@@ -98,28 +99,69 @@ webook ./docs --theme=./my-theme.css
- 点击右下角浮动按钮打开侧边栏
- 点击遮罩层或选文件后自动关闭
## 自定义主题
## 主题扩展
通过 `--theme` 参数传入外部 CSS 文件路径（支持相对路径和绝对路径），CSS 文件必须是有效的 CSS。建议参考 `public/style.css` 中的 CSS 变量：
### 内置主题目录
每个主题都放在独立文件夹下，便于后续新增、替换和维护：
```text
public/themes/
├── default/
│ ├── manifest.json
│ ├── theme.css
│ ├── highlight-light.css
│ └── highlight-dark.css
└── paper/
├── manifest.json
├── theme.css
├── highlight-light.css
└── highlight-dark.css
```
`manifest.json` 示例：
```json
{
"id": "paper",
"label": "Paper",
"defaultMode": "light",
"stylesheet": "theme.css",
"highlight": {
"light": "highlight-light.css",
"dark": "highlight-dark.css"
}
}
```
`theme.css` 通过 `data-theme-id` 和 `data-color-mode` 覆盖变量。建议参考 `public/themes/default/theme.css`：
```css
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
--accent-color: #4a90d9;
html[data-theme-id="paper"][data-color-mode="light"] {
--bg: #f3ece1;
--text: #3f2f21;
--brand: #8a5a2b;
--body-bg: linear-gradient(180deg, #fff8ed 0%, #f3ece1 100%);
/* ... */
}
[data-theme="dark"] {
--bg-primary: #1a1b1e;
--text-primary: #c1c2c5;
html[data-theme-id="paper"][data-color-mode="dark"] {
--bg: #17120d;
--text: #f1e4d4;
--brand: #d1a16c;
/* ... */
}
```
### 外部覆盖样式
通过 `--theme` 参数传入外部 CSS 文件路径（支持相对路径和绝对路径），会在内置主题之后加载，适合做局部覆盖：
```bash
webook ./docs --theme=./my-theme.css
webook ./docs --theme=/absolute/path/to/my-theme.css
```
## 目录结构要求
webook 只扫描 `.md` 和 `.markdown` 文件。目录推荐按主题分组：
public/app.js
+125 -45
View File
@@ -3,6 +3,7 @@
const DATA = window.__WEBOOK__;
const navTree = DATA.nav || [];
const themes = Array.isArray(DATA.themes) ? DATA.themes : [];
const defaultFile = DATA.defaultFile;
const initialContent = DATA.initialContent;
@@ -11,6 +12,7 @@
const searchInput = document.getElementById('searchInput');
const btnToggleSidebar = document.getElementById('btnToggleSidebar');
const btnToggleTheme = document.getElementById('btnToggleTheme');
const themeSelect = document.getElementById('themeSelect');
const contentBody = document.getElementById('contentBody');
const emptyState = document.getElementById('emptyState');
const markdownContent = document.getElementById('markdownContent');
@@ -22,35 +24,88 @@
const loadingBar = document.getElementById('loadingBar');
const sidebar = document.getElementById('sidebar');
const mobileNavBtn = document.getElementById('mobileNavBtn');
const themeStylesheet = document.getElementById('themeStylesheet');
const themeHighlightStylesheet = document.getElementById('themeHighlightStylesheet');
let currentFile = null;
const fallbackTheme = themes[0] || {
id: 'default',
label: 'Default',
defaultMode: 'light',
stylesheet: '/_webook/themes/default/theme.css',
highlight: {
light: '/_webook/themes/default/highlight-light.css',
dark: '/_webook/themes/default/highlight-dark.css'
}
};
// === Theme ===
function getTheme() {
return localStorage.getItem('webook-theme') || 'light';
function getThemeConfig(themeId) {
return themes.find((item) => item.id === themeId) || fallbackTheme;
}
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('webook-theme', theme);
btnToggleTheme.textContent = theme === 'dark' ? '☀︎' : '☾';
// Swap highlight theme
const hlLink = document.querySelector('.theme-highlight');
if (hlLink) {
hlLink.href = theme === 'dark'
? '/_webook/highlight-dark.css'
: '/_webook/highlight-light.css';
function getStoredThemeId() {
const stored = localStorage.getItem('webook-theme-id');
if (stored && themes.some((item) => item.id === stored)) {
return stored;
}
return DATA.initialThemeId || fallbackTheme.id;
}
function toggleTheme() {
const current = getTheme();
setTheme(current === 'light' ? 'dark' : 'light');
function getStoredColorMode(themeId) {
const stored = localStorage.getItem('webook-color-mode');
if (stored === 'light' || stored === 'dark') {
return stored;
}
// Initialize theme
setTheme(getTheme());
const legacy = localStorage.getItem('webook-theme');
if (legacy === 'light' || legacy === 'dark') {
return legacy;
}
const theme = getThemeConfig(themeId);
return theme.defaultMode === 'dark' ? 'dark' : 'light';
}
function renderThemeOptions() {
if (!themeSelect) return;
themeSelect.innerHTML = themes.map((item) => (
`<option value="${escapeHtml(item.id)}">${escapeHtml(item.label)}</option>`
)).join('');
}
function applyTheme(themeId, colorMode) {
const theme = getThemeConfig(themeId);
const mode = colorMode === 'dark' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme-id', theme.id);
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem('webook-theme-id', theme.id);
localStorage.setItem('webook-color-mode', mode);
localStorage.setItem('webook-theme', mode);
if (themeStylesheet) {
themeStylesheet.href = theme.stylesheet;
}
if (themeHighlightStylesheet) {
themeHighlightStylesheet.href = mode === 'dark' ? theme.highlight.dark : theme.highlight.light;
}
if (themeSelect) {
themeSelect.value = theme.id;
}
btnToggleTheme.textContent = mode === 'dark' ? '☀︎' : '☾';
btnToggleTheme.title = mode === 'dark' ? '切换到浅色模式' : '切换到深色模式';
}
function toggleColorMode() {
const currentThemeId = getStoredThemeId();
const currentMode = getStoredColorMode(currentThemeId);
applyTheme(currentThemeId, currentMode === 'dark' ? 'light' : 'dark');
}
renderThemeOptions();
applyTheme(getStoredThemeId(), getStoredColorMode(getStoredThemeId()));
// === Sidebar Toggle ===
function getSidebarVisible() {
@@ -174,6 +229,10 @@
if (fileItem) fileItem.classList.add('active');
}
function findNavFileItem(filePath) {
return sidebarNav.querySelector(`[data-file-path="${CSS.escape(filePath)}"]`);
}
// === Search ===
searchInput.addEventListener('input', function () {
const query = this.value.trim().toLowerCase();
@@ -270,16 +329,7 @@
articleBody.innerHTML = data.html;
buildTOC();
// Update meta
const created = formatDate(data.meta.created);
const modified = formatDate(data.meta.modified);
const wordCount = data.meta.wordCount;
articleMeta.innerHTML = `
<span class="article-meta-item">📅 创建: ${created}</span>
<span class="article-meta-item">✏️ 修改: ${modified}</span>
<span class="article-meta-item">📝 字数: ${wordCount.toLocaleString()}</span>
`;
renderArticleMeta(data.meta);
// Scroll to top
contentBody.scrollTop = 0;
@@ -329,6 +379,17 @@
// For now, server-side rendering handles highlighting.
}
function renderArticleMeta(meta) {
const created = formatDate(meta.created);
const modified = formatDate(meta.modified);
const wordCount = meta.wordCount;
articleMeta.innerHTML = `
<span class="article-meta-item">创建时间: ${created}</span>
<span class="article-meta-item">修改时间: ${modified}</span>
<span class="article-meta-item">字数统计: ${wordCount.toLocaleString()}</span>
`;
}
function slugifyHeading(text, index) {
return 'toc-' + text
.toLowerCase()
@@ -361,13 +422,20 @@
});
tocNav.innerHTML = items.map((item) => `
<a class="toc-link toc-level-${item.level}" href="#${escapeHtml(item.id)}" data-target="${escapeHtml(item.id)}">
<button class="toc-link toc-level-${item.level}" type="button" data-target="${escapeHtml(item.id)}">
<span class="toc-bullet"></span>
<span class="toc-text">${escapeHtml(item.text)}</span>
</a>
</button>
`).join('');
}
function scrollToHeading(targetId) {
if (!targetId) return;
const target = articleBody.querySelector(`#${CSS.escape(targetId)}`);
if (!target) return;
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// === Initial Load ===
if (initialContent) {
emptyState.style.display = 'none';
@@ -376,14 +444,7 @@
articleBody.innerHTML = initialContent.html;
buildTOC();
const created = formatDate(initialContent.meta.created);
const modified = formatDate(initialContent.meta.modified);
const wordCount = initialContent.meta.wordCount;
articleMeta.innerHTML = `
<span class="article-meta-item">📅 创建: ${created}</span>
<span class="article-meta-item">✏️ 修改: ${modified}</span>
<span class="article-meta-item">📝 字数: ${wordCount.toLocaleString()}</span>
`;
renderArticleMeta(initialContent.meta);
currentFile = defaultFile;
if (defaultFile && history.replaceState) {
@@ -394,22 +455,41 @@
// === Hash-based navigation ===
function handleHashChange() {
const hash = decodeURIComponent(window.location.hash.slice(1));
if (hash && hash !== currentFile) {
loadFile(hash);
// Find and activate the nav item
const fileItem = sidebarNav.querySelector(`[data-file-path="${CSS.escape(hash)}"]`);
if (fileItem) {
setActiveFile(fileItem);
if (!hash || hash === currentFile) {
return;
}
const fileItem = findNavFileItem(hash);
if (fileItem) {
loadFile(hash);
setActiveFile(fileItem);
return;
}
if (hash.startsWith('toc-')) {
scrollToHeading(hash);
}
}
window.addEventListener('hashchange', handleHashChange);
// === Event Listeners ===
btnToggleTheme.addEventListener('click', toggleTheme);
btnToggleTheme.addEventListener('click', toggleColorMode);
btnToggleSidebar.addEventListener('click', toggleSidebar);
mobileNavBtn.addEventListener('click', showMobileSidebar);
if (themeSelect) {
themeSelect.addEventListener('change', function () {
applyTheme(this.value, getStoredColorMode(this.value));
});
}
if (tocNav) {
tocNav.addEventListener('click', function (e) {
const link = e.target.closest('[data-target]');
if (!link) return;
e.preventDefault();
scrollToHeading(link.getAttribute('data-target'));
});
}
// === Keyboard Shortcuts ===
document.addEventListener('keydown', function (e) {
public/style.css
+104 -59
View File
@@ -23,29 +23,17 @@
--sidebar-width: 300px;
--toolbar-height: 68px;
--transition: 180ms ease;
--font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-mono: "SFMono-Regular", "SF Mono", "JetBrains Mono", "Menlo", monospace;
}
[data-theme="dark"] {
--bg: #0b1120;
--bg-elevated: rgba(15, 23, 42, 0.82);
--bg-panel: #0f172a;
--bg-soft: #111827;
--bg-hover: #182033;
--text: #e5edf9;
--text-muted: #a3b2c6;
--text-soft: #6f8099;
--border: rgba(148, 163, 184, 0.16);
--border-strong: rgba(148, 163, 184, 0.26);
--brand: #7aa2ff;
--brand-strong: #93b4ff;
--brand-soft: rgba(122, 162, 255, 0.14);
--code-bg: #020617;
--code-fg: #dbeafe;
--shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.34);
--shadow-md: 0 14px 32px rgba(2, 6, 23, 0.28);
--shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.2);
--body-bg:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.12), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
--brand-mark-bg: linear-gradient(135deg, var(--brand), #7c3aed);
--active-file-bg: linear-gradient(180deg, rgba(58,111,247,0.12), rgba(58,111,247,0.08));
--active-file-border: rgba(58,111,247,0.18);
--active-file-shadow: 0 8px 18px rgba(58,111,247,0.08);
--loading-bar-bg: linear-gradient(90deg, var(--brand), #38bdf8);
}
*, *::before, *::after { box-sizing: border-box; }
@@ -53,18 +41,9 @@ html, body { margin: 0; min-height: 100%; }
body {
font-family: var(--font-sans);
color: var(--text);
background:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.12), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
background: var(--body-bg);
overflow: hidden;
}
[data-theme="dark"] body {
background:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #0b1120 0%, #09101c 100%);
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
@@ -80,10 +59,10 @@ a:hover { color: var(--brand-strong); }
min-width: 0;
min-height: 0;
padding: 18px 14px 18px 18px;
border-right: 1px solid var(--border);
background: var(--bg-elevated);
backdrop-filter: blur(18px);
box-shadow: inset -1px 0 0 rgba(255,255,255,0.3);
border-right: 0;
background: var(--bg);
backdrop-filter: none;
box-shadow: none;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-width)); }
.sidebar-header { display: grid; gap: 14px; padding-bottom: 14px; }
@@ -96,7 +75,7 @@ a:hover { color: var(--brand-strong); }
.sidebar-brand-mark {
width: 36px; height: 36px; border-radius: 12px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand), #7c3aed);
background: var(--brand-mark-bg);
color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
}
.sidebar-brand-text { display: grid; line-height: 1.15; }
@@ -157,9 +136,9 @@ a:hover { color: var(--brand-strong); }
}
.nav-file:hover { background: var(--bg-soft); }
.nav-file.active {
background: linear-gradient(180deg, rgba(58,111,247,0.12), rgba(58,111,247,0.08));
border-color: rgba(58,111,247,0.18);
box-shadow: 0 8px 18px rgba(58,111,247,0.08);
background: var(--active-file-bg);
border-color: var(--active-file-border);
box-shadow: var(--active-file-shadow);
}
.nav-file-icon {
width: 9px;
@@ -184,8 +163,9 @@ a:hover { color: var(--brand-strong); }
height: var(--toolbar-height);
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 0 18px 0 22px;
background: var(--bg-elevated); border-bottom: 1px solid var(--border);
backdrop-filter: blur(18px);
background: var(--bg-elevated);
border-bottom: 0;
backdrop-filter: none;
}
.toolbar-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar-kicker {
@@ -196,6 +176,32 @@ a:hover { color: var(--brand-strong); }
.toolbar-divider, .toolbar-title { color: var(--text-muted); font-size: 14px; }
.toolbar-title { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.theme-select-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 12px;
height: 38px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-panel);
box-shadow: var(--shadow-sm);
}
.theme-select-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.theme-select {
border: 0;
background: transparent;
color: var(--text);
font: inherit;
min-width: 104px;
outline: none;
cursor: pointer;
}
.btn-icon {
width: 38px; height: 38px; border: 1px solid transparent;
border-radius: 12px; background: transparent; color: var(--text-muted);
@@ -203,7 +209,11 @@ a:hover { color: var(--brand-strong); }
}
.btn-icon:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.content-body { flex: 1; overflow: auto; }
.content-body {
flex: 1;
overflow: auto;
background: var(--bg-elevated);
}
.empty-state {
display: grid; place-items: center; min-height: 100%;
padding: 32px;
@@ -219,27 +229,44 @@ a:hover { color: var(--brand-strong); }
.empty-card p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.markdown-body {
width: min(880px, calc(100% - 48px));
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
padding: 36px 0 72px;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
grid-template-columns: minmax(0, 1fr) 250px;
gap: 24px;
align-items: start;
}
.article-header {
padding: 22px 24px; margin-bottom: 24px;
border: 1px solid var(--border); border-radius: 24px;
background: var(--bg-elevated); box-shadow: var(--shadow-md); backdrop-filter: blur(18px);
padding: 10px 0 14px;
margin-bottom: 20px;
border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.article-title {
margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.08;
margin: 0;
font-size: clamp(30px, 4vw, 44px); line-height: 1.08;
letter-spacing: -0.03em; color: var(--text);
}
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--text-muted); font-size: 13px; }
.article-meta-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--bg-soft); }
.article-meta-side {
display: grid;
gap: 10px;
}
.article-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border-radius: 0;
background: transparent;
}
.article-body {
font-size: 16px; line-height: 1.85; color: var(--text);
}
@@ -291,7 +318,12 @@ a:hover { color: var(--brand-strong); }
.article-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.article-body input[type="checkbox"] { margin-right: 8px; }
.toc-panel { display: none; position: sticky; top: 18px; }
.toc-panel {
display: grid;
gap: 14px;
position: sticky;
top: 18px;
}
.toc-card {
padding: 16px 14px;
border: 1px solid var(--border);
@@ -300,6 +332,9 @@ a:hover { color: var(--brand-strong); }
box-shadow: var(--shadow-sm);
backdrop-filter: blur(18px);
}
.meta-card {
padding-bottom: 14px;
}
.toc-title {
font-size: 12px;
font-weight: 700;
@@ -316,11 +351,16 @@ a:hover { color: var(--brand-strong); }
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--text-muted);
font-size: 13px;
text-align: left;
line-height: 1.35;
cursor: pointer;
}
.toc-link:hover {
background: var(--bg-soft);
@@ -344,7 +384,7 @@ a:hover { color: var(--brand-strong); }
.loading-bar {
position: fixed; top: 0; left: 0; height: 3px; width: 0;
background: linear-gradient(90deg, var(--brand), #38bdf8);
background: var(--loading-bar-bg);
z-index: 1000; pointer-events: none; transition: width 0.25s ease, opacity 0.2s ease;
}
.loading-bar.visible { width: 55%; }
@@ -371,10 +411,12 @@ a:hover { color: var(--brand-strong); }
.sidebar.collapsed { margin-left: 0; }
.content-toolbar { padding-left: 18px; }
.toolbar-breadcrumb { min-width: 0; }
.theme-select-wrap { max-width: 150px; }
.theme-select { min-width: 0; width: 100%; }
.markdown-body { width: min(100%, calc(100% - 28px)); padding-top: 20px; padding-bottom: 72px; }
.article-layout { grid-template-columns: minmax(0, 1fr); }
.toc-panel { display: none !important; }
.article-header { padding: 20px; }
.article-header { padding: 8px 0 12px; }
.mobile-nav-btn {
display: grid; place-items: center; position: fixed; right: 18px; bottom: 18px;
width: 52px; height: 52px; border-radius: 18px;
@@ -384,6 +426,14 @@ a:hover { color: var(--brand-strong); }
}
}
@media (max-width: 640px) {
.theme-select-label { display: none; }
.theme-select-wrap {
width: 92px;
padding: 0 10px;
}
}
[data-doc-theme="toc"] .content {
background:
radial-gradient(circle at top right, rgba(58, 111, 247, 0.08), transparent 28%),
@@ -393,14 +443,9 @@ a:hover { color: var(--brand-strong); }
width: min(1180px, calc(100% - 48px));
}
[data-doc-theme="toc"] .article-layout {
grid-template-columns: minmax(0, 1fr) 240px;
grid-template-columns: minmax(0, 1fr) 250px;
gap: 28px;
}
[data-doc-theme="toc"] .toc-panel { display: block; }
[data-doc-theme="toc"] .toc-card {
position: sticky;
top: 18px;
}
.sidebar-overlay {
display: none; position: fixed; inset: 0; z-index: 210;
public/themes/default/highlight-dark.css
+39
View File
@@ -0,0 +1,39 @@
/* Dark theme for highlight.js - GitHub Dark-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #c9d1d9; }
.hljs-comment,
.hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #ff7b72; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #79c0ff; }
.hljs-string,
.hljs-doctag { color: #a5d6ff; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #d2a8ff; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #d2a8ff; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #7ee787; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #a5d6ff; }
.hljs-symbol,
.hljs-bullet { color: #ffa657; }
.hljs-built_in,
.hljs-builtin-name { color: #79c0ff; }
.hljs-meta { color: #8b949e; font-weight: bold; }
.hljs-deletion { background: #490202; }
.hljs-addition { background: #04260f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #484f58; user-select: none; }
public/themes/default/highlight-light.css
+39
View File
@@ -0,0 +1,39 @@
/* Light theme for highlight.js - GitHub-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #24292e; }
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #d73a49; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #005cc5; }
.hljs-string,
.hljs-doctag { color: #032f62; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #6f42c1; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #6f42c1; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #22863a; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #032f62; }
.hljs-symbol,
.hljs-bullet { color: #e36209; }
.hljs-built_in,
.hljs-builtin-name { color: #005cc5; }
.hljs-meta { color: #6a737d; font-weight: bold; }
.hljs-deletion { background: #ffeef0; }
.hljs-addition { background: #f0fff4; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #959da5; user-select: none; }
public/themes/default/manifest.json
+11
View File
@@ -0,0 +1,11 @@
{
"id": "default",
"label": "Aurora",
"description": "当前默认的玻璃拟态文档主题。",
"defaultMode": "light",
"stylesheet": "theme.css",
"highlight": {
"light": "highlight-light.css",
"dark": "highlight-dark.css"
}
}
public/themes/default/theme.css
+59
View File
@@ -0,0 +1,59 @@
html[data-theme-id="default"][data-color-mode="light"] {
--bg: #f6f7fb;
--bg-elevated: rgba(255, 255, 255, 0.86);
--bg-panel: #ffffff;
--bg-soft: #eef2f7;
--bg-hover: #e8eef7;
--text: #1f2937;
--text-muted: #6b7280;
--text-soft: #94a3b8;
--border: rgba(148, 163, 184, 0.22);
--border-strong: rgba(148, 163, 184, 0.35);
--brand: #3a6ff7;
--brand-strong: #2757d6;
--brand-soft: rgba(58, 111, 247, 0.12);
--code-bg: #0f172a;
--code-fg: #e5edf9;
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
--shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
--body-bg:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.12), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
--brand-mark-bg: linear-gradient(135deg, var(--brand), #7c3aed);
--active-file-bg: linear-gradient(180deg, rgba(58,111,247,0.12), rgba(58,111,247,0.08));
--active-file-border: rgba(58,111,247,0.18);
--active-file-shadow: 0 8px 18px rgba(58,111,247,0.08);
--loading-bar-bg: linear-gradient(90deg, var(--brand), #38bdf8);
}
html[data-theme-id="default"][data-color-mode="dark"] {
--bg: #0b1120;
--bg-elevated: rgba(15, 23, 42, 0.82);
--bg-panel: #0f172a;
--bg-soft: #111827;
--bg-hover: #182033;
--text: #e5edf9;
--text-muted: #a3b2c6;
--text-soft: #6f8099;
--border: rgba(148, 163, 184, 0.16);
--border-strong: rgba(148, 163, 184, 0.26);
--brand: #7aa2ff;
--brand-strong: #93b4ff;
--brand-soft: rgba(122, 162, 255, 0.14);
--code-bg: #020617;
--code-fg: #dbeafe;
--shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.34);
--shadow-md: 0 14px 32px rgba(2, 6, 23, 0.28);
--shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.2);
--body-bg:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #0b1120 0%, #09101c 100%);
--brand-mark-bg: linear-gradient(135deg, #7aa2ff, #38bdf8);
--active-file-bg: linear-gradient(180deg, rgba(122,162,255,0.18), rgba(122,162,255,0.09));
--active-file-border: rgba(122,162,255,0.24);
--active-file-shadow: 0 12px 22px rgba(2,6,23,0.26);
--loading-bar-bg: linear-gradient(90deg, #7aa2ff, #38bdf8);
}
public/themes/paper/highlight-dark.css
+39
View File
@@ -0,0 +1,39 @@
/* Dark theme for highlight.js - GitHub Dark-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #c9d1d9; }
.hljs-comment,
.hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #ff7b72; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #79c0ff; }
.hljs-string,
.hljs-doctag { color: #a5d6ff; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #d2a8ff; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #d2a8ff; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #7ee787; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #a5d6ff; }
.hljs-symbol,
.hljs-bullet { color: #ffa657; }
.hljs-built_in,
.hljs-builtin-name { color: #79c0ff; }
.hljs-meta { color: #8b949e; font-weight: bold; }
.hljs-deletion { background: #490202; }
.hljs-addition { background: #04260f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #484f58; user-select: none; }
public/themes/paper/highlight-light.css
+39
View File
@@ -0,0 +1,39 @@
/* Light theme for highlight.js - GitHub-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #24292e; }
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #d73a49; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #005cc5; }
.hljs-string,
.hljs-doctag { color: #032f62; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #6f42c1; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #6f42c1; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #22863a; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #032f62; }
.hljs-symbol,
.hljs-bullet { color: #e36209; }
.hljs-built_in,
.hljs-builtin-name { color: #005cc5; }
.hljs-meta { color: #6a737d; font-weight: bold; }
.hljs-deletion { background: #ffeef0; }
.hljs-addition { background: #f0fff4; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #959da5; user-select: none; }
public/themes/paper/manifest.json
+11
View File
@@ -0,0 +1,11 @@
{
"id": "paper",
"label": "Paper",
"description": "偏纸质阅读感的暖色主题。",
"defaultMode": "light",
"stylesheet": "theme.css",
"highlight": {
"light": "highlight-light.css",
"dark": "highlight-dark.css"
}
}
public/themes/paper/theme.css
+59
View File
@@ -0,0 +1,59 @@
html[data-theme-id="paper"][data-color-mode="light"] {
--bg: #f3ece1;
--bg-elevated: rgba(255, 251, 245, 0.9);
--bg-panel: #fffaf2;
--bg-soft: #ede2d0;
--bg-hover: #e6d6bb;
--text: #3f2f21;
--text-muted: #7d6752;
--text-soft: #a48b73;
--border: rgba(108, 84, 56, 0.18);
--border-strong: rgba(108, 84, 56, 0.28);
--brand: #8a5a2b;
--brand-strong: #6f451d;
--brand-soft: rgba(138, 90, 43, 0.12);
--code-bg: #2b2118;
--code-fg: #f8efe3;
--shadow-lg: 0 18px 42px rgba(77, 52, 29, 0.1);
--shadow-md: 0 10px 24px rgba(77, 52, 29, 0.08);
--shadow-sm: 0 4px 14px rgba(77, 52, 29, 0.06);
--body-bg:
radial-gradient(circle at top left, rgba(199, 141, 76, 0.15), transparent 28%),
radial-gradient(circle at top right, rgba(121, 171, 150, 0.12), transparent 24%),
linear-gradient(180deg, #fff8ed 0%, #f3ece1 100%);
--brand-mark-bg: linear-gradient(135deg, #b17633, #7a4d26);
--active-file-bg: linear-gradient(180deg, rgba(177,118,51,0.18), rgba(177,118,51,0.08));
--active-file-border: rgba(138,90,43,0.24);
--active-file-shadow: 0 10px 20px rgba(122,77,38,0.1);
--loading-bar-bg: linear-gradient(90deg, #b17633, #79ab96);
}
html[data-theme-id="paper"][data-color-mode="dark"] {
--bg: #17120d;
--bg-elevated: rgba(31, 24, 18, 0.88);
--bg-panel: #211912;
--bg-soft: #2b2118;
--bg-hover: #35291e;
--text: #f1e4d4;
--text-muted: #c2ab93;
--text-soft: #8f7762;
--border: rgba(205, 173, 141, 0.14);
--border-strong: rgba(205, 173, 141, 0.24);
--brand: #d1a16c;
--brand-strong: #e0b88c;
--brand-soft: rgba(209, 161, 108, 0.14);
--code-bg: #120d09;
--code-fg: #f8efe3;
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
--shadow-md: 0 14px 30px rgba(0, 0, 0, 0.24);
--shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.18);
--body-bg:
radial-gradient(circle at top left, rgba(209, 161, 108, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(121, 171, 150, 0.1), transparent 24%),
linear-gradient(180deg, #1a140f 0%, #120d09 100%);
--brand-mark-bg: linear-gradient(135deg, #d1a16c, #79ab96);
--active-file-bg: linear-gradient(180deg, rgba(209,161,108,0.18), rgba(209,161,108,0.08));
--active-file-border: rgba(209,161,108,0.22);
--active-file-shadow: 0 12px 20px rgba(0,0,0,0.22);
--loading-bar-bg: linear-gradient(90deg, #d1a16c, #79ab96);
}
src/renderer.js
+5 -1
View File
@@ -67,4 +67,8 @@ function createRenderer(notesDir) {
};
}
module.exports = { createRenderer };
function stripLeadingTitle(content) {
return content.replace(/^\s*#\s+.+\r?\n+/, '');
}
module.exports = { createRenderer, stripLeadingTitle };
src/scanner.js
+73 -18
View File
@@ -20,32 +20,87 @@ function countWords(content) {
return chineseChars + englishWords;
}
function normalizeSortKey(name) {
const volumeMatch = name.match(/^(?:第)?卷\s*([一二三四五六七八九十百千0-9]+)$/) || name.match(/^卷\s*([一二三四五六七八九十百千0-9]+)$/);
const chapterMatch = name.match(/^第\s*([一二三四五六七八九十百千0-9]+)\s*[章节篇卷]$/);
const numericMatch = name.match(/(\d+)/);
const toNumber = (value) => {
function parseChineseNumber(value) {
if (/^\d+$/.test(value)) return parseInt(value, 10);
const map = { 一: 1, 二: 2, 两: 2, 三: 3, 四: 4, 五: 5, 六: 6, 七: 7, 八: 8, 九: 9, 十: 10, 百: 100, 千: 1000 };
if (value.length === 1) return map[value] || Number.MAX_SAFE_INTEGER;
if (value === '十') return 10;
const digits = value.split('');
if (digits.length === 2 && digits[0] === '十') return 10 + (map[digits[1]] || 0);
if (digits.length === 2 && digits[1] === '十') return (map[digits[0]] || 0) * 10;
return value.split('').reduce((sum, ch) => sum + (map[ch] || 0), 0) || Number.MAX_SAFE_INTEGER;
};
if (volumeMatch) return { group: 0, value: toNumber(volumeMatch[1]), name };
if (chapterMatch) return { group: 1, value: toNumber(chapterMatch[1]), name };
if (numericMatch) return { group: 2, value: parseInt(numericMatch[1], 10), name };
return { group: 3, value: name.toLocaleLowerCase('zh-CN'), name };
const digitMap = {
零: 0,
一: 1,
二: 2,
两: 2,
三: 3,
四: 4,
五: 5,
六: 6,
七: 7,
八: 8,
九: 9
};
const unitMap = { 十: 10, 百: 100, 千: 1000 };
let total = 0;
let current = 0;
for (const ch of value) {
if (digitMap[ch] !== undefined) {
current = digitMap[ch];
continue;
}
if (unitMap[ch]) {
total += (current || 1) * unitMap[ch];
current = 0;
}
}
return total + current || Number.MAX_SAFE_INTEGER;
}
function normalizeSortKey(name) {
const volumeMatch = name.match(/^卷\s*([一二三四五六七八九十百千两零0-9]+)(?:\b|[-_.、\s]|$)(.*)$/);
const chapterMatch = name.match(/^第\s*([一二三四五六七八九十百千两零0-9]+)\s*([章节篇卷])(?:\b|[-_.、\s]|$)(.*)$/);
const numericPrefixMatch = name.match(/^(\d+(?:\.\d+)*)(?:\b|[-_.、\s]|$)(.*)$/);
if (volumeMatch) {
return {
group: 0,
value: parseChineseNumber(volumeMatch[1]),
suffix: volumeMatch[2] || '',
name
};
}
if (chapterMatch) {
return {
group: 1,
value: parseChineseNumber(chapterMatch[1]),
suffix: chapterMatch[3] || '',
name
};
}
if (numericPrefixMatch) {
return {
group: 2,
value: numericPrefixMatch[1],
suffix: numericPrefixMatch[2] || '',
name
};
}
return { group: 3, value: name.toLocaleLowerCase('zh-CN'), suffix: '', name };
}
function compareNames(a, b) {
const ak = normalizeSortKey(a.name);
const bk = normalizeSortKey(b.name);
if (ak.group !== bk.group) return ak.group - bk.group;
if (ak.value !== bk.value) return ak.value < bk.value ? -1 : 1;
if (ak.value !== bk.value) {
return ak.value < bk.value ? -1 : 1;
}
if (ak.suffix !== bk.suffix) {
return ak.suffix.localeCompare(bk.suffix, 'zh-CN', { numeric: true, sensitivity: 'base' });
}
return a.name.localeCompare(b.name, 'zh-CN', { numeric: true, sensitivity: 'base' });
}
src/server.js
+116 -93
View File
@@ -4,99 +4,103 @@ const express = require('express');
const path = require('path');
const fs = require('fs');
const { scanDirectory } = require('./scanner');
const { createRenderer } = require('./renderer');
const { createRenderer, stripLeadingTitle } = require('./renderer');
const PUBLIC_DIR = path.join(__dirname, '..', 'public');
const BUILTIN_THEMES_DIR = path.join(PUBLIC_DIR, 'themes');
const PAGE_TEMPLATE_PATH = path.join(__dirname, '..', 'views', 'page.html');
const PAGE_TEMPLATE = fs.readFileSync(PAGE_TEMPLATE_PATH, 'utf-8');
function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function renderTemplate(template, replacements) {
return Object.entries(replacements).reduce((result, [key, value]) => {
return result.split(`{{${key}}}`).join(value);
}, template);
}
function loadBuiltInThemes() {
if (!fs.existsSync(BUILTIN_THEMES_DIR)) {
return [];
}
return fs.readdirSync(BUILTIN_THEMES_DIR, { withFileTypes: true })
.filter((entry) => entry.isDirectory())
.map((entry) => {
const manifestPath = path.join(BUILTIN_THEMES_DIR, entry.name, 'manifest.json');
if (!fs.existsSync(manifestPath)) {
return null;
}
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
const themeId = manifest.id || entry.name;
const themePath = `/_webook/themes/${entry.name}`;
return {
id: themeId,
label: manifest.label || themeId,
description: manifest.description || '',
defaultMode: manifest.defaultMode === 'dark' ? 'dark' : 'light',
stylesheet: `${themePath}/${manifest.stylesheet || 'theme.css'}`,
highlight: {
light: `${themePath}/${(manifest.highlight && manifest.highlight.light) || 'highlight-light.css'}`,
dark: `${themePath}/${(manifest.highlight && manifest.highlight.dark) || 'highlight-dark.css'}`
}
};
})
.filter(Boolean)
.sort((a, b) => a.label.localeCompare(b.label, 'zh-CN'));
}
function resolveCustomThemeHref(notesDir, themeOption) {
if (!themeOption || themeOption === 'toc') {
return null;
}
const resolvedPath = path.isAbsolute(themeOption)
? themeOption
: path.resolve(notesDir, themeOption);
if (!fs.existsSync(resolvedPath) || !fs.statSync(resolvedPath).isFile()) {
return null;
}
return {
mountPath: '/_webook/custom-theme',
dir: path.dirname(resolvedPath),
href: `/_webook/custom-theme/${encodeURIComponent(path.basename(resolvedPath))}`
};
}
/**
* Generate the HTML page template
*/
function renderPage({ title, nav, theme, defaultFile, initialContent }) {
const navJson = JSON.stringify(nav).replace(/</g, '\\u003c');
const isTocTheme = theme === 'toc';
const themeLink = theme && !isTocTheme
? `<link rel="stylesheet" href="/_notes/${theme.replace(/^\/+/, '')}">`
: '';
const initialContentJson = initialContent
? JSON.stringify(initialContent).replace(/</g, '\\u003c')
: 'null';
function renderPage({ title, nav, docTheme, customThemeHref, themes, initialThemeId, defaultFile, initialContent }) {
const webookData = JSON.stringify({
nav,
themes,
initialThemeId,
defaultFile: defaultFile || null,
initialContent: initialContent || null
}).replace(/</g, '\\u003c');
return `<!DOCTYPE html>
<html lang="zh-CN" data-theme="light" data-doc-theme="${isTocTheme ? 'toc' : 'default'}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
<link rel="stylesheet" href="/_webook/style.css">
<link rel="stylesheet" href="/_webook/highlight-light.css" class="theme-highlight">
${themeLink}
</head>
<body>
<div class="app" id="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<a class="sidebar-brand" href="/" aria-label="返回首页">
<span class="sidebar-brand-mark">W</span>
<span class="sidebar-brand-text">
<strong>${title}</strong>
<small>文档浏览器</small>
</span>
</a>
<div class="search-box">
<input type="text" id="searchInput" placeholder="搜索文件..." autocomplete="off">
</div>
</div>
<nav class="sidebar-nav" id="sidebarNav"></nav>
</aside>
<main class="content">
<div class="content-toolbar">
<div class="toolbar-breadcrumb">
<span class="toolbar-kicker">Docs</span>
<span class="toolbar-divider">/</span>
<span class="toolbar-title">${title}</span>
</div>
<div class="toolbar-actions">
<button class="btn-icon" id="btnToggleSidebar" title="切换侧边栏">☰</button>
<button class="btn-icon" id="btnToggleTheme" title="切换主题">🌙</button>
</div>
</div>
<div class="content-body" id="contentBody">
<div class="empty-state" id="emptyState">
<div class="empty-card">
<div class="empty-icon">📘</div>
<h2>选择左侧文件开始阅读</h2>
<p>支持 Markdown、代码块、图片和基础排版。</p>
</div>
</div>
<article class="markdown-body" id="markdownContent" style="display:none;">
<header class="article-header" id="articleHeader">
<h1 class="article-title" id="articleTitle"></h1>
<div class="article-meta" id="articleMeta"></div>
</header>
<div class="article-layout">
<div class="article-body" id="articleBody"></div>
<aside class="toc-panel" id="tocPanel" aria-label="目录导航">
<div class="toc-card">
<div class="toc-title">目录</div>
<nav class="toc-nav" id="tocNav"></nav>
</div>
</aside>
</div>
</article>
</div>
</main>
</div>
<div class="loading-bar" id="loadingBar"></div>
<div class="mobile-nav-btn" id="mobileNavBtn">☰</div>
<script>
window.__WEBOOK__ = {
nav: ${navJson},
defaultFile: ${JSON.stringify(defaultFile || null)},
initialContent: ${initialContentJson}
};
</script>
<script src="/_webook/app.js"></script>
<script src="/_webook/live-reload.js"></script>
</body>
</html>`;
return renderTemplate(PAGE_TEMPLATE, {
PAGE_TITLE: escapeHtml(title),
SITE_TITLE: escapeHtml(title),
INITIAL_THEME_ID: escapeHtml(initialThemeId),
DOC_THEME: escapeHtml(docTheme),
CUSTOM_THEME_LINK: customThemeHref
? `<link rel="stylesheet" href="${escapeHtml(customThemeHref)}" id="customThemeStylesheet">`
: '',
WEBOOK_DATA: webookData
});
}
/**
@@ -113,9 +117,19 @@ function createServer(opts) {
const app = express();
const renderer = createRenderer(dir);
const builtInThemes = loadBuiltInThemes();
const initialThemeId = builtInThemes.some((item) => item.id === 'default')
? 'default'
: (builtInThemes[0] ? builtInThemes[0].id : 'default');
const customTheme = resolveCustomThemeHref(dir, theme);
const docTheme = theme === 'toc' ? 'toc' : 'default';
// Serve webook public assets (CSS, JS)
app.use('/_webook', express.static(path.join(__dirname, '..', 'public')));
app.use('/_webook', express.static(PUBLIC_DIR));
if (customTheme) {
app.use(customTheme.mountPath, express.static(customTheme.dir));
}
// Serve notes directory as static files (for images, attachments, custom theme CSS)
app.use('/_notes', express.static(dir));
@@ -157,9 +171,9 @@ function createServer(opts) {
const content = fs.readFileSync(fullPath, 'utf-8');
const stats = fs.statSync(fullPath);
// Render markdown to HTML
// Render markdown to HTML without duplicating the page title in the article body.
const env = { filePath: safePath };
const html = renderer.render(content, env);
const html = renderer.render(stripLeadingTitle(content), env);
// Extract metadata
const match = content.match(/^#\s+(.+)$/m);
@@ -202,7 +216,7 @@ function createServer(opts) {
defaultFile = df;
const content = fs.readFileSync(dfPath, 'utf-8');
const env = { filePath: df };
const html = renderer.render(content, env);
const html = renderer.render(stripLeadingTitle(content), env);
const stats = fs.statSync(dfPath);
const match = content.match(/^#\s+(.+)$/m);
const dfTitle = match ? match[1].trim() : df.replace(/\.md$/i, '');
@@ -223,7 +237,16 @@ function createServer(opts) {
}
}
res.send(renderPage({ title, nav, theme, defaultFile, initialContent }));
res.send(renderPage({
title,
nav,
docTheme,
customThemeHref: customTheme ? customTheme.href : null,
themes: builtInThemes,
initialThemeId,
defaultFile,
initialContent
}));
} catch (err) {
res.status(500).send(`<h1>Error</h1><pre>${err.message}</pre>`);
}
views/page.html
+84
View File
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme-id="{{INITIAL_THEME_ID}}" data-color-mode="light" data-doc-theme="{{DOC_THEME}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PAGE_TITLE}}</title>
<link rel="stylesheet" href="/_webook/style.css">
<link rel="stylesheet" href="/_webook/themes/{{INITIAL_THEME_ID}}/theme.css" id="themeStylesheet">
<link rel="stylesheet" href="/_webook/themes/{{INITIAL_THEME_ID}}/highlight-light.css" id="themeHighlightStylesheet">
{{CUSTOM_THEME_LINK}}
</head>
<body>
<div class="app" id="app">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<a class="sidebar-brand" href="/" aria-label="返回首页">
<span class="sidebar-brand-mark">W</span>
<span class="sidebar-brand-text">
<strong>{{SITE_TITLE}}</strong>
<small>文档浏览器</small>
</span>
</a>
<div class="search-box">
<input type="text" id="searchInput" placeholder="搜索文件..." autocomplete="off">
</div>
</div>
<nav class="sidebar-nav" id="sidebarNav"></nav>
</aside>
<main class="content">
<div class="content-toolbar">
<div class="toolbar-breadcrumb">
<span class="toolbar-kicker">Docs</span>
<span class="toolbar-divider">/</span>
<span class="toolbar-title">{{SITE_TITLE}}</span>
</div>
<div class="toolbar-actions">
<label class="theme-select-wrap" for="themeSelect" title="切换主题包">
<span class="theme-select-label">主题</span>
<select class="theme-select" id="themeSelect" aria-label="选择主题"></select>
</label>
<button class="btn-icon" id="btnToggleSidebar" title="切换侧边栏">☰</button>
<button class="btn-icon" id="btnToggleTheme" title="切换明暗模式">🌙</button>
</div>
</div>
<div class="content-body" id="contentBody">
<div class="empty-state" id="emptyState">
<div class="empty-card">
<div class="empty-icon">📘</div>
<h2>选择左侧文件开始阅读</h2>
<p>支持 Markdown、代码块、图片和基础排版。</p>
</div>
</div>
<article class="markdown-body" id="markdownContent" style="display:none;">
<header class="article-header" id="articleHeader">
<h1 class="article-title" id="articleTitle"></h1>
</header>
<div class="article-layout">
<div class="article-body" id="articleBody"></div>
<aside class="toc-panel" id="tocPanel" aria-label="页面信息与目录">
<div class="toc-card">
<div class="toc-title">目录</div>
<nav class="toc-nav" id="tocNav"></nav>
</div>
<div class="toc-card meta-card">
<div class="toc-title">信息</div>
<div class="article-meta article-meta-side" id="articleMeta"></div>
</div>
</aside>
</div>
</article>
</div>
</main>
</div>
<div class="loading-bar" id="loadingBar"></div>
<div class="mobile-nav-btn" id="mobileNavBtn">☰</div>
<script>
window.__WEBOOK__ = {{WEBOOK_DATA}};
</script>
<script src="/_webook/app.js"></script>
<script src="/_webook/live-reload.js"></script>
</body>
</html>