Github+jsDelivr+PicGo 打造稳定快速、高效免费图床

这篇文章来自于itrhx.com, 这里做一个备份,方便以后自己使用.

  1. 新建github仓库: 登录/注册GitHub,新建一个仓库,填写好仓库名,仓库描述,根据需求选择是否为仓库初始化一个README.md描述文件

2. 生成一个token: 在主页依次选择【Settings】-【Developer settings】-【Personal access tokens】-【Generate new token】,填写好描述,勾选【repo】,然后点击【Generate token】生成一个Token,注意这个Token只会显示一次,自己先保存下来,或者等后面配置好PicGo后再关闭此网页

 

3 配置PicGo,前往下载PicGo,安装好后开始配置图床:

 

设定仓库名:按照【用户名/图床仓库名】的格式填写

设定分支名:【master】

设定Token:粘贴之前生成的【Token】

指定存储路径:填写想要储存的路径,如【ITRHX-PIC/】,这样就会在仓库下创建一个名为 ITRHX-PIC 的文件夹,图片将会储存在此文件夹中

设定自定义域名:它的作用是,在图片上传后,PicGo 会按照【自定义域名+储存路径+上传的图片名】的方式生成访问链接,并放到粘贴板上,因为我们要使用 jsDelivr 加速访问,所以可以设置为【https://cdn.jsdelivr.net/gh/用户名/图床仓库名 】,上传完毕后,我们就可以通过【https://cdn.jsdelivr.net/gh/用户名/图床仓库名/图片路径 】加速访问我们的图片了,比如上图的图片链接为:https://cdn.jsdelivr.net/gh/TRHX/ImageHosting/ITRHX-PIC/A27/08.jpg

 

4. 进行高效创作

配置好PicGo后,我们就可以进行高效创作了,将图片拖拽到上传区,将会自动上传并复制访问链接,将链接粘贴到博文中就行了,访问速度杠杠的,此外PicGo还有相册功能,可以对已上传的图片进行删除,修改链接等快捷操作,PicGo还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等,更多功能自己去探索吧!

 

@media, @media screen 和 @media only screen的 区别

@media 和 @media screen的区别很简单, 因为media type 有很多种,screen只是其中的一种,其他常见的种类还有print 和 speech

@media 表示适应于所有的media type, @media screen表示只适用于media type 为screen 的硬件,在web开发中,可以认为这两个是一样的.

而@media only这个关键子就比较有意思了。

W3C文档这样描述的:The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

翻译过来就是:only是为了在不支持媒体查询的浏览器中隐藏样式表,浏览器处理以only开头的关键词时将会忽略only。

@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的,没有任何区别,因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型,因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中,如果不加only,@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen,明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。

media="only screen and (min-width: 401px) and (max-width: 600px)"
/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"

/*在不支持媒体查询的浏览器中解析到带only的媒体查询时,会将only视为媒体类型。(由于没有only这种媒体类型,因此将不会被应用)*/
media="only"

/*如果不带only,在不支持媒体查询的浏览器中*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen,将会被应用到屏幕类型设备上*/
media="screen"