是為了collections裡面的node產生頁面，因此template資料夾裡面的檔案命名是{collection}的名稱。src/templates/{Collection}.vue，以redditPost為例，新增template/redditPost.vue。

安裝好gridsome之後，架構如下。

加上點擊的目標要夠大才符合裝置視覺效果，加上min-width,min-height遵循mobile-first設計規則，先設計好手機板草稿，決定哪些是重要的東西後,再增加內容。

在css中，可以使用flex來做一維布局的排版。Flex可以說是css的一個盒子模型，利用外面那一層來控制盒子裡面的排列狀況，假設我們的盒子叫做.wrapper，而裡面的物件叫做.item。在.wrapper包覆的盒子和flex有關的屬性如下:display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

將程式碼模組化，表示讓這些東西可以被各個檔案所使用。1. 假設index.js要使用模組，在html檔引入index.js時，加上type='module'。

scalable and modular architecture for css中文意思為：css可擴展以及可模組化的架構。在撰寫css時，有一定的規範，讓我們可以符合某種規則。