JS地下城ー燈箱
Published in
Oct 16, 2020
技術重點：
1. 實現響應式介面。
2. 利用Unplash api取出相片，並渲染html頁面。
0. 寫在前面：
本次題目排版用的圖片，經筆者圖片搜尋後發現來源取自於Unplash網站，網站裡頭恰巧有提供開發者api服務，因此便嘗試利用於本次專案之中。本篇文章將著重介紹Unplash api的使用方式。
1. 何謂Unplash 網站？
Unplash網站是免費的相片共享網站，為使用者提供較為自由的著作權許可條款，同時本網站也成為網際網路上最大的攝影相片供應商之一。（摘自維基百科）。
2. Unplash api使用方法
要使用api之前，需先在Unplash網站註冊帳號，註冊的帳號可以與臉書帳號連動登入。註冊完之後，依底下圖片指示使用。
點選New Application之後，會出現設定選項及文字填寫項目，依序作完後，就會在上圖頁面看見新增的app項目了。項目點選後，往下拉至Keys畫面，Access Key就是提供json利用的key。
3. Unplash json使用方法
有了key之後，我們利用Unplash json的url程式碼可定義如下：
4. 可修改要求張數及搜尋關鍵字
&query=關鍵字以及&per_page=張數，可以另外輸入需要的查詢結果及要求張數，呈現於html頁面上，下圖為關鍵字改為mailbox及要求張數為5張的結果：
結語：
本例沒有太難的排版技巧及注意事項，專案若使用Unplash api的話，就可以減少本地端的儲存空間，且易於資料維護。利用input更可以讓使用者動態操作資料，確實是蠻方便開發者利用的。
參考資料：
