summary
type
category
tags
slug
status
date
finished_date
icon
password
代码仓库：awesome-notion-widgets
代码仓库：awesome-notion-widgets

调用示例

Notion 支持输入链接，直接加载对应的网页内容。这对自定义小组件非常方便，最简单的就是把 HTML 部署上线，主打一个花里胡哨。
WordPress / Hexo 等框架，插入以下内容也可以实现：
notion image

随机诗句

🍑
默认效果
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?keys=flower&maxLength=75&width=275

音乐播放器

⚠️ VIP 歌曲游客只能听 30 秒

Id 怎么获取

  1. 打开对应播放器网页版，比如 网易云（其他播放器个人不常用，原理差不多）
  1. 找到你想要的歌单/歌曲/专辑/歌手
  1. 复制地址栏的 id
🐞
或者可以直接使用官网的外链生成
  • 优点：加载速度更快
  • 缺点：定制性差，且 NotionNext 框架遇见跨域报错问题
notion image
🍑
指定歌单
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 游览器支持改格式，因此它的使用相对有限

预加载

1️⃣
我们在 CSS 中引入外部字体的时候通常需要这么做
  • 当使用 font-display: swap 时，如果自定义字体还未加载完成，浏览器会立即使用备用字体 (fallback font)，比如这里的 serif 来渲染文本。
2️⃣
并可以使用预加载，让浏览器尽早开始下载这些资源
  • crossorigin="anonymous" 指定在（跨域）请求资源时不应发送用户凭据（如 Cookies 和 HTTP 认证）。这是为了遵守同源策略，同时确保资源的安全加载。
  • 如果服务器对资源文件启用了 CORS 策略，那么这个设置可以防止请求被拒绝。
  • 如果资源文件与你的网页处于同一个域，通常不需要使用该属性属性。在同域情况下，浏览器默认行为就是不包含凭据的请求。

字体切割

相比英文字体，中文字体文件通常非常大，因为它们包含成千上万的字符。如果在网页一次性引入整个文件，用户在第一次加载时候的速度会比较缓慢。
那么如果能将一个大型字体文件分割成了多个小号文件，然后通过使用 unicode-range 按需引入，那么浏览器只会在页面使用了该范围中的字符时，才会加载对应的字体“分片”。
  • U+00 - U+FF：基本字母
  • U+4E00 到 U+9FFF：常用汉字
🌟
推荐开源项目
中文万字计划 / cn-font-split
（刚开始报错，作者很快解决了）
  • 优点：可以选择更多开源中文字体
  • 缺点：有时候加载还是太慢
notion image
📌
2024/3/10 更新：
最后还是改用 Google Fonts
  • 优点：加载快
    • 它们采用的也是字体分片加载，以及有 CDN 加持
        • notion image
  • 缺点：中文字体少
1️⃣
首先引入指定库
2️⃣
然后新建一个 JS 文件，运行以下短短几行代码（删除了一些自定义配置，非常开箱即用）
3️⃣
最后会生成一个 build 目录
里面有几十个拆包后的 *.woff2 文件 以及一个入口 result.css，把所有字体文件和这个 css 文件 放入实际项目，并正确引用即可。
notion image
notion image

CSS 游览器兼容

本来样式好不容易调整好了， Chrom 和 Edge 都没问题，结果打卡火狐一看，血压都要上来了。部分文字莫名其妙重叠在一起，非常扭曲。
查了半天，发现主要是 div 宽度自适应问题：在部分游览器中，如果内容的宽度超过父元素的宽度，内容不会隐藏，父元素的宽度不会自动增加。
💡
解决方法：主动声明 min-width
火狐错版截图
火狐错版截图

图片颜色分析

英文引言的背景通过调用 API 的获取随机图片，但是有的图片深，有的浅，哪怕添加给图片增加了灰色遮罩，如果统一使用深色或浅色字体，有时候显示也不是很清楚。因此需要分析图片整体的亮度来的决定字体的颜色
1️⃣
首先获取图片的 ImageData 数据 （以图片 canvas.png 为例）
ImageData 是 Canvas API 的一部分，用于表示画布上的原始像素数据，它包含以下几个只读属性：
  • width：图片宽度
  • height：图片高度
  • data：Uint8ClampedArray 类型的一维数组，包含 RGBA 格式的整型数据
notion image
🖨️
打印出的 Uint8ClampedArray 类型 data 如下
notion image
例如：数组的前四个元素是 [155, 220, 16, 197]，对应图片第一个像素的草绿色
notion image
2️⃣
接下来判断图片的整体亮度 （以下代码跟在刚刚的 console.log(data) 后面）
❓
以及拓展个例子
如何给整张图片添加灰色滤镜
notion image

JS 变量

播放器组件的实现原理是通过引入了 APlayer 和 Meting JS 库：
但是一旦我关闭梯子，调用就会报错：
notion image
疑似它国内后端接口挂了，于是使用源码自己部署了一个新接口 🙇‍♀️
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 变量自己部署的后端接口，从而实现变量提升后的替换效果
Rylan
Rylan
Just be a rock