Skip to content

Latest commit

 

History

History
125 lines (109 loc) · 6.25 KB

README.zh.md

File metadata and controls

125 lines (109 loc) · 6.25 KB

💎Nuxt3-Blog

🚀已通过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做内网穿透

English Readme | 中文说明

博客特性

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

教我搭建

  1. Fork 这个项目。
  2. 在 config.ts 中将 githubName更改为您当前的 Github 账户。如果您的存储库名称不是 nuxt3-blog，也请修改 githubRepo。
  3. 在 Nitro 支持的平台 上部署。
  4. 前往 https://github.com/settings/tokens/new，选择 repo 范围，然后点击 Generate。
  5. 前往 https://your-blog-domain/manage，输入您的 github 令牌。
  6. 享受创作的乐趣。

额外事项

  • 若要使用浏览量统计功能，则需要注册MongoDB账号，然后创建一个名为nuxt3-blog的database, 并设置Mongodb环境变量(参考env.sample)
  • 若要使用评论功能，则需要为Github安装giscus，并开启discussion，然后填写config.ts中的CommentRepoId和CommentDiscussionCategoryId
    参考giscus.app，填写 你的仓库 的地址后，复制data-repo-id和data-category-id，分别对应CommentRepoId和CommentDiscussionCategoryId，位置在data-repo-id和data-category-id

待开发

特性

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

外观

  • 夜间模式
  • 国际化
  • 多种布局主题(缺少UI设计)
  • 自定义主题色
低优先级特性
  • 不同加密页面可使用不同的密码
  • 让monaco editor支持额外的markdown语法高亮
  • 一键拉取上游github仓库更新
  • IV for AES encryption
  • 块级加密
  • SSR, 用于自建(参考)
  • 支持 cloudflare page,netlify 以及其他服务

项目结构

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

Node脚本

"scripts": {
  "build": "nuxt build", // 编译为ssr
  "dev": "nuxt dev", //开发
  "generate": "nuxt generate", // 编译为static
  "chpwd": "gulp change-passwd", // 全局修改密码
  "genimg": "gulp generate-image-map", // 收集全站图片，输出到img.json
  "downimg": "gulp download-image", // 读取img.json，下载所有图片到imgs/
  "subimg": "gulp substitute-image", // 读取img.json，替换为新的图片（运行此脚本前，请先修改img.json里的newUrl为需要替换的url）
  "lint": "eslint --fix --ext .ts,vue --ignore-path .gitignore .", //执行eslint
  "preview": "nuxt preview", // 预览编译后的网站
  "prepare": "husky install" // 安装husky
}

更新日志

CHANGELOG.md

其他