iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

30天用Vitepress 開啟我的"部落客"生活 系列

用30 天 使用 Vitepress + typescript + Github 架設自己的部落格

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day21] - 自動化產生文章側邊欄

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

2024-09-22 ‧ 由 Opshell 分享
DAY 22

[Day22] - Classify - 文章分類

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

2024-09-23 ‧ 由 Opshell 分享
DAY 23

[Day23] - tags list - 做個文章列表

既然都做了 classification 那我們就把順便利用他把文章列表也做出來吧,前面我們是歸檔了 tags 就來做一個基於 tags 然後帶簡單分頁功能的...

2024-09-24 ‧ 由 Opshell 分享
DAY 24

[Day24] - giscus - 評論系統

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

2024-09-25 ‧ 由 Opshell 分享
DAY 25

[Day25] - busuanzi - 網頁瀏覽計數器

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

2024-09-26 ‧ 由 Opshell 分享
DAY 26

[Day26] - medium-zoom - 圖片縮放

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

2024-09-27 ‧ 由 Opshell 分享
DAY 27

[Day27] - Sandbox - 即時展示沙盒

鐵人賽也接近尾聲了,各位看官可以發現一個部落格大體的架構都幾乎完成了,stage 5 只是在補一些小套件來 水 完善一些小功能,今天就來補點 andbox(沙...

2024-09-28 ‧ 由 Opshell 分享
DAY 28

[Day28] - Shortcut Key - 快捷鍵控制

想的到會用到的套件都差不多裝完了,最後來提升一點閱讀體驗,自從某次加班一段時間過勞產生了肘隧道症候群後,除了換直立滑鼠,調整坐姿,買夠高的椅子以外,也讓自己習...

2024-09-29 ‧ 由 Opshell 分享
DAY 29

[Day29] - Sitemap

今天大概就是這個系列會寫寫程式的最後一篇文章了,來處理個 sitemap 好了。 Sitemap 是什麼 什麼是 sitemap 呢? 字面解釋就是網站地圖。...

2024-09-30 ‧ 由 Opshell 分享
DAY 30

[Day30] - 後記

後記 終於,今天是鐵人賽的最後一天了,在 Vue.js Plus 社群(加入社群) 各位大大的鼓勵 (推坑) 今年又成功強迫自己參賽了,主要是想著:「 用 N...

2024-10-01 ‧ 由 Opshell 分享