@x-withu/page-withu 0.1.2 → 1.1.0

package/README.md

@@ -41,18 +41,16 @@
 # 安装 page-withu
 npm install -g @x-withu/page-withu
 
-# 创建项目（会依次询问站点标题、作者名、标签页标题、favicon、GitHub 链接和邮箱）
-page-withu create my-homepage
+# 创建项目，默认配置会写入 config.js，后续可自行编辑
+page-withu new my-homepage
 
-# 也可以通过参数直接指定
-page-withu create my-homepage --title "My Site" --tab-title "My Blog" --favicon /favicon.svg
-
-# 安装依赖
 cd my-homepage
-npm install
 
-# 预览网站
-npm run dev
+# 本地预览
+page-withu serve
+
+# 构建分发产物
+page-withu build
 ```
 
 下一步？[配置网站](./docs/setup.md)、[部署网站](./docs/deploy.md)、[开发网站](./docs/develop.md)。

package/bin/page-withu.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
-import { createHash } from 'node:crypto';
+import { spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
 import { Command } from 'commander';
-import inquirer from 'inquirer';
 import fs from 'fs-extra';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -12,120 +12,16 @@ const pkg = await fs.readJson(new URL('../package.json', import.meta.url));
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const templateDir = path.resolve(__dirname, '../template');
-const manifestName = '.page-withu.json';
-const managedRoots = ['src'];
-const managedFiles = ['index.html', 'vite.config.js'];
-const generatedGitignore = `node_modules/
-dist/
-
-.env
-.env.*
-!.env.example
-*.local
-
-.DS_Store
-.idea/
-`;
-
+const packageRoot = path.resolve(__dirname, '..');
+const templateDir = path.join(packageRoot, 'template');
+const viteConfigPath = path.join(templateDir, 'vite.config.js');
+const require = createRequire(import.meta.url);
+const vitePackageDir = path.dirname(require.resolve('vite/package.json'));
+const viteBin = path.join(vitePackageDir, 'bin/vite.js');
 const program = new Command();
 
-function hashContent(content) {
-    return createHash('sha256').update(content).digest('hex');
-}
-
-async function hashFile(filePath) {
-    return hashContent(await fs.readFile(filePath));
-}
-
-function toPosixPath(value) {
-    return value.split(path.sep).join('/');
-}
-
-async function listFiles(dir) {
-    const entries = await fs.readdir(dir, { withFileTypes: true });
-    const files = [];
-
-    for (const entry of entries) {
-        const entryPath = path.join(dir, entry.name);
-        if (entry.isDirectory()) {
-            files.push(...await listFiles(entryPath));
-        } else if (entry.isFile()) {
-            files.push(entryPath);
-        }
-    }
-
-    return files;
-}
-
-async function listManagedTemplateFiles() {
-    const files = [];
-
-    for (const file of managedFiles) {
-        if (await fs.pathExists(path.join(templateDir, file))) files.push(file);
-    }
-
-    for (const root of managedRoots) {
-        const rootPath = path.join(templateDir, root);
-        if (!await fs.pathExists(rootPath)) continue;
-        const rootFiles = await listFiles(rootPath);
-        files.push(...rootFiles.map((file) => toPosixPath(path.relative(templateDir, file))));
-    }
-
-    return files.sort((a, b) => a.localeCompare(b));
-}
-
-async function createManifest(projectDir, previousManifest = null) {
-    const files = {};
-
-    for (const file of await listManagedTemplateFiles()) {
-        const projectFile = path.join(projectDir, file);
-        const templateFile = path.join(templateDir, file);
-        if (!await fs.pathExists(projectFile)) continue;
-
-        const projectHash = await hashFile(projectFile);
-        const templateHash = await hashFile(templateFile);
-        if (projectHash === templateHash) {
-            files[file] = templateHash;
-        } else if (previousManifest?.files?.[file]) {
-            files[file] = previousManifest.files[file];
-        }
-    }
-
-    return {
-        templateVersion: pkg.version,
-        updatedAt: new Date().toISOString(),
-        files,
-    };
-}
-
-async function writeManifest(projectDir, dryRun, previousManifest = null) {
-    const manifest = await createManifest(projectDir, previousManifest);
-    if (!dryRun) {
-        await fs.writeJson(path.join(projectDir, manifestName), manifest, { spaces: 2 });
-    }
-    return manifest;
-}
-
-function renderConfig({ title, tabTitle, favicon, author, footerLinks }) {
-    const links = footerLinks.map((link) => `        { label: ${JSON.stringify(link.label)}, url: ${JSON.stringify(link.url)} }`);
-    return `export default {
-    title: ${JSON.stringify(title)},
-    tabTitle: ${JSON.stringify(tabTitle)},
-    favicon: ${JSON.stringify(favicon)},
-    author: ${JSON.stringify(author)},
-    year: new Date().getFullYear(),
-    footerLinks: [
-${links.join(',\n')}
-    ],
-    pagination: {
-        pageSize: 5
-    }
-}`;
-}
-
 async function detectProject(projectDir) {
-    const required = ['package.json', 'config.js', 'content', 'src', 'vite.config.js'];
+    const required = ['config.js', 'content/index.md', 'content/domains.md'];
     const missing = [];
 
     for (const item of required) {
@@ -135,277 +31,85 @@ async function detectProject(projectDir) {
     return missing;
 }
 
-async function loadManifest(projectDir) {
-    const manifestPath = path.join(projectDir, manifestName);
-    if (!await fs.pathExists(manifestPath)) return null;
-    return fs.readJson(manifestPath);
-}
-
-async function ensureGeneratedGitignore(projectDir, dryRun) {
-    const gitignorePath = path.join(projectDir, '.gitignore');
-    const npmignorePath = path.join(projectDir, '.npmignore');
-    const hasGitignore = await fs.pathExists(gitignorePath);
-    const hasNpmignore = await fs.pathExists(npmignorePath);
-
-    if (dryRun) return !hasGitignore || hasNpmignore;
-    if (hasNpmignore) await fs.remove(npmignorePath);
-    if (!hasGitignore) await fs.writeFile(gitignorePath, generatedGitignore);
-
-    return !hasGitignore || hasNpmignore;
-}
-
-async function shouldOverwriteConflict(file, options) {
-    if (options.force) return true;
-    if (options.yes || options.dryRun) return false;
-
-    const answer = await inquirer.prompt([{
-        type: 'confirm',
-        name: 'overwrite',
-        message: `${file} has local changes. Overwrite it?`,
-        default: false,
-    }]);
-
-    return answer.overwrite;
-}
-
-async function planTemplateUpdates(projectDir, options) {
-    const manifest = await loadManifest(projectDir);
-    const files = await listManagedTemplateFiles();
-    const result = {
-        added: [],
-        updated: [],
-        skipped: [],
-        unchanged: [],
-    };
-
-    for (const file of files) {
-        const sourceFile = path.join(templateDir, file);
-        const targetFile = path.join(projectDir, file);
-        const sourceHash = await hashFile(sourceFile);
-        const exists = await fs.pathExists(targetFile);
-
-        if (!exists) {
-            result.added.push(file);
-            if (!options.dryRun) await fs.copy(sourceFile, targetFile);
-            continue;
-        }
-
-        const currentHash = await hashFile(targetFile);
-        if (currentHash === sourceHash) {
-            result.unchanged.push(file);
-            continue;
-        }
+async function createProject(projectName = 'my-homepage') {
+    const targetDir = projectName.trim() || 'my-homepage';
+    const fullPath = path.resolve(process.cwd(), targetDir);
 
-        const previousHash = manifest?.files?.[file];
-        const safeToUpdate = previousHash && currentHash === previousHash;
-        const overwrite = safeToUpdate || await shouldOverwriteConflict(file, options);
-
-        if (overwrite) {
-            result.updated.push(file);
-            if (!options.dryRun) await fs.copy(sourceFile, targetFile);
-        } else {
-            result.skipped.push(file);
-        }
+    if (await fs.pathExists(fullPath)) {
+        console.error(chalk.red(`\nError: Directory ${targetDir} already exists.`));
+        process.exit(1);
     }
 
-    return result;
-}
-
-function mergeSection(projectPkg, templatePkg, key) {
-    const next = { ...(projectPkg[key] || {}) };
-    let changed = false;
-
-    for (const [name, value] of Object.entries(templatePkg[key] || {})) {
-        if (next[name] !== value) {
-            next[name] = value;
-            changed = true;
-        }
+    const spinner = ora('Creating project...').start();
+
+    try {
+        await fs.ensureDir(fullPath);
+        await fs.copy(path.join(templateDir, 'config.js'), path.join(fullPath, 'config.js'));
+        await fs.copy(path.join(templateDir, 'content'), path.join(fullPath, 'content'));
+        await fs.ensureDir(path.join(fullPath, 'content/blog'));
+
+        spinner.succeed(chalk.green(`Successfully created PageWithU project in ${targetDir}!`));
+        console.log('\nNext steps:');
+        console.log(chalk.cyan(`  cd ${targetDir}`));
+        console.log(chalk.cyan('  page-withu serve'));
+        console.log(chalk.cyan('  page-withu build\n'));
+    } catch (err) {
+        spinner.fail(chalk.red('Failed to create project.'));
+        console.error(err);
+        process.exit(1);
     }
-
-    if (changed) projectPkg[key] = next;
-    return changed;
 }
 
-async function mergePackage(projectDir, dryRun) {
-    const projectPkgPath = path.join(projectDir, 'package.json');
-    const templatePkg = await fs.readJson(path.join(templateDir, 'package.json'));
-    const projectPkg = await fs.readJson(projectPkgPath);
-    const before = JSON.stringify(projectPkg);
-
-    mergeSection(projectPkg, templatePkg, 'scripts');
-    mergeSection(projectPkg, templatePkg, 'dependencies');
-    mergeSection(projectPkg, templatePkg, 'devDependencies');
-
-    const changed = JSON.stringify(projectPkg) !== before;
-    if (changed && !dryRun) {
-        await fs.writeJson(projectPkgPath, projectPkg, { spaces: 2 });
+async function runVite(command, args) {
+    const projectRoot = process.cwd();
+    const missing = await detectProject(projectRoot);
+    if (missing.length) {
+        console.error(chalk.red('Current directory does not look like a PageWithU project.'));
+        console.error(chalk.yellow(`Missing: ${missing.join(', ')}`));
+        process.exit(1);
     }
 
-    return changed;
-}
-
-function printUpdateSummary(summary, dryRun) {
-    const label = dryRun ? 'Would update' : 'Updated';
+    const viteArgs = command === 'serve'
+        ? ['--config', viteConfigPath, ...args]
+        : ['build', '--config', viteConfigPath, ...args];
+    const child = spawn(process.execPath, [viteBin, ...viteArgs], {
+        cwd: projectRoot,
+        stdio: 'inherit',
+        env: {
+            ...process.env,
+            PAGE_WITHU_PROJECT_ROOT: projectRoot,
+        },
+    });
 
-    if (summary.added.length) console.log(chalk.green(`${label} ${summary.added.length} missing file(s).`));
-    if (summary.updated.length) console.log(chalk.green(`${label} ${summary.updated.length} template file(s).`));
-    if (summary.packageChanged) console.log(chalk.green(`${label} package.json dependencies and scripts.`));
-    if (summary.gitignoreChanged) console.log(chalk.green(`${label} .gitignore.`));
-    if (summary.skipped.length) {
-        console.log(chalk.yellow(`Skipped ${summary.skipped.length} file(s) with local changes:`));
-        for (const file of summary.skipped) console.log(chalk.yellow(`  - ${file}`));
-    }
-    if (!summary.added.length && !summary.updated.length && !summary.packageChanged && !summary.gitignoreChanged && !summary.skipped.length) {
-        console.log(chalk.green('Page With U project is already up to date.'));
-    }
-    if (!dryRun && (summary.added.length || summary.updated.length || summary.packageChanged || summary.gitignoreChanged)) {
-        console.log(chalk.cyan('\nNext steps:'));
-        console.log(chalk.cyan('  npm install'));
-        console.log(chalk.cyan('  npm run build'));
-    }
+    child.on('exit', (code, signal) => {
+        if (signal) {
+            process.kill(process.pid, signal);
+            return;
+        }
+        process.exit(code ?? 1);
+    });
 }
 
 program
     .name('page-withu')
-    .description('CLI to scaffold a lightweight, elegant personal homepage')
+    .description('CLI to scaffold, preview, and build a lightweight personal homepage')
     .version(pkg.version);
 
 program
-    .command('create [project-name]')
-    .description('create a new PageWithU project')
-    .option('-t, --title <title>', 'site title')
-    .option('--tab-title <title>', 'browser tab title')
-    .option('--favicon <path-or-url>', 'browser tab favicon path or URL')
-    .option('-a, --author <author>', 'author name')
-    .option('-g, --github <github>', 'github url')
-    .option('-e, --email <email>', 'email address')
-    .action(async (projectName, options) => {
-        let targetDir = projectName;
-
-        if (!targetDir) {
-            const answers = await inquirer.prompt([
-                {
-                    type: 'input',
-                    name: 'projectName',
-                    message: 'What is your project named?',
-                    default: 'my-homepage',
-                },
-            ]);
-            targetDir = answers.projectName;
-        }
-
-        const fullPath = path.resolve(process.cwd(), targetDir);
-
-        if (fs.existsSync(fullPath)) {
-            console.error(chalk.red(`\nError: Directory ${targetDir} already exists.`));
-            process.exit(1);
-        }
-
-        const title = options.title || (await inquirer.prompt([{
-            type: 'input',
-            name: 'title',
-            message: 'Site Title:',
-            default: 'PageWithU',
-        }])).title;
-
-        const author = options.author || (await inquirer.prompt([{
-            type: 'input',
-            name: 'author',
-            message: 'Author Name:',
-            default: 'Your Name',
-        }])).author;
-
-        const tabTitle = options.tabTitle || (await inquirer.prompt([{
-            type: 'input',
-            name: 'tabTitle',
-            message: 'Browser Tab Title:',
-            default: title,
-        }])).tabTitle;
-
-        const favicon = options.favicon || (await inquirer.prompt([{
-            type: 'input',
-            name: 'favicon',
-            message: 'Favicon path or URL:',
-            default: '/src/assets/bulb.svg',
-        }])).favicon;
-
-        const github = options.github !== undefined ? options.github : (await inquirer.prompt([{
-            type: 'input',
-            name: 'github',
-            message: 'GitHub URL (optional):',
-        }])).github;
-
-        const email = options.email !== undefined ? options.email : (await inquirer.prompt([{
-            type: 'input',
-            name: 'email',
-            message: 'Email (optional):',
-        }])).email;
-
-        const spinner = ora('Creating project...').start();
-
-        try {
-            await fs.copy(templateDir, fullPath);
-
-            const footerLinks = [];
-            if (github) footerLinks.push({ label: 'GitHub', url: github });
-            if (email) footerLinks.push({ label: 'Email', url: `mailto:${email}` });
-
-            await fs.writeFile(path.join(fullPath, 'config.js'), renderConfig({ title, tabTitle, favicon, author, footerLinks }));
-
-            const pkgPath = path.join(fullPath, 'package.json');
-            const projectPkg = await fs.readJson(pkgPath);
-            projectPkg.name = targetDir.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-            await fs.writeJson(pkgPath, projectPkg, { spaces: 2 });
-
-            await fs.ensureDir(path.join(fullPath, 'content/blog'));
-            await ensureGeneratedGitignore(fullPath, false);
-            await writeManifest(fullPath, false);
-
-            spinner.succeed(chalk.green(`Successfully created PageWithU project in ${targetDir}!`));
-            console.log('\nNext steps:');
-            console.log(chalk.cyan(`  cd ${targetDir}`));
-            console.log(chalk.cyan('  npm install'));
-            console.log(chalk.cyan('  npm run dev\n'));
-
-        } catch (err) {
-            spinner.fail(chalk.red('Failed to create project.'));
-            console.error(err);
-            process.exit(1);
-        }
-    });
+    .command('new [project-name]')
+    .description('create a new PageWithU project with the default content and config')
+    .action(createProject);
 
 program
-    .command('update')
-    .description('update an existing PageWithU project with the latest template')
-    .option('--dry-run', 'show what would change without writing files')
-    .option('--yes', 'skip prompts and apply safe updates')
-    .option('--force', 'overwrite changed template-managed files')
-    .action(async (options) => {
-        const projectDir = process.cwd();
-        const spinner = ora(options.dryRun ? 'Checking project update...' : 'Updating project...').start();
-
-        try {
-            const missing = await detectProject(projectDir);
-            if (missing.length) {
-                spinner.fail(chalk.red('Current directory does not look like a PageWithU project.'));
-                console.error(chalk.yellow(`Missing: ${missing.join(', ')}`));
-                process.exit(1);
-            }
+    .command('serve [args...]')
+    .description('start local preview for the current PageWithU project')
+    .allowUnknownOption(true)
+    .action((args = []) => runVite('serve', args));
 
-            spinner.stop();
-            const previousManifest = await loadManifest(projectDir);
-            const updates = await planTemplateUpdates(projectDir, options);
-            const packageChanged = await mergePackage(projectDir, options.dryRun);
-            const gitignoreChanged = await ensureGeneratedGitignore(projectDir, options.dryRun);
-
-            if (!options.dryRun) await writeManifest(projectDir, false, previousManifest);
-
-            printUpdateSummary({ ...updates, packageChanged, gitignoreChanged }, options.dryRun);
-        } catch (err) {
-            spinner.fail(chalk.red('Failed to update project.'));
-            console.error(err);
-            process.exit(1);
-        }
-    });
+program
+    .command('build [args...]')
+    .description('build dist assets for the current PageWithU project')
+    .allowUnknownOption(true)
+    .action((args = []) => runVite('build', args));
 
 program.parse();

package/docs/deploy.md

@@ -7,7 +7,7 @@
 构建生产版本：
 
 ```bash
