summary
type
category
tags
slug
status
date
finished_date
icon
password
调用示例
Notion 支持输入链接，直接加载对应的网页内容。这对自定义小组件非常方便，最简单的就是把 HTML 部署上线，主打一个花里胡哨。
WordPress / Hexo 等框架，插入以下内容也可以实现：
随机诗句
默认效果
https://notion-widgets.rylan.cn/poem
- 标题字数有时很长，无法预估卡片长度，出现滑动条不美观
只保留诗句
https://notion-widgets.rylan.cn/poem?name=false&author=false
筛选描写植物的诗句 / 自定义文字颜色
https://notion-widgets.rylan.cn/poem?theme=zhiwu&color=%23800000
英文引言
默认效果
https://notion-widgets.rylan.cn/quote
- 同理，引言字数有时很长，出现滑动条不太美观
筛选指定最大字数的引言 / 自定义背景／修改卡片宽度
https://notion-widgets.rylan.cn/quote?maxLength=100&bg=https://s2.loli.net/2024/03/31/BENehqCG5axTvO9.png&width=350
音乐播放器
⚠️ VIP 歌曲游客只能听 30 秒
Id 怎么获取
- 打开对应播放器网页版，比如 网易云（其他播放器个人不常用，原理差不多）
- 找到你想要的歌单/歌曲/专辑/歌手
- 复制地址栏的 id
或者可以直接使用官网的外链生成
- 优点：加载速度更快
- 缺点：定制性差，且 NotionNext 框架遇见跨域报错问题
指定歌单
https://notion-widgets.rylan.cn/music?server=netease&type=playlist&id=9173198673
指定单曲 / 不显示歌词 / 修改播放器颜色
https://notion-widgets.rylan.cn/music?server=netease&type=song&id=490106148&lrc=0&theme=%2300BFFF
技术总结
总的来说，没有太大技术含量。记录一些之前不熟悉的知识点。
字体资源加载
字体类型
TTF, True Type Font
标准的字体格式，由苹果公司和微软公司共同开发。最常见的格式，所有主流浏览器都支持它。
OTF, Open Type Font
由 TTF 演化而来，是微软和 Adobe 共同开发的成果。
支持更多的字符和语言，通常用于专业的排版和设计工作。
WOFF, Web Open Font Format
由 Mozilla 基金会开发，基于 TrueType 和 OpenType字体，专为 Web 设计的字体格式，文件更小，加载更快。
- WOFF2 是 WOFF的升级版本，提供更优的压缩率，但还没被广泛支持。
- 推荐在线工具：https://ucece.com/ttf2woffs
- 随机诗句组件引用了额外字体文件，找到的原资源是 tff 文件，大概有 5MB+，后来使用工具转为 woff2，变为 3MB+
EOT, Embedded Open Type
由微软开发的一种专为 Internet Explorer 浏览器设计的字体格式，它包含版权保护功能，可以限制字体的使用。
- 只有 IE 游览器支持改格式，因此它的使用相对有限
预加载
我们在 CSS 中引入外部字体的时候通常需要这么做
- 当使用
font-display: swap时，如果自定义字体还未加载完成，浏览器会立即使用备用字体 (fallback font)，比如这里的serif来渲染文本。
并可以使用预加载，让浏览器尽早开始下载这些资源
crossorigin="anonymous"指定在（跨域）请求资源时不应发送用户凭据（如 Cookies 和 HTTP 认证）。这是为了遵守同源策略，同时确保资源的安全加载。
- 如果服务器对资源文件启用了 CORS 策略，那么这个设置可以防止请求被拒绝。
- 如果资源文件与你的网页处于同一个域，通常不需要使用该属性属性。在同域情况下，浏览器默认行为就是不包含凭据的请求。
字体切割
相比英文字体，中文字体文件通常非常大，因为它们包含成千上万的字符。如果在网页一次性引入整个文件，用户在第一次加载时候的速度会比较缓慢。
那么如果能将一个大型字体文件分割成了多个小号文件，然后通过使用
unicode-range 按需引入，那么浏览器只会在页面使用了该范围中的字符时，才会加载对应的字体“分片”。U+00-U+FF：基本字母
-
U+4E00到U+9FFF：常用汉字
推荐开源项目
首先引入指定库
然后新建一个 JS 文件，运行以下短短几行代码（删除了一些自定义配置，非常开箱即用）
最后会生成一个 build 目录
里面有几十个拆包后的
*.woff2 文件 以及一个入口 result.css，把所有字体文件和这个 css 文件 放入实际项目，并正确引用即可。
CSS 游览器兼容
本来样式好不容易调整好了， Chrom 和 Edge 都没问题，结果打卡火狐一看，血压都要上来了。部分文字莫名其妙重叠在一起，非常扭曲。
查了半天，发现主要是 div 宽度自适应问题：在部分游览器中，如果内容的宽度超过父元素的宽度，内容不会隐藏，父元素的宽度不会自动增加。
解决方法：主动声明
min-width
图片颜色分析
英文引言的背景通过调用 API 的获取随机图片，但是有的图片深，有的浅，哪怕添加给图片增加了灰色遮罩，如果统一使用深色或浅色字体，有时候显示也不是很清楚。因此需要分析图片整体的亮度来的决定字体的颜色
首先获取图片的 ImageData 数据 （以图片 canvas.png 为例）
ImageData 是 Canvas API 的一部分，用于表示画布上的原始像素数据，它包含以下几个只读属性：
width：图片宽度
height：图片高度
data：Uint8ClampedArray类型的一维数组，包含 RGBA 格式的整型数据
打印出的
Uint8ClampedArray 类型 data 如下
例如：数组的前四个元素是
[155, 220, 16, 197]，对应图片第一个像素的草绿色
接下来判断图片的整体亮度 （以下代码跟在刚刚的 console.log(data) 后面）
以及拓展个例子
如何给整张图片添加灰色滤镜
JS 变量
播放器组件的实现原理是通过引入了
APlayer 和 Meting JS 库：但是一旦我关闭梯子，调用就会报错：
疑似它国内后端接口挂了，于是使用源码自己部署了一个新接口 🙇♀️
Mettng.js 中有以下一段源码
var 全局作用域
window.meting_api 中的 window 即 JS 中的一个全局对象，代表浏览器窗口。JS 函数中，使用
var 声明的变量会成为当前作用域（函数作用域或全局作用域）的全局变量，并且会在声明点之前的代码执行阶段进行变量提升 (hoisting)。- 如果想在 node 环境中绑定全局变量：
global.temp = "hello";
但是在现代工程框架的使用下，我们会发现
var 关键字正在被舍弃，有的甚至使用 lint 工具明确禁用，统一只使用 let 和 const，从而使作用域被限制在块级的变量中。let / const 暂存死区
Temporal Dead Zone, TDZ
在代码块中，从块的开始到
let 变量声明之间的区域称为 TDZ。在 TDZ 内访问这个变量会导致一个引用错误。这意味着变量在声明之前不能被访问或使用。🔴 不是单纯的 undefined，而是直接报错
扯远了… 所以在这个例子中，必须强行注入 var 变量自己部署的后端接口，从而实现变量提升后的替换效果
2024/5/21 更新：找到了接口能用的 Meting.js