图床从七牛迁移至腾讯COS

2018-12-13 16:43:29

前言(吐槽):

之前收到邮件,七牛要回收什么测试域名,想着没啥影响。因为我绑定了备案域名。最近突然发现博客好多图片挂了。一看我备案了快五年的域名被取消备案了???而且七牛直接把测试域名删了...

我当初注册的就是个人性质博客类网站,五年时间网站一直正常运行,且内容性质从未改变。空壳网站?备案信息不准确?真是睿智 🖕

概览

以下操作在macOS下进行。所有命令的文档请参考qshell命令列表

主要流程: 下载七牛中的所有资源,上传至腾讯COS。由于七牛的测试域名已失效,原空间的资源无法直接下载,所以先新建一个空间(新空间测试域名30天有效期),将旧空间的资源全部转移至新空间,然后从新空间下载所有资源。

一、七牛资源从就空间转移至新空间

1、下载七牛的命令行工具qshell

2、解压、重命名、赋予qshell运行权限

前往目录

cd  /Users/ludis/Downloads/qshell-v2.3.4 && ll
➜  qshell-v2.3.4 ll
total 135824
-rwxr-xr-x@ 1 ludis  staff    14M Dec  4 16:19 qshell_darwin_x64
-rwxr-xr-x@ 1 ludis  staff    14M Dec  4 16:19 qshell_linux_x64
-rwxr-xr-x@ 1 ludis  staff    12M Dec  4 16:19 qshell_linux_x86
-rwxr-xr-x@ 1 ludis  staff    14M Dec  4 16:19 qshell_windows_x64.exe
-rwxr-xr-x@ 1 ludis  staff    12M Dec  4 16:19 qshell_windows_x86.exe
➜  qshell-v2.3.4

重命名(可选)

mv qshell_darwin_x64 qshell

设置权限

chmod +x qshell

3、添加七牛账号

前往七牛 -> 个人中心 -> 密钥管理。查看AK、SK。

./qshell account [AK] [SK] [账户名(邮箱即可)]

4、导出已过期的bucket空间所有文件信息。

qshell listbucket A -o A.list.txt (A为空间名)

5、新建一个空间B,用于将已过期的A空间中的所有文件,转移至新的空间B。(新空间的域名30天有效)注意A、B空间需要在相同的地区才可以。

6、使用awk工具,将A空间的文件列表进行格式化。Mac下自带awk工具,其余平台自行安装。

此时A.list.txt中的内容格式如下:

...
images/react.png	340793	FoVpVxc12JXJawT0UdkRs7bHm3MS	15192693058673770	image/png	0	
images/watermark.png	11567	FirWtot1NJVL-0bU-9VoN4yeQyLu	15192728052402421	image/png	0	
postbg.jpg	105210	FlBqtLeiA1kTiQxRUSSapLep1utC	15185150032696840	image/jpeg	0	
postcover.jpg	47446	Fltqi_cmpz09x8PV4y1yGYwqW_lr	15185152316033806	image/jpeg	0	
...

使用awk命令格式化

touch list.txt
awk '{print $1}' A.list.txt > list.txt

这个命令意思是将A.list.txt文件中每行的第一个字段(文件名)分离出来,输出到list.txt文件中。

对应的list.txt格式如下:

...
images/postbg.jpg
images/react.png
images/watermark.png
postbg.jpg	105210
postcover.jpg
...

7、使用命令将A空间中的所有资源批量转移至新空间B中:

➜  qshell-v2.3.4 ./qshell batchcopy A B -i list.txt
<DANGER> Input hejhbd to confirm operation: hejhbd

根据提示输入字符串即可,次数刷新B空间即可看到,所有A空间的内容已经转移到B空间。

二、从七牛批量下载资源

1、创建下载用的配置文件batch_download.conf

{
    // dest_dir 文件储存路径-全路径
    "dest_dir" : "/Users/ludis/Downloads/qshell-v2.3.4/downloads/B",
    // 新建的空间名-B
    "bucket" : "B",
    "prefix" : "",
    "suffixes" : "",
    // B空间的测试域名
    "cdn_domain" : "http://pji27eyb0.bkt.clouddn.com",
    "referer" : "",
    "log_file" : "download.log",
    "log_level" : "info",
    "log_rotate" : 1,
    "log_stdout" : false
}

2、下载文件

执行./qshell qdownload -c 10 batch_download.conf。其中-c 10表示可以同时下载10个文件。

➜  qshell-v2.3.4 ./qshell qdownload -c 10 batch_download.conf
Writing download log to file download.log

Downloading 2018-09-26-a0KAWoB.jpg [1/76, 1.3%] ...
Downloading 2018-10-14-15382027090950.jpg [2/76, 2.6%] ...
Downloading 2018-10-14-15394888949656.jpg [3/76, 3.9%] ...
Downloading 2018-10-14-15394889958531.jpg [4/76, 5.3%] ...
Downloading 2018-10-14-15394901705197.jpg [5/76, 6.6%] ...
...
Downloading postbg.jpg [75/76, 98.7%] ...
Downloading postcover.jpg [76/76, 100.0%] ...