-npm run build
+page-withu build
 ```
 
 构建产物会输出到：
@@ -28,10 +28,10 @@ blog/<slug>.html
 
 这样可以直接部署到 GitHub Pages、Cloudflare Pages、OSS 等对象存储上。
 
-预览生产版本：
+预览生产版本可以在构建后用任意静态服务器打开 `dist/`，例如：
 
 ```bash
-npm run preview
+npx serve dist
 ```
 
 如果觉得没什么问题，就可以把这些文件上传到服务器进行部署了。
@@ -75,9 +75,8 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: npm
-      - run: npm ci
-      - run: npm run build
+      - run: npm install -g @x-withu/page-withu
+      - run: page-withu build
       - uses: actions/upload-pages-artifact@v3
         with:
           path: dist
@@ -104,7 +103,7 @@ Settings → Pages → Build and deployment → Source → GitHub Actions
 如果仓库名不是用于根域名的 `用户名.github.io`，通常需要给构建命令设置子路径。例如仓库名是 `my-homepage`：
 
 ```yaml
-- run: BASE_PATH=/my-homepage/ npm run build
+- run: BASE_PATH=/my-homepage/ page-withu build
 ```
 
 ### 方式二：手动上传 dist
@@ -112,7 +111,7 @@ Settings → Pages → Build and deployment → Source → GitHub Actions
 如果不想使用 GitHub Actions，也可以本地构建后手动上传 `dist/`。
 
 ```bash
