基本結構 第一步先來建立基本樣式，需求提到「預設 p 標籤，切分後的文字使用 span 標籤，且需要符合 a11y」。 可以想像結構如下圖。 讓我們加入 te...
發想 讓每個文字都有進入進出動畫。( •̀ ω •́ )✧ 可以應用在滾動出現文字或者遊戲對話逐字出現效果。 類似以下影片效果。( ´ ▽ ` )ﾉ 規格 外觀...
今天進入 Stage 4 啦，VitePress 除了提供自訂 layout 以外，也提供對預設 layout 的擴充，今天我們就來擴充預設的 layout...
接下來讓我們進行 e2e 測試吧！( •̀ ω •́ )✧ e2e 測試和單元測試差在哪？e2e 測試會著重於在接近真實環境下進行測試，透過 Playwrigh...
昨天設定了 VitePress 集成的 markdown-it 套件功能，今天不出意外的就是要安裝其他的套件來水一天，但是不出意外的出意外了，除了 todo-...
元件測試完成後，讓我們新增更多範例吧！( ‧ω‧)ノ╰(‧ω‧ ) 新增範例 與其使用大量文字描述參數用途，不如提供情境完整的範例，可以讓使用者有更具體的理解。...
本篇文章請至Opshell's Blog服用，已擁有完整的賞文體驗。 當初會選 VitePress 的原因就是他對 .md 的擴充非常的讚，VitePress...
現在讓我們對元件進行單元測試吧 單元測試的原則為「把待測物當成黑盒子，專注於測試公開介面」，也就是說我們只會針對元件的 template、props、event...
前面我們透過了引用 Vue Component 的方式做了一個履歷表，可以客製我們想要的排版和內容，如果 Opshell 想要應徵多種職缺，需要多篇履歷，這樣...
履歷表最重要的還是工作經歷吧，普遍的操作都是後端 API 拉資料，前端迴圈渲染出來，但是我們 VitePress 專案沒有後端阿~ 總不可能寫死一大片資料在...
現在有需求和規格了，讓我們開始開發吧。 基本結構 第一步先來建立基本樣式，需求提到「除了按鈕本體，在按鈕離開後，會有『拓印』留在原地」。 所以應該要有個容器，裡...
版面參考今天就來處理大頭照下面的 skill 和 contact 區域吧~，可以發現兩個區域其實有滿多 svg icon 的，而 Opshell 最喜歡使用...
所有的開發第一步一定是通靈，喔不對，是分析需求。(≖‿ゝ≖)✧ 你一定在想這個元件又沒什麼功能，是要寫個雞毛需求。( ・ิω・ิ) 其實你說得很對，不過這就和練...
在 Markdown 中使用 Vue Stage 3 開始啦~~來用個人履歷來嘗試 VitePress 的功能，先用 Figma 大概拉個畫面，然後就來開工吧...
所以我說那個畫面呢？ 畢竟是網頁，還是應該先來個網頁才能夠有畫面嘛。( ´ ▽ ` )ﾉ 鱈魚：「讓我們從頭開始建立網頁吧！ˋ( ° ▽、° ) 」 路人：（轉...
到昨天，整個環境才算是設定好了，水了 12 天了，接下來該認認真真的寫一點程式了，那我們今天來水點 Vite 的 plugin 吧 (被拖去打)等等聽我解釋，...
昨天千辛萬苦 (只有我) 的把 ESLiint 處理好了，但是 ESLint 有個問題，他沒在管 style 的 (所以我才會有機會受到 Prettier 的...
從第二階段開始就會寫一些程式啦~終於開始擠牙膏出來了，在寫程式之前，我希望有個聰明靈活的小助手可以幫助我這個老眼昏花的碼農，首先想到的事 ESLint + P...
經過前幾天的水之後，我們部落格的基本設定應該都處理的差不多了，積極的看官可能都新增了一堆頁面在玩了，那我們今天就來正式部署出來，快速拉高成就感吧。 建立 Gi...
config 拆分 加完了字型和 SCSS 之後 又要繼續在 config 加設定啦~~不過現在的 themeConfig 由於要一個個連結設定的原因，已經是...
共用的主題 config 設定完之後，部落格終於有了基礎的雛形啦~但是，使用的樣式都是 VitePress 預設的，今天就來改樣式吧~~~ 自訂字型 部落格最...
沒想到簡單的 config 設定可以寫到兩天，接續昨天的 nav 之後，今天就從 sidebar 開始吧。 sidebar (側邊欄) 這邊是進入文章頁面的時...
改完首頁樣式之後，就會開始想把 header 調整成自己想要的樣子了，看了 官方文件 就會知道，如果我們要調整 header 的內容，我們需要打開 docs/...
今天我們要來安裝、啟動還有調整 VitePress 的首頁，： 快速安裝 VitePress 可以單獨使用，也可以安裝到現有專案中。在這兩種情況下，都可以使用...
Why write & Why is vitepress 距離weblog(部落格) 線上日記型式的個人網站：張貼文章、圖片或影片，來記錄生活、抒發情...
看一篇文章最大的不是寫的爛，而是他環境跟你差的遠遠的。-------------------- By Opshell ※ 廣告：請考慮到Opshell's...
緣起： 在全端打滾久了後，終於在去年底默默轉職了純前端，更多東西要塞進我小小的腦袋裡，但是度過了一段很充實的時光，只是心心念念的部落格就離我越來越遙遠了......
緣起 源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。 簡單來說就是設計奇奇怪怪的元件。 別看這些元件好像很沒用，實作起來...
鱈魚
Opshell
iThome鐵人賽
看影片追技術