本文於 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 貼入區塊裡,按下OK。
沒錯~這樣就結束了🤘🏻
小提醒,在 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 中發現排版似乎很難盡善盡美,就試著整理之前使用經驗,希望能有所幫助🙌🏻