图片/封面管理

网站图片如何修改

⚠️
注意!网站图片的大小直接影响整点的性能。 建议在保证图片清晰可见的前提下,尽可能压缩文件大小。建议调整图片尺寸并进行压缩,有条件的推荐转换成webp格式后上传。
 
 

上传网站头像

Notion模板中左上角的图标对应就是用户头像,可以点击 选择 Upload an imageChoose an imgae ,进行本地上传
notion image
上传成功后会影响到各个主题的头像位置,例如Hexo的头像:
notion image

修改站点封面图

像hexo、matery这两个主题的首屏就是用户的封面图片
notion image
修改方式如下:
Notion笔记中上方封面图的右侧,点击Change cover
notion image
您可以选择notion自带的Gallery画册、或者上传自己的图片,或者使用Link外部链接,以及Notion推荐的Unsplash图库
notion image
 

文章的封面图

和修改网站的封面图类似的操作,点击上方的change cover 即可;修改后会同步到博客列表中的图片(如后一张图)
notion image
notion image
博客封面优先读取Notion中的文章封面,若Notion中文章设置封面为空,则会显示RANDOM_IMAGE_URL 的内容。
如果没有设置封面,此时会显示添加封面(Add Cover)按钮。
notion image
在修改封面的功能中,可以点击移除(Remove)从而移除封面。
notion image

使用外部链接的技巧

您可以在Notion中将封面设置为一个link类型,只想随机图片的api地址时,网站打开后会动态获取随机封面;若不同文章用的同一个随机api作为封面地址,每篇文章的封面也是不同的。
示例:

unsplash 随机api

我将每个封面图设置为: https://source.unsplash.com/random ; 这是unsplash提供的随机图片链接,每次打开都会跳到不同的图片。(您可以点击访问尝试一下)
💡
unsplash 可以任意指定图片的风格类型、作者等,更多帮助可以参考此文:https://zhuanlan.zhihu.com/p/139132649
notion image
在网站中看到的图片效果,刷新页面后封面图重新生成。
notion image
notion image
除了unsplash的api,也支持任意随机图片的api,例如这个国人开发的图片api

eees国产随机图片API

将封面设置为图片api地址: https://tuapi.eees.cc/api.php?category=dongman&type=302
关于此api的使用方式,可参考官方说明 https://tuapi.eees.cc/
notion image
效果l如下
notion image
notion image
notion image
Prev
基础信息
Next
站点图标favicon与Github图床
  • Twikoo
Nickname
Email
Website
0/500
7 comments
xzy

请问为什么我的notion在网页中的图片不显示了,但是之前的页面都好着,就是最近创建的不行了

 Windows 10
 Chrome 134.0.0.0
guagua
Reply @xzy :

我也是 上传本地自己的图片,无法显示

 macOS Catalina
 Safari 18.1
guagua
Reply @guagua :

使用 上传链接就好了,我可能是网卡

 macOS Catalina
 Safari 18.1
xzy
Reply @guagua :

我是更新了新版本就好了,但是现在网站的封面图好像还是不能使用本地的图片,链接也不行

 Windows 10
 Chrome 135.0.0.0
Read more
dexon

您好,请问我在Gallery中配置了Description属性,并在里面写了很多文字。在notion里面我可以一个页面中展开显示我所有的描述,但现在在网页中只能展示一行。请问我要怎么设置才能全部展示呢?还有就是可不可以只对这个文档做修改呢?谢谢

 Windows 10
 Microsoft Edge 129.0.0.0
开发小弟
Reply @dexon :

Description字段用于简短介绍站点主题,字数不应过长,如需大量的展示信息请在 about页面或者公告页面详细展开

 Windows 10
 Chrome 129.0.0.0
dexon
Reply @开发小弟 :

感谢您的回复。但是我是为了做成卡片对比泡面,类似于一个图,下面有一个小段落文字描述这个泡面的口味。gallery格式很适合我,因为我可以展示图片,也可以展示属性。我并不是为了介绍站点的主题,我是为了写一个博客,里面插入了一个gallery数据库。您也可以打开我的网站,会有更加直观的描述。
期待您的回复。

 Windows 10
 Microsoft Edge 129.0.0.0
开发小弟
Reply @dexon :

您好,我刚看了您的网站,内容很棒! description这行通常默认只显示一行,当然你可以通过微调样式的方式实现展示更多内容的效果;我已经把解决方式发布了,您可以看一下《Description如何显示多行

 Windows 10
 Chrome 129.0.0.0
