基于 CNB-ISSUE 的响应式动态博客框架(集成评论,知识库检索等功能)
CNB 博客框架是一个基于 React 构建的内容管理与分享平台,专为社区设计。该系统集成了文章跟踪、评论管理、知识库检索等功能,为用户提供了一站式的博客发布和内容管理友好体验。
- 博客列表展示:清晰展示所有文章,支持按状态归档(开启/关闭)和多种排序方式筛选
- 博客详情查看:查看博客文章详细信息,包括标题、描述、标签、状态和更新时间
- 评论系统:支持查看和发布博客下的评论,包括文本内容和图片展示
- 智能问答:内建知识库,基于知识库内容回答用户问题
- 菜谱推荐:内置丰富的菜谱数据库(默认),为用户提供饮食建议
- 流式响应:支持实时流式输出,提供更流畅的交互体验
- 响应式布局:适配桌面端和移动端,提供一致的用户体验
- 深色模式:支持深色和浅色主题切换,保护用户视力
- 卡片式展示:采用美观的卡片布局展示问题和评论信息
- 标签系统:支持彩色标签分类,便于快速识别问题类型
- 个性化设置:支持主题切换、排序方式、筛选条件等个性化配置
- API 配置:可自定义 API 地址和仓库信息,适应不同部署环境
- 分页控制:可配置默认页码和每页显示数量,优化加载性能
- Token 认证:通过 CNB Token 进行安全认证,保护 API 访问
- 环境变量管理:敏感信息通过环境变量管理,提高安全性
- 前端框架:React 18
- 状态管理:React Query
- 路由管理:React Router v6
- UI 组件库:shadcn/ui
- 样式框架:Tailwind CSS
- 图标库:Lucide React
- Markdown 渲染:React Markdown + Remark GFM
- 主题管理:Next Themes
- 构建工具:Vite
- 克隆项目代码
- 安装依赖:
yarn install
- 配置环境变量(参考
.env.example)
- 启动开发服务器:
yarn dev
- 访问
http://localhost:8080 查看应用
src/
├── components/ # 公共组件
├── pages/ # 页面组件
├── lib/ # 工具函数
├── integrations/ # 第三方集成
└── App.jsx # 应用入口
使用 yarn build 构建生产版本,部署到支持静态文件托管的服务器即可。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
npm run dev