logo
1
0
Login

CNB 响应式博客框架(集成评论,知识库检索等功能)

CNB 博客框架是一个基于 React 构建的内容管理与分享平台,专为社区设计。该系统集成了文章跟踪、评论管理、知识库检索等功能,为用户提供了一站式的博客发布和内容管理友好体验。

核心特性

🔧 多功能反馈管理

  • 博客列表展示:清晰展示所有文章,支持按状态归档(开启/关闭)和多种排序方式筛选
  • 博客详情查看:查看博客文章详细信息,包括标题、描述、标签、状态和更新时间
  • 评论系统:支持查看和发布博客下的评论,包括文本内容和图片展示

🤖 知识库检索

  • 智能问答:内建知识库,基于知识库内容回答用户问题
  • 菜谱推荐:内置丰富的菜谱数据库(默认),为用户提供饮食建议
  • 流式响应:支持实时流式输出,提供更流畅的交互体验

🎨 现代化 UI 设计

  • 响应式布局:适配桌面端和移动端,提供一致的用户体验
  • 深色模式:支持深色和浅色主题切换,保护用户视力
  • 卡片式展示:采用美观的卡片布局展示问题和评论信息
  • 标签系统:支持彩色标签分类,便于快速识别问题类型

⚙️ 灵活配置

  • 个性化设置:支持主题切换、排序方式、筛选条件等个性化配置
  • 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

快速开始

  1. 克隆项目代码
  2. 安装依赖:yarn install
  3. 配置环境变量(参考 .env.example
  4. 启动开发服务器:yarn dev
  5. 访问 http://localhost:8080 查看应用

项目结构

src/ ├── components/ # 公共组件 ├── pages/ # 页面组件 ├── lib/ # 工具函数 ├── integrations/ # 第三方集成 └── App.jsx # 应用入口

部署

使用 yarn build 构建生产版本,部署到支持静态文件托管的服务器即可。

环境安装指南

NVM 安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Node.js 16 安装

nvm install 16 nvm use 16

启动开发服务器

npm run dev

About

No description, topics, or website provided.
Language
JavaScript99.4%
CSS0.5%
HTML0.1%