关于Astro

Astro官网

我是在今年年初的时候了解到这个框架的,当时正准备使用nuxt.js开发自己的博客,并且基本快要完工了,试用了这个框架之后直接就将原本的nuxt.js代码全copy到Astro项目中了(因为它简直太香了)

特点

Astro官方给自己的定位是:集多功能于一体的Web框架,用于构建快速、以内容为中心的网站。

集多功能于一体

我开发的时候基本使用的是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的标题之类的,计划用这个重构一下

使用

使用教程我就不献丑了,官方教程写的很详细,而且有很多模板

Astro Doc

推荐集成

DORAKIKA
我是一个喜欢折腾的前端工程师,对一切新鲜事物充满好奇,希望我的文章能给你带来思考和帮助
👋我是DORAKIKA
分享作者『DORAKIKA』发表的文章『Astro:集多功能与一体的web框架』https://blog.dorakika.cn/post/20230312/
© 请您在需要时著名本文内容来源信息,若在文末注明“参考、扩展”等字样涉及转载第三方内容,请您一同复制
grid布局实现自适应分栏组件
grid布局实现自适应分栏组件
需求来自于博客写作的自定义组件,想实现一个用于分栏展示的组件,综合考虑之后选择了实现一个grid布局组件(除了实现基本的分栏外,还可用于其他常见grid布局)
前端SEO优化
前端SEO优化
什么是SEO,前端如何去做SEO