一個 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 提供次數是夠用的。