-npm run build
+page-withu build
 ```
 
 然后把 `dist/` 内容上传到用于 GitHub Pages 的发布分支或目录。
@@ -132,7 +131,7 @@ Cloudflare Pages 适合托管静态站点，并且可以自动连接 GitHub 仓
 
 ```text
 Framework preset: None 或 Vue
-Build command: npm run build
+Build command: npm install -g @x-withu/page-withu && page-withu build
 Build output directory: dist
 Root directory: /
 ```
@@ -177,7 +176,7 @@ Root directory: /
 本地构建：
 
 ```bash
-npm run build
+page-withu build
 ```
 
 然后把 `dist/` 中的所有文件上传到 Bucket 根目录。
@@ -201,7 +200,7 @@ ossutil cp -r dist/ oss://your-bucket-name/ --update
 每次更新内容后重新执行：
 
 ```bash
-npm run build
+page-withu build
 ossutil cp -r dist/ oss://your-bucket-name/ --update
 ```
 

package/docs/develop.md

@@ -9,7 +9,7 @@ Page With U 的目标是保持轻量、清晰、容易定制。开发时建议
 - 优先修改已有文件，不要为了小功能引入复杂架构。
 - 模板默认配置要适合大多数用户开箱即用。
 - 文档中的用户流程要始终和 CLI 行为保持一致。
-- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `npm run build`。
+- 修改 `template/` 后，需要用模板本身或新生成项目执行一次 `page-withu build`。
 - 不要引入大型 UI 框架，样式优先维护在 `template/src/styles/main.css`。
 - Markdown 能力优先在 `template/vite.config.js` 中集中处理，避免分散到多个组件。
 
@@ -21,12 +21,11 @@ page-withu/
 │   └── page-withu.js     # CLI 入口
 ├── docs/                 # 使用、部署、开发文档
 ├── template/
-│   ├── config.js         # 模板默认配置
-│   ├── content/          # 模板默认内容
-│   ├── src/              # Vue 应用源码
-│   ├── vite.config.js    # Markdown 渲染与静态路由生成
-│   └── package.json      # 生成项目后的应用依赖
-├── package.json          # page-withu CLI 自身配置
+│   ├── config.js         # 新项目默认配置
+│   ├── content/          # 新项目默认内容
+│   ├── src/              # 包内 Vue 运行时源码
+│   └── vite.config.js    # 包内 Markdown 渲染与静态路由生成
+├── package.json          # page-withu CLI 与运行时依赖配置
 └── README.md
 ```
 
