我的全新博客现已完成 - Shiina's Blog

我的全新博客现已完成

2023 年 2 月 5 日 - 06:05:46 发布
1.8K 字 6分钟
本作品采用 CC BY-NC-SA 4.0 进行许可。
本文距离首次发布已经过去了 461 天,请注意文章的时效性!

关于不知道标题写什么于是就写了你现在看到的话

这是一个2022年11月就在策划的项目,本来说2023年1月底就要进行发布和拍视频,但是由于太懒了所以一直在拖.jpg,直到二月中旬才差不多才彻底完成,真是太懒了(

接下来说一下自己为什么要做这个项目以及一些未来的特性想法,bug和其他的内容会放在另一篇文章

项目起因

当初的想法是想着做一个新的博客,然后尽量往里面加新东西,虽然这个项目去找工作可能不够,但是找实习应该够了。当时其实有一个刚创业的公司找我愿意给我个实习位置,但是由于某些原因最后还是没有去,感觉也是挺可惜的,至于为什么要用 Astro 作为框架,是那个公司的CTO告诉我让我接触的框架,后面看了一下这个框架的特色是这些:

  • 通过该框架独有组件生成的页面不包含任何 js,除非自己写原生的或集成了UI框架
  • 同时支持静态博客与服务端渲染和部署
  • 基于 vite 制作的框架
  • 友好的 SEO 支持
  • 附带组件对图片优化

其中这个不包含任何 js 很吸引我,因为当时学了vue和react,然后随便了解了一下服务端渲染,正想着来一个新框架来体验一下,而这个框架的特色很符合博客的需求,所以就决定好好看一下了

项目起步

由于这个框架发展的生态还不是很完整,当时入坑的版本是 1.4,就 11 月份,现在是 2 月初,已经更新到 2.0 了,这个迭代速度是真的快,同时也多了很多新特性,后面的核心博客处理也是根据新特性来制作的

一开始我在 astro 官网找别人的例子,说实话国内博客的风格和国外的博客风格很不一样,国内大部分博客设计的都是很多方方正正的,而国外基本都会有一个初始化的引导页,同时字体选用的是圆体,还有圆角方框,就是质感很不一样就对了

当时也想着集成主页到博客里,由用户自定义制作,因为引导页代表着一个人的个性,在这个集成内你也可以通过内置的运行时api来展示博客拥有的标签以及文章

然后就是大概画了一下要做的页面的线框图,然后就开始设计项目结构了

项目结构的话还是看官方文档的,他们规定了一些标准的已被占用的目录,其实也不多,单看 src 下完全被占用的就是 pages 目录了,因为要根据这个目录下面的文件生成路径以及静态文件

官方文档:https://docs.astro.build/zh-cn/core-concepts/project-structure/#srcpages

对群岛模式的理解

一句话:将页面划为多个组件,并分需要交互的组件与静态内容,并对需要交互的组件单独注入js,不影响其他内容

当然你也可以引入框架组件,比如 vue 扩展名的 vue 组件, jsx 扩展名的 react 组件,但是被引入到 astro 文件中时都会被去除掉 js,不包含交互性,如果需要的话则是通过全局指令去激活

单页面博客与多页面博客

传统的服务端渲染框架做出来的页面也是单页面应用,如果不使用服务端渲染,那么 SPA 的应用展示基本上永远比 SSR 和 MPA 应用要慢,所以做以内容为中心的网页时首屏加载与速度是非常关键的

服务端路由与客户端路由

单页面应用的优点就是可以实现路由的无缝衔接,切换过程全在本地执行;而 MPA 制作的网站则是将路由逻辑放在服务器

这样一比就知道:MPA 提供更快的首次加载体验,而 SPA 可能会在 JavaScript 应用程序在浏览器中完全加载后提供更快的第二或第三页加载。

新引导页面的 flag 什么时候完成

别急,还有114514天完成,等我找几个黑奴来写写就好(

未来特性的期望

现在这里列出来:

  • 集成评论区,支持自设后端或 GitHub / gitee issue 获取评论
  • 集成一个后台管理系统,可以在后台管理部分写内容或重启服务器,或实现服务端渲染重启和文章同步
  • 页面美化
  • 提升自定义程度
  • 翻译 ts 设置至英文
  • 博客大标题添加 a 标签跳转
  • 博客页面添加大图图片展示

大概就这么多了,摸了摸了,好多事情要做,根本填不完饼,寄!

个人信息
avatar
Shiinafan
文章
38
标签
52
归档
4
导航