Skip to content

Commit cf1223a

Browse files
committed
Image compression by ImageOptim
Signed-off-by: BY <[email protected]>
1 parent bf060fe commit cf1223a

30 files changed

+73
-0
lines changed

_posts/2017-02-06-快速搭建个人博客.md

+73
Original file line numberDiff line numberDiff line change
@@ -598,3 +598,76 @@ Configuration file: /Users/baiying/Blog/_config.yml
598598
**心满意足!**
599599

600600

601+
# 补充
602+
603+
#### 修改主页的座右铭
604+
605+
最近有不少小伙伴私信我:**如何修改主页的座右铭?**
606+
607+
就是这个:
608+
609+
![](http://upload-images.jianshu.io/upload_images/2178672-31dc0068f256aca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
610+
611+
很简单,找到博客目录下的 **index.html** 文件,修改这句话就可以了。
612+
613+
![](http://upload-images.jianshu.io/upload_images/2178672-9e4785654523bf07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
614+
615+
#### 如何在博客文章中上插入图片
616+
617+
博客的文章用的是 MarkDown 格式,如果没用过 MarkDown 真的 强烈推荐 [花半个小时学习一下](http://sspai.com/25137)
618+
619+
MarkDown 中添加图片的形式是 :`![](图片的URL)`
620+
621+
例如:
622+
623+
`![MarkDown示例图片](http://upload-images.jianshu.io/upload_images/2178672-eb2effd6b942a500.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)`就会显示下面这张图片
624+
625+
![MarkDown示例图片](http://upload-images.jianshu.io/upload_images/2178672-98965f66db8f5856.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
626+
627+
`https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg`就是这张图片的URL,我们可以在浏览器输入这个URL找到或下载这张图片。
628+
629+
所以,要在 MacDown 中插入图片,这张图片就需要上传到图床(网上),然后在引
630+
用这张图片的URL。
631+
632+
##### 将图片上传到图床
633+
634+
Mac 上的图床神器:iPic
635+
636+
直接在App Store上下载,谁用谁知道!
637+
638+
使用方法很简单,直接拖动图片到 P 图标上,或者选中图片按快捷键 `⌘+U`,就能请示上传。
639+
640+
上传成功就能直接粘贴图片的URL。
641+
642+
![iPic](http://upload-images.jianshu.io/upload_images/2178672-7399aeaced6f1e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
643+
644+
用 iPic 上传图片后,获取URL插入文章中就可以了。
645+
646+
![iPic上传图片](http://upload-images.jianshu.io/upload_images/2178672-4be76fb02708de5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
647+
648+
649+
#### 推荐几个好用软件
650+
651+
##### MarkDown编辑器
652+
653+
[MacDown](https://macdown.uranusjr.com/):可能是Mac上最好的MacDown编辑器了
654+
655+
![](http://upload-images.jianshu.io/upload_images/2178672-2226239a63278302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
656+
657+
##### 图片压缩工具
658+
659+
[ImageOptim](https://imageoptim.com/)
660+
661+
对于我们的博客来说,图片越大,加载速度越慢。
662+
663+
不信你用手机打开你的博客试试~
664+
665+
所以有必要对我们上传到博客网站中的图片:指的是你的头像,首页背景图片,文章背景图片等。对于博客文章中插入的图片,其实也可以压缩了再上传。
666+
667+
对博客中的所有图片进行压缩:
668+
669+
看看压缩结果,最高的一张压缩了78.7%,这简直是太可怕了!
670+
671+
![ImageOptim压缩图片](http://upload-images.jianshu.io/upload_images/2178672-0f8e643fa1da8674.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
672+
673+
好了,现在个人博客的加载速度估计要起飞了~

img/about-BY-gentle.jpg

-70.8 KB
Loading

img/avatar_m.jpg

-1.09 KB
Loading

img/home-bg-geek.jpg

-21.3 KB
Loading

img/post-bg-alibaba.jpg

-16.1 KB
Loading

img/post-bg-android.jpg

-27.7 KB
Loading

img/post-bg-coffee.jpeg

-21.4 KB
Loading

img/post-bg-cook.jpg

-11.2 KB
Loading

img/post-bg-debug.png

-57.6 KB
Loading

img/post-bg-desk.jpg

-172 KB
Loading

img/post-bg-github-cup.jpg

-23.3 KB
Loading

img/post-bg-iWatch.jpg

-38 KB
Loading

img/post-bg-ios10.jpg

-139 KB
Loading

img/post-bg-ios9-web.jpg

-3 KB
Loading

img/post-bg-ioses.jpg

-158 KB
Loading

img/post-bg-js-version.jpg

-1.3 KB
Loading

img/post-bg-miui6.jpg

-10.1 KB
Loading

img/post-bg-mma-0.png

-281 KB
Loading

img/post-bg-mma-3.jpg

-19.4 KB
Loading

img/post-bg-mma-5.jpg

-10.2 KB
Loading

img/post-bg-mma-6.jpg

-14.9 KB
Loading

img/post-bg-os-metro.jpg

-12.1 KB
Loading

img/post-bg-swift.jpg

-13.8 KB
Loading

img/post-bg-swift2.jpg

-17.6 KB
Loading

img/post-bg-universe.jpg

-34.1 KB
Loading

img/post-sample-image.jpg

-35.4 KB
Loading

img/readme-home.png

-20 Bytes
Loading

img/readme-side.png

-10 Bytes
Loading

img/tag-bg-o.jpg

-5.02 KB
Loading

img/tag-bg.jpg

-4.93 KB
Loading

0 commit comments

Comments
 (0)