@@ -46,18 +45,18 @@ bin/page-withu.js
 
 当前 CLI 主要负责：
 
-1. 读取命令行参数或交互式输入。
-2. 复制 `template/` 到目标目录。
-3. 根据用户输入生成目标项目的 `config.js`。
-4. 修改目标项目 `package.json` 的 `name` 字段。
-5. 输出下一步命令提示。
+1. `new`：复制默认 `config.js` 和 `content/` 到目标目录。
+2. `serve`：用当前安装的包内运行时，在当前主页项目中启动本地预览。
+3. `build`：用当前安装的包内运行时，在当前主页项目中构建 `dist` 产物。
 
 本地调试 CLI：
 
 ```bash
 node bin/page-withu.js --help
-node bin/page-withu.js create my-homepage
-node bin/page-withu.js update --dry-run
+node bin/page-withu.js new my-homepage
+cd my-homepage
+node /path/to/page-withu/bin/page-withu.js serve
+node /path/to/page-withu/bin/page-withu.js build
 ```
 
 如果想全局挂载本地版本：
@@ -65,14 +64,12 @@ node bin/page-withu.js update --dry-run
 ```bash
 npm link
 page-withu --help
-page-withu create my-homepage
+page-withu new my-homepage
 ```
 
-新增 CLI 参数时，通常需要同步修改：
+调整 CLI 行为时，通常需要同步修改：
 
