Opshell's Blog

Appearance

Timeline

依時間排列的全部文章，共 72 篇。

20261 篇

Jan 2026 年 1 月

20254 篇

Sep 2025 年 9 月

Feb 2025 年 2 月

  • 使用實例

    遍歷迴圈組資料 - 效能優化

    有時候會有資料遍歷組合出新資料的需求，API 中不提供相關的群組功能，於是把群組資料直接寫進每筆資料中，抓取資料後要渲染時，最直覺得寫法就會是像下面的例子： 但是寫完當下就馬上會有個思考，這樣資料量大的話這個效能會慘...

    #javascript#vue#array
    Read more

Jan 2025 年 1 月

202436 篇

Oct 2024 年 10 月

Sep 2024 年 9 月

  • vitepress-thirty-days

    Day29 - Sitemap

    今天大概就是這個系列會寫寫程式的最後一篇文章了，來處理個 sitemap 好了。 Sitemap 是什麼 什麼是 sitemap 呢? 字面解釋就是網站地圖。 不過為什麼網站需要地圖? 其實 sitemap 基本上不...

    #鐵人賽#VitePress#sitemap
    Read more
  • vitepress-thirty-days

    Day28 - Quick keys

    想的到會用到的套件都差不多裝完了，最後來提升一點閱讀體驗，自從某次加班一段時間過勞產生了肘隧道症候群後，除了換直立滑鼠，調整坐姿，買夠高的椅子以外，也讓自己習慣75%的鍵盤(100%的鍵盤太大，會卡住滑鼠移動，造成正...

    #鐵人賽#VitePress#composable#vue
    Read more
  • vitepress-thirty-days

    Day27 - sandbox

    鐵人賽也接近尾聲了，各位看官可以發現一個部落格大體的架構都幾乎完成了，stage 5 只是在補一些小套件來 ~~水~~ 完善一些小功能，今天就來補點 andbox(沙盒) 吧。 圖片不能對於程式邏輯的表現不夠強烈，所...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day26 - medium-zoom

    由於文章頁面的版面設計，左右邊都有欄目，在引用比較大張的圖片時，縮圖對我這種老人家不夠友善，所以我們添加圖片放大功能，順便優化一點圖片的樣式吧。 安裝 medium-zoom 設定 medium-zoom 在 doc...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day25 - busuanzi

    紀錄頁面的閱讀數量，網站的訪客數，應該已經是部落格標配了看著數字的增加，總是會有一咪咪成就感。 由於我們部落格走無後端的輕量化路線，所以計算訪客數的功能就比較沒有選擇，目前比較合用的 Opshell 看來看去就只有 ...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day24 - giscus

    進入了 stage 5 慢慢的也接近賽季的尾聲啦，做部落格除了分享以外，也想要有交流討論，和大家交交朋友，所以在我們的文章中需要個評論的功能。 評論系統選型： 市面上有很多評論系統： - Waline - Artal...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day23 - tags list

    既然都做了 classification 那我們就把順便利用他把文章列表也做出來吧，前面我們是歸檔了 tags 就來做一個基於 tags 然後帶簡單分頁功能的列表吧。 建立頁面 在 docs/pages/ 下面新增 ...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day22 - classify

    自動化側邊欄目錄之後，接下來想做文章檢索的功能，比如我想看某個特定主題的文章有哪些之類的，所以今天要依照標籤、類別、時間、發文時間、更新時間等 frontmatter 來做歸類成資料集合。 歸類 function 設...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day21 - Dynamic article list

    經過昨天的 Layout 擴充之後，文章版面越來越成熟了，不禁開始思考一個問題，每次新增文章、調整目錄結構都要手動在 sidebar.ts 裡面調來調去的，體驗好差阿，來把 sidebar 的產生自動化好了。 自動化...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day17 - 自訂一個Layout

    前面我們透過了引用 Vue Component 的方式做了一個履歷表，可以客製我們想要的排版和內容，如果 Opshell 想要應徵多種職缺，需要多篇履歷，這樣就會一直增加元件和 data ，管理和維護會越來越不方便，...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day16 - build a resume data

    履歷表最重要的還是工作經歷吧，普遍的操作都是後端 API 拉資料，前端迴圈渲染出來，但是我們 VitePress 專案沒有後端阿~ 總不可能寫死一大片資料在 vue 裡面吧? 也太醜了。 這個部分， VitePres...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day15 - build a resume svg

    版面參考 今天就來處理大頭照下面的 skill 和 contact 區域吧~，可以發現兩個區域其實有滿多 svg icon 的， 而 Opshell 最喜歡使用 sprite 的方式處理 svg ，好處是程式碼很乾淨...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day13 - VitePress Plugin Setting

    到昨天，整個環境才算是設定好了，水了 12 天了，接下來該認認真真的寫一點程式了，那我們今天來水點 Vite 的 plugin 吧 ~~(被拖去打)~~ 等等聽我解釋， VitePress 的其中一個很大的優勢就是建...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day10 - antfu/eslint-config

    從第二階段開始就會寫一些程式啦~終於開始擠牙膏出來了， 在寫程式之前，我希望有個聰明靈活的小助手可以幫助我這個老眼昏花的碼農， 首先想到的事 ESLint + Prettier ，以前我也是這樣做的，但是有有億點點值...

    #鐵人賽#VitePress#env#VS Code
    Read more
  • vitepress-thirty-days

    Day08 - config 拆分

    config 拆分 加完了字型和 SCSS 之後 又要繼續在 config 加設定啦~~ 不過現在的 themeConfig 由於要一個個連結設定的原因， 已經是長長長長長的義大利麵的狀態了， 我們先來把會常常改到的...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day07 - custom font & css

    共用的主題 config 設定完之後，部落格終於有了基礎的雛形啦~ 但是，使用的樣式都是 VitePress 預設的，今天就來改樣式吧~~~ 自訂字型 部落格最重要的當然就是文字字型啦，看看這個滿滿的文字量， 好的字...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day05 - 基本設定 Part1

    改完首頁樣式之後，就會開始想把 header 調整成自己想要的樣子了， 看了 官方文件 就會知道， 如果我們要調整 header 的內容，我們需要打開 docs/.vitepress/config.mts (之後都簡...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day04 - Init VitePress

    今天我們要來安裝、啟動還有調整 VitePress 的首頁，： 快速安裝 VitePress 可以單獨使用，也可以安裝到現有專案中。在這兩種情況下，都可以使用以下方式安裝它： 安裝精靈 VitePress 附帶一個命...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day03 - VitePress 部落格

    Why write & Why is vitepress 距離weblog(部落格) 線上日記型式的個人網站： 張貼文章、圖片或影片，來記錄生活、抒發情感及分享資訊 這個概念在1997年12月17日，由 約恩‧巴格爾...

    #鐵人賽#VitePress
    Read more
  • vitepress-thirty-days

    Day02 - 環境準備&對齊

    看一篇文章最大的不是寫的爛， 而是他環境跟你差的遠遠的。 -------------------- By Opshell 開始蓋部落格之前，先對齊一下工程環境。 系統：Window 11 我知道很多工程師都愛用蘋果系...

    #鐵人賽#VitePress#env
    Read more
  • vitepress-thirty-days

    Day01 - 前言

    緣起 在全端打滾久了後， 終於在去年底默默轉職了純前端， 更多東西要塞進我小小的腦袋裡， 但是度過了一段很充實的時光， 只是心心念念的部落格就離我越來越遙遠了... 在今年初，Vue 團隊正式推出了 vitepres...

    #鐵人賽#VitePress
    Read more

Aug 2024 年 8 月

  • Web Application

    Session & Cookie

    摘要 HTTP cookie(數位存根) ，後續簡稱 cookie ， 專門為網頁瀏覽器所建立，用於追蹤、個人化和保存關於使用者的資訊、行為。 session(會話) 後續簡稱 session，網站瀏覽期間在伺服端留...

    #Web Application#CORS
    Read more
  • 使用實例

    This 到底是誰?

    this 這是一個 QR CODE 讀取的例子 reader 是一個被 FileReader 工廠new(做)出來的工具， reader. 後面的其實都使在使用工具本身的功能， 所以存取它內部api function...

    #javascript#vue
    Read more
  • 使用實例

    字串取代的幾種方式

    字串取代 字串取代是實例上常常遇見的需求， 很多情境都可以使用， 在這邊的話，拿去除副檔名當例子， 紀錄且比較幾種常見的用法。 常用的方式 1. split 方法： 2. replace 方法： 3. substri...

    #javascript
    Read more
  • 使用實例

    Enum 使用實例

    enum 按鍵使用實例 1. 用enum列舉常用modules的參數類別 2. 權限表弄enum 3. 產品如果需要快捷鍵支援的話，也會做這種類似MOUSE、方向鍵、keydown之類操作(策略模式+enum) 4....

    #TypeScript
    Read more

Jul 2024 年 7 月

202231 篇

Oct 2022 年 10 月

Sep 2022 年 9 月

  • typescript-thirty-days

    Day30 - recursion menu

    [Day30]：無限層選單&結語 無限Menu 我如果你願意一層一層 一層一層... 一層一層...... 做出Menu! 不願意! 遞迴可以嗎? ────────────── By Opshell --- 目標: ...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day29 - svg sprite

    [Day29]：喜歡的都裝一起 - svg sprite 喜歡的都裝在一起 我才不要別人喜歡的 我要自己喜歡的 ───────────────── By Opshell --- 目標: vite-plugin-svg...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day28 - getData Refactoring

    [Day28]：剩下的包了 - getData 改寫 getData 這邊的這個、那個、還有這個 不要，剩下的Data包了。 ───────────────────── By Opshell --- 目標：今天來改寫...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day25 - Store

    [Day25]：一個大Store - Store改寫 一個大Store 想要我的狀態嗎？ 想要的話可以全部給你， 去找吧！我把所有狀態都放在Store裡。 ───────────────────────── By 哥...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day23 - vite plugin install

    [Day23]：Vite 環境最麻煩了 part 2 Vite 環境最麻煩了 開始用Vite之後， 是個會自立自強的大人了呢!! ────────────────────── By Opshell --- 目標： 開...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day22 - vite install

    [Day22]：Vite 環境最...咦裝好了 part1 Vite 環境最...咦裝好了 每次開始學習新的語言或框架， 最麻煩的不是要學習他有哪些語法、規則 是安裝... 嗯? 好了?!! ────────────...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day21 - 宣告檔案 Part 2

    [Day21]：自己做說明書 - 宣告檔案 part 2 自己做輪子 任何傻瓜都可以寫出電腦看得懂的程式， 但好的程式設計師會寫出人也看得懂的。 ───────────────────────── By Kent B...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day20 - 宣告檔案 Part 1

    [Day20]：別人的輪子用起來 - 宣告檔案 Part 1 用別人的輪子 > 別人的輪子用起來 > 等等這輪子的規格好像怪怪的... > ───────────────────── By Opshell --- 目...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day18 - 列舉 Enum

    [Day18]：小鴨鴨排隊游 - Enum列舉 小鴨鴨排隊游 2022搞笑諾貝爾物理獎： 小鴨游泳排隊跟在媽媽後面，「加速相位」 寫程式也一樣，排排隊寫起來更快。 ───────────────────────── ...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day16 - Class X Interface

    [Day16]：大部分解 - class X interface 大部分解開始~ 清槍開始、清槍蹲下 將槍枝斜舉於左胸膛，檢視藥室內有無子彈 ───────────────────────── By TW 國軍 --...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day15 - Class

    [Day15]：鴨子的生產工廠 - class 卡鏘~ 一隻鴨子，卡鏘~ 兩隻鴨子... 一隻鴨... 兩隻鴨... 會下蛋的都是好鴨 ───────────────────── By Opshell --- 目標:...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day14 - 別名 Alias

    [Day14]：鴨子的別稱 - Alias別名 這兩隻不都是鴨子嗎? 鴨子與鵝實際差在哪? 等等? 這兩隻不都是鴨子嗎? ────────────────────── By Opshell --- 目標: Type ...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day12 - Interface Type Part1

    [Day12]：鴨子的形狀 - interface介面 Part 1 恩~ 鴨子就是長這樣... 嗎? 鵝 、 鵝 、 鵝 曲項向天歌，白毛浮綠水 紅掌撥清波... 等等? 這是鴨子? ───────────────...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day11 - Object Type

    [Day11]：這是一隻鴨子 - Object 這就是一隻鴨子 > 當我看到一隻鳥像鴨子一樣走路 > 像鴨子一樣游泳，像鴨子一樣嘎嘎叫時， > 我就叫那隻鳥為鴨子 > ────────────────── By Ja...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day08 - Array Type

    [Day08] - 通通裝起來 - Array(陣列).md 這個那個不要，剩下的通通裝起來。 數到三：0、1、2、3 Array index 從 0 開始無誤 ───────────────────────── B...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day06 - 複合型別

    [Day06] - 小孩子才做選擇，我全都要 - 複合型別 小孩子才做選擇，我全都要 > 我想要他是number > 但是有時候想當string用 > 怎麼辦? 我全都要 > ─────────────── By 京...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day05 - 基礎的型別

    [Day05]-萬丈高樓平地起-基礎的型別 所以說那個Type呢? > 既然要學習TypeScript > 那Type就是它的醬汁 > ───────────────────────── By Opshell ---...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day03 - Hello Typescript

    [Day03] - 牙牙學語Hello World !- tsconfig設定.md 牙牙學語的第一步 如果不知道怎麼開始， 就來個Hello Wrold吧。 ───────────────────────── By...

    #鐵人賽#TypeScript
    Read more
  • typescript-thirty-days

    Day02 - 環境安裝

    [Day02] - 環境什麼的... 最討厭了 - 環境安裝 環境什麼的 最討厭了 每次開始學習新的語言或框架， 最麻煩的不是要學習他的語法、規則 而是安裝它的環境... ──────────────────────...

    #鐵人賽#TypeScript#env
    Read more
  • typescript-thirty-days

    Day01 - 前言

    [Day01] - Opshell的碎念 - 前言 一、碎念 身為一個在網頁世界打滾多年的全端碼農，~~(6~7年算久嗎?~~ 輾轉於花園與動物園，外星與冥界的世界中， 渾渾噩噩~~也是合理~~，年過30，一回首.....

    #鐵人賽#TypeScript
    Read more

Released under the MIT License.

Copyright © 2024-present Opshell