首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Astro,你真的值得试试……

不过我接下来希望写点正能量的内容,那必须是我最喜欢的 Astro 了。 什么是 Astro? Astro 是一个通过 JavaScript 构建静态和服务端渲染网站的框架。...我的博客,以及 Lucia 的文档都是用 Astro 构建的。使用 Astro 相当愉快。 强大的客户端 JS 支持 Astro 允许你在.astro文件中导入大多数主流框架的组件。....astro文件 .astro文件不仅用于表达页面,它们也是组件。你可以把它们导入为组件,并像任何其他组件系统一样传递 props 和 children。...href={post.href}>{post.title} })} 其他小特性 内置 markdown 和 MDX 支持 内置代码块和语法高亮 Tailwind 插件 强大的插件 API 动态设置...参考来源:pilcrow.vercel.app/blog/astro

46440
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Astro 4.0:全新升级,为现代网站构建赋能

    文章来源官网: https://astro.build/blog/astro-4/ 大家好!今天,我要为大家介绍一个重磅更新——Astro 4.0!...首先,来简单了解下什么是AstroAstro是一个专门为内容驱动网站(如博客、营销和电子商务网站)打造的Web框架。如果你需要一个加载迅速且具备出色SEO性能的网站,那么Astro正是你需要的。...你可以访问astro.new直接在浏览器中尝试Astro 4.0,或在终端运行以下命令开始一个新项目: # 创建一个新的Astro 4.0项目: npm create astro@latest 大多数现有代码库升级到...https://docs.astro.build/en/guides/upgrade-to/v4/ Astro开发者工具栏: Astro 4.0 引入了开发工具栏 - 一种使用 Astro 增强和自定义本地浏览器开发体验的强大新方法...您可以访问astro.new在浏览器中直接尝试Astro 4.0,或在终端运行以下命令来开始一个新项目 # Create a new Astro 4.0 project: npm create astro

    49910

    Astro 4.2 版本发布,社区驱动的里程碑

    experimental: { clientPrerender: true, }, }); 通过在astro.config.mjs中设置clientPrerender为true来启用此功能。...配置示例:如果你想禁用这个自动重定向功能,可以在你的astro.config.mjs文件中进行如下设置: import { defineConfig } from 'astro/config'; export...中设置redirectToDefaultLocale为false,可以禁用自动重定向。...在这个示例中,尽管我们设置了默认语言为英语("en"),并且启用了默认语言前缀,但是我们通过将redirectToDefaultLocale设置为false来禁用了从根URL到默认语言版本的自动重定向。...[alt](src))都会使用Astro默认的图片优化设置。然而,这一新特性允许开发者通过remark插件定制化这些设置,为图片节点添加特定的属性来控制其优化方式。

    15510

    【Docker项目实战】使用Docker部署astro个人仪表板

    一、astro介绍 1.1 astro简介 Astro 是一款适用于现代网络的网站构建工具——强大的开发人员体验与轻量级输出相结合,可作为个人仪表盘使用。...0.5s 5.4 检查astro容器状态 检查astro容器状态,确保astro容器正常启动。...5.5 检查astro容器日志 检查astro容器日志,确保astro服务正常运行。...如果无法访问,则检查服务器防火墙是否设置,云服务器的安全组端口是否放行等。 七、astro的基本使用 7.1 新增服务 点击新增服务选项 编辑服务名称,网址等信息,选择应用分组,确认即可。...7.2 查看新增服务 可以看到服务标签已成功添加,点击即可跳转设置的网址。 八、总结 Astro是一个极简的个人仪表板和导航页工具。

    58710

    Astro 从静态网站生成器到 Next.js 劲敌的旅程

    在它的主页上,Astro 谦虚地宣称自己是“面向内容驱动网站的 Web 框架”(尽管不那么谦虚的是,Astro 还表示它“为世界上最快的网站提供支持”)。...这得益于 Astro 的“岛屿”架构。...Astro 现在可以与任何主流 Web 框架媲美 开发者喜欢 Astro 的原因在于其方法的明显简单性,但随着每个新版本的发布,它都在增加更多功能。...但在此过程中,他试用了 Astro,并很快被开发者体验所吸引。因此,他放弃了 Next.js,而是将他的网站迁移到了 Astro。...你可以使用 Astro 采用 HTML 和 CSS 优先的方法,但“轻松地”在 Astro 中“点缀”JavaScript(正如 Scanlon 所说)。 Astro 的创建者 Fred K.

    41910

    Astro 开启网站性能与开发效率的双重提升之旅

    亮点功能 Astro 群岛 Astro 开创并推广了一种叫做 群岛 的前端架构。...Astro 对内容的独特关注让 Astro 能够做出取舍并提供无与伦比的在其他框架中实现起来不合理的性能功能。...❝Astro 的目标:使用 Astro 几乎不可能做出缓慢的网站。 一个 Astro 网站可以比使用React Web 框架构建的同一网站加载速度快 40%,JavaScript 减少 90%。...Astro 的 .astro UI 语言是 HTML 的超集:任何有效的 HTML 都是有效的 Astro 模板语法!因此,如果你能编写 HTML,你就可以编写 Astro 组件!...无论是内容网站、电商网站还是营销页面,都可以考虑使用Astro进行快速构建。 最后,推荐这集博客,可以更深入的了解Astro项目,了解为什么Astro项目可以使用多种UI框架的原理。

    10710

    Astro 3.0 闪亮登场,让你轻松构建更快速、更流畅的前端应用

    网站前端开发的领域不断演进,随着Astro 3.0的发布,它正在迈出巨大的一步。Astro 3.0引入了突破性的功能和增强功能,承诺改变我们构建和体验网络应用程序的方式。...在历史上,平滑且类似于本机的页面过渡是与单页面应用程序(SPA)相关联的,需要复杂的JavaScript设置。...Astro 3.0通过使这些过渡对每个人都可访问,而无需复杂的JavaScript设置,改变了这一情况。...立即尝试Astro 3.0 Astro 3.0现已在npm上提供。...要开始使用,请访问 astro.new 在您的浏览器中尝试Astro 3.0,或者在终端中运行以下命令以创建新项目: npm install -g create-astro create-astro my-project

    43420

    Astro v2升级v3版本踩坑记录

    我真是服了这个 Astro 老六了,跨版本升级居然有那么多破坏性更改,老版本建的项目直接不能用了。 可以正常启动,打开页面报错: ReferenceError An error occurred....React is not defined 除了要更新 Astro 版本之外,还要更新 React 和 Tailwind 集成: Yarn: # 升级到 Astro v3.x yarn add astro...未经允许不得转载:Web前端开发资源网 » Astro v2升级v3版本踩坑记录 推荐阅读: 写一写今天用阿里云安装wdCP搭建网站踩的坑 利用CSS设置图片黑白/灰色效果,同时适用于整站变灰 Photoshop...保存ICO格式插件 ICOFormat.8bi 设置 letter-spacing 后文字不能居中的解决方法 给元素添加伪类 :before 不显示的解决方法

    14210
    领券