跳到主内容

LYRA

Lyra 正在加载

About

关于本站

随笔记录一些站点相关的技术细节及设计理念

站名含义

Lyra / 天琴座

Lyra 即 天琴座 的拉丁名,取自夜空中竖琴般的星群,也呼应本站收纳文字、旋律、图集与日常回忆的方向。

天琴座中最明亮的织女星在银河旁闪耀。愿本站如一段轻拨的琴弦,记录沿途微光;愿此行,终抵繁星。群星闪耀之处,愿你我相聚!

搭建环境

Astro + Cloudflare Pages

本站现在以 Astro 静态生成整站,使用 Tailwind CSS 4 组织布局、间距与主题变量,并将博客、个人页、友链、音乐和图集合并到同一个项目中维护。

源代码托管于 GitHub,提交后由 Cloudflare Pages 自动构建与发布,线上域名为 onioni.cn

字体选用

Overpass / 系统中文字体栈

站点的品牌字、数字、日期与部分英文信息使用 Overpass,代码、编号与技术标签使用 Overpass Mono,许可协议为 OFL

正文优先使用系统中文字体栈,保证中文阅读速度;OpenGraph 图片中的中文排版则使用本地托管的 Noto Sans SC。

Lyra / onioni.cn · Per aspera, ad astra.

色彩搭配

Lucent / 水蓝玻璃感

当前视觉延续 Lucent 主题的蓝白玻璃感,以水蓝、雾白与深海蓝组成主色调,让卡片、导航、时间线与按钮保持轻量而清晰。整套表面与文字都收在同一个色相族里(约 203°),不再混用偏青与偏蓝两套灰。

浅色模式强调通透感,卡片是最亮的面;深色模式避免纯黑背景,改用四级表面阶梯,越靠上的层越亮,而不是靠阴影分层——深色底能供阴影下压的亮度空间不足 5%。

两套主题共用一套语义令牌,色值只在 base.css 出现一次。弱化文字分三档,两个主题各自调过透明度以落到同一对比度;强调色在任何主题下都比主色更亮,正文、链接与焦点环均按 WCAG 实测取值。

Colophon

刊印志 / 造物清单

主体框架

Astro 7 静态生成整站,整合博客、个人页、友链与图集
Tailwind CSS 4 负责布局、间距与主题化视觉系统
TypeScript 以严格模式维护内容数据与页面逻辑
pnpm 11 项目依赖与构建脚本的包管理器

部署与自动生成

Cloudflare Pages 连接 GitHub 后自动构建并部署静态站点
GitHub 源代码托管与版本管理
Sitemap 自动生成站点地图,供搜索引擎索引
RSS 输出博客订阅源,并清洗文章 HTML
OpenGraph 使用 Satori 与 Sharp 生成页面和文章分享图

内容与视觉

Content Collections 管理博客文章、分类、标签与搜索数据
Lucent 延续 Lucent 主题的蓝白玻璃感与轻量卡片风格
Astro Image 处理头像、Hero、友链与图集的响应式图片

字体

Overpass 品牌文字、数字与部分英文信息用字
Overpass Mono 代码、编号与技术标签的等宽字体
Noto Sans SC 用于 OpenGraph 图片中的中文排版
系统中文字体栈 正文优先使用本机中文字体,保持阅读速度

插件模块

Expressive Code 文章代码块高亮,浅色使用 GitHub Light、深色使用 Vesper
@astrojs/rss 生成博客订阅源,输出 RSS 2.0 全文内容
@astrojs/sitemap 构建时生成 sitemap-index.xml
Satori / Sharp 生成 OpenGraph 图片并转换为 JPEG
markdown-it / sanitize-html 渲染并清洗 RSS 全文 HTML

第三方服务

Disqus 文章页评论系统,接近视口后懒加载

时间轴

记录本站发展历程

  1. 建立博客,由 Hexo 构建,Phantom 作为主题

  2. 开始使用域名 onioni.net

  3. 以 Phantom 作为基础进行个性化和个人风格处理

  4. 博客从 Hexo 迁移至 Astro,并完全整合博客与个人页

  5. 全站使用 Tailwind CSS 进行重构,以 Lucent:明光初启 主题进行风格翻新

  6. 启用以个人风格设计Lucent plus主题,新增壁纸、搜索模块

  7. 更换新域名 onioni.cn