一個 react 的小專案方便檢視 github 上的筆記

laoergege發表於2019-02-26
ReactGithub筆記

前言

平時寫了一些筆記放在 github 上，為了能夠手機隨時檢視，故寫了這個小專案，如果大家喜歡，希望大家 star 下，感謝大家支援。另外，本人覺得該專案不適合新手作為 react 系列學習，請另找其他優質專案。

react-laoergege-blog

一個基於 GitHub Pages 和 GitHub Api，無需本地生成靜態檔案或搭建伺服器的部落格, 使用用途：便於隨時任意裝置檢視 github 上的文章筆記。

Demo

github.com/laoergege/l…

Post Screenshots

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 名，故約定俗成：在根目錄建立資料夾用以區分文章類別

一個 react 的小專案方便檢視 github 上的筆記
一個 react 的小專案方便檢視 github 上的筆記

文章目錄是抓取內容的 H 標籤

一個 react 的小專案方便檢視 github 上的筆記

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

相關文章