{"id":18735236,"url":"https://github.com/biaochenxuying/blog-react","last_synced_at":"2025-04-13T04:16:47.950Z","repository":{"id":33465872,"uuid":"156713964","full_name":"biaochenxuying/blog-react","owner":"biaochenxuying","description":"react + Ant Design + 支持 markdown 的博客前台展示","archived":false,"fork":false,"pushed_at":"2024-01-20T03:58:14.000Z","size":4933,"stargazers_count":665,"open_issues_count":14,"forks_count":186,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-13T04:16:39.059Z","etag":null,"topics":["antd","axios","highlight","react","webpack"],"latest_commit_sha":null,"homepage":"http://biaochenxuying.cn:2019","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biaochenxuying.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-08T13:50:25.000Z","updated_at":"2025-04-05T13:04:44.000Z","dependencies_parsed_at":"2024-12-11T01:16:12.599Z","dependency_job_id":null,"html_url":"https://github.com/biaochenxuying/blog-react","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":0.06382978723404253,"last_synced_commit":"9a96a8348e276643e0607a7003a83a10e6746254"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biaochenxuying","download_url":"https://codeload.github.com/biaochenxuying/blog-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661713,"owners_count":21141451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","axios","highlight","react","webpack"],"created_at":"2024-11-07T15:16:11.384Z","updated_at":"2025-04-13T04:16:47.912Z","avatar_url":"https://github.com/biaochenxuying.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![主页](https://upload-images.jianshu.io/upload_images/12890819-8420689b7238972a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n## 前言\n\n此 blog 项目是基于 react 全家桶 + Ant Design 。\n\n## 效果\n\n效果图：\n\n- pc 端\n\n![首页](https://upload-images.jianshu.io/upload_images/12890819-4fb796cd5ac5282d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n- 移动端适配\n\n![mobile.gif](https://upload-images.jianshu.io/upload_images/12890819-f97e98dfa9ac76b8.gif?imageMogr2/auto-orient/strip)\n\n完整效果请看：[http://biaochenxuying.cn:2019/](http://biaochenxuying.cn:2019/)\n\n## 功能描述\n\n### 已经实现功能\n\n- [x] 登录\n- [x] 注册\n- [x] 文章列表\n- [x] 标签分类\n- [x] 个人介绍\n- [x] 点赞与评论\n- [x] 留言\n- [x] 时间轴\n- [x] 项目展示\n- [x] 发文（支持 MarkDown 语法）\n- [x] 文章详情展示（支持代码语法高亮）\n- [x] 移动端适配\n- [x] 网站波浪效果(请看 https://biaochenxuying.cn/wave.html)\n- [x] 第三方 github 授权登录\n- [x] 文章归档\n- [x] 文章详情的目录\n\n`因为访问地址 http://biaochenxuying.cn:2019/ 加了端口 2019 ，所以体验线上的授权功能会受限`\n\n`完整功能请访问 vue + typescript + element-ui 版的 https://biaochenxuying.cn`\n\n### 待实现功能\n\n- [ ] 无\n\n## 前端技术\n\n- react： ^16.8.4\n- antd： ^3.15.0\n- react-router:：^4.3.1\n- webpack： 4.28.3\n- axios：0.18.0\n- redux: ^4.0.1\n- highlight.js： ^9.15.6\n- marked：^0.6.1\n\n## 项目搭建\n\n- 项目是按 antd 推荐的教程来搭建的：[antd 在 create-react-app 中使用](https://ant.design/docs/react/use-with-create-react-app-cn) , 实现了 按需加载组件代码和样式。\n\n## 主要项目结构\n\n```\n- components\n  - article 文章详情\n  - articles 文章列表\n  - comments 评论\n  - loadEnd 加载完成\n  - loading 加载中\n  - login 登录\n  - message 留言\n  - nav 导航\n  - project 项目\n  - register 注册\n  - slider 右边栏（博主 logo 、链接和标签等）\n  - artchive 归档\n  - timeLine 时间轴(历程)\n- router 路由\n- store redux 的状态管理\n- utils 封装的常用的方法\n- views 框架页面\n```\n\n## 注意点\n\n- 关于 页面\n\n对于 关于 的页面，其实是一篇文章来的，根据文章类型 type 来决定的，数据库里面 type 为 3\n的文章，只能有一篇就是 博主介绍 ；达到了想什么时候修改内容都可以。\n\n所以当 this.props.location.pathname === '/about' 时就是请求类型为 博主介绍 的文章。\n\n```\ntype: 3, // 文章类型: 1：普通文章；2：是博主简历；3 ：是博主简介；\n```\n\n## Build Setup ( 建立安装 )\n\n```\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost: 3000\nnpm start 或者 yarn start\n\n# build for production with minification\nnpm run build 或者 yarn run build\n```\n\n如果要看完整的效果，是要和后台项目 **[blog-node](https://github.com/biaochenxuying/blog-node)** 一起运行才行的，不然接口请求会失败。\n\n虽然引入了 mock 了，但是还没有时间做模拟数据，想看具体效果，请稳步到我的网站上查看 [http://biaochenxuying.cn:2019](http://biaochenxuying.cn:2019)\n\n## 项目地址与文档教程\n\n其他具体的业务代码，都是些常会见到的需求，这里就不展开讲了。\n\n**项目地址：**\n\n\u003e [前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react)\n\n\u003e [前台展示: https://github.com/biaochenxuying/blog-vue-typescript](https://github.com/biaochenxuying/blog-vue-typescript)\n\n\u003e [管理后台：https://github.com/biaochenxuying/blog-react-admin](https://github.com/biaochenxuying/blog-react-admin)\n\n\u003e [后端：https://github.com/biaochenxuying/blog-node](https://github.com/biaochenxuying/blog-node)\n\n\u003e [blog：https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog)\n\n\n**本博客系统的系列文章：**\n\n- 1. [react + node + express + ant + mongodb 的简洁兼时尚的博客网站](https://biaochenxuying.cn/articleDetail?article_id=5bf57a8f85e0f13af26e579b)\n- 2. [react + Ant Design + 支持 markdown 的 blog-react 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf6bb5e85e0f13af26e57b7)\n- 3. [基于 node + express + mongodb 的 blog-node 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf8c57185e0f13af26e7d0d)\n- 4. [服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的](https://biaochenxuying.cn/articleDetail?article_id=5bfa728bb54f044b4f9da240)\n- 5. [github 授权登录教程与如何设计第三方授权登录的用户表](https://biaochenxuying.cn/articleDetail?article_id=5c7bd34e42b55e2ecc90976d)\n- 6. [一次网站的性能优化之路 -- 天下武功，唯快不破](https://biaochenxuying.cn/articleDetail?article_id=5c8ca2d3b87b8a04f1860c9a)\n- 7. [Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记](https://biaochenxuying.cn/articleDetail?article_id=5c9d8ce5f181945ddd6b0ffc)\n- 8. [前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题](https://biaochenxuying.cn/articleDetail?article_id=5cfcc6798090bd3c84138a08)\n\n\n## 服务器\n\n笔者觉得每个开发者都应该拥有自己的网站和服务器，这可是很酷的事情，学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。\n\n因为笔者就有自己的服务器，而且有两台了，用于平时的学习，还搭建了自己的网站。\n\n有不少读者问过我，为什么我学的那么快的呢 ？ 怎么在一年内学了那么知识的...\n\n其实也没什么秘决，就是平时有自己的服务器了，就爱折腾，学到的知识能很快得到验证，所以学起来兴致高一点。\n\n特别是大三和大四的学生，买了服务器，搭建个项目给面试官看也香，对找工作和面试都加分，还可以熟悉技术栈。\n\n[想学得快，就得有自己的服务器来折腾才行（低于 1 折、89/年、229/3年，比学生机还便宜）](https://biaochenxuying.cn/articleDetail?article_id=5de65dd90283dc742f8f633a)\n\n比如笔者的两个网站：\n\n\u003e https://biaochenxuying.cn/\n\n\u003e https://www.kwgg2020.com/\n\n\n## 最后\n\n如果您觉得本项目和文章不错或者对你有所帮助，请给个星吧，你的肯定就是我继续创作的最大动力。\n\n\u003c!-- 鉴于问问题的人有点多，笔者时间有限，处理不过来，大家可以加入 QQ 群：**186045338**，加群暗号：**全栈修炼** ，一起相互交流学习。 --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiaochenxuying%2Fblog-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog-react/lists"}