1.3 KiB
1.3 KiB
my-nuxt-blog(Nuxt 3)
一个基于 Nuxt 3 + Nuxt Content 的个人博客项目,支持中英文内容分离与浅色/深色主题切换。
功能特性
- 内容驱动:使用
@nuxt/content,文章以 Markdown 形式存放在仓库中 - 多语言:
@nuxtjs/i18n(zh/en,路由前缀模式) - 主题切换:浅色 / 深色模式(本地持久化,并支持跟随系统偏好作为初始值)
- 代码高亮:Shiki(
github-light/github-dark)
目录结构
content/
zh/articles/ # 中文文章
en/articles/ # 英文文章
pages/
index.vue # 首页(文章列表)
[...slug].vue # 文章页(动态路由)
about.vue # 关于页
开发与运行
安装依赖:
npm install
本地开发:
npm run dev
构建:
npm run build
预览构建产物:
npm run preview
静态生成(如需要):
npm run generate
写文章
- 中文:在
content/zh/articles/下新增*.md - 英文:在
content/en/articles/下新增*.md
文章 Frontmatter 示例:
---
title: "文章标题"
description: "文章摘要"
date: "2026-06-08"
tags: ["Nuxt", "TypeScript"]
image: ""
---
配置入口
- Nuxt 配置:
nuxt.config.ts - i18n 文案:
i18n.config.ts - 站点信息:
app.config.ts