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"

 

bootstrap中的sr-only

最近在看bootstrap4,经常会有sr-only这个类

sr是screen reader的缩写,这个表示是为视力有障碍的人士准备的类.

在前端开发中,有些时候设计图上面会出现仅供正常视觉用户看的元素。比如:导航栏菜单当前页面选中高亮状态,这些状态只有视力正常的人才能正常使用。

而残障人士,弱势或盲人是很难或者根本看不出导航菜单高亮的。他们上网可能借助的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

mobile traffic detection

这个应该算是老生常谈的问题了,再web design 上早就使用responsive design 来解决了,但是在在线广告领域,除了google 早早就开始使用自适应广告以外,其余的广告还是需要自己去判断的。

这里有两个类可以使用,但是我个人更加偏向于第一个

http://mobiledetect.net/

http://detectmobilebrowsers.com/

Font Awesome

最近晚上再帮一家start up 写 lander,以前习惯了直接使用bootstrap 以及他上面的Glyphicons  icon,很方便就可以使用的。

但是现在写的这个lander 没有使用bootstrap,所以想使用 Glyphicons 的icon 就会比较麻烦。两个办法,一是接从 bootstrap 的cdn 中 截出icon 的那部分,抑或使用其他的 icon library。 第一个办法 maxcdn 提供了直接 cdn 文件,不过版本比较老,仍然可用:

更多

利用 bootstrap 写出五个等宽度的列

最近时间稍微多了一点,再写一个gallery 的程序,使用bootstrap 这个前端 framework

经过测算,每行五列是最好的。

熟悉bootstrap 的同学应该知道,bootstrap 使用的是12 grids 的方式来布局,也就是说很容易使用bootstrap 来编写 1,2,3,4,6,12列,5不能被12整除,所以想要用bootstrap 来写出5列,比较麻烦。网上大部分的办法都是各种hack,即复杂,又容易出错。

更多