dexon
Reply @开发小弟 :

我研究一下,非常感谢!

 Windows 10
 Microsoft Edge 129.0.0.0
dexon
Reply @开发小弟 :

您好,之前的问题已经完美解决了,在视窗里面我遇到了新的问题:
在heo风格里面gallery的展示并没像notion一样成功显示出来图片。目前我已经把图片全部替换为了50-70k的大小,并放在了每一个gallery子项page中,这使得我在notion中成功地展示了图片。(https://github.com/tangly1024/NotionNext/issues/2760 这个里面也有我相关的图,虽然不是我提起的issue) 但是官网并没有这样去展示,我觉得可能是css哪里需要设置。同时我还尝试替换了每一个子项page的cover,也没能成功。
期待您的回复。

 Windows 10
 Microsoft Edge 129.0.0.0
开发小弟
Reply @dexon :

hi,可以参考这篇《画廊视图》,解决图片不显示的问题。

 Windows 10
 Chrome 129.0.0.0
dexon
Reply @开发小弟 :

您好 我的问题解决了,谢谢。问题的关键在notion中把预览设置从content改为cover~

 Windows 10
 Microsoft Edge 129.0.0.0
Read more
guderain

你好,我在notion中换了图后,去博客前台并没有改变,我用的是simple主题。后来我在simple组件的header中给link标签配置了src路径,也不起作用。请问simple主题如何更换封面?

 Windows 10
 Chrome 118.0.0.0
guderain
Reply @guderain :

大佬你好,我看了下html结构,把link标签的src路径去掉了,给header标签加了backgroundImage属性,还是加载不出来。希望大佬帮帮忙,谢谢

 Windows 10
 Chrome 118.0.0.0
guderain
Reply @guderain :

找到原因了,谢谢大佬,打扰了

 Windows 10
 Chrome 118.0.0.0
bill
Reply @guderain :

怎么解决的呢?我也遇到一样的问题

 macOS Catalina
 Chrome 132.0.0.0
Read more
tammy

请问我的页面有很多图片,但是网站自动压缩了,导致图片不清晰,是否哪里可以设置不自动压缩呢

 Windows 10
 Chrome 126.0.0.0
dapeng

我上传了上传网站头像,在notion中可以显示,但是在网站不显示,刷新好久也不显示

 Windows 10
 Chrome 126.0.0.0
thales
Reply @dapeng :

怎么处理的

 Linux
 Firefox 133.0
bill
Reply @thales :

我也是这样的,notion 数据库的图标正常,但是网站 logo 头像无法显示,请问怎么解决?

 macOS Catalina
 Chrome 132.0.0.0
xxlbj
Reply @dapeng :

我试了下,在notion中使用上传(upload)本地的图片没法同步到blog中,需要使用link嵌入图片才行

 Windows 10
 Microsoft Edge 132.0.0.0
xxlbj
Reply @thales :

我试了下,在notion中使用上传(upload)本地的图片没法同步到blog中,需要使用link嵌入图片才行

 Windows 10
 Microsoft Edge 132.0.0.0
xxlbj
Reply @xxlbj :

我试了下,在notion中使用上传(upload)本地的图片没法同步到blog中,需要使用link嵌入图片才行

 Windows 10
 Microsoft Edge 132.0.0.0
bill
Reply @xxlbj :

感谢,是的,用 link 显示成功了,但是图片好像有点变形,你的也是吗?

 macOS Catalina
 Chrome 132.0.0.0
xxlbj
Reply @bill :

我感觉好像没咋变形

 Android 14
 Chrome 131.0.6778.260
thales
Reply @bill :

可以到在项目中找到public文件夹中的avatar.svg替换成自己的头像

 Windows 10
 Microsoft Edge 129.0.0.0
Read more
Ermuss

如果文章不需要封面图的话,该如何设置呢

 macOS Catalina
 Safari 17.2.1
开发老哥
Reply @Ermuss :

notion中删除文章封面图即可,部分主题支持在配置文件中强制关闭所有封面

 iOS 16.3.1
 Safari 16.3
dayan

大佬你好,想问下关于网站加载速度的部分,我也是用vecel进行部署,针对于每个博文我都自定义了独立的unsplash图片作为文章头图,但是这导致vecel统计指标中 LCP(largest Contentful Paint)过高(达到4s+),想问下这种情况下有什么方案可以减少这个指标吗? 感谢

 Windows 10
 Microsoft Edge 119.0.0.0
logo