关于Astro
我是在今年年初的时候了解到这个框架的,当时正准备使用nuxt.js
开发自己的博客,并且基本快要完工了,试用了这个框架之后直接就将原本的nuxt.js
代码全copy
到Astro项目中了(因为它简直太香了)
特点
Astro官方给自己的定位是:集多功能于一体的Web框架,用于构建快速、以内容为中心的网站。
集多功能于一体
- SSR服务与静态站点
- 自创的
.astro
语法&各种UI框架兼容:Vue、React、Preact、Solid、Svelte、Lit等等)(这意味着你可以在一个网站上使用7-8个框架【就是玩儿!】) - 上百种集成:像我博客的rss、sitemap、service-worker等功能都是直接使用集成来配置的(简直不要太香)
我开发的时候基本使用的是astro原生语法+vue组件来开发。 动态的组件基本都是用vue来(因为方便),静态UI组件用astro语法生成(无js,提升站点速度)
快速
Astro默认构建是不带JavaScript的(你需要手动添加js,这样最后构建出来的网站只会有少量的必要js,速度非常快!)。
Astro组件会在构建时期就被渲染成HTML块,并去除所有的JavaScript。在需要响应式UI的时候(比如点击事件等等),可以通过在script标签上加上指令(如is:inline
)或者将组件标记为岛屿(会被动态加载,也会导入JavaScript,在你的页面中,其他大部分组件都已经被转换成了静态的HTML,这意味着你的网站)
基于以上,为了在任意组件中都可以方便的绑定事件(而不是一个一个script插入),我是将常用的函数都暴露到一个全局对象上,这样想给按钮绑事件就只需要添加
onclick='xxFunc()'
就行。
以内容为中心
Astro官方提供了 ContentCollection 来使用markdown构建内容。只需要在src/content
文件夹下就可以为网站添加内容了。
除此之外,Astro还提供了从 第三方获取内容 的方法。可以通过安装集成(或者直接fetch)来同步其他CMS平台的内容。也就是说,虽然构建的是静态站点(但咱可以从借助CMS随时随地更改内容,只需要一个脚本来让Astro项目重新构建)
我目前用的是官方的ContentCollection+MDX增强。但目前扩展组件也没有写多少,并且貌似不能自定义markdown原生组件(比如标题、引用、代码块等)。而且最近支持了markdoc集成(就是像
{% card arg1, arg2 &}
这样的语法),看了看文档是支持重写markdown的标题之类的,计划用这个重构一下
使用
使用教程我就不献丑了,官方教程写的很详细,而且有很多模板
推荐集成
- astrojs-service-worker:使用ServiceWorker对页面进行缓存
- @astrojs/rss:辅助生成
rss.xml
- @astrojs/sitemap:生成站点地图
- 除了这些还有图像优化等集成,不过我还没用,就不做评价了