✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
favicon与Github图床
category
tags
type
status
slug
date
password
Last edited time
May 13, 2024 07:59 AM
summary
icon
什么是图床
图床是指专门用于存储和托管图片文件的网络服务。通常,用户可以将图片上传到图床服务器上,并获得一个链接,用于在网页、论坛或社交媒体等平台上分享这些图片。图床服务可以帮助用户节省网页空间和带宽,同时方便图片的管理和分享。
您上传到笔记的图片会存储在Notion的文件服务器中,这时候相当于用Notion作为您的图床。
例如以下就是一个notion服务器的图片链接。
有了Notion你无需另外准备一个存放图片的图床,但如果你有已经有了自己的图床,你也可以直接图片引入到Notion笔记中。
什么是Favicon
Favicon.ico是网站的图标文件,通常用于显示在浏览器标签页上、书签列表中以及在浏览器地址栏中。"Favicon"是"Favorites Icon"的缩写,它允许网站在用户收藏夹和书签列表中显示自定义的小图标,以提高网站的识别度和品牌形象。这个图标文件通常可以命名为 "favicon.ico",并且放置在网站的根目录下。
favicon与图床
NotionNext中的favicon.ico 图片需要用户自行上传,覆盖原先public目录下的favicon.ico,这样不是很优雅。原来设置favicon的方法参考此教程《浏览器站点图标配置》
最新版本中支持直接在Notion_Config中配置favicon的地址,只需添加一个如下配置
配置名 | 配置值 | 说明 |
BLOG_FAVICON | https://xxx.ico | 配置值是你上传到图床中的ico文件地址 |
![配置favicon效果](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F25d34cab-6b3a-4c78-aaa6-2b6e1292518a%2FUntitled.png?table=block&id=4b1faee1-0683-48dc-8dee-571e2f57c37b&t=4b1faee1-0683-48dc-8dee-571e2f57c37b&width=1197&cache=v2)
接下来本文分享一种:利用github作为图床,将favicon上传到图床,并配置在NotionNext站点的用法。
github的配置比较简单,您也可以使用其它图床。
开始
访问以下链接创建一个新的代码仓库
Repository name可以随意填写,注意要选择为Public类型
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fdcc5c001-59fe-4758-9186-b9fe76e697aa%2FUntitled.png?table=block&id=3fec3382-f64a-40e5-aa4b-8e0b62d141a2&t=3fec3382-f64a-40e5-aa4b-8e0b62d141a2&width=1544&cache=v2)
上传文件
首次创建好项目后会进入一个引导页,在这里可以点击 uploading an existing file 进行上传文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F3b34c635-462e-49a4-80f3-35024415c21d%2FUntitled.png?table=block&id=ff676738-335b-4eb9-afb9-03b8eb27caa4&t=ff676738-335b-4eb9-afb9-03b8eb27caa4&width=1540&cache=v2)
提示:后续你可以随时回到项目主页,通过右上角的 Add file → Upload files 进行上传文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F84c9dc94-9dec-4a4d-95e1-efcf20cdd039%2FUntitled.png?table=block&id=322b6446-e280-401e-b398-8d58f4dedd92&t=322b6446-e280-401e-b398-8d58f4dedd92&width=708&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%2F95e6eaa7-eadb-4eab-a58b-e4c5e77516ed%2FUntitled.png?table=block&id=045b983e-6f11-4511-85b9-5cfa67eedbb5&t=045b983e-6f11-4511-85b9-5cfa67eedbb5&width=1111&cache=v2)
跳转后的页面地址栏,就是此文件的url
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F7f692267-e2ad-4fea-ab1f-7e21631e931c%2FUntitled.png?table=block&id=88629e4c-9e55-46c8-b56f-547c695d7ecd&t=88629e4c-9e55-46c8-b56f-547c695d7ecd&width=1299&cache=v2)
需要注意,这个文件的url默认打开是github的项目页面,要直接访问源文件需要以下处理:
- 在地址栏中的 url背后 拼接一个 ?raw=true ,并按下回车键访问此新地址。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fec749695-c0da-41fd-b57c-9810ffa0ea69%2FUntitled.png?table=block&id=c658703d-f5b6-48f3-bd4f-20787a0f82cf&t=c658703d-f5b6-48f3-bd4f-20787a0f82cf&width=680&cache=v2)
- 观察并获取地址栏跳转后的真实地址
浏览器会自动从github.com/xxx/xxx.gif 跳转到
https://raw.githubusercontent.com/xxx/xxx.gif
,后面这个url就是图片文件的真实地址了,复制这个地址配置即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F1c3ae735-c3b2-464b-b51e-48d61d5a51d1%2FUntitled.png?table=block&id=2936ad25-81c4-4a53-8386-e594eb7605d1&t=2936ad25-81c4-4a53-8386-e594eb7605d1&width=941&cache=v2)
最后
以上我演示的是一个 gif 文件,实际上你要用来配置的favicon文件名后缀应当以 .ico 结尾,如何生成ico文件,可以参考这篇文章:《浏览器站点图标配置-如何制作您的icon》
Loading...
Last update: