
这里是主站 www.334486.xyz 的介绍。
主站叫「Eazen的小屋」,主要作用是从这里进到各个分站。
页面上有什么
左边是一张个人信息卡:头像、名字,底下一句欢迎语。
右边从上到下是这几块:
一言
每次刷新换一句,内容来自于一言(hitokoto.cn),感谢一言网萌创团队的免费公开接口。
时钟与天气
左边是当前时间和日期。右边是天气,默认显示一个城市的温度,点右上角的齿轮可以搜索并切换城市。天气数据来自 open-meteo,不用注册也不用填 API key;选的城会存在浏览器本地,下次打开还是那个。
网站入口
一排按钮,一共五个:
| 按钮 | 去哪里 | 是什么 |
|---|---|---|
| 博客 | blog.334486.xyz | 就是你现在看的地方 |
| 图库 | image.334486.xyz | 放图片的地方 |
| 邮箱 | mail.334486.xyz | 邮件服务 |
| 音乐 | music.334486.xyz | 自己传的歌 |
| 导航 | nav.334486.xyz | 常用书签 |
音乐播放器
左下角有个转动的唱片。点开是播放器,读的是音乐站的歌单。
技术栈
| 部分 | 用的什么 |
|---|---|
| 页面本身 | 纯 HTML + CSS + JS,单文件,没有框架、没有构建步骤 |
| 托管 | Cloudflare Pages |
| 背景壁纸 | 存在 Cloudflare R2,页面加载时随机取一张,浏览器缓存 1 小时 |
| 天气 | open-meteo 的免费接口,含城市搜索 |
| 一言 | hitokoto 接口 |
| 字体 | 自托管,不依赖第三方 CDN |
样式
- 底色是奶油色(
#FFF8EC),文字深棕(#2d1810),强调色焦糖橙(rgba(197,110,52,.92)) - 卡片为毛玻璃,半透明白底、细边框、柔和阴影;取消
backdrop-filter,其会导致在部分浏览器上会分块模糊、出现条纹 - 正文字体用 Noto Sans SC,一言标题用霞鹜文楷
- 明暗两套主题,右上角切换,默认跟随系统;手动切换后会记住选择
联系方式
有问题或者建议,劳烦发邮件:blog@334486.xyz。