@x-withu/page-withu 1.1.1 → 1.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
   <strong>
-    一款轻量、优雅的个人主页生成器
+    一款轻量的个人主页生成器
   </strong>
 </p>
 
@@ -41,15 +41,14 @@
 # 安装 page-withu
 npm install -g @x-withu/page-withu
 
-# 创建项目，默认配置会写入 config.js，后续可自行编辑
+# 创建项目
 page-withu new my-homepage
-
 cd my-homepage
 
 # 本地预览
 page-withu serve
 
-# 构建分发产物
+# 生成静态网站
 page-withu build
 ```
 

package/bin/page-withu.js

@@ -1,10 +1,8 @@
 #!/usr/bin/env node
 import { spawn } from 'node:child_process';
-import { createHash } from 'node:crypto';
 import fs from 'node:fs/promises';
 import { constants as fsConstants } from 'node:fs';
 import { createRequire } from 'node:module';
-import { homedir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -13,33 +11,18 @@ const pkg = JSON.parse(await fs.readFile(new URL('../package.json', import.meta.
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const packageRoot = path.resolve(__dirname, '..');
-const templateDir = path.join(packageRoot, 'template');
-const viteConfigPath = path.join(templateDir, 'vite.config.js');
-const runtimeDependencies = {
-    '@traptitech/markdown-it-katex': '^3.6.0',
-    '@vitejs/plugin-vue': '^5.2.3',
-    'gray-matter': '^4.0.3',
-    'highlight.js': '^11.11.1',
-    'katex': '^0.16.45',
-    'markdown-it': '^14.1.0',
-    'markdown-it-emoji': '^3.0.0',
-    'markdown-it-footnote': '^4.0.0',
-    'mermaid': '^11.15.0',
-    'vite': '^6.3.1',
-    'vue': '^3.5.13',
-};
-const runtimeKey = createHash('sha256').update(JSON.stringify(runtimeDependencies)).digest('hex').slice(0, 12);
-const runtimeDir = path.join(homedir(), '.page-withu', 'runtime', `${pkg.version}-${runtimeKey}`);
+const sourceDir = path.join(packageRoot, 'src');
+const defaultsDir = path.join(sourceDir, 'defaults');
+const viteConfigPath = path.join(sourceDir, 'vite.config.js');
+const packageRequire = createRequire(import.meta.url);
+const vitePackageDir = path.dirname(packageRequire.resolve('vite/package.json'));
+const viteBin = path.join(vitePackageDir, 'bin/vite.js');
 
 const cyan = (text) => `\x1b[36m${text}\x1b[0m`;
 const green = (text) => `\x1b[32m${text}\x1b[0m`;
 const red = (text) => `\x1b[31m${text}\x1b[0m`;
 const yellow = (text) => `\x1b[33m${text}\x1b[0m`;
 
-function npmCommand() {
-    return process.platform === 'win32' ? 'npm.cmd' : 'npm';
-}
-
 async function exists(filePath) {
     try {
         await fs.access(filePath, fsConstants.F_OK);
@@ -64,39 +47,6 @@ function run(command, args, options = {}) {
     });
 }
 
-async function ensureRuntime() {
-    const marker = path.join(runtimeDir, '.ready');
-    if (await exists(marker)) return runtimeDir;
-
-    process.stdout.write('Preparing Page With U runtime...\n');
-    try {
-        await fs.mkdir(runtimeDir, { recursive: true });
-        await fs.writeFile(path.join(runtimeDir, 'package.json'), `${JSON.stringify({
-            private: true,
-            type: 'module',
-            dependencies: runtimeDependencies,
-            allowScripts: {
-                esbuild: true,
-            },
-        }, null, 2)}\n`);
-        await run(npmCommand(), ['install', '--fund=false', '--audit=false'], {
-            cwd: runtimeDir,
-            stdio: 'ignore',
-        });
-        await fs.writeFile(marker, new Date().toISOString());
-        process.stdout.write(`${green('Page With U runtime is ready.')}\n`);
-        return runtimeDir;
-    } catch (err) {
-        process.stderr.write(`${red('Failed to prepare Page With U runtime.')}\n`);
-        throw err;
-    }
-}
-
-function resolveRuntimeFile(runtimeRoot, specifier) {
-    const runtimeRequire = createRequire(path.join(runtimeRoot, 'package.json'));
-    return runtimeRequire.resolve(specifier);
-}
-
 async function detectProject(projectDir) {
     const required = ['config.js', 'content/index.md', 'content/domains.md'];
     const missing = [];
@@ -121,8 +71,8 @@ async function createProject(projectName = 'my-homepage') {
 
     try {
         await fs.mkdir(fullPath, { recursive: true });
-        await fs.copyFile(path.join(templateDir, 'config.js'), path.join(fullPath, 'config.js'));
-        await fs.cp(path.join(templateDir, 'content'), path.join(fullPath, 'content'), { recursive: true });
+        await fs.copyFile(path.join(defaultsDir, 'config.js'), path.join(fullPath, 'config.js'));
+        await fs.cp(path.join(defaultsDir, 'content'), path.join(fullPath, 'content'), { recursive: true });
         await fs.mkdir(path.join(fullPath, 'content/blog'), { recursive: true });
 
         process.stdout.write(`${green(`Successfully created PageWithU project in ${targetDir}!`)}\n`);
@@ -146,9 +96,6 @@ async function runVite(command, args) {
         process.exit(1);
     }
 
-    const runtimeRoot = await ensureRuntime();
-    const vitePackageDir = path.dirname(resolveRuntimeFile(runtimeRoot, 'vite/package.json'));
-    const viteBin = path.join(vitePackageDir, 'bin/vite.js');
     const viteArgs = command === 'serve'
         ? ['--config', viteConfigPath, ...args]
         : ['build', '--config', viteConfigPath, ...args];
@@ -158,9 +105,7 @@ async function runVite(command, args) {
             cwd: projectRoot,
             env: {
                 ...process.env,
-                NODE_PATH: path.join(runtimeRoot, 'node_modules'),
                 PAGE_WITHU_PROJECT_ROOT: projectRoot,
-                PAGE_WITHU_RUNTIME_ROOT: runtimeRoot,
             },
         });
     } catch (err) {

package/docs/develop.md

@@ -9,23 +9,26 @@ Page With U 的目标是保持轻量、清晰、容易定制。开发时建议
 - 优先修改已有文件，不要为了小功能引入复杂架构。
 - 模板默认配置要适合大多数用户开箱即用。
 - 文档中的用户流程要始终和 CLI 行为保持一致。
-- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `page-withu build`。
-- 不要引入大型 UI 框架，样式优先维护在 `template/src/styles/main.css`。
-- Markdown 能力优先在 `template/vite.config.js` 中集中处理，避免分散到多个组件。
+- 修改包内运行时或默认内容后，需要用源码目录或新生成项目执行一次 `page-withu build`。
+- 不要引入大型 UI 框架，样式优先维护在 `src/app/src/styles/main.css`。
+- Markdown 能力优先在 `src/vite.config.js` 中集中处理，避免分散到多个组件。
 
 项目结构：
 
 ```text
 page-withu/
 ├── bin/
-│   └── page-withu.js     # CLI 入口
-├── docs/                 # 使用、部署、开发文档
-├── template/
-│   ├── config.js         # 新项目默认配置
-│   ├── content/          # 新项目默认内容
-│   ├── src/              # 包内 Vue 运行时源码
-│   └── vite.config.js    # 包内 Markdown 渲染与静态路由生成
-├── package.json          # page-withu CLI 与运行时依赖配置
+│   └── page-withu.js       # CLI 入口
+├── docs/                   # 使用、部署、开发文档
+├── src/
+│   ├── app/                # 包内 Vue 运行时应用
+│   │   ├── index.html
+│   │   └── src/
+│   ├── defaults/           # 新项目默认配置和内容
+│   │   ├── config.js
+│   │   └── content/
+│   └── vite.config.js      # 包内 Markdown 渲染与静态路由生成
+├── package.json            # page-withu CLI 与运行时依赖配置
 └── README.md
 ```
 
@@ -70,8 +73,8 @@ page-withu new my-homepage
 调整 CLI 行为时，通常需要同步修改：
 
 - `bin/page-withu.js` 中的 commander command。
-- 必要时修改 `template/config.js` 的默认字段。
-- 必要时修改模板中读取配置的 Vue 组件。
+- 必要时修改 `src/defaults/config.js` 的默认字段。
+- 必要时修改包内运行时中读取配置的 Vue 组件。
 - 必要时更新 `README.md` 和 `docs/setup.md`。
 
 测试脚手架生成流程：
@@ -86,30 +89,36 @@ node /path/to/page-withu/bin/page-withu.js build
 
 如果构建成功，说明内容型项目可以通过包内运行时正常生成。
 
-## 开发 Template
+## 开发包内运行时与默认内容
 
-模板应用位于：
+包内 Vue 运行时应用位于：
 
 ```text
-template/
+src/app/
 ```
 
-启动模板开发服务：
+新项目默认配置和内容位于：
+
+```text
+src/defaults/
+```
+
+启动运行时开发服务：
 
 ```bash
-cd template
-node ../bin/page-withu.js serve
+cd src/defaults
+node ../../bin/page-withu.js serve
 ```
 
 常见开发位置：
 
-- `template/src/app.vue`：主页面路由、布局、浏览器标签页标题和 favicon。
-- `template/src/components/blog-list.vue`：博客列表、分页、搜索、标签和时间线。
-- `template/src/components/blog-detail.vue`：文章详情、ToC、图片放大、Mermaid 渲染。
-- `template/src/styles/main.css`：全局样式、亮暗模式、响应式布局、Markdown 样式。
-- `template/vite.config.js`：Markdown 插件、callout、代码高亮、静态 `.html` 路由生成。
-- `template/config.js`：站点默认配置。
-- `template/content/`：默认内容样例。
+- `src/app/src/app.vue`：主页面路由、布局、浏览器标签页标题和 favicon。
+- `src/app/src/components/blog_list.vue`：博客列表、分页、搜索、标签和时间线。
+- `src/app/src/components/blog_detail.vue`：文章详情、ToC、图片放大、Mermaid 渲染。
+- `src/app/src/styles/main.css`：全局样式、亮暗模式、响应式布局、Markdown 样式。
+- `src/vite.config.js`：Markdown 插件、callout、代码高亮、静态 `.html` 路由生成。
+- `src/defaults/config.js`：站点默认配置。
+- `src/defaults/content/`：默认内容样例。
 
 修改 Markdown 渲染逻辑后，建议检查这些能力：
 
@@ -118,11 +127,11 @@ node ../bin/page-withu.js serve
 - Mermaid、LaTeX、脚注、Emoji 是否能正常渲染。
 - callout 是否在亮色和暗色模式下都可读。
 
-构建模板：
+构建默认内容项目：
 
 ```bash
-cd template
-node ../bin/page-withu.js build
+cd src/defaults
+node ../../bin/page-withu.js build
 ```
 
 如果改动影响脚手架生成后的项目，还需要用 CLI 重新生成一个临时项目并构建。
@@ -150,7 +159,10 @@ npm run pack:check
 确认包中至少包含：
 
 - `bin/page-withu.js`
-- `template/`
+- `src/app/`
+- `src/defaults/config.js`
+- `src/defaults/content/`
+- `src/vite.config.js`
 - `docs/`
 - `package.json`
 - `README.md`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@x-withu/page-withu",
-  "version": "1.1.1",
-  "description": "A lightweight, elegant personal homepage generator.",
+  "version": "1.1.2",
+  "description": "A lightweight personal homepage generator.",
   "repository": {
     "type": "git",
     "url": "https://github.com/Explorer-Dong/page-withu"
@@ -12,21 +12,32 @@
   },
   "files": [
     "bin/",
-    "template/config.js",
-    "template/content/",
-    "template/src/",
-    "template/index.html",
-    "template/vite.config.js",
     "docs/",
+    "src/app/",
+    "src/defaults/config.js",
+    "src/defaults/content/",
+    "src/vite.config.js",
     "README.md"
   ],
   "scripts": {
     "pack:check": "npm pack --dry-run"
   },
+  "dependencies": {
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.45",
+    "markdown-it": "^14.1.0",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-footnote": "^4.0.0",
+    "mermaid": "^11.15.0",
+    "vite": "^6.3.1",
+    "vue": "^3.5.13"
+  },
   "keywords": [
-    "homepage",
-    "blog",
-    "generator",
+    "static site generator",
+    "lightweight",
     "vue",
     "vite"
   ],

package/{template → src/app}/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WithU</title>
+    <title>PageWithU</title>
     <link rel="icon" type="image/svg" href="/src/assets/bulb.svg">
     <script>
         (function () {

package/{template → src/app}/src/app.vue

@@ -41,12 +41,18 @@
 
 
         <footer>
-            <p>&copy; {{ userConfig.year }} {{ userConfig.author }}</p>
-            <div class="footer-links">
-                <template v-for="(link, index) in userConfig.footerLinks" :key="link.label">
-                    <a :href="link.url">{{ link.label }}</a>
-                    <span v-if="index < userConfig.footerLinks.length - 1" class="separator">&middot;</span>
-                </template>
+            <div class="footer-content">
+                <div class="footer-meta">
+                    <p>&copy; {{ userConfig.year }} {{ userConfig.author }}</p>
+                    <div class="footer-links">
+                        <template v-for="(link, index) in userConfig.footerLinks" :key="link.label">
+                            <a :href="link.url">{{ link.label }}</a>
+                            <span v-if="index < userConfig.footerLinks.length - 1" class="separator">&middot;</span>
+                        </template>
+                    </div>
+                </div>
+                <p class="made-with-page-withu">Made with <a href="https://github.com/Explorer-Dong/page-withu" target="_blank"
+                        rel="noreferrer">PageWithU</a></p>
             </div>
         </footer>
     </main>
@@ -57,8 +63,8 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import userConfig from '@page-withu/user-config'
 import ThemeToggle from './components/theme_toggle.vue'
 import SiteCard from './components/site_card.vue'
-import BlogList from './components/blog-list.vue'
-import BlogDetail from './components/blog-detail.vue'
+import BlogList from './components/blog_list.vue'
+import BlogDetail from './components/blog_detail.vue'
 import { frontmatter as domainsFrontmatter } from '@page-withu/user-content/domains.md'
 import { sections as aboutSections } from '@page-withu/user-content/index.md'
 import defaultFavicon from './assets/bulb.svg'
@@ -67,13 +73,14 @@ const blogModules = import.meta.glob('@page-withu/user-content/blog/*.md', { eag
 const validPages = ['about', 'domains', 'blog']
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '')
 const navItems = [
-    { page: 'domains', label: 'Domains' },
-    { page: 'blog', label: 'Blog' },
+    { page: 'about', label: '主页' },
+    { page: 'domains', label: '项目' },
+    { page: 'blog', label: '博客' },
 ]
 
 const domainsTitle = domainsFrontmatter.title || 'Domains'
 const sites = domainsFrontmatter.sites || []
-const tabTitle = userConfig.tabTitle || userConfig.title || 'WithU'
+const tabTitle = userConfig.tabTitle || userConfig.title || 'PageWithU'
 const favicon = userConfig.favicon === '/src/assets/bulb.svg' ? defaultFavicon : userConfig.favicon || defaultFavicon
 
 function applyDocumentMeta() {

package/{template/src/components/blog-detail.vue → src/app/src/components/blog_detail.vue}

@@ -3,13 +3,13 @@
         <a class="blog-back" :href="blogHref" @click.prevent="$emit('back')">← Back to all posts</a>
         <div :class="['blog-article-layout', { 'without-toc': !toc.length }]">
             <div class="blog-article-main">
-                <header class="blog-article-header">
+                <div class="blog-article-header">
                     <h1 class="markdown-body">{{ post.title }}</h1>
                     <div class="blog-meta">
                         <time :datetime="post.date">{{ formatDate(post.date) }}</time>
                         <span v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</span>
                     </div>
-                </header>
+                </div>
 
                 <div ref="contentRef" class="markdown-body" @click="openImage" v-html="post.html"></div>
 
@@ -35,10 +35,12 @@
                     <button class="blog-toc-close" type="button" aria-label="Close table of contents"
                         @click="tocOpen = false">×</button>
                 </div>
-                <a v-for="item in toc" :key="item.id" :href="`#${item.id}`"
-                    :class="[`toc-level-${item.level}`, { active: activeHeading === item.id }]" @click="tocOpen = false">
-                    {{ item.title }}
-                </a>
+                <div class="blog-toc-links">
+                    <a v-for="item in toc" :key="item.id" :href="`#${item.id}`"
+                        :class="[`toc-level-${item.level}`, { active: activeHeading === item.id }]" @click="tocOpen = false">
+                        {{ item.title }}
+                    </a>
+                </div>
             </aside>
         </div>
 

package/{template → src/app}/src/styles/main.css

@@ -165,63 +165,115 @@ main {
 }
 
 /* ===== Header ===== */
-header {
+main > header {
+    position: sticky;
+    top: 16px;
+    z-index: 80;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 24px;
+    width: min(100%, 720px);
+    margin: 0 auto;
+    padding: 6px 8px 6px 20px;
+    border: 1px solid var(--color-card-border);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.85);
+    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(18px) saturate(1.35);
+    -webkit-backdrop-filter: blur(18px) saturate(1.35);
+}
+
+[data-theme="dark"] main > header,
+:root:not([data-theme="light"]) main > header {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(18, 18, 18, 0.78);
+    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+main > header::before {
+    content: none;
 }
 
 .site-title {
-    font-size: 1.45rem;
-    font-weight: 750;
-    color: var(--color-heading);
+    flex: 0 0 auto;
+    max-width: 180px;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.95rem;
+    font-weight: 800;
     text-decoration: none;
     margin: 0;
     padding: 0;
     background: none;
 }
 
+[data-theme="dark"] .site-title,
+:root:not([data-theme="light"]) .site-title {
+    color: #fff;
+}
+
 .site-title:hover {
-    color: var(--color-heading);
+    color: var(--color-link);
     background: none;
 }
 
+[data-theme="dark"] .site-title:hover,
+:root:not([data-theme="light"]) .site-title:hover {
+    color: #fff;
+}
+
 .header-actions {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 24px;
+    min-width: 0;
 }
 
 /* ===== Navigation Bar ===== */
 .nav-bar {
     display: flex;
-    gap: 4px;
-    padding: 4px;
-    border: 1px solid var(--color-card-border);
-    border-radius: 999px;
-    background: var(--color-card-bg);
+    align-items: center;
+    gap: 24px;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
 }
 
 .nav-item {
-    padding: 5px 12px;
+    padding: 6px 0;
     font-size: 0.9rem;
-    font-weight: 500;
+    font-weight: 650;
     color: var(--color-subtext);
     text-decoration: none;
-    border-radius: 999px;
-    transition: color 0.2s ease, background-color 0.2s ease;
+    border-radius: 0;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
     background: none;
+    white-space: nowrap;
 }
 
-.nav-item:hover {
-    color: var(--color-text);
-    background: var(--color-link-hover-bg);
+[data-theme="dark"] .nav-item,
+:root:not([data-theme="light"]) .nav-item {
+    color: rgba(255, 255, 255, 0.68);
 }
 
+.nav-item:hover,
 .nav-item.active {
-    color: var(--color-link);
-    background: var(--color-link-active-bg);
+    color: var(--color-text);
+    background: none;
+    text-shadow: none;
+}
+
+[data-theme="dark"] .nav-item:hover,
+[data-theme="dark"] .nav-item.active,
+:root:not([data-theme="light"]) .nav-item:hover,
+:root:not([data-theme="light"]) .nav-item.active {
+    color: #fff;
+    text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
 }
 
 /* ===== Section Titles ===== */
@@ -398,6 +450,17 @@ footer p {
     margin-bottom: 6px;
 }
 
+.footer-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.footer-meta {
+    min-width: 0;
+}
+
 .footer-links {
     display: flex;
     align-items: center;
@@ -419,40 +482,75 @@ footer p {
     color: var(--color-separator);
 }
 
+.made-with-page-withu {
+    flex-shrink: 0;
+    margin: 0;
+    color: var(--color-footer-text);
+    font-size: 0.85rem;
+    text-align: right;
+    white-space: nowrap;
+}
+
+.made-with-page-withu a {
+    color: var(--color-footer-link);
+    font-weight: 600;
+}
+
+.made-with-page-withu a:hover {
+    color: var(--color-footer-link-hover);
+    background: var(--color-footer-link-hover-bg);
+}
+
 /* ===== Theme Toggle ===== */
 .theme-toggle {
-    width: 38px;
-    height: 38px;
-    border: 1px solid var(--color-card-border);
+    width: 34px;
+    height: 34px;
+    border: none;
     border-radius: 50%;
-    background: var(--color-card-bg);
+    background: transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
-    box-shadow: 0 1px 4px var(--color-card-active-shadow);
+    transition: background-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
+    color: var(--color-subtext);
+}
+
+[data-theme="dark"] .theme-toggle,
+:root:not([data-theme="light"]) .theme-toggle {
+    color: rgba(255, 255, 255, 0.68);
 }
 
 .theme-toggle:hover {
-    border-color: var(--color-card-hover-border);
-    box-shadow: 0 2px 8px var(--color-card-hover-shadow);
-    transform: scale(1.05);
+    background: var(--color-link-hover-bg);
+    color: var(--color-text);
+    text-shadow: none;
+}
+
+[data-theme="dark"] .theme-toggle:hover,
+:root:not([data-theme="light"]) .theme-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
 }
 
 .theme-toggle:active {
-    transform: scale(0.95);
+    transform: scale(0.92);
 }
 
 .theme-toggle svg {
-    width: 19px;
-    height: 19px;
+    width: 18px;
+    height: 18px;
     fill: none;
-    stroke: var(--color-subtext);
+    stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
-    transition: stroke 0.3s ease;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle:hover svg {
+    transform: rotate(15deg);
 }
 
 .theme-toggle .icon-sun {
@@ -553,6 +651,39 @@ footer p {
     padding: 16px;
     overflow-x: auto;
     margin-bottom: 1em;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.markdown-body pre:hover {
+    scrollbar-color: color-mix(in srgb, var(--color-subtext) 45%, transparent) transparent;
+}
+
+.markdown-body pre::-webkit-scrollbar {
+    height: 4px;
+}
+
+.markdown-body pre::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+.markdown-body pre::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.markdown-body pre::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 999px;
+}
+
+.markdown-body pre:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-subtext) 42%, transparent);
+}
+
+.markdown-body pre::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-subtext) 62%, transparent);
 }
 
 .markdown-body pre code {
@@ -1007,12 +1138,53 @@ footer p {
     flex-direction: column;
     gap: 8px;
     max-height: calc(100vh - 48px);
-    padding: 0 0 16px 16px;
+    padding: 0 4px 16px 16px;
     border-left: 1px solid var(--color-footer-border);
-    overflow-y: auto;
+    overflow: hidden;
     font-size: 0.84rem;
 }
 
+.blog-toc-links {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.blog-toc-links:hover {
+    scrollbar-color: color-mix(in srgb, var(--color-subtext) 45%, transparent) transparent;
+}
+
+.blog-toc-links::-webkit-scrollbar {
+    width: 4px;
+}
+
+.blog-toc-links::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+.blog-toc-links::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.blog-toc-links::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 999px;
+}
+
+.blog-toc-links:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-subtext) 42%, transparent);
+}
+
+.blog-toc-links::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-subtext) 62%, transparent);
+}
+
 .blog-toc-header {
     display: flex;
     align-items: center;
@@ -1204,14 +1376,34 @@ footer p {
         gap: 28px;
     }
 
-    header {
-        align-items: flex-start;
-        flex-direction: column;
+    main > header {
+        top: 12px;
+        gap: 18px;
+        width: 100%;
+        padding: 8px 10px 8px 18px;
     }
 
     .header-actions {
-        width: 100%;
-        justify-content: space-between;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        gap: 18px;
+        min-width: 0;
+    }
+
+    .nav-bar {
+        gap: 18px;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .nav-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .theme-toggle {
+        width: 38px;
+        height: 38px;
     }
 }
 
@@ -1227,12 +1419,13 @@ footer p {
     }
 
     .site-title {
-        font-size: 1.3rem;
+        max-width: 120px;
+        font-size: 0.9rem;
     }
 
     .nav-item {
-        padding: 5px 10px;
-        font-size: 0.84rem;
+        padding: 7px 0;
+        font-size: 0.86rem;
     }
 
     .about-section {
@@ -1322,6 +1515,7 @@ footer p {
         box-shadow: var(--shadow-card);
         transform: translate(-50%, -50%);
         display: none;
+        overflow: hidden;
     }
 
     .blog-toc.open {
@@ -1329,12 +1523,11 @@ footer p {
     }
 
     .blog-toc-header {
-        position: sticky;
-        top: -16px;
         margin: -16px -16px 4px;
         padding: 16px;
         background: var(--color-card-bg);
         border-bottom: 1px solid var(--color-footer-border);
+        flex-shrink: 0;
     }
 
     .blog-toc-close {
@@ -1377,3 +1570,27 @@ footer p {
         height: 36px;
     }
 }
+
+@media (max-width: 520px) {
+    main > header {
+        padding-left: 14px;
+        gap: 14px;
+    }
+
+    .site-title {
+        max-width: 80px;
+    }
+
+    .header-actions {
+        gap: 14px;
+    }
+
+    .nav-bar {
+        gap: 14px;
+    }
+
+    .theme-toggle {
+        width: 32px;
+        height: 32px;
+    }
+}

package/{template → src}/vite.config.js

@@ -5,11 +5,12 @@ import { mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
-const runtimeRoot = dirname(fileURLToPath(import.meta.url))
+const sourceRoot = dirname(fileURLToPath(import.meta.url))
+const appRoot = resolve(sourceRoot, 'app')
 const projectRoot = resolve(process.env.PAGE_WITHU_PROJECT_ROOT || process.cwd())
-const packageRuntimeRoot = process.env.PAGE_WITHU_RUNTIME_ROOT
-const dependencyRoot = packageRuntimeRoot ? resolve(packageRuntimeRoot, 'node_modules') : resolve(runtimeRoot, 'node_modules')
-const runtimeRequire = packageRuntimeRoot ? createRequire(resolve(packageRuntimeRoot, 'package.json')) : createRequire(import.meta.url)
+const packageRoot = resolve(sourceRoot, '..')
+const dependencyRoot = resolve(packageRoot, 'node_modules')
+const runtimeRequire = createRequire(import.meta.url)
 const loadRuntimeModule = async (specifier) => import(pathToFileURL(runtimeRequire.resolve(specifier)).href)
 const runtimeModuleAlias = Object.fromEntries([
     'vue',
@@ -214,7 +215,7 @@ export default defineConfig(async () => {
     const userConfig = (await import(`${pathToFileURL(userConfigFile).href}?t=${Date.now()}`)).default
 
     return {
-        root: runtimeRoot,
+        root: appRoot,
         base: basePath,
         cacheDir,
         resolve: {
@@ -228,7 +229,7 @@ export default defineConfig(async () => {
         server: {
             port: 5500,
             fs: {
-                allow: [runtimeRoot, projectRoot, dependencyRoot],
+                allow: [appRoot, projectRoot, dependencyRoot],
             },
         },
         build: {