由於文章頁面的版面設計,左右邊都有欄目,在引用比較大張的圖片時,縮圖對我這種老人家不夠友善,所以我們添加圖片放大功能,順便優化一點圖片的樣式吧。 安裝 med...
發想 某些網頁為了獎勵使用者特定操作,會在網頁上噴出彩帶效果。 讓我們來設計一個隨時隨地都可以慶祝的拉炮元件吧!(≧∀≦)ノ🎉 規格 功能需求 可自訂彩帶的顏...
紀錄頁面的閱讀數量,網站的訪客數,應該已經是部落格標配了看著數字的增加,總是會有一咪咪成就感。 由於我們部落格走無後端的輕量化路線,所以計算訪客數的功能就比較...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\text-characters-transition.spec.ts impo...
進入了 stage 5 慢慢的也接近賽季的尾聲啦,做部落格除了分享以外,也想要有交流討論,和大家交交朋友,所以在我們的文章中需要個評論的功能。 評論系統選型:...
現在讓我們用更多範例讓使用者更了解「逐字轉場」元件吧。ヽ(●`∀´●)ノ 切分文字 展示如何自定義切分文字。 src\components\text-chara...
既然都做了 classification 那我們就把順便利用他把文章列表也做出來吧,前面我們是歸檔了 tags 就來做一個基於 tags 然後帶簡單分頁功能的...
開始單元測試前,先讓我們設定一下測試範圍,避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔,所以我們在 vite 新增設定即可。 v...
自動化側邊欄目錄之後,接下來想做文章檢索的功能,比如我想看某個特定主題的文章有哪些之類的,所以今天要依照標籤、類別、時間、發文時間、更新時間等 frontma...
經過昨天的 Layout 擴充之後,文章版面越來越成熟了,不禁開始思考一個問題,每次新增文章、調整目錄結構都要手動在 sidebar.ts 裡面調來調去的,體...
基本結構 第一步先來建立基本樣式,需求提到「預設 p 標籤,切分後的文字使用 span 標籤,且需要符合 a11y」。 可以想像結構如下圖。 讓我們加入 te...
發想 讓每個文字都有進入進出動畫。( •̀ ω •́ )✧ 可以應用在滾動出現文字或者遊戲對話逐字出現效果。 規格 外觀設計 預設使用 p 標籤,切分後的文字...
今天進入 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 由於要一個個連結設定的原因,已經是...