你可以在這個網站中看到這個專案的實際應用:https://github-issue-blog-ruddy.vercel.app/ 另外該專案的文章(issue),是存放在這個專案的 issue 中
操作原則上與 Dcard 類似,您可以:
- 登入:點擊右上角的按鈕可以進行 Github 登入,請注意只能使用與 .env 中設定的 GitHub 帳號登入。
- 發文:登入後,您可以在右上角的筆的按鈕中進行發文。
- 列表頁
- 支援無限滾動,每次加載 10 篇文章,向下滾動至底時會自動加載更多文章。
- 你可以單擊文章,進入文章頁。
- 文章頁
- 你可以在右上角的按鈕中「編輯」、「刪除」
- 新增 / 編輯文章時
- 至少需要使用 title 和 body 兩個欄位
- 表單驗證:title 為必填,body 至少需要 30 字
您需要在您的 .env 檔案中設定以下環境變數:
NEXTAUTH_SECRET
:請填入一串隨機的亂碼,這將被用來已做為 JWT 的加密密鑰。GITHUB_Client_SECRET
:這是從 GitHub OAuth 獲得的密鑰。GITHUB_Client_ID
:這是從 GitHub OAuth 獲得的客戶端 ID。NEXT_PUBLIC_REPO_OWNER
:填入您的 GitHub 用戶名稱。NEXT_PUBLIC_REPO_NAME
:填入一個公開的、屬於該 GitHub 用戶的儲存庫名稱。所有的文章將被存儲在這個儲存庫中。
為了讓您的應用能夠通過 GitHub OAuth 驗證,請按照以下步驟操作:
- 訪問 GitHub Developer Settings
- 點擊「New OAuth App」按鈕。
- 在「Name」欄位中隨意填寫應用名稱。
- 「Homepage URL」填寫為 http://localhost:3000/ (部署應用後需更改此 URL)。
- (可選)填寫應用描述。
- 「Authorization callback URL」填寫為 http://localhost:3000/api/auth/callback/github
- 確保「Enable Device Flow」保持未勾選狀態。
- 點擊「Register application」按鈕完成註冊。
- 註冊後,您將獲得一個 Client ID。
- 生成一個 Client Secret,點擊「Generate a new client secret」按鈕,輸入您的 GitHub 密碼以確認。
- 將 Client ID、Client Secret 的值複製並粘貼到您的 .env 檔案中(以及客戶端)。
- 確保這些敏感信息不要公開到 GitHub 或任何公共場合以保護您的安全性。
這是一個使用 Next.js 和 React 開發的部落格專案,以下是專案的檔案結構和說明:
src/
: 專案的主要程式目錄app/
: Next.js 的應用程式目錄api/
: API 路由auth/
: 身份驗證相關的 API 路由[...nextauth]/
: NextAuth 相關的設定和路由options.ts
: NextAuth 的選項設定route.ts
: NextAuth 的路由處理
blog/
: 部落格相關的頁面[issueNumber]/
: 動態路由,根據 issueNumber 顯示對應的部落格文章頁面page.tsx
: 部落格文章頁面的元件
create/
: 建立新部落格文章的頁面page.tsx
: 建立新部落格文章頁面的元件
edit/
: 編輯部落格文章的頁面[issueNumber]/
: 動態路由,根據 issueNumber 顯示對應的部落格文章編輯頁面page.tsx
: 部落格文章編輯頁面的元件
layout.tsx
: 應用程式的佈局元件page.tsx
: 應用程式的首頁元件
components/
: 元件blog/
: 與部落格相關的元件blog-comment-list-item.tsx
: 部落格評論列表項元件blog-comment-list.tsx
: 部落格評論列表元件blog-create-container.tsx
: 建立新部落格文章的容器元件blog-delete-modal.tsx
: 刪除部落格文章的模態框元件blog-editor-container.tsx
: 部落格編輯器的容器元件blog-editor.tsx
: 部落格編輯器元件blog-list-item.tsx
: 部落格列表項元件blog-list.tsx
: 部落格列表元件blog-operator-dropdown.tsx
: 部落格操作下拉選單元件blog.tsx
: 部落格元件,完整顯示部落格文章
icon/
: 圖示元件comment.tsx
: 評論圖示元件
mdx-editor/
: MDX 編輯器相關的元件forward-ref-mdx-editor.tsx
: 使用 forwardRef 的 MDX 編輯器元件initialized-mdx-editor.tsx
: 初始化的 MDX 編輯器元件raw-text-editor.tsx
: 原始文字編輯器元件
navbar/
: 導航列相關的元件navbar-button.tsx
: 導航列按鈕元件navbar.tsx
: 導航列元件
nextui.tsx
: Next UI 元件的設定
hooks/
: 自定義的 React HooksuseCreateIssue.ts
: 建立 Issue 的 HookuseOctokit.ts
: 使用 Octokit 的 HookuseQueryIssue.ts
: 查詢單個 Issue 的 HookuseQueryIssueCommentList.ts
: 查詢 Issue 評論列表的 HookuseQueryIssueList.ts
: 查詢 Issue 列表的 HookuseUpdateIssue.ts
: 更新 Issue 的 Hook
middleware.ts
: Next.js 的中間件models/
: 資料模型blog-schema.ts
: 部落格的資料模型comment.ts
: 評論的資料模型issue.ts
: Issue 的資料模型
providers/
: 提供者元件react-query/
: React Query 提供者index.tsx
: React Query 提供者的入口文件
types/
: 型別定義next-auth.d.ts
: NextAuth 的型別定義
- 使用 Next.js 的應用程式目錄結構,實現頁面路由和 API 路由
- 使用 NextAuth 進行身份驗證,支援 GitHub 登入
- 使用 React 和 Next UI 構建使用者介面
- 使用 MDX 編輯器實現部落格文章的編輯功能
- 使用 React Query 進行資料查詢和狀態管理
- 使用 Octokit 與 GitHub API 進行互動,實現部落格文章的建立、編輯和刪除功能
- 使用自定義的 React Hooks 封裝常用的功能和邏輯
- 使用 TypeScript、Zod 進行型別檢查和提供型別定義
- Next.js: 13.x
- React: 18.x
- TypeScript: 4.x
- 安裝相依套件:
npm install
- 啟動開發伺服器:
npm run dev
- 在瀏覽器中訪問
http://localhost:3000
即可看到應用程式。
可以使用 Vercel 或其他支援 Next.js 的平台進行部署。(我使用 Vercel 進行部屬)
以上是專案的架構說明和相關資訊,你可以根據實際情況進行修改和補充。