前言
接續上一篇的內容，接下來要完成HTML的切版，其中HTML、CSS的內容我會直接給出來，另外這次的原始碼也會放在GitHub上供大家參考😀。
談談上次的畫面
觀察上次最後完成的畫面，🔵藍框處是上次List.cshtml檔案中我編輯的HTML原始碼，那問題來了，那些🔴紅框處又是怎麼來的?
其實在專案中紅色框這部分叫做Layout，這個Layout就是頁面的「布局板塊」，簡單來說就是這個專案的每一頁都會套用的板塊，也可以依照需求的不同頁面套用不同的Layout，或是不套用Layout。
Layout預設會放在 /Views/Shared/_Layout.cshtml，如下圖，
瀏覽該檔案就可以看到紅框部分的HTML原始碼，另外留意Layout的2個地方，如下標記，
講解上方標記2點之前，先來了解cshtml檔案，
cs副檔名為C# Source Code File，代表該檔案可被C#編譯器編譯，
html副檔名則為建立網頁時標記語言檔案(就是寫網頁的檔案)，
cshtml則為2者的集合，簡單來說就是html裡面可以再寫C#語言去控制畫面渲染。
我們稱這種頁面為 Razor Page，而該頁若要寫到C#語言時則會先在開頭加上”@”符號(稱為 Razor Syntax)。
再來看一下上圖標記，
1. RenderBody :
套用該Layout的頁面內容將會填充到這個Layout的這個區域。
以上次的範例來說，Product/List.cshtml內容，
<h1>這是商品量表頁</h1>
<p>...以下陳列所有商品...</p>
即被填充於Layout RenderBody區域，如下圖(瀏覽器網頁原始碼檢視)，
2. RenderSection :
自定義可被渲染的區塊，通常用於將Js、CSS檔案渲染在正確的位置。
(稍後商品頁面將會示範RenderSection的用法)
商品頁面完善
Step1. 修改Layout
修改_Layout.cshtml，除了切版樣式改成我要的之外，主要還做了幾件事，
1. Bootstrap更換成5.1.3版本(原本是4.x)
2. 增加3個RenderSection區塊(topCSS、topJS、endJS)
Step2. 修改Product/List.cshtml頁面(商品列表)
修改商品列表頁切版
Step3. 靜態圖片放至wwwroot目錄
做好Step1、Step2之後可以先執行看看，基本上會發現圖片跑不出來，原因就是圖片的檔案不在專案中，另外說明，.Net Core專案靜態的檔案都會放在wwwroot目錄下，如css、js、圖片(jpg.png…)、影片媒體等等，所以我們將圖片放置該目錄，
1. 先再wwwroot目錄下建立image資料夾，並命名為image
2. 將圖片檔案放至image資料夾
圖片放在GitHub上可以直接下載，以下連結，
完成後會是以下截圖，
完成後即可將專案啟動起來並切換到商品列表頁，如果你看到的畫面跟我以下截圖一樣，代表你做對了👍👍👍
剛剛提到的RenderSection
在Layout中方才定義了3個RenderSection區塊，下面來示範如何使用，
假設List頁面，最上方的「商品區」3個字我想要變成紅色的字，那我不是可以寫CSS樣式更改它，如下，
可以達到我的目的，它的確變成紅色的，但是有什麼問題呢?
檢視一下原始碼，如下，
發現style區塊渲染在body內，正常來說style不是應該在head內嗎?
如果想要正確的渲染style標籤，那就要用到方才定義好的RenderSection，
這邊用到topCSS區塊所以我們將程式碼改成以下，
執行專案後，再看一次原始碼會發現style標籤渲染在Layout檔案定義好的topCSS RenderSection區域中，這樣才符合正常的網頁標籤分布👌。
以網站來說，比較常用的topCSS、topJS、endJS我都已經定義出來了，有需要時可以都可以使用😀。
目前「商品列表頁」切版完成了，但是目前畫面看到的資料都是假的，下一篇示範從後端把那些商品資料傳到前端頁面，敬請期待喔😁。
這裡另外提供這次完成的完整專案(這次是Part4)，
https://github.com/ChouJustice/CoreMVC_Learning
結語
- 這次商品列表頁切版是用Bootstrap的框架完成，建議還不懂的新手可以先去了解一下。
https://getbootstrap.com/
