💎Nuxt3-Blog

English Readme | 中文说明

🚀已通过NitroJS多平台部署（NitroJS是Nuxt3的官方引擎）

Vercel:https://blog.yunyuyuan.net

Cloudflare Page:https://blog-cfpage.yunyuyuan.net

Netlify:https://blog-netlify.yunyuyuan.net

🚀self hosted部署（参考我的文章）

Drone:https://blog-drone-cf.yunyuyuan.net，这里的cf意思是使用cloudflare做内网穿透

博客特性

• 💻 5分钟完成搭建。快速搭建，不用写一行代码。
• 🤝 方便使用。全能的后台管理界面，只需一个token，就可在网页端更新配置，新增/修改/删除博客内容，不用notepad，更不用git push。
• 📷 集成图床。集成smms图床和tinypng图片压缩，网页端一键上传博客图片。
• 🌐 纯静态。打包为纯静态网站，无需后端。
• 🔍 SEO友好。每个HTML页面都是已经渲染完毕的，搜索引擎可收录。
• 🔒 可加密。可以对任意单篇文章/记录/文化加密，也可以对某些内容单独加密，只有输入密码才可查看。
  • 🚪整篇加密:
    
  • 🚪部分加密:
    

教我搭建

详细搭建教程请参考 wiki

博客原理示例：

待开发

特性

• 404页面
• 在本地npm run dev下更新数据
• 自动化测试
• 纯静态网站生成(SSG)
• 插件系统
• 支持serverless function上传图片
• 数据库集成(浏览量统计)
• algolia全站搜索
• 博客图片备份与迁移
• 密码修改(目前仅支持在本地使用npm脚本修改)

外观

• 夜间模式
• 国际化
• 多种布局主题(缺少UI设计)
• 自定义主题色

低优先级特性

• 不同加密页面可使用不同的密码
• 让monaco editor支持额外的markdown语法高亮
• 一键拉取上游github仓库更新
• IV for AES encryption
• 块级加密
• SSR, 用于自建(参考)
• 支持 cloudflare page,netlify 以及其他服务

项目结构

• /assets
  • /image vite引入的图片
  • /style 公共/功能样式
• /components vue组件，被nuxt自动加载
• /composables vue响应式，被nuxt自动加载
• /e2e e2e测试
• /i18n 国际化翻译文件
• /layouts nuxt布局文件
• /middleware nuxt路由守卫
• /pages 所有网页视图
• /plugins nuxt插件
• /public
  • /e2e/rebuild 用于e2e测试的假数据
  • /rebuild 所有博客数据
  • /sticker 所有表情图片
• /scripts Gulp执行的脚本
• /server api服务器(Nodejs)
• /utils
  • /api /server调用的函数.
  • /common javascript相关的功能代码(不依赖vue或nuxt)
  • /hooks 一些composable封装逻辑
  • /nuxt nuxt相关的功能代码
• /vite-plugins vite插件
• /config.ts 博客配置，必须修改

Node脚本

"scripts": {
  "build": "nuxt build", // 编译为ssr
  "dev": "nuxt dev", //开发
  "dev-for-test": "cross-env NUXT_PORT=13000 VITESTING=\"true\" nuxt dev", //用于e2e测试
  "build-for-test": "cross-env VITESTING=\"true\" nuxt build", //用于e2e测试
  "prod-for-test": "cross-env PORT=13000 node .output/server/index.mjs", //用于e2e测试
  "generate": "nuxt generate", // 弃用了
  "local:change-pwd": "gulp change-passwd", // 全局修改密码
  "local:generate-img-map": "gulp generate-image-map", // 收集全站图片，输出到img.json
  "local:download-img": "gulp download-image", // 读取img.json，下载所有图片到imgs/
  "local:substitute-img": "gulp substitute-image", // 读取img.json，替换为新的图片（运行此脚本前，请先修改img.json里的newUrl为需要替换的url）
  "test:unit": "vitest run --exclude ./e2e", // unit测试
  "test:e2e": "vitest run --dir ./e2e", // e2e测试
  "test:dev-and-e2e": "start-server-and-test dev-for-test http://localhost:13000 test:e2e", // 运行测试dev并开始e2e测试
  "test:prod-and-e2e": "start-server-and-test prod-for-test http://localhost:13000 test:e2e", // 运行测试prod并开始e2e测试
  "eslint": "eslint --fix .", //执行eslint
  "preview": "nuxt preview", // 预览编译后的网站
  "prepare": "husky" // 安装husky
}

更新日志

CHANGELOG.md

其他

• 技术解答/交流qq群：745105612
• 邮箱：[email protected]
• discord: https://discord.gg/HtSehSMYXa