图片/封面管理
category
tags
type
status
slug
summary
date
Last edited time
Sep 20, 2024 09:12 AM
icon
password
状态
天气
星期
日期
网站图片如何修改
注意!网站图片的大小直接影响整点的性能。
建议在保证图片清晰可见的前提下,尽可能压缩文件大小。建议调整图片尺寸并进行压缩,有条件的推荐转换成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)
文章的封面图
和修改网站的封面图类似的操作,点击上方的
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=330.97222900390625&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)
博客封面优先读取Notion中的文章封面,若Notion中文章设置封面为空,则会显示
RANDOM_IMAGE_URL
的内容。如果没有设置封面,此时会显示添加封面(Add 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%2Fb551f3c9-e5a3-43c7-8bc9-5188ac9e3012%2Fimage.png?table=block&id=107f93b9-208b-80a8-9d6c-f5a22128bc28&t=107f93b9-208b-80a8-9d6c-f5a22128bc28&width=707.9688110351562&cache=v2)
在修改封面的功能中,可以点击移除(Remove)从而移除封面。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fbdb86d46-48a8-4485-adfe-5a53ee4cae92%2Fimage.png?table=block&id=107f93b9-208b-8016-86c1-fa1c290cbf7d&t=107f93b9-208b-8016-86c1-fa1c290cbf7d&width=707.951416015625&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)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F1a58a964-c1cd-4992-9cc0-6ea0a4435b02%2Fimage.png?table=block&id=107f93b9-208b-80ce-ac36-c1d4e9779ed7&t=107f93b9-208b-80ce-ac36-c1d4e9779ed7&width=707.951416015625&cache=v2)
Prev
基础信息
Next
站点图标favicon与Github图床
Loading...