-- `bin/page-withu.js` 中的 commander option。
-- 交互式 prompt 的默认值。
-- 生成 `config.js` 的逻辑。
+- `bin/page-withu.js` 中的 commander command。
 - 必要时修改 `template/config.js` 的默认字段。
 - 必要时修改模板中读取配置的 Vue 组件。
 - 必要时更新 `README.md` 和 `docs/setup.md`。
@@ -82,13 +79,12 @@ page-withu create my-homepage
 ```bash
 mkdir -p /tmp/page-withu-test
 cd /tmp/page-withu-test
-node /path/to/page-withu/bin/page-withu.js create demo-site --title "Demo" --author "Tester"
+node /path/to/page-withu/bin/page-withu.js new demo-site
 cd demo-site
-npm install
-npm run build
+node /path/to/page-withu/bin/page-withu.js build
 ```
 
-如果 `npm run build` 成功，说明模板可以被正常生成和构建。
+如果构建成功，说明内容型项目可以通过包内运行时正常生成。
 
 ## 开发 Template
 
@@ -102,8 +98,7 @@ template/
 
 ```bash
 cd template
-npm install
-npm run dev
+node ../bin/page-withu.js serve
 ```
 
 常见开发位置：
@@ -127,7 +122,7 @@ npm run dev
 
 ```bash
 cd template
-npm run build
+node ../bin/page-withu.js build
 ```
 
 如果改动影响脚手架生成后的项目，还需要用 CLI 重新生成一个临时项目并构建。
