前言
第一個博客是在大學時候弄的，用的是 hexo 搭建的。但是當時還是個小白，只在 github 上部署了打包後的代碼，沒有保存源代碼，導致後面我就再也沒更新過我的個人博客，一直停留在了 2019 年。後來有用 vuepress 搭建了一個學習筆記記錄的項目，但感覺不是很好看，沒有當主力的博客使用，之後就一直在掘金和思否上寫，就沒怎麼更新個人博客了。
由於今年上半年經常跑出去完，最近突然又想重新搭建一下自己的個人博客，記錄一下生活。
blog github 項目地址
blog 預覽
設計方面參考了antfu 大佬的 blog風格，antfu 的 blog 簡約好看，是我喜歡的風格。
主要也是用了他的框架，所以色調和風格很一致。
plugins
這些插件使得寫起來非常的舒服，比如我可以直接在index.md裏添加一個 icon，使用一個組件，並且傳入一些數據。
---
title: blog
date: 2023-09-06
tags: ["js", "ts", "vue"]
---
<tag-list :tags="tags" />
<div class="i-uil-github-alt" />- vite-plugin-pages
用 vite-plugin-pages 自動生成路由。
但是我發現 build 出來的頁面使用 live-server 啓動時刷新會丟失，我在vite-plugin-pages issues247看到有人遇到和我同樣的問題，但是我沒有找到合適的解決方案。而且當我把 antfu 的博客項目 clone 下來打包之後發現有同樣的問題，但是他的網站是 OK 的，我不知道他怎麼處理的。
最後我發現用 vite preview 運行 dist 出來的沒有問題，於是我在vite 靜態部署站點中直接複製了github-pages構建代碼，這樣就 github pages 是好了，但是 Vercel 裏面自動部署還是有問題。
- unplugin-vue-markdown
這是一個可以將 Markdown 編譯成 Vue 組件的 vite 插件，可以解析 md 預設的參與，以及直接使用 vue 組件。和 vite-plugin-pages 搭配實現安心的寫 md。
還有一些增強 markdown 的插件
- markdown-it-anchor 添加 id 錨點
- shikiji 代碼高亮
- unocss
unocss 真的很方便，對於個人項目來説，哪裏用到就在哪裏。公司項目的話，css 全部寫在 class 裏應該挺頭疼的吧，我也不知道。反正我自己的項目用得挺爽的，也沒有心智負擔，就隨便寫。
而且配合unplugin-icons實現 class 圖標真的很方便，不用再為亂七八糟的圖標頭疼了，iconify提供的圖標夠多了。
- unplugin-auto-import
api 自動導入
- unplugin-vue-components
組件自動導入
references
設計方面主色調是antfu大佬的博客，再加上架子差不多所以比較類似，如果侵權馬上修改。
blog 頁面的時間軸參考了我的老博客 hexo 的主題hexo-theme-next
主頁設計參考了一個 ui 網站paulineosmont，它的設計很炫酷，我暫時沒有實現。