See download log at path download.log
➜  qshell-v2.3.4

三、上传文件至腾讯COS

此处省略100字,自行注册腾讯云,创建存储空间。设置空间权限为“公有读私有写”

上传资源可以使用网页端或者下载工具

四、旧资源链接替换/重定向

将资源上传至腾讯COS后,需要将原博客中失效的七牛链接替换为腾讯COS中的链接。不同系统的博客请自行传泽替换方案。替换.md文件中的域名,或从数据库查询替换...

五、图片处理(水印)

七牛空间存储的图片,可以创建图片处理规则,添加水印、缩放等比较方便。然而在腾讯COS存储中没有找到相关配置项。

搜索发现,腾讯的图片处理,统一使用“数据万象”这个单独的应用。在COS创建完存储空间;然后在“数据万象”创建自定义的图片处理规则,并绑定COS存储空间的Bucket即可。且有个优点是可以使用别名代替处理规则,以及可以使用-(中划线) _(下划线) /(斜杠) !(感叹号)四中分割符号。

例如:

  • 图片链接: https://233.com/666.png

  • 如创建的图片规则为: imageMogr2/interlace/0|watermark/1/image/aHR0cDovL3dhdGVybWFyay1iai0xMjUyMTA2MjExLnBpY2JqLm15cWNsb3VkLmNvbS9sdWRpcy0...

  • 别名为: imgRule

以七牛的尿性图片添加完规则变成: https://233.com/666.png?imageMogr2/interlace/0|watermark/1/image/aHR0cDovL3dhdGVybWFyay1iai0xMjUyMTA2MjExLnBpY2JqLm15cWNsb3VkLmNvbS9sdWRpcy0... 👎

腾讯云则很优雅: https://233.com/666.png!imgRule 👏

参考

[译]如丝般顺滑-使用css3实现60帧的动画

原文: Smooth as Butter: Achieving 60 FPS Animations with CSS3在移动端上实现动画很简单。如果采取我们的建议的话,在移动端正确的实现动画也会比较容易。虽然现在很多人在手机上运用CSS3动画,但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略,因为仍然有人不明白这些最佳实践的真正意义。如今有这么多的设备规范,如果还不有针对性地优化你的代码,糟糕的用户体验将让你死无葬身之地。记住:虽然市场上始终有一些高端的旗舰机在挑战性能极限,但你面对的仍将是和这些性能怪兽相比只是玩具一样的低端设备。我们想帮助你正确地驾驭 CSS3。首先先要了解几件事。理解时间轴当渲染和处理HTML元素时,浏览器做了什么?这个非常简单的时间轴我们称之为 关键渲染路径想要达到流畅的动画效果,我们需要关注修改属性会对 composite (合成)阶段造成怎样的影响。而不是去关注前面的其他阶段。1. Styles浏览器开始计算样式以应用在元素上——重新计算样式2. Layout接下来,浏览器会开始为每个元素生成用于布局的形状和位置信息。在该步骤浏览器会设置的页面属性包括 width和height,还有margin,以及left/top/right/bottom 等。3. Paint在该步骤,浏览器开始用像素渲染填充每个元素,

2018-2019

今年过得好快鸭🦆。来个日常年常简短总结。 今年也算是一个小的里程碑,在某些方面有了一些大的变化。值得庆祝。 在工作上,一直积极关注学习新的东西。16年刚毕业的一年,从前端到Node后端,到使用Vue,RN,Electron等开启全栈之路,开拓了较广的技术栈。到17年紧跟“潮流”,去做了半年多的小程序全栈,同时巩固了后端开发。至此貌似大前端的大多数东西都已经有过开发经验,勉强算的上伪全栈。作为一个好奇的人,从17年就开始关注区块链技术,入了币圈。并在17年底心血来潮,来了一波说走就走的裸辞,还拉上了几个垫背的几个好机油,一起拥抱百年一遇的泡沫狂欢技术革命。 事实上回头来看,这种骚操作果敢,带来的收益是极大的,年轻就要醒着拼。我不知道当初选择继续原公司的工作,现在是什么样。但裸辞后全身心投入区块链的学习,学go,学以太坊,学合约等等,学习过程中结识了很多优秀的人,来自各行各业的,有年薪百万的大佬,有清华的投行高材生,有手握矿机的机霸矿霸,有还在学校的大四学生,有以卡还卡的套现大佬,有出口成章的演讲家。大家聚在一起享受币圈的狂欢的同时,一起学习进步,真的是学到了很多东西。第一次步入这样一个个体差异极大的群体,真的是从每个人身上学到很多,受益匪浅。