Comments (2)
@tangly1024 我想,我在wordpress 上的做法,不知道在notionnext 上有沒有辦法直接移植,在wordpress 上加載要快我是把image 和其他的一些assets (像JS CSS 檔等靜態的assets) offload 到AWS S3 之類的對像儲存設備中,並設定好CDN,訪問時用rewrite rule把OSS 上取得assets... 在wordpress 有很多插件可以做到,如wp offload media/ keyCDN/ super cache/ wp rocket... 之類的
node framework我不懂,要看看大佬們有沒有解決方案~
from notionnext.
可以处理
通过识别浏览器宽度,给与用户一个合适的图片尺寸。
目前全站的图片尺寸在blog.config.js 中由配置统一决定,默认是800.
只需要通过js监听用户浏览器尺寸、并对url中的参数并进行替换即可。
Notion文件上传
Notion图片上传使用的是aws对象存储,其支持通过url指定参数来获取不同尺寸的参数;
例如一张图片url如下:
https://www.notion.so/image/xx.xxx&width=800&cache=v2
其中的 width=800 就是图片宽度,修改此值即可实现图片尺寸的替换。替换成 width=300 就能获取更小的图片
Notion内置第三方图片源
除此之外,notion内置的第三方图片服务例如 upsplash。
它也支持图片参数请求,以下图片url中的width是800;
https://images.unsplash.com/photo-1671726203449-34e89df45211?ixlib=rb-4.0.3&q=50&fm=webp&crop=entropy&cs=srgb&t=db0e0da3-a27e-445c-9f69-9c95b33a52bc&width=800&fmt=webp
替换url中的宽度为100后如下效果
``https://images.unsplash.com/photo-1671726203449-34e89df45211?ixlib=rb-4.0.3&q=50&fm=webp&crop=entropy&cs=srgb&t=db0e0da3-a27e-445c-9f69-9c95b33a52bc&width=100&fmt=webp`
实际尺寸的考量方案
我想为了最好的体验,可以这样做:
- 设置一个尺寸最大值为800;在任何尺寸下图片不应大于此值,否则影响加载效率。
- 小屏下检测屏幕尺寸,将屏幕的最大宽度设置为图片宽度,例如屏幕宽度400,则统一修改图片宽度为400,下不设限。
from notionnext.
Related Issues (20)
- [部署失败] 编辑blog.config.js后部署失败 HOT 1
- 建议增加orcid链接
- 请问瀑布流的总结段是否支持颜色修改 HOT 2
- NotionNext部署后无法支持Notion文章引用 HOT 2
- 如何实现文档倒序排序?就是最近的文档排前面,目前看到是最远的文档排前面 HOT 1
- Live2D挂件移动端无法正常显示
- RSS 订阅生成失败
- algoria 搜索插件出错 HOT 1
- 文章内容可能过时提醒
- Twikoo的CDN地址更改
- Meting的配置不生效
- gif 动态截图无法在网站上正常显示
- [文章卡在Loading] 新的文章能够在首页显示标题但是无法打开,一直显示loading中。 HOT 2
- [blog.config.js配置] 修改配置文件后,项目部署失败 HOT 2
- heo主题顶部动态通知栏在手机端的展示问题
- 【部署失败】一开始部署正常的,但是后面文章多了以后部署老是出现这个错误,麻烦看看是怎么回事
- 【帮助】画廊视图,Description字段如何显示多行?(借助Notion_Config轻松调整样式) HOT 1
- 【帮助】画廊视图,希望预览时可以显示自定义的文章特性(标签,评分,创建时间等),现在只有slug
- nobelium 添加大纲显示
- Url访问问题(Bug反馈)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notionnext.