这里是主站 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。