@@ -202,11 +197,11 @@ npm publish --access public
 
 ```bash
 npm install -g @x-withu/page-withu
-page-withu create my-homepage
+page-withu new my-homepage
 ```
 
 或在线构建无需本地安装：
 
 ```bash
-npx @x-withu/page-withu create my-homepage
+npx @x-withu/page-withu new my-homepage
 ```

package/docs/setup.md

@@ -83,36 +83,21 @@ index_img: https://example.com/cover.jpg
 - `tags`：文章标签。
 - `index_img`：博客列表封面图，可选；不填会保留占位布局。
 
-## 更新项目
+## CLI 命令
 
-如果你已经用 `page-withu create` 创建过项目，后续升级 CLI 后可以在项目目录中更新模板能力：
+Page With U 只提供三个常用命令：
 
 ```bash
-npm install -g @x-withu/page-withu
-cd my-homepage
-page-withu update --dry-run
-page-withu update
+page-withu new my-homepage
+page-withu serve
+page-withu build
 ```
 
-`page-withu update` 会更新模板管理的文件，例如 `src/`、`index.html` 和 `vite.config.js`，并合并 `package.json` 中模板需要的脚本和依赖。
+- `page-withu new my-homepage`：新建主页项目，所有站点配置都保持模板默认值。
+- `page-withu serve`：使用当前安装的 Page With U 运行时启动本地预览。
+- `page-withu build`：使用当前安装的 Page With U 运行时构建 `dist` 产物。
 
-为了避免覆盖你的内容，以下文件默认不会被更新：
-
-- `config.js`
-- `content/`
-
-如果你修改过模板源码，更新时会跳过有冲突的文件并在终端列出来。确认要覆盖这些模板源码时，可以使用：
-
-```bash
-page-withu update --force
-```
-
-更新完成后建议执行：
-
-```bash
-npm install
-npm run build
-```
+创建完成后，直接编辑 `config.js`、`content/index.md`、`content/domains.md` 和 `content/blog/` 即可定制网站。
 
 ## Markdown
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-withu/page-withu",
-  "version": "0.1.2",
+  "version": "1.1.0",
   "description": "A lightweight, elegant personal homepage generator.",
   "repository": {
     "type": "git",
@@ -16,7 +16,6 @@
     "template/content/",
     "template/src/",
     "template/index.html",
-    "template/package.json",
     "template/vite.config.js",
     "docs/",
     "README.md"
@@ -34,10 +33,20 @@
   "author": "Explorer-Dong",
   "license": "MIT",
   "dependencies": {
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@vitejs/plugin-vue": "^5.2.3",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "fs-extra": "^11.2.0",
-    "inquirer": "^9.3.2",
-    "ora": "^8.0.1"
+    "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",
+    "ora": "^8.0.1",
+    "vite": "^6.3.1",
+    "vue": "^3.5.13"
   }
 }

