V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Austin2035
V2EX  ›  程序员

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

  Austin2035 · 2023-02-21 11:58:49 +08:00 · 6667 次点击
这是一个创建于 637 天前的主题,其中的信息可能已经有所发展或是发生改变。

为什么写一个博客程序?

对现有博客程序不满,之前我的博客是基于 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

主页

首页

黑暗

文章黑暗模式

普通文章

普通文章模式

语法高亮

Syntax

不同的图片显示模式

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

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

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

第 1 条附言  ·  2023-02-21 16:39:15 +08:00
欢迎给个 Star ,我感觉 Star 能鼓励我持续开发。
Github https://github.com/austin2035/astro-air-blog
41 条回复    2023-03-06 22:13:55 +08:00
ospider
    1
ospider  
   2023-02-21 12:19:06 +08:00
挺漂亮,像 Apple 而又不是像素级照搬
zhaohai
    2
zhaohai  
   2023-02-21 12:22:44 +08:00
不懂架设啊
sduoduo233
    3
sduoduo233  
   2023-02-21 12:23:39 +08:00 via Android
看起来不错
zhuyongqi9
    4
zhuyongqi9  
   2023-02-21 12:31:11 +08:00
页面很漂亮,楼主是专业的设计吗
zoharSoul
    5
zoharSoul  
   2023-02-21 12:41:06 +08:00
@zhaohai 什么意思?
Davic1
    6
Davic1  
   2023-02-21 13:01:42 +08:00 via iPhone
哈哈哈 爱看老高!
misadonfdfl
    7
misadonfdfl  
   2023-02-21 13:32:08 +08:00
挺漂亮的。等一手喂饭教程。
Satelli
    8
Satelli  
   2023-02-21 13:51:01 +08:00   ❤️ 1
提个建议,苹果网站字体 SF Pro SC 是 webfont ,把苹方的西文部分换成了 San Francisco 的。
你的 CSS 最终在苹果平台匹配到的是 PingFang SC ,会造成西文部分也以苹方显示。
实际上苹方的西文部分不是 San Francisco ,苹果各系统即使用中文,在显示西文时也是 San Francisco 。

建议直接调整成 system-ui 就好,反正非苹果用户也不会单独安装苹方字体。
azui999
    9
azui999  
   2023-02-21 14:11:12 +08:00
右上角的三个字加上这三个样式,感觉好看点.
.nav-item-content
font-weight: 500;
color: var(--footer-text-color);
letter-spacing: 0em;
qqjay2019
    10
qqjay2019  
   2023-02-21 14:13:53 +08:00
挺好看,已经 start
bs10081
    11
bs10081  
   2023-02-21 14:15:17 +08:00
