本文於 2020.07.25 發布於個人 Notion
CakeResume 為知名的線上履歷製作網站，具有製作快速、介面好上手、繁體中文介面、線上發布、免費下載 PDF 等功能。雖然內建不少模板，但容易看起來與他人版面無二致。 本篇以修改程式碼為主，提供盡可能做出擁有個人特色區塊的方向。
這篇文章主要會將重點放在「如何修改」，因此在開始前，希望已經有前備知識（熟悉 HTML5 和 CSS3 、了解 Bootstrap 格線系統、會使用 VS Code 編輯器），會比較好懂噢～
起手式：如何修改程式碼？
開啟 CakeResume 的履歷編輯頁面，從右側選一個你想要的區塊拖曳進履歷中。接著點擊該區塊，會出現四個功能圖示，選擇第二個 </>，便會出現這個區塊的程式碼。
天啊程式碼看起超亂的！這時候就輪到 coding 好朋友 VS Code 編輯器登場！ 建立一個 .html 檔後，將 CakeResume 區塊裡程式碼複製進<body></body> 裡。這時候它的狀態是呈現被壓縮過的長長一行。
別擔心看不懂，現在請按下鍵盤上 Alt + Shift + F ，然後 DO RE MI SO～神奇的事情發生啦，程式碼就會自動展開，同時也排列整齊！ 但這只是大方向，部分程式碼（像是<ul><li></li></ul>）還是要自己手動改。
接下來的步驟就是熟悉的複製貼上。
在 VS Code 編輯器編修程式碼後，將這段收合比較好點選。接著反白選取後，Ctrl + C 複製。回到 CakeResume 的履歷編輯頁面，Ctrl + V 貼入區塊裡，按下ＯＫ。
沒錯～這樣就結束了🤘🏻
小提醒，在 VS Code 改好之後再貼回 CakeResume 編輯區塊裡會比較好。雖然改個小地方就要來回複製貼上，但可以確認是不是最終想要的樣子。
有限空間自由發揮：排版
大部分是以文字說明搭配圖片呈現專案綱要。 CakeResume 雖然提供了一些可供選擇模板，但可能不敷使用或是讓每個人的排版看起來太過類似。
在開始修改之前，請先掌握三個重點：了解 Bootstrap 4 格線系統、圖片使用外連網址、將 CSS 寫在 HTML 上。
CakeResume 提供的程式碼使用 Bootstrap 框架。由於能編輯的最外層從 col-sm- 開始，為了不影響已經預設好的響應式 RWD ，建議從 col-sm 的下一層開始編輯，或是僅調整網格欄數。（如果熟悉 BS4 的響應式寫法則不在此限XDDD
CakeResume 支援上傳圖片，但如果並排，很容易突顯每張圖片高度不一致，而且要一張張手動調整，調到最後會有種乾脆不要用圖片的衝動（個人經驗XD）後來發現可以用 CSS 改善：
1. 在每張圖片<img>外加一層<div>
2. 這段 HTML 會使用到下方這段 CSS 語法（這裡使用 Scss 撰寫）
3. 由於無法另外 link 檔案，所以 CSS 都要寫在 HTML 行內元素裡，圖片使用外連網址。
同理，如果想做其他調整（像是三欄式附加文字敘述排版、 margin、字體大小、顏色等）都可以，甚至想要改變圖片形狀都不是問題～
轉職過程中受到六角學院各種大力協助，尤其是履歷撰寫上被破除很多盲點。在特訓班 Slack 中發現排版似乎很難盡善盡美，就試著整理之前使用經驗，希望能有所幫助🙌🏻
