一个 react 的小项目方便查看 github 上的笔记

前言

平时写了一些笔记放在 github 上，为了可以手机随时查看，故写了这个小项目，若是你们喜欢，但愿你们 star 下，感谢你们支持。另外，本人以为该项目不适合新手做为 react 系列学习，请另找其余优质项目。

react-laoergege-blog

一个基于 GitHub Pages 和 GitHub Api，无需本地生成静态文件或搭建服务器的博客, 使用用途：便于随时任意设备查看 github 上的文章笔记。

Demo

github.com/laoergege/l…

Features

• 使用 create-react-app cli 构建
• React + React-Router + RxJS
• Hosting on GitHub Pages
• SessionStorage cache（使用 axios 拦截请求，并 api 数据保存到 sessionStroge 中，防止屡次访问，以及页面刷新数据丢失问题）

Develop and Use

约定

github 创建本身的 blog 仓库，本项目默认取根目录为 Tabs 组件 tab 名，故约定俗成：在根目录创建文件夹用以区分文章类别

文章目录是抓取内容的 H 标签

配置 config 文件

注意: 使用前须要配置 src/config.js 文件，配置本身成 blog。

config.js

//前端基本配置：
//获取近期更新提交，默认近一个月
recentTMonth: 1,
//配置忽略的tab
ignoreDir: ['image'],
//首页 Others 板块配置，可配置你特别显示的文章
others:[
    {key: '项目介绍以及地址', path: '其余/react-laoergege-blog 项目介绍.md'},
    {key: '求职简历', path: '其余/简历.md'},
    {key: '社交联系', path: '其余/concat.md'}                
],

//github基本配置：
//文章仓库
repo: 'laoergege-blog',

//gittalk基本配置：
//Github Application Client ID
clientID: '49ecffd2b6139e31b3aa',
//Github Application Client Secret
clientSecret: 'f79a9c45f39b745f8ce4a66956949300fc0d4c14',
//评论仓库
commentRepo: 'laoergege-blog',
//仓库全部者
owner: 'laoergege',
//Github repository 的全部者和合做者 (对这个 repository 有写权限的用户)。
admin: ['laoergege']
复制代码

关于 OAuth应用程序 注册请点击这里申请。

建立 github page

请参考这里。

开发

# Install dependencies
npm install
# Develop with hot reload
npm start
# Lint and Test
npm run test
# build
npm run build
复制代码

问题

关于 github api 访问限制次数

开发过程有可能频繁访问 github api，对于过分的访问会被 github 禁止（状态码为 403），你们能够查看 github 官方文档 Rate limiting，If your OAuth application needs to make unauthenticated calls with a higher rate limit, you can pass your app's client ID and secret as part of the query string. 你能够把你 client ID 和 secret 做为请求参数，可是介于本项目只有客户端，并无可信的服务端，因此不建议把 client ID 和 secret 放在客户端，通常使用来讲，github 提供次数是够用的。