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
由微软和 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 浏览器设计的字体格式
它包含版权保护功能,可以限制字体的使用。
  • 由于其他浏览器并不支持 EOT 格式,因此它的使用相对有限

预加载

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

字体切割

相比英文字体,中文字体文件通常非常大,因为它们包含成千上万的字符。如果在网页一次性引入整个文件,用户在第一次加载时候的速度会比较缓慢
那么如果能将一个大型字体文件分割成了多个小号文件,然后通过使用 unicode-range 按需引入,那么浏览器只会在页面使用了该范围中的字符时,才会加载对应的字体“分片”。
  • U+00 - U+FF:基本字母
  • U+4E00U+9FFF:常用汉字
🌟
推荐开源项目
(刚开始报错,作者很快解决了)
  • 优点:可以选择更多开源中文字体
  • 缺点:有时候加载还是太慢
notion image
📌
2024/3/10 更新:
最后还是改用 Google Fonts
  • 优点:加载快
  • 缺点:中文字体少
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:图片高度
  • dataUint8ClampedArray 类型的一维数组,包含 RGBA 格式的整型数据
notion image
🖨️
打印出的 Uint8ClampedArray 类型 data 如下
notion image
例如:数组的前四个元素是 [155, 220, 16, 197],对应图片第一个像素的草绿色
notion image
2️⃣
接下来判断图片的整体亮度 (以下代码跟在刚刚的 console.log(data) 后面)
以及拓展个例子
如何给整张图片添加灰色滤镜
notion image

JS 变量

播放器组件的实现原理是通过引入了 APlayerMeting JS
但是一旦我关闭梯子,调用就会报错
notion image
疑似它国内后端接口挂了,于是使用源码自己部署了一个新接口 🙇‍♀️

Mettng.js 中有以下一段源码

var 全局作用域

window.meting_api 中的 window 即 JS 中的一个全局对象,代表浏览器窗口
JS 函数外,使用 var 声明的变量作为全局变量,会绑定到该对象上
  • 如果想在 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