Jan 2026
- Belief
Opshell 的哲學意義
從科學、哲學、神學與電腦科學的交會點，探討 Opshell 這個暱稱背後的深層意涵，以及如何面對網路世界的惡意與雜訊。
Read more
Feb 2025
- 使用實例
遍歷迴圈組資料 - 效能優化
有時候會有資料遍歷組合出新資料的需求，API 中不提供相關的群組功能，於是把群組資料直接寫進每筆資料中，抓取資料後要渲染時，最直覺得寫法就會是像下面的例子： 但是寫完當下就馬上會有個思考，這樣資料量大的話這個效能會慘...
Read more
Jan 2025
- 使用實例
Generics (泛型) - 讓函式更優雅的接受資料
前言：崎玉還是被罵了 在上一篇 Index Signatures(索引簽章) 中，我們遇到了一個問題：為了讓 formatToURLParams 這個共用函式不報錯，我們被迫修改了 iGetCalendarData{...
Read more - 使用實例
Index Signatures(索引簽章) - 一拳打碎隕石
索引簽章 在 TypeScript 中，用來定義 Object(物件) 或者 Class(類別) 的 索引類型及對應索引值的類型。 讓我們透過一些簡單的實例來看看是怎麼操作的。 今天我們為了組資料方便，把 Get 要...
Read more
Oct 2024
- vue
Vue 3.3 升 3.5 疑難錦囊
相對純淨的專案中，Vue 的升級居然也會遇到很多怪怪的問題，所以記錄在這邊，遇到新問題時會同步更新在這邊，讓有猿人撿到錦囊時可以提早下班。 useVModel 改 defineModel 在 Vue 3.4 之前 d...
Read more - vitepress-thirty-days
Day30 - Epilog
後記 終於，今天是鐵人賽的最後一天了，在 Vue.js Plus 社群(加入社群) 各位大大的鼓勵 ~~(推坑)~~ 今年又成功強迫自己參賽了，主要是想著：「 用 Nuxt 做的部落格遙遙無期，今年 Vue 團隊釋出...
Read more
Sep 2024
- vitepress-thirty-days
Day29 - Sitemap
今天大概就是這個系列會寫寫程式的最後一篇文章了，來處理個 sitemap 好了。 Sitemap 是什麼 什麼是 sitemap 呢? 字面解釋就是網站地圖。 不過為什麼網站需要地圖? 其實 sitemap 基本上不...
Read more - vitepress-thirty-days
Day28 - Quick keys
想的到會用到的套件都差不多裝完了，最後來提升一點閱讀體驗，自從某次加班一段時間過勞產生了肘隧道症候群後，除了換直立滑鼠，調整坐姿，買夠高的椅子以外，也讓自己習慣75%的鍵盤(100%的鍵盤太大，會卡住滑鼠移動，造成正...
Read more - vitepress-thirty-days
Day27 - sandbox
鐵人賽也接近尾聲了，各位看官可以發現一個部落格大體的架構都幾乎完成了，stage 5 只是在補一些小套件來 ~~水~~ 完善一些小功能，今天就來補點 andbox(沙盒) 吧。 圖片不能對於程式邏輯的表現不夠強烈，所...
Read more - vitepress-thirty-days
Day26 - medium-zoom
由於文章頁面的版面設計，左右邊都有欄目，在引用比較大張的圖片時，縮圖對我這種老人家不夠友善，所以我們添加圖片放大功能，順便優化一點圖片的樣式吧。 安裝 medium-zoom 設定 medium-zoom 在 doc...
Read more - vitepress-thirty-days
Day25 - busuanzi
紀錄頁面的閱讀數量，網站的訪客數，應該已經是部落格標配了看著數字的增加，總是會有一咪咪成就感。 由於我們部落格走無後端的輕量化路線，所以計算訪客數的功能就比較沒有選擇，目前比較合用的 Opshell 看來看去就只有 ...
Read more - vitepress-thirty-days
Day24 - giscus
進入了 stage 5 慢慢的也接近賽季的尾聲啦，做部落格除了分享以外，也想要有交流討論，和大家交交朋友，所以在我們的文章中需要個評論的功能。 評論系統選型： 市面上有很多評論系統： - Waline - Artal...
Read more - vitepress-thirty-days
Day23 - tags list
既然都做了 classification 那我們就把順便利用他把文章列表也做出來吧，前面我們是歸檔了 tags 就來做一個基於 tags 然後帶簡單分頁功能的列表吧。 建立頁面 在 docs/pages/ 下面新增 ...
Read more - vitepress-thirty-days
Day22 - classify
自動化側邊欄目錄之後，接下來想做文章檢索的功能，比如我想看某個特定主題的文章有哪些之類的，所以今天要依照標籤、類別、時間、發文時間、更新時間等 frontmatter 來做歸類成資料集合。 歸類 function 設...
Read more - vitepress-thirty-days
Day21 - Dynamic article list
經過昨天的 Layout 擴充之後，文章版面越來越成熟了，不禁開始思考一個問題，每次新增文章、調整目錄結構都要手動在 sidebar.ts 裡面調來調去的，體驗好差阿，來把 sidebar 的產生自動化好了。 自動化...
Read more - vitepress-thirty-days
Day20 - Extended Layout & useData
今天進入 Stage 4 啦，VitePress 除了提供自訂 layout 以外，也提供對預設 layout 的擴充，今天我們就來擴充預設的 layout 吧。 新增 Expand Layout Component...
Read more - vitepress-thirty-days
Day19 - plus markdown
昨天設定了 VitePress 集成的 markdown-it 套件功能，今天不出意外的就是要安裝其他的套件來水一天，但是不出意外的出意外了，除了 todo-list 的 checkbox 以外，好像也沒什麼其他想裝...
Read more - vitepress-thirty-days
Day18 - base markdown
本篇文章請至Opshell's Blog服用，已擁有完整的賞文體驗。 當初會選 VitePress 的原因就是他對 .md 的擴充非常的讚，VitePress 使用 markdown-it 做為解析器， VitePr...
Read more - vitepress-thirty-days
Day17 - 自訂一個Layout
前面我們透過了引用 Vue Component 的方式做了一個履歷表，可以客製我們想要的排版和內容，如果 Opshell 想要應徵多種職缺，需要多篇履歷，這樣就會一直增加元件和 data ，管理和維護會越來越不方便，...
Read more - vitepress-thirty-days
Day16 - build a resume data
履歷表最重要的還是工作經歷吧，普遍的操作都是後端 API 拉資料，前端迴圈渲染出來，但是我們 VitePress 專案沒有後端阿~ 總不可能寫死一大片資料在 vue 裡面吧? 也太醜了。 這個部分， VitePres...
Read more - vitepress-thirty-days
Day15 - build a resume svg
版面參考 今天就來處理大頭照下面的 skill 和 contact 區域吧~，可以發現兩個區域其實有滿多 svg icon 的， 而 Opshell 最喜歡使用 sprite 的方式處理 svg ，好處是程式碼很乾淨...
Read more - vitepress-thirty-days
Day14 - build a resume resource
在 Markdown 中使用 Vue Stage 3 開始啦~~來用個人履歷來嘗試 VitePress 的功能，先用 Figma 大概拉個畫面，然後就來開工吧~ 實際的完工畫面可以來這裡看看。 我們一開始先從最熟悉的...
Read more - vitepress-thirty-days
Day13 - VitePress Plugin Setting
到昨天，整個環境才算是設定好了，水了 12 天了，接下來該認認真真的寫一點程式了，那我們今天來水點 Vite 的 plugin 吧 ~~(被拖去打)~~ 等等聽我解釋， VitePress 的其中一個很大的優勢就是建...
Read more - vitepress-thirty-days
Day12 - 我和 Prettier 分手了
緣起 第一次見到 Prettier 是在兩年前，那時候我在準備推廣統一的團隊程式碼風格，為了更好的維護，大家都懂。 最後採用了 ESLint + Prettier 的方案，這個配置的做法在前年的鐵人賽還寫成了文章。 ...
Read more - vitepress-thirty-days
Day11 - stylelint
昨天千辛萬苦 ~~(只有我)~~ 的把 ESLiint 處理好了， 但是 ESLint 有個問題，他沒在管 style 的 ~~(所以我才會有機會受到 Prettier 的荼毒)~~ 所以我們今天來幫 style 找...
Read more - vitepress-thirty-days
Day10 - antfu/eslint-config
從第二階段開始就會寫一些程式啦~終於開始擠牙膏出來了， 在寫程式之前，我希望有個聰明靈活的小助手可以幫助我這個老眼昏花的碼農， 首先想到的事 ESLint + Prettier ，以前我也是這樣做的，但是有有億點點值...
Read more - vitepress-thirty-days
Day09 - Deploy to GitHub Pages
經過前幾天的水之後，我們部落格的基本設定應該都處理的差不多了，積極的看官可能都新增了一堆頁面在玩了，那我們今天就來正式部署出來，快速拉高成就感吧。 建立 Github 專案 1. 首先要有個 Github 帳號~~廢...
Read more - vitepress-thirty-days
Day08 - config 拆分
config 拆分 加完了字型和 SCSS 之後 又要繼續在 config 加設定啦~~ 不過現在的 themeConfig 由於要一個個連結設定的原因， 已經是長長長長長的義大利麵的狀態了， 我們先來把會常常改到的...
Read more - vitepress-thirty-days
Day07 - custom font & css
共用的主題 config 設定完之後，部落格終於有了基礎的雛形啦~ 但是，使用的樣式都是 VitePress 預設的，今天就來改樣式吧~~~ 自訂字型 部落格最重要的當然就是文字字型啦，看看這個滿滿的文字量， 好的字...
Read more - vitepress-thirty-days
Day06 - config sidebar、socialLinks、footer
沒想到簡單的 config 設定可以寫到兩天， 接續昨天的 nav 之後，今天就從 sidebar 開始吧。 sidebar (側邊欄) 這邊是進入文章頁面的時候，側邊要顯示其他文章連結，主要是下面兩種用法： 1. ...
Read more - vitepress-thirty-days
Day05 - 基本設定 Part1
改完首頁樣式之後，就會開始想把 header 調整成自己想要的樣子了， 看了 官方文件 就會知道， 如果我們要調整 header 的內容，我們需要打開 docs/.vitepress/config.mts (之後都簡...
Read more - vitepress-thirty-days
Day04 - Init VitePress
今天我們要來安裝、啟動還有調整 VitePress 的首頁，： 快速安裝 VitePress 可以單獨使用，也可以安裝到現有專案中。在這兩種情況下，都可以使用以下方式安裝它： 安裝精靈 VitePress 附帶一個命...
Read more - vitepress-thirty-days
Day03 - VitePress 部落格
Why write & Why is vitepress 距離weblog(部落格) 線上日記型式的個人網站： 張貼文章、圖片或影片，來記錄生活、抒發情感及分享資訊 這個概念在1997年12月17日，由 約恩‧巴格爾...
Read more - vitepress-thirty-days
Day02 - 環境準備&對齊
看一篇文章最大的不是寫的爛， 而是他環境跟你差的遠遠的。 -------------------- By Opshell 開始蓋部落格之前，先對齊一下工程環境。 系統：Window 11 我知道很多工程師都愛用蘋果系...
Read more - vitepress-thirty-days
Day01 - 前言
緣起 在全端打滾久了後， 終於在去年底默默轉職了純前端， 更多東西要塞進我小小的腦袋裡， 但是度過了一段很充實的時光， 只是心心念念的部落格就離我越來越遙遠了... 在今年初，Vue 團隊正式推出了 vitepres...
Read more
Aug 2024
- Web Application
Session & Cookie
摘要 HTTP cookie(數位存根) ，後續簡稱 cookie ， 專門為網頁瀏覽器所建立，用於追蹤、個人化和保存關於使用者的資訊、行為。 session(會話) 後續簡稱 session，網站瀏覽期間在伺服端留...
Read more - 使用實例
This 到底是誰?
this 這是一個 QR CODE 讀取的例子 reader 是一個被 FileReader 工廠new(做)出來的工具， reader. 後面的其實都使在使用工具本身的功能， 所以存取它內部api function...
Read more - 使用實例
字串取代的幾種方式
字串取代 字串取代是實例上常常遇見的需求， 很多情境都可以使用， 在這邊的話，拿去除副檔名當例子， 紀錄且比較幾種常見的用法。 常用的方式 1. split 方法： 2. replace 方法： 3. substri...
Read more - 使用實例
Enum 使用實例
enum 按鍵使用實例 1. 用enum列舉常用modules的參數類別 2. 權限表弄enum 3. 產品如果需要快捷鍵支援的話，也會做這種類似MOUSE、方向鍵、keydown之類操作(策略模式+enum) 4....
Read more - 使用實例
sandbox-test
{template=vue3-ts}
Read more
Jul 2024
- demo
Opshell's mumur about vitepress
import { useData } from 'vitepress'; Vitepress Markdown Demo This page demonstrates some of the built-in mar...
Read more
Oct 2022
- typescript-thirty-days
Day33 - Postscript Adjustment AutoLoad
[Day33]：後記 - 環境調整 Part3 AutoLoad 解放滿滿的import 正事還沒做就先Import一堆 不行吧? ─────────────────── By Opshell --- 目標：Auto...
Read more - typescript-thirty-days
Day32 - Postscript Adjustment Prettier
[Day32]：後記 - 環境調整 Part2 Prettier Vite環境最...咦!壞掉了... 程式碼最重要的就是整整齊齊 當然，我希望他可以自動自發 ──────────────── By Opshell ...
Read more - typescript-thirty-days
Day31 - Postscript Adjustment ESLint
[Day31]：後記 - 環境調整 Part1 ESLint Vite環境最...咦!壞掉了... 環境什麼的 果然還是最麻煩了! 哭阿! ──────────────── By Opshell --- 目標：成功完...
Read more
Sep 2022
- typescript-thirty-days
Day30 - recursion menu
[Day30]：無限層選單&結語 無限Menu 我如果你願意一層一層 一層一層... 一層一層...... 做出Menu! 不願意! 遞迴可以嗎? ────────────── By Opshell --- 目標: ...
Read more - typescript-thirty-days
Day29 - svg sprite
[Day29]：喜歡的都裝一起 - svg sprite 喜歡的都裝在一起 我才不要別人喜歡的 我要自己喜歡的 ───────────────── By Opshell --- 目標: vite-plugin-svg...
Read more - typescript-thirty-days
Day28 - getData Refactoring
[Day28]：剩下的包了 - getData 改寫 getData 這邊的這個、那個、還有這個 不要，剩下的Data包了。 ───────────────────── By Opshell --- 目標：今天來改寫...
Read more - typescript-thirty-days
Day27 - App.vue & Login Refactoring
[Day27]：App.vue & Login 重構 App.vue & Login 登入 ─────────── By Opshell --- 目標: App.vue && getData 終於進到了正題啦!! 今...
Read more - typescript-thirty-days
Day26 - axios & router
[Day26]： 這才不是PS5 - axios & router Axios X Router 這才不是PS5 這是Plash Speed 5 ────────────────── By 장삐쭈 目標：安裝 axi...
Read more - typescript-thirty-days
Day25 - Store
[Day25]：一個大Store - Store改寫 一個大Store 想要我的狀態嗎？ 想要的話可以全部給你， 去找吧！我把所有狀態都放在Store裡。 ───────────────────────── By 哥...
Read more - typescript-thirty-days
Day24 - Vuex install & setting
[Day24]：Vuex安裝&設定 Vuex 設定 Vuex是一個專為Vue.js開發的狀態管理模式 + 套件 他集中儲存、管理App中的所有組件狀態 ──────────────────── By Vuex ---...
Read more - typescript-thirty-days
Day23 - vite plugin install
[Day23]：Vite 環境最麻煩了 part 2 Vite 環境最麻煩了 開始用Vite之後， 是個會自立自強的大人了呢!! ────────────────────── By Opshell --- 目標： 開...
Read more - typescript-thirty-days
Day22 - vite install
[Day22]：Vite 環境最...咦裝好了 part1 Vite 環境最...咦裝好了 每次開始學習新的語言或框架， 最麻煩的不是要學習他有哪些語法、規則 是安裝... 嗯? 好了?!! ────────────...
Read more - typescript-thirty-days
Day21 - 宣告檔案 Part 2
[Day21]：自己做說明書 - 宣告檔案 part 2 自己做輪子 任何傻瓜都可以寫出電腦看得懂的程式， 但好的程式設計師會寫出人也看得懂的。 ───────────────────────── By Kent B...
Read more - typescript-thirty-days
Day20 - 宣告檔案 Part 1
[Day20]：別人的輪子用起來 - 宣告檔案 Part 1 用別人的輪子 > 別人的輪子用起來 > 等等這輪子的規格好像怪怪的... > ───────────────────── By Opshell --- 目...
Read more - typescript-thirty-days
Day19 - Type Guard 型別檢測 & Narrowing
[Day19]：紅燈停綠燈行 - 型別檢測&Narrowing 紅燈停綠燈行 紅燈停、綠燈行，那黃燈呢? 就讓Type Guard(型別檢測)告訴你吧~ ─────────────────────────── By ...
Read more - typescript-thirty-days
Day18 - 列舉 Enum
[Day18]：小鴨鴨排隊游 - Enum列舉 小鴨鴨排隊游 2022搞笑諾貝爾物理獎： 小鴨游泳排隊跟在媽媽後面，「加速相位」 寫程式也一樣，排排隊寫起來更快。 ───────────────────────── ...
Read more - typescript-thirty-days
Day16 - Class X Interface
[Day16]：大部分解 - class X interface 大部分解開始~ 清槍開始、清槍蹲下 將槍枝斜舉於左胸膛，檢視藥室內有無子彈 ───────────────────────── By TW 國軍 --...
Read more - typescript-thirty-days
Day15 - Class
[Day15]：鴨子的生產工廠 - class 卡鏘~ 一隻鴨子，卡鏘~ 兩隻鴨子... 一隻鴨... 兩隻鴨... 會下蛋的都是好鴨 ───────────────────── By Opshell --- 目標:...
Read more - typescript-thirty-days
Day14 - 別名 Alias
[Day14]：鴨子的別稱 - Alias別名 這兩隻不都是鴨子嗎? 鴨子與鵝實際差在哪? 等等? 這兩隻不都是鴨子嗎? ────────────────────── By Opshell --- 目標: Type ...
Read more - typescript-thirty-days
Day12 - Interface Type Part1
[Day12]：鴨子的形狀 - interface介面 Part 1 恩~ 鴨子就是長這樣... 嗎? 鵝 、 鵝 、 鵝 曲項向天歌，白毛浮綠水 紅掌撥清波... 等等? 這是鴨子? ───────────────...
Read more - typescript-thirty-days
Day11 - Object Type
[Day11]：這是一隻鴨子 - Object 這就是一隻鴨子 > 當我看到一隻鳥像鴨子一樣走路 > 像鴨子一樣游泳，像鴨子一樣嘎嘎叫時， > 我就叫那隻鳥為鴨子 > ────────────────── By Ja...
Read more - typescript-thirty-days
Day10 - Function Type Part2
[Day10] - 那我就再宣告一個 - Function part 2 沒想到還可以超載起來 > 一個function不夠? > 那我就再宣告一個。 > ───────────────────────── By O...
Read more - typescript-thirty-days
Day09 - Function Type Part1
[Day09] - 當ES6遇上了TypeScript - Function part 1 這豈不是無敵了?? > 當ES6 遇上了TypeScript， > 這豈不是無敵了?!。 > ───────────────...
Read more - typescript-thirty-days
Day08 - Array Type
[Day08] - 通通裝起來 - Array(陣列).md 這個那個不要，剩下的通通裝起來。 數到三：0、1、2、3 Array index 從 0 開始無誤 ───────────────────────── B...
Read more - typescript-thirty-days
Day07 - TypeScript's 特殊型別
[Day07] - 認識來自TypeScript的新朋友 - 特殊型別 認識來自TypeScript的新朋友 > 有型別自TypeScript來 > 不亦悅乎! > ───────────────────── By ...
Read more - typescript-thirty-days
Day06 - 複合型別
[Day06] - 小孩子才做選擇，我全都要 - 複合型別 小孩子才做選擇，我全都要 > 我想要他是number > 但是有時候想當string用 > 怎麼辦? 我全都要 > ─────────────── By 京...
Read more - typescript-thirty-days
Day05 - 基礎的型別
[Day05]-萬丈高樓平地起-基礎的型別 所以說那個Type呢? > 既然要學習TypeScript > 那Type就是它的醬汁 > ───────────────────────── By Opshell ---...
Read more - typescript-thirty-days
Day04 - 推論、註記、斷言
[Day04] - 一切的源頭 - 推論、註記、斷言 所以說那個Type呢? Jump有死、火、海 Type有推、註、言 ───────────────────────── By Opshell 目標：初步了解Typ...
Read more - typescript-thirty-days
Day03 - Hello Typescript
[Day03] - 牙牙學語Hello World !- tsconfig設定.md 牙牙學語的第一步 如果不知道怎麼開始， 就來個Hello Wrold吧。 ───────────────────────── By...
Read more - typescript-thirty-days
Day02 - 環境安裝
[Day02] - 環境什麼的... 最討厭了 - 環境安裝 環境什麼的 最討厭了 每次開始學習新的語言或框架， 最麻煩的不是要學習他的語法、規則 而是安裝它的環境... ──────────────────────...
Read more - typescript-thirty-days
Day01 - 前言
[Day01] - Opshell的碎念 - 前言 一、碎念 身為一個在網頁世界打滾多年的全端碼農，~~(6~7年算久嗎?~~ 輾轉於花園與動物園，外星與冥界的世界中， 渾渾噩噩~~也是合理~~，年過30，一回首.....
Read more
0 Unknown
- Belief
Opshell 的哲學意義：生命與宇宙的對接模型
從科學、哲學、神學與電腦科學的交會點，探討 Opshell 這個暱稱背後的深層意涵，以及如何面對網路世界的惡意與雜訊。
Read more