使用 CloudFlare Workers 实现 CORS Anywhere
CloudFlare Workers 可以实现很多需求,通过它来代理访问非公开、未设置 CORS 头的 API 也在官方的示例项目内。不过由于免费 plan 的访问量限制以及性能限制等,一般用来给自己的实验性项目做一下简单代理。这里以 Bangumi 的 API 为例演示完整的实现。
LeetCode 题解全记录
更新深色模式主题并支持 prefers-color-scheme
自己给博客写的主题 Fuji 正在进行大改版,顺手也把夜间模式 (深色模式、黑暗模式?都差不多) 进行了改版以适配 prefers-color-scheme
。
v1 的旧实现方法
起初写主题的时候深色模式用了最基础的办法,也是兼容性最好的办法。给 body
加上 data-theme
属性,根据属性值是 light 还是 dark 判断主题。CSS 中独立写出两种配色,分别包括在 body[data-theme='light']
和 body[data-theme='light']
块内。
直接维护两套样式的方法清晰直观,但会造成冗余代码,而且构建一时爽、维护火葬场。
CloudFlare 的 Rocket Loader 导致切换夜间模式闪烁
近来在给我的 Hugo 主题 Fuji 写一次大更新,准备添加一些新功能顺便整理一下混乱的 SCSS 结构。由于近期入手一台 iPad,晚上几乎一直是在夜间模式下逛网页,因此计划给主题添加一个夜间模式。原本挺简单的一个小功能没想到却踩了不少坑,在此记录一下。
为 utterances 添加评论加载中提示
在使用 utterances 作为博客评论系统的时候发现了一些问题。当评论区处于加载中或是加载失败状态的时候,评论区 div
可能会产生一块空白。虽然由于自家主题的原因看不出来,但如果使用到其他主题 (有边框或者阴影之类) 就会很明显。
使用 ProgressBar.js 为页面添加浏览进度条
在给自己博客写主题的时候,计划要加个返回页面顶部的按钮。既然按钮也计划上了,干脆又决定在上面顺便集成一个进度条来显示当前的阅读进度。作为懒人模范的我自然又开始想着 Ctrl+C
了,找了一圈后发现个很不错的轮子 ProgressBar.js。
ProgressBar.js 能借助 SVG 生成各种形状的响应式进度条。它本身提供了线形,圆形和半圆形等形状,也可以用 Adobe Illustrator 之类的矢量图形编辑器创建自己想要的自定义图形。