your pokemon for today

今天的神奇寶貝

這是一個不錯的小畫廊網站，展示了 rad KC Green 在他的 Twitter 和 Tumblrs 上發布的 rad Your Pokémon for Today 插圖。

它實際上並不需要存在，但它確實存在！

在 webby 端，它使用 lightgallery.js 來處理 lightboxy 的東西。

在建置端，它使用 GraphicsMagick for Node 為每個插圖產生縮圖，使用 Nunjucks 進行模板化，並使用 gulp （以及一大堆 gulp 外掛程式）將整個事情結合在一起。

網站本身可供您瀏覽 https://yourpokemonfor.today/。

該存儲庫有點大得愚蠢，因為它包含大量圖像數據（當前和過去）。對此感到抱歉。

自己建構

那你想成為數碼獸大師嗎？以下是如何在您自己的電腦上建立此網站的版本（如果您執行的是 Mac OS X）：

1. 取得此儲存庫的副本（透過複製它或下載 ZIP 副本並解壓縮）

2. 確保您已經安裝了 Node.js 和 Yarn（在engines下方檢查package.json以獲得所需版本）以及 Homebrew

3. 安裝 GraphicsMagick：開啟命令列介面並執行brew install graphicsmagick

4. 安裝專案的依賴項：在命令列介面中，導航到專案資料夾並執行yarn

5. 從來源檔案建置網站：在同一資料夾中，執行yarn build 。當您看到Finished 'default'並返回命令提示字元時，該網站已完成建置。

   • 此命令會建立網站並處理網站的所有影像，因此第一次運行時可能需要一段時間（最多十分鐘）。後續建置將會更快。

6. 查看“build”資料夾 - 這就是您的網站！哇！

7. 要在 Web 瀏覽器中開啟該站點，您需要在「build」資料夾中執行 Web 伺服器 - 這是我最喜歡的在 Mac 上執行此操作的簡單方法。

就是這樣！如果您進行任何更改，請再次執行步驟 5 以建立網站的新版本。然後請隨時提交包含您的更改的拉取請求！合作很有趣。

托多

也許你想幫我做這些事？

• 添加一個過濾選項以僅顯示 KC 的圖像（也許只顯示他沒有做過的圖像？有人會想要這樣嗎？）

• 新增按日期排序的選項

• 在 gulp 配置中新增一個「watch」任務，以便在來源文件變更時自動重建相關的建置文件