✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
图片管理
category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon
网站图片如何修改
注意!网站图片的大小直接影响整点的性能。
建议在保证图片清晰可见的前提下,尽可能压缩文件大小。建议调整图片尺寸并进行压缩,有条件的推荐转换成webp格式后上传。
上传网站头像
Notion模板中左上角的图标对应就是用户头像,可以点击 选择
Upload an image
→ Choose an imgae
,进行本地上传![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff2d5a201-620b-4c1d-a8d8-6cae91b8219d%2FUntitled.png?table=block&id=ae801a82-6ae6-43b9-8a9a-fbd8eee22235&t=ae801a82-6ae6-43b9-8a9a-fbd8eee22235&width=624&cache=v2)
上传成功后会影响到各个主题的头像位置,例如Hexo的头像:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fff649891-877a-494d-8805-4566c05af3ad%2FUntitled.png?table=block&id=b582e98b-5162-4822-8192-4a26ff96b194&t=b582e98b-5162-4822-8192-4a26ff96b194&width=624&cache=v2)
修改站点封面图
像hexo、matery这两个主题的首屏就是用户的封面图片
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fd9fda278-7a01-4b90-a7d7-d4017b01dfa4%2FUntitled.png?table=block&id=d9d6f3db-e49c-44dc-b0cb-52078d120279&t=d9d6f3db-e49c-44dc-b0cb-52078d120279&width=576&cache=v2)
修改方式如下:
Notion笔记中上方封面图的右侧,点击
Change cover
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F228a1afd-266f-47ed-9c2a-bb2aeb5b6142%2FUntitled.png?table=block&id=552b0eea-ea38-45fc-9395-eb9e4e5c0b49&t=552b0eea-ea38-45fc-9395-eb9e4e5c0b49&width=576&cache=v2)
您可以选择notion自带的Gallery画册、或者上传自己的图片,或者使用Link外部链接,以及Notion推荐的Unsplash图库
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F8c6795a1-2122-4330-8b7b-8b81b4ab8b17%2FUntitled.png?table=block&id=74b342bc-8cf9-4f7e-925a-19e1cf8fa6ee&t=74b342bc-8cf9-4f7e-925a-19e1cf8fa6ee&width=624&cache=v2)
使用外部链接的技巧
您可以在Notion中将封面设置为一个link类型,只想随机图片的api地址时,网站打开后会动态获取随机封面;若不同文章用的同一个随机api作为封面地址,每篇文章的封面也是不同的。
示例:
unsplash 随机api
我将每个封面图设置为: https://source.unsplash.com/random ; 这是unsplash提供的随机图片链接,每次打开都会跳到不同的图片。(您可以点击访问尝试一下)
unsplash 可以任意指定图片的风格类型、作者等,更多帮助可以参考此文:https://zhuanlan.zhihu.com/p/139132649
![notion image](https://user-images.githubusercontent.com/15920488/279591934-4e2aa9a4-9592-42b2-836d-86a2c81253d8.png?t=6baa487e-07d1-486c-92a5-d45ca395bbb8)
在网站中看到的图片效果,刷新页面后封面图重新生成。
![notion image](https://user-images.githubusercontent.com/15920488/279592043-48e6d330-a5a5-4f06-b2cb-5c766dbd7550.png?t=4d2c6ce3-7f6a-4e5e-be9d-da9dd40c8900)
![notion image](https://user-images.githubusercontent.com/15920488/279592084-37390697-7cc6-4164-b6c9-db2a3524cd00.png?t=b7f80b98-6ad1-430b-a80a-59779b0285c4)
除了unsplash的api,也支持任意随机图片的api,例如这个国人开发的图片api
eees国产随机图片API
将封面设置为图片api地址: https://tuapi.eees.cc/api.php?category=dongman&type=302
关于此api的使用方式,可参考官方说明 https://tuapi.eees.cc/
![notion image](https://user-images.githubusercontent.com/15920488/279594302-dbe72411-3d1f-4c06-98a1-afb0574f69b0.png?t=f04cac2e-38e9-491f-a550-c080cd59c529)
效果l如下
![notion image](https://user-images.githubusercontent.com/15920488/279593753-13477f79-30af-4199-b637-242da8b82b00.png?t=4a6cb463-c858-4d5c-9cac-bec39e205e98)
![notion image](https://user-images.githubusercontent.com/15920488/279594099-903ea53f-1ee4-437b-99a0-19ef4567e3a1.png?t=fa7a9f90-c428-471e-a514-b0cff73ca275)
如何上传文章的封面图
和修改网站的封面图类似的操作,点击上方的
change cover
即可;修改后会同步到博客列表中的图片(如后一张图)![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fadbb740e-5ca2-4c46-9683-4d1e1d44b63c%2FUntitled.webp?table=block&id=5b559b3e-acca-4125-9a4d-4150c70086e1&t=5b559b3e-acca-4125-9a4d-4150c70086e1&width=616&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F3256f8e8-df4f-4cff-a628-3081a1889277%2FUntitled.png?table=block&id=ade6c90d-38a8-49ec-8558-21ad95543506&t=ade6c90d-38a8-49ec-8558-21ad95543506&width=1260&cache=v2)
Loading...
Last update: 2023-11-09