package/template/config.js

@@ -5,7 +5,7 @@ export default {
     author: "Your Name",
     year: new Date().getFullYear(),
     footerLinks: [
-        { label: 'GitHub', url: 'https://github.com' },
+        { label: 'GitHub', url: 'https://github.com/Explorer-Dong/page-withu' },
         { label: 'Email', url: 'mailto:youremail@example.com' }
     ],
     pagination: {

package/template/src/app.vue

@@ -54,16 +54,16 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import userConfig from '../config.js'
+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 { frontmatter as domainsFrontmatter } from '../content/domains.md'
-import { sections as aboutSections } from '../content/index.md'
+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'
 
-const blogModules = import.meta.glob('../content/blog/*.md', { eager: true })
+const blogModules = import.meta.glob('@page-withu/user-content/blog/*.md', { eager: true })
 const validPages = ['about', 'domains', 'blog']
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '')
 const navItems = [

package/template/src/components/blog-detail.vue

@@ -24,10 +24,19 @@
                 </nav>
             </div>
 
-            <aside v-if="toc.length" class="blog-toc" aria-label="Table of contents">
-                <p>Contents</p>
+            <button v-if="toc.length" class="blog-toc-toggle" type="button" :aria-expanded="tocOpen"
+                aria-controls="blog-toc" @click="tocOpen = true">
+                目录
+            </button>
+            <div v-if="toc.length && tocOpen" class="blog-toc-backdrop" @click="tocOpen = false"></div>
+            <aside v-if="toc.length" id="blog-toc" :class="['blog-toc', { open: tocOpen }]" aria-label="Table of contents">
+                <div class="blog-toc-header">
+                    <p>目录</p>
+                    <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 }]">
+                    :class="[`toc-level-${item.level}`, { active: activeHeading === item.id }]" @click="tocOpen = false">
                     {{ item.title }}
                 </a>
             </aside>
@@ -58,6 +67,7 @@ defineEmits(['back', 'open-post'])
 const contentRef = ref(null)
 const zoomImage = ref(null)
 const activeHeading = ref('')
+const tocOpen = ref(false)
 const basePath = import.meta.env.BASE_URL.replace(/\/$/, '')
 const blogHref = `${basePath}/blog.html` || '/blog.html'
 let mermaidModule
