成品連結:https://codingdark.github.io/program/2023/09/18/API-Test.html

第一步 架部落格

最初看到站長的貼文,提供了本站的API 並且鼓勵大家自架部落格,來嘗試串API 看到文章的當下,覺得有點難度(沒用過github page,API也不熟) 不過看到站長提供的關鍵字setup a personal blog with github pages 最終還是決定先google看看

查了之後,發現近年的gitbub簡化了很多 都可以自動部署,根本就是一鍵架站 外加原始碼開源,很多東西都能自己改 所以光是部落格就玩了一天XD

因為本站為CodeLove 愛寫扣 我就創了一個CodingDark 闇寫扣 表示致敬本站 & 本人的中二風格

第二步 串API

因為不熟的關係,所以決定先隨便串 呼叫API之後,把data印在console.log 大致上看了一下資料格式 使用上其實就類似陣列,非常方便 沒有想像中的難

確認API可以正常呼叫後 陸續加入一些功能 比方說,用Table把文章列表排整齊、加上[Read more]按鈕 先讓json資料,轉換成網頁能呈現出來的[資訊]

第三步 程式碼優化

到這邊為止,網頁的畫面已經差不多定型了 剩下的就是回頭檢視程式碼 考量到後續維護 盡可能把重複的程式碼,包裝成function 或是把一群散亂的變數,包裝成object

最後,為了方便擴充文章列表 將原本是寫死的HTML Dom 改成動態產生

目前的部落格頁面 點進去會撈出站長、Tony,以及我的文章列表 後續若想要列出其他使用者的文章 只需新增setTable(userAccount)即可

結尾

感謝站長提供有趣的API 讓大家可以有練習的機會 雖然目前我在工作上,沒接觸過API 但經過這次的練習,以後若是真的有需要用到 可以更快上手

按讚的人:

共有 3 則留言

非常好的練習!很好的分享! 希望有更多人拿 CodeLove 來寫文章,然後自己架個人部落格,把 CodeLove 當文章資料庫來用!

按讚的人:

很有趣欸看了也想要來玩

按讚的人:

架一個,個人部落格吧!

這是當初設計 API 的原意!把 codelove 當資料庫,每個開發者都可以輕鬆自架網誌,只要負責 UI 即可!

按讚的人: