使用 Nuxt Content 组织博客内容,配合 Vuetify 提供界面组件
nuxt_content_blog_firebase — Nuxt 博客模板
作者 bondrogeen
基于 Nuxt Content、Firebase 与 Vuetify 的博客模板,含演示站点与 Realtime Database 安全规则示例。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
集成 Firebase,README 提供 Realtime Database 的 users、ratings、comments 规则示例
提供 npm run dev、npm run build、npm run static 三个脚本
通过 .env 文件配置 Firebase 连接参数
提供线上演示站点,可先查看实际页面效果
采用 MIT 许可,允许使用、修改、商用与分发该版本代码
模板详细介绍
该模板是一个博客示例项目,技术栈为 Nuxt(Vue),内容层使用 Nuxt Content,界面组件使用 Vuetify,数据与用户相关功能接入 Firebase。仓库描述为“Demo blog template on nuxt content, firebase and vuetify”,并提供了线上演示地址。
README 给出的使用流程包括 npm run dev、npm run build 与 npm run static 三个脚本,并要求编辑 .env 文件填写 Firebase 配置。README 同时给出 Firebase Realtime Database 的规则示例,涉及 users、ratings、comments 三个节点:users 下按 uid 限制读写,admin 与 verified 字段仅管理员可写;ratings 公开可读、按 uid 写入;comments 公开可读、写入受管理员或已验证用户控制,并以 title 建立索引。
限制方面:README 未说明 Node 版本、依赖版本、路由结构或部署细节;模板的 Firebase 相关动态功能需要自行配置项目与规则,并核对 Firebase 的额度与收费。仓库许可为 MIT,但演示图片、字体、图标等第三方素材需按各自许可单独核对。
适合你的项目吗?
适用场景
- 搭建以 Markdown 内容为主的个人或小型博客
- 学习 Nuxt Content 与 Firebase 组合的示例项目结构
- 参考 Realtime Database 中用户、评分、评论节点的安全规则写法
- 在 Vuetify 组件体系下调整博客界面样式
适合人群
- 熟悉 Vue 或 Nuxt、希望快速起步博客项目的开发者
- 需要 Firebase 认证与数据库规则示例的开发者
- 想以 MIT 许可代码为基础进行二次修改的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后按 README 执行 npm run dev 启动开发环境
- 2
编辑 .env 文件填入自己的 Firebase 配置
- 3
在 Firebase 控制台按 README 示例配置 Realtime Database 规则
- 4
构建与静态输出分别使用 npm run build 和 npm run static
- 5
启用 Firebase 相关功能前需核对额度与收费,并单独确认演示图片、字体、图标等素材的许可
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- README 提及 Firebase 集成;启用相关动态功能前需自行配置,并核对 Firebase 的额度与收费。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 使用前必须编辑 .env 文件填写自己的 Firebase 配置,即需要自备 Firebase 项目与连接参数。
- 动态功能依赖 Firebase Realtime Database,需自行在 Firebase 控制台配置 README 给出的安全规则。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
edit the [.env](https://github.com/bondrogeen/nuxt_content_blog_firebase/blob/main/.env) file firebase setting
README 原文
https://github.com/bondrogeen/nuxt_content_blog_firebase/blob/main/LICENSEhttps://github.com/bondrogeen/nuxt_content_blog_firebase/blob/main/README.mdRules firebase Realtime Database
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-12。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 73 / 100
- 技术栈
- Nuxt · Vue
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2021-04-04
- 截图检查日期
- 2026-10-12
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15
查看当时使用的来源资料
SHA-256: 74af8847b8a2121d7da31b8f75ffcff24ee10112b7a740163a24f6264d1994c3
2026-10-12T11:16:56.323Z
来源文件 / 仓库# nuxt_content_blog_firebase
Blog template on nuxt content, firebase and vuetify
[Demo](https://nuxt-content-blog-firebase.web.app/)
`npm run dev`
`npm run build`
`npm run static`
edit the [.env](https://github.com/bondrogeen/nuxt_content_blog_firebase/blob/main/.env) file firebase setting
Rules firebase Realtime Database
```json
{
"rules": {
"users": {
".read": "root.child('users/'+ auth.uid +'/admin').val() === true",
"$uid": {
".read": "auth != null && auth.uid == $uid",
"create": {
".validate": true,
".write": "$uid === auth.uid"
},
"email": {
".validate": true,
".write": "$uid === auth.uid"
},
"uid": {
".validate": true,
".write": "$uid === auth.uid"
},
"name": {
".validate": true,
".write": "$uid === auth.uid"
},
"surname": {
".write": "$uid === auth.uid"
},
"avatar": {
".write": "$uid === auth.uid"
},
"lastLogin": {
".write": "$uid === auth.uid"
},
"admin": {
".write": "root.child('users/'+ auth.uid +'/admin').val() === true"
},
"verified": {
".write": "root.child('users/'+ auth.uid +'/admin').val() === true"
}
}
},
"ratings": {
".read": true,
"$title": {
".read": true,
"$uid": {
".read": true,
".write": "$uid === auth.uid"
}
}
},
"comments": {
".read": true,
".write": "root.child('users/'+ auth.uid +'/admin').val() === true",
".indexOn": "title",
"$items": {
".read": true,
"name": { ".write": "auth != null && !data.exists()" },
"title": { ".write": "auth != null && !data.exists()" },
"comment": { ".write": "auth != null && !data.exists()" },
"timestamp": { ".write": "auth != null && !data.exists()" },
"avatar": { ".write": "auth != null && !data.exists()" },
"uid": { ".write": "auth != null && !data.exists()" },
"reply": { ".write": "auth != null && !data.exists()" },
"verified": {
".write": "root.child('users/'+ auth.uid +'/admin').val() === true || root.child('users/'+ auth.uid +'/verified').val() === true"
}
}
}
}
}
```
#### 0.0.1
* (bondrogeen) initial release
## License
The MIT License (MIT)
Copyright (c) 2017 bondrogeen <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

alpine-theme
Alpine 是一个以极简为设计核心的博客主题,基于 Nuxt 与 Nuxt Content 构建。 它的特别之处在于,你可以从一个简单的个人资料页开始,逐步扩展成一个完整的博客。
Nuxt · 博客

bael-template
Brutalist Blog theme for Netlify CMS
Nuxt · 博客

bloggrify
Run a blog from Markdown files. Themes, SEO, analytics, newsletter and comments preconfigured. Like Docus, but…
Nuxt · 博客

Nuxt_Mkdirs
🚀 Open-source directory website template built with Nuxt 4 + Sanity CMS. 3 layouts, OAuth, payments, blog & m…
Nuxt · 博客

BlogiNote
BlogiNote is a Nuxt Content Theme, it can generate static website to show your blog posts and notes with flexi…
Nuxt · 博客

nuxt-content-template
An opinionated Nuxt Content template built for markdown blogs
Nuxt · 博客
