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