@@ -118,6 +128,7 @@ onMounted(() => {
 onUnmounted(() => window.removeEventListener('scroll', updateActiveHeading))
 
 watch(() => props.post.slug, () => {
+    tocOpen.value = false
     activeHeading.value = props.toc[0]?.id || ''
     nextTick(() => {
         updateActiveHeading()

package/template/src/styles/main.css

@@ -992,6 +992,14 @@ footer p {
     margin-bottom: 8px;
 }
 
+.blog-toc-toggle {
+    display: none;
+}
+
+.blog-toc-backdrop {
+    display: none;
+}
+
 .blog-toc {
     position: sticky;
     top: 24px;
@@ -1005,6 +1013,17 @@ footer p {
     font-size: 0.84rem;
 }
 
+.blog-toc-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.blog-toc-close {
+    display: none;
+}
+
 .blog-toc p {
     margin: 0 0 4px;
     color: var(--color-heading);
@@ -1197,7 +1216,7 @@ footer p {
 }
 
 /* ===== Responsive: Mobile ===== */
-@media (max-width: 480px) {
+@media (max-width: 960px) {
     body {
         padding: 0 16px;
     }
@@ -1258,10 +1277,80 @@ footer p {
         padding-bottom: 16px;
     }
 
+    .blog-article-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .blog-toc-toggle {
+        position: fixed;
+        right: 18px;
+        bottom: 18px;
+        z-index: 88;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 9px 14px;
+        border: 1px solid var(--color-card-border);
+        border-radius: 999px;
+        color: var(--color-heading);
+        background: var(--color-bg);
+        box-shadow: var(--shadow-card);
+        font: inherit;
+        font-size: 0.84rem;
+        cursor: pointer;
+    }
+
+    .blog-toc-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 89;
+        display: block;
+        background: rgba(15, 23, 42, 0.36);
+    }
+
     .blog-toc {
-        position: static;
-        order: -1;
-        padding: 12px 0 12px 14px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        z-index: 90;
+        width: min(calc(100vw - 48px), 320px);
+        max-height: min(70vh, 480px);
+        padding: 16px;
+        border: 1px solid var(--color-card-border);
+        border-radius: 16px;
+        background: var(--color-card-bg);
+        box-shadow: var(--shadow-card);
+        transform: translate(-50%, -50%);
+        display: none;
+    }
+
+    .blog-toc.open {
+        display: flex;
+    }
+
+    .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);
+    }
+
+    .blog-toc-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: 1px solid var(--color-card-border);
+        border-radius: 999px;
+        color: var(--color-subtext);
+        background: var(--color-bg);
+        font: inherit;
+        font-size: 1rem;
+        line-height: 1;
+        cursor: pointer;
     }
 
     .blog-nav {

package/template/vite.config.js

@@ -1,3 +1,5 @@
+import { createHash } from 'node:crypto'
+import { tmpdir } from 'node:os'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import MarkdownIt from 'markdown-it'
@@ -7,9 +9,15 @@ import { full as emoji } from 'markdown-it-emoji'
 import matter from 'gray-matter'
 import hljs from 'highlight.js'
 import { mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import userConfig from './config.js'
-
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+const runtimeRoot = dirname(fileURLToPath(import.meta.url))
+const projectRoot = resolve(process.env.PAGE_WITHU_PROJECT_ROOT || process.cwd())
+const userConfigFile = resolve(projectRoot, 'config.js')
+const userContentDir = resolve(projectRoot, 'content')
+const cacheKey = createHash('sha256').update(projectRoot).digest('hex').slice(0, 12)
+const cacheDir = resolve(tmpdir(), `page-withu-${cacheKey}`)
 const basePath = process.env.BASE_PATH || '/'
 
 function slugify(text) {
@@ -147,14 +155,14 @@ function markdown() {
     }
 }
 
-function staticHtmlRoutes() {
+function staticHtmlRoutes(userConfig) {
     return {
         name: 'static-html-routes',
         apply: 'build',
         closeBundle() {
-            const dist = join(process.cwd(), 'dist')
+            const dist = join(projectRoot, 'dist')
             const index = readFileSync(join(dist, 'index.html'), 'utf8')
-            const blogDir = join(process.cwd(), 'content', 'blog')
+            const blogDir = join(userContentDir, 'blog')
             let blogPosts = []
             try {
                 blogPosts = readdirSync(blogDir)
@@ -164,7 +172,8 @@ function staticHtmlRoutes() {
                 if (e.code !== 'ENOENT') throw e
             }
 
-            const totalPages = Math.max(1, Math.ceil(blogPosts.length / userConfig.pagination.pageSize))
+            const pageSize = userConfig.pagination?.pageSize || 5
+            const totalPages = Math.max(1, Math.ceil(blogPosts.length / pageSize))
             const routes = ['domains.html', 'blog.html']
             for (let page = 2; page <= totalPages; page += 1) routes.push(`blog/page/${page}.html`)
             for (const slug of blogPosts) routes.push(`blog/${slug}.html`)
@@ -178,14 +187,29 @@ function staticHtmlRoutes() {
     }
 }
 
-export default defineConfig({
-    base: basePath,
-    plugins: [vue(), markdown(), staticHtmlRoutes()],
-    server: {
-        port: 5500,
-    },
-    build: {
-        outDir: 'dist',
-        emptyOutDir: true,
-    },
-})
+export default defineConfig(async () => {
+    const userConfig = (await import(`${pathToFileURL(userConfigFile).href}?t=${Date.now()}`)).default
+
+    return {
+        root: runtimeRoot,
+        base: basePath,
+        cacheDir,
+        resolve: {
+            alias: {
+                '@page-withu/user-config': userConfigFile,
+                '@page-withu/user-content': userContentDir,
+            },
+        },
+        plugins: [vue(), markdown(), staticHtmlRoutes(userConfig)],
+        server: {
+            port: 5500,
+            fs: {
+                allow: [runtimeRoot, projectRoot],
+            },
+        },
+        build: {
+            outDir: resolve(projectRoot, 'dist'),
+            emptyOutDir: true,
+        },
+    }
+})

package/template/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "your-homepage-name",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@traptitech/markdown-it-katex": "^3.6.0",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.45",
-    "markdown-it-emoji": "^3.0.0",
-    "markdown-it-footnote": "^4.0.0",
-    "mermaid": "^11.15.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.3",
-    "gray-matter": "^4.0.3",
-    "markdown-it": "^14.1.0",
-    "vite": "^6.3.1"
-  }
-}