Skip to content

全新的博客界面

2024-12-13

AI 摘要


作者分享 2024 年 11 月未发文期间博客的更新内容。在 CSS 方面对顶栏、文章内部等做改动,采用卡片式样式。通过 VitePress 官方示例学习 Vue 并应用于主页、友情链接等界面。友情链接用 Vue 代码简化添加操作,借鉴他人源码改进文章列表,用 Vue 优化文章顶部,还将易改配置放于 /config.json 。

用 CSS 的改动

这个不重要,包括但不限于顶栏以及文章内部。对了,我还把大部分的样式都改成了卡片式,确实很好看。

Vue

我从今年6月底就想学 Vue 了,但是一直没时间 其实是懒。最近浅浅的了解并从 VitePress 官方站的 Vue 代码示例中学习了一点点 Vue。如果你说我写什么了,你可以看看主页、友情链接以及文章顶部的界面。

友情链接

😭 之前每次添加一个链接就要写一大段 HTML 代码,真的很烦。给大家看看我现在的 Vue 代码:

html
<FriendCard title="网站标题" url="链接" description="描述" logo="头像" />

是不是简单多了?我也很震惊。

文章列表

这个其实我一直想改,因为手动生成目录太麻烦了。看到了这个网站的源码后,照葫芦画瓢,写了一个差不多的,然后优化了一下界面。

文章顶部

老觉得以前文章顶部缺了一点什么,还是用 Vue 优化了一下,我相信你也看到了效果。

配置

我把一些可能会被修改的配置放到了 /config.json,然后让配置文件读取 json 即可。