关于前端:我的博客-30

第一个博客是在大学时候弄的，用的是 hexo 搭建的。然而过后还是个小白，只在 github 上部署了打包后的代码，没有保留源代码，导致前面我就再也没更新过我的集体博客，始终停留在了 2019 年。起初有用 vuepress 搭建了一个学习笔记记录的我的项目，但感觉不是很难看，没有当主力的博客应用，之后就始终在掘金和思否上写，就没怎么更新集体博客了。

因为往年上半年常常跑出去完，最近忽然又想从新搭建一下本人的集体博客，记录一下生存。

blog github 我的项目地址

blog 预览

设计方面参考了 antfu 大佬的 blog 格调，antfu 的 blog 简洁难看，是我喜爱的格调。

次要也是用了他的框架，所以色调和格调很统一。

这些插件使得写起来十分的难受，比方我能够间接在 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

组件主动导入

设计方面主色调是 antfu 大佬的博客，再加上架子差不多所以比拟相似，如果侵权马上批改。

blog 页面的时间轴参考了我的老博客 hexo 的主题 hexo-theme-next

主页设计参考了一个 ui 网站 paulineosmont，它的设计很炫酷，我临时没有实现。

关于前端:我的博客-30

前言

plugins

references