0%

Github博客开发篇2:利用jsdelivr做图床分享链接。

1:你应该阅读前面一篇文章。

币乎:如何利用Matataki和Github搭建个人博客,永久保存数据?

IPFS:如何利用Matataki和Github搭建个人博客,永久保存数据?

博客:如何利用Matataki和Github搭建个人博客,永久保存数据?

2:为什么能够永久保存数据?

1:你随时可以打包下载你的所有数据,在GitHub仓库。

2:我相信开源的精神会一直流传下去的。

3:我们进行更加复杂的操作,和一些问题的解决方法。

1:文章相关

自定义封面

我们不想随机封面或者无封面,我们要自定义封面,这个要求当然是被允许的。

我们修改一篇文章,或者添加一篇文章。

在里面加入下面这个内容:

img

我们尝试着添加一下吧:

img

然后我们更新文件内容。

这里刷新不出来,所以我用其他的链接先尝试,后面再告知步骤。

img

可以显示的,说明添加方式是没有问题的,图片链接的问题后面再说。

文章摘要

就是在预览界面的文字内容,可以自定义,也可以默认。

img

这篇文章就可以看到没有设置摘要,所以默认了大概200字的范围。

官方的教程是这样的:

img

就像上图显示的那样。

我们就把上面的nap昨天的文章修改一下吧:

img

我们保存,来查看一下效果如何吧?

img

很棒,已经可以自定义摘要了。

分类与标签

什么是分类与标签,在昨天的教程里面,其实并没有写入分类和标签。

他是为了快速的区别文章的类型而设计的。

img

所以分类是文章下面的一个可以显示的内容。

比如:

img

什么是标签呢?

img

这些都是标签,有的还是之前同步过来的,当然你也可以去修改。

img

我们保存内容,去看看效果如何吧?

img

2:图片和链接

上面的问题都是小问题,不影响阅读,可是下面的问题就要命了。

如果文章中的图片链接挂了怎么办?

因为他的保存格式是.md,所以是Markdown语法。

这个文本模式,有一个很大的特定,就是在文章中如果要引用图片,是插入链接的方式显示图片,他本身不保存图片。

就好像我昨天那篇文章,用他的语法写下来,才16KB的大小。

img

但是66张图片却有将近10MB的大小,最重要的事情是,我要分开存储。

img

我知道为什么要分成存储,因为这样文本更加方便传输和保存,可是图片该怎么办呢?

我最先想到是,既然文章都放在GitHub了,那么图片也放进去,我们新建一个文件夹专门保存图片即可。

于是,说干就干,我创建了JPG的文件夹,当然你要叫photo也可以的。

所以,我就先上传了这样的一张图片,在GitHub仓库。

https://github.com/keyxec/key/blob/source/source/JPG/%E5%B0%81%E9%9D%A2%E9%BB%91%E5%AE%A2.jpg

img

在GitHub,当然可以轻松的预览图片,可是一旦放入了博客就变得很奇怪,无法显示了。

在度娘和谷歌的帮助下,我找到了解决问题的方法,是一个名叫https://www.jsdelivr.com/网站。

https://www.jsdelivr.com/github

img

当你输入你的GitHub仓库具体文件链接后,你会获得一个分享链接。

分享链接的的格式如下所示:

https://cdn.jsdelivr.net/gh/keyxec/key@source/source/JPG/%E5%B0%81%E9%9D%A2%E9%BB%91%E5%AE%A2.jpg

https://cdn.jsdelivr.net/gh/你的GitHub账号/仓库@分支/图片地址

当然,如果你继续往你的GitHub仓库存图片,那么就无需再次获取,修改地址即可访问。

一般的情况下,在国内可以快速的打开该文件,因为jsdelivr有国内的CDN。

那么,再插入该文件链接即可,源文件在GitHub,不影响操作。

即使有一天jsdelivr挂了,也不会造成源文件的损失,这一点非常重要。

第二篇就暂时写到这里,后续更多的操作下篇再说。