my_nuxt_blog/README.md
2026-06-08 19:59:34 +08:00

1.3 KiB
Raw Permalink Blame History

my-nuxt-blogNuxt 3

一个基于 Nuxt 3 + Nuxt Content 的个人博客项目,支持中英文内容分离与浅色/深色主题切换。

功能特性

  • 内容驱动:使用 @nuxt/content,文章以 Markdown 形式存放在仓库中
  • 多语言@nuxtjs/i18nzh / en,路由前缀模式)
  • 主题切换:浅色 / 深色模式(本地持久化,并支持跟随系统偏好作为初始值)
  • 代码高亮Shikigithub-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