站点魔改速查

站点魔改速查

导航、侧栏、页脚这些「一改就乱」的地方分别在哪里配置,以及改动后怎么自测。

 站点魔改
开始阅读
文档目录

配置入口

想改什么改哪里
站点标题 / 副标题 / 作者blog.config.ts 顶部的 basicConfig
导航菜单、图标app/app.config.ts 的 menu
文章分类图标与配色blog.config.ts 的 article.categories
文章类型与版式blog.config.ts 的 article.types
右侧小组件页面里调用 useLayoutStore().setAside([...])

新增一个页面

  1. 在 app/pages 下新建 .vue(文件名即路由)
  2. 需要出现在导航里,就往 app/app.config.ts 的 menu 里加一项:
ts
{ icon: 'ph:books-bold', text: '文档', url: '/wiki' }
  1. 需要静态生成,再加一条 route rule:
ts
'/wiki': { prerender: true },
'/wiki/**': { prerender: true },

改动后怎么自测

  • pnpm dev 下先看控制台有没有 hydration mismatch
  • npx nuxt generate 跑一遍,检查 .output/public/<路由>/index.html 里是不是已有内容
  • ESLint / Stylelint 过一遍,样式属性顺序问题会自动被 stylelint 修掉

::: warning 本项目使用原生 SCSS,不要引入 Tailwind;颜色一律走 --c-* 变量,否则暗色模式会失效。 :::