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 主题的蓝白玻璃感,以水蓝、雾白、浅灰蓝和深海蓝组成主色调,让卡片、导航、时间线与按钮保持轻量而清晰。

浅色模式强调通透感,深色模式避免纯黑背景;链接、边框与状态色会优先使用主题变量,以兼顾站点风格和 WCAG 对比度要求。

Colophon

刊印志 / 造物清单

主体框架

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

部署与自动生成

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

内容与视觉

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

字体

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

插件模块

Expressive Code 文章代码块高亮,使用 Vesper 主题
@astrojs/rss 生成博客订阅源,输出 Atom 格式内容
@astrojs/sitemap 构建时生成 sitemap-index.xml
Satori / Sharp 生成 OpenGraph 图片并转换为 PNG
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