大家好！今年的 Hacktoberfest 怎麼樣？就我個人而言，到目前為止我真的很享受。我們現在已經進入 10 月的第二週，這意味著是時候提出完成挑戰所需的四個拉取請求 (PR) 了。本週，我決定進一步推動自己，為專案的程式碼庫做出貢獻，而不是像第一週那樣只專注於文件。

第一周回顧

在 Hacktoberfest 的第一個 PR 中，我致力於改進專案文件。作為一個初學者，我想透過較小的、可管理的任務來輕鬆進入這個過程。然而，在第二週，我決定做一些更具技術性的事情：為 GitExplorer 專案做出貢獻。

項目概述：GitExplorer

GitExplorer 是一個 Web 應用程序，可簡化頂級 GitHub 儲存庫的發現和探索。它允許用戶根據程式語言、主題和其他排序標準來過濾儲存庫。雖然 UI 仍在開發中，但該計畫為貢獻者（尤其是初學者）提供了寶貴的學習機會。存儲庫中的許多問題都被標記為“好第一個問題”，使其成為一個很好的起點。

為了做出貢獻，我選擇實作一個導航功能，以增強瀏覽儲存庫時的使用者體驗。

確定問題

該專案最初有一個用於導航到儲存庫下一頁的按鈕，但它缺乏完整的分頁系統。使用者無法輕鬆地在頁面之間來回導航或跳到特定頁面，這帶來了可用性問題。我注意到了這個限制，並要求專案維護人員將問題分配給我。

在我從事這個專案期間，突出的一個方面（但不是很好）是程式碼庫的結構方式。該專案將所有邏輯寫入單一 script.js 檔案中，隨著專案的成長，該檔案可能會變得難以維護。雖然我不想在此 PR 中進行重大更改（因為它僅關注分頁按鈕），但我計劃建議在未來的問題中重構程式碼結構。

實際上，在此之前，還有另一個開發人員創建了一個導航到下一頁的按鈕，但是當他們想要來回導航以及特定頁面時，這對用戶體驗不好。由於這個原因，我評論要求維護者為我分配這個問題。
當我從事這個專案時，有一點我不喜歡它。這是維護者建立程式碼庫的方式，因為他將每個邏輯僅寫入 1 個 script.js 檔案。但是，我不想對此問題進行太多修復，因為它只要求分頁按鈕。我將創建一個新問題，要求稍後重新建立程式碼庫。

新功能：增強分頁

現有功能只有一個按鈕可以在頁面之間導航，每頁顯示 10 個儲存庫。我的目標是實現一個更用戶友好的分頁系統，其中包含「上一頁」、「下一頁」和編號頁面按鈕。這將允許用戶直接跳到他們感興趣的頁面，使導航體驗更加流暢。

執行

GitHub API 約束：

在實現分頁時，我遇到了 GitHub API 的限制，它將結果限制為 1,000 個專案。如果搜尋產生超過 1,000 個儲存庫，則嘗試超出此限制會導致錯誤，並傳回未定義的資料。鑑於設計每頁顯示 10 個儲存庫，我將頁數限制為 100 以避免遇到此問題。

代碼更改：

• 我在 script.js 中引入了一個新的

  部分用於分頁。這使我能夠添加一些 CSS 樣式來改善按鈕美觀和使用者體驗。

• 分頁的核心邏輯被封裝在兩個新函數中：

  • createButton()
  • renderPagination() 這些函數會根據可用頁面動態生成分頁按鈕並套用樣式來停用目前頁面按鈕，防止使用者意外地重新點擊它。我還為按鈕添加了懸停效果，以獲得更精美的外觀。

CSS 改進：

對於分頁設計，我確保當前頁面按鈕已停用，並以不同的樣式來指示其狀態。其他頁面按鈕可獲得懸停效果，以增強互動性並改善使用者體驗。

結論

我對 Hacktoberfest 第二週的貢獻就到此結束。我現在正在尋找下周可以貢獻的另一個存儲庫。理想情況下，我希望找到一個更具挑戰性的項目，這樣我就可以繼續鞭策自己並逐步提高我的技能。

感謝您的閱讀，我期待分享更多有關我的 Hacktoberfest 之旅的資訊！