iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

30天用Vitepress 開啟我的"部落客"生活 系列

用30 天 使用 Vitepress + typescript + Github 架設自己的部落格

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day11] - StyleLint

昨天千辛萬苦 (只有我) 的把 ESLiint 處理好了,但是 ESLint 有個問題,他沒在管 style 的 (所以我才會有機會受到 Prettier 的...

2024-09-12 ‧ 由 Opshell 分享
DAY 12

[Day12] - 我和 Prettier 分手了

緣起 第一次見到 Prettier 是在兩年前,那時候我在準備推廣統一的團隊程式碼風格,為了更好的維護,大家都懂。 最後採用了 ESLint + Pretti...

2024-09-13 ‧ 由 Opshell 分享
DAY 13

[Day13] - Vite & Auto Import

到昨天,整個環境才算是設定好了,水了 12 天了,接下來該認認真真的寫一點程式了,那我們今天來水點 Vite 的 plugin 吧 (被拖去打)等等聽我解釋,...

2024-09-14 ‧ 由 Opshell 分享
DAY 14

[Day14] - build a resume - 靜態資源管理

在 Markdown 中使用 Vue Stage 3 開始啦~~來用個人履歷來嘗試 VitePress 的功能,先用 Figma 大概拉個畫面,然後就來開工吧...

2024-09-15 ‧ 由 Opshell 分享
DAY 15

[Day15] - build a resume - SVG Icon 管理

版面參考今天就來處理大頭照下面的 skill 和 contact 區域吧~,可以發現兩個區域其實有滿多 svg icon 的,而 Opshell 最喜歡使用...

2024-09-16 ‧ 由 Opshell 分享
DAY 16

[Day16] - build a resume - Data Loading

履歷表最重要的還是工作經歷吧,普遍的操作都是後端 API 拉資料,前端迴圈渲染出來,但是我們 VitePress 專案沒有後端阿~ 總不可能寫死一大片資料在...

2024-09-17 ‧ 由 Opshell 分享
DAY 17

[Day17] - 自訂 Layout

前面我們透過了引用 Vue Component 的方式做了一個履歷表,可以客製我們想要的排版和內容,如果 Opshell 想要應徵多種職缺,需要多篇履歷,這樣...

2024-09-18 ‧ 由 Opshell 分享
DAY 18

[Day18] - 基本 Markdown 設定

本篇文章請至Opshell's Blog服用,已擁有完整的賞文體驗。 當初會選 VitePress 的原因就是他對 .md 的擴充非常的讚,VitePress...

2024-09-19 ‧ 由 Opshell 分享
DAY 19

[Day19] - Markdwon-it Plus - 自訂解析&渲染規則

昨天設定了 VitePress 集成的 markdown-it 套件功能,今天不出意外的就是要安裝其他的套件來水一天,但是不出意外的出意外了,除了 todo-...

2024-09-20 ‧ 由 Opshell 分享
DAY 20

[Day20] - Extended Layout & useData - 預設 Layout 擴充

今天進入 Stage 4 啦,VitePress 除了提供自訂 layout 以外,也提供對預設 layout 的擴充,今天我們就來擴充預設的 layout...

2024-09-21 ‧ 由 Opshell 分享