🎉 使用 Astro 构建的苹果味博客，低调开源

[Austin2035]

为什么写一个博客程序？

对现有博客程序不满，之前我的博客是基于 typecho 的。我不懂 PHP ，所以在折腾的时候有很大的局限性。
经过一些了解，我最终选择 Astro 构建新的博客程序。并且进行一次彻底的改版。
Astro 只需要会点前端基础就能写。这几天我参考官方文档，边学边做，实践出了这个产物。

特性如下

1. 基于 #Astro 构建，部署后生成静态文件
2. 支持 明亮与黑暗模式（代码高亮同）。
3. 支持 图片动画、标签、目录。
4. 支持 Markdown 、MDX 。
5. 响应式，且有三种图片模式（宽屏、竖屏、超宽屏），只需要在 alt 中指定即可。

值得一提的是，在使用了 Cloudflare 或者 Vercel 部署之后。我们只需要维护 Github 仓库即可，只需要提交到仓库，更新和发布都是自动的。而且免费、无需备案、在全球有不同节点。

网址

预览 https://astro-blog.qum.cc/

Github https://github.com/austin2035/astro-air-blog

主页

黑暗

普通文章

语法高亮

不同的图片显示模式

有三种图片显示模式: wide, big, inline. 当你编写 mark 文件的时候可以指定 wide 或 big 或 inline 到你的图片 alt 属性中, 比如这样:

![一些描述|wide](a.png)

分隔符号是 |, 默认模式是 big.

[ospider]

挺漂亮，像 Apple 而又不是像素级照搬

[zhaohai]

不懂架设啊

[sduoduo233]

看起来不错

[zhuyongqi9]

页面很漂亮，楼主是专业的设计吗

[zoharSoul]

@zhaohai 什么意思?

[Davic1]

哈哈哈 爱看老高！

[misadonfdfl]

挺漂亮的。等一手喂饭教程。

[Satelli]

提个建议，苹果网站字体 SF Pro SC 是 webfont ，把苹方的西文部分换成了 San Francisco 的。
你的 CSS 最终在苹果平台匹配到的是 PingFang SC ，会造成西文部分也以苹方显示。
实际上苹方的西文部分不是 San Francisco ，苹果各系统即使用中文，在显示西文时也是 San Francisco 。

建议直接调整成 system-ui 就好，反正非苹果用户也不会单独安装苹方字体。

[azui999]

右上角的三个字加上这三个样式,感觉好看点.
.nav-item-content
font-weight: 500;
color: var(--footer-text-color);
letter-spacing: 0em;

[qqjay2019]

挺好看,已经 start

[bs10081]

支持，好看，蹲一個懶人教學（我就爛😂

[hazy]

一眼 apple newsroom 哈哈，挺好看的，感谢分享

[samasxxc]

看看

[BaseException]

漂亮~ star 了

[vchroc]

有没有白色主题呢

[LavaC]

连接到 astro-blog.qum.cc 时发生错误。PR_END_OF_FILE_ERROR

[SeanDragon]

真不错，可以 fork 走去使用嘛？项目是什么开源协议呢？

[Inf1nity]

看起来很不错，提一个小建议：Windows 下的代码字体看起来不太舒服，可以试试 Cascadia Code 、Jetbrains Mono 、Consolas 或者 Inter 。

[metrue]

很漂亮，赞.

[baiduyixia]

很棒 star