支持,好看,蹲一個懶人教學(我就爛😂
hazy
    12
hazy  
   2023-02-21 14:27:45 +08:00
一眼 apple newsroom 哈哈,挺好看的,感谢分享
samasxxc
    13
samasxxc  
   2023-02-21 14:33:20 +08:00
看看
BaseException
    14
BaseException  
   2023-02-21 14:47:28 +08:00
漂亮~ star 了
vchroc
    15
vchroc  
   2023-02-21 14:48:41 +08:00
有没有白色主题呢
LavaC
    16
LavaC  
   2023-02-21 14:49:25 +08:00
连接到 astro-blog.qum.cc 时发生错误。PR_END_OF_FILE_ERROR
SeanDragon
    17
SeanDragon  
   2023-02-21 15:17:48 +08:00
真不错,可以 fork 走去使用嘛?项目是什么开源协议呢?
Inf1nity
    18
Inf1nity  
   2023-02-21 15:23:09 +08:00   ❤️ 1
看起来很不错,提一个小建议:Windows 下的代码字体看起来不太舒服,可以试试 Cascadia Code 、Jetbrains Mono 、Consolas 或者 Inter 。
metrue
    19
metrue  
   2023-02-21 15:49:42 +08:00   ❤️ 1
很漂亮,赞.
baiduyixia
    20
baiduyixia  
   2023-02-21 15:52:21 +08:00
很棒 star
baiduyixia
    21
baiduyixia  
   2023-02-21 15:53:12 +08:00
这首页用来做 pc 网站电脑首页也是很高级
anonymous2351d00
    22
anonymous2351d00  
   2023-02-21 16:00:42 +08:00
羡慕了,你你你你,能不能教教我 css
Austin2035
    23
Austin2035  
OP
   2023-02-21 16:21:13 +08:00
非常感谢各位的支持和建议,谢谢谢谢。
Austin2035
    24
Austin2035  
OP
   2023-02-21 16:23:46 +08:00
当然可以的,开源协议我稍等会选择一个自由一点的。
@SeanDragon
pekew
    25
pekew  
   2023-02-21 18:11:42 +08:00
作为一个喜欢收拾博客样式又喜欢 Apple 的人,真的一眼喜欢。不过有个小想法(不认同当我没说):博客左上角的“xx's blog” 可以改一改,目前用到比较多博客主题好像都是喜欢类似的样式( hexo-next ,hugo-nextlike )。其实可以改成 Apple 特有的中文风格,像什么“大写的大、比更大更大、开了又开”,参考 https://www.zhihu.com/question/24144025/answer/123223234

脱离 web 很久了,技术方面就不露怯了 :D
Austin2035
    26
Austin2035  
OP
   2023-02-21 18:23:47 +08:00
@pekew 哈哈哈,有趣,666
wangdashuai
    27
wangdashuai  
   2023-02-21 18:33:09 +08:00
可以写成适配 git page 的项目,这样直接可以部署 git page 博客了。
Austin2035
    28
Austin2035  
OP
   2023-02-21 18:48:20 +08:00
@wangdashuai 这种想法也不错。
sardina
    29
sardina  
   2023-02-21 20:05:45 +08:00
谢谢你让我看到十年后的网站长什么样子
sardina
    30
sardina  
   2023-02-21 20:06:19 +08:00
🐶
Dragonphy
    31
Dragonphy  
   2023-02-21 21:08:54 +08:00   ❤️ 1
正好在用 Astro 写网站,已偷[doge]
Dragonphy
    32
Dragonphy  
   2023-02-21 21:10:48 +08:00
我太喜欢了,爱你🥹🥹🥹
Bssn
    33
Bssn  
   2023-02-22 00:00:22 +08:00   ❤️ 1
挺好看的
NormanGhost
    34
NormanGhost  
   2023-02-22 00:51:17 +08:00 via Android
首页为啥没有 dark 模式,主题很好看
Austin2035
    35
Austin2035  
OP
   2023-02-22 10:02:45 +08:00
@sardina 过誉了,xd
Austin2035
    36
Austin2035  
OP
   2023-02-22 10:03:34 +08:00
@NormanGhost 这个还没搞,我感觉不太合适。文章有个黑色模式,主要是考虑到 图片多的情况。黑色背景更加适合展示图片。
tanran
    37
tanran  
   2023-02-22 18:28:45 +08:00
漂亮,页面很多文章为啥是 2035 年,纯展示?
Austin2035
    38
Austin2035  
OP
   2023-02-22 18:29:10 +08:00
@tanran 是的,没错。
XSNARUTO
    39
XSNARUTO  
   2023-02-23 08:10:30 +08:00 via iPhone   ❤️ 1
虽然用不上,不过不妨碍满满的好感。前两天在 Twitter 看到的,也 star 了。想着之后有空了要给自己博客好好重构一套主题,现在就在搜罗各种好看的主题想以后拿来参考。刚来站里搜各种主题,不出意外的又看见你的帖子啦哈哈哈哈。

说实话我看站里好多人发出来自己的博客链接,点进去都有点失望。丰富一点的,就很多花花绿绿一堆动效加二次元插图的;简单点的呢,又很多极简到连字体字号都没做调整,各种奇奇怪怪的换行和留白,整个页面又简单又混乱😂。你的这个主题,个人感觉,真的算是站里少见的一股清流。
Austin2035
    40
Austin2035  
OP
   2023-02-23 10:59:25 +08:00
@XSNARUTO 欢迎基于我的工作进行二次创作,创作出一个更加符合你心意的博客。
taro0822
    41
taro0822  
   2023-03-06 22:13:55 +08:00
@Austin2035 在作者的基础上移植了一个 Hugo 版的,欢迎有需要的小伙伴来体验&完善~
https://github.com/floyd-li/hugo-theme-itheme
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1026 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 28ms · UTC 20:39 · PVG 04:39 · LAX 12:39 · JFK 15:39
Developed with CodeLauncher
♥ Do have faith in what you're doing.