用七牛为你的文章免费添加图片

Posted on   |  

Hexo文章中的图片，可以外挂自别的地址，也可以放在本地，然后和静态文件一起发布（部署）到你的空间。
但这么干很苦逼的，现在建议外挂图片好，因为访问以国内为主，挂图片在github上会很慢的。
如果你想知道怎么实现这样的方式，看下面这个.

本地外挂方法

将图片放在source/images目录下，然后，直接修改hexo生成的文章的html文件：
<img src="/images/photo.png" style="width: 300px;"/>
这样还是很麻烦的，不过你厉害的话，可以考虑定制css简化这个。

外挂图片到七牛

七牛提供了个体验套餐，免费提供1G/月的流量和1G存储空间，普通用户够用了。让后认证的用户10GB免费存储，每月10GB免费下载流量，用做博客图片等资源存储，正合适。(但这套餐要验证电话和身份证，赫赫，后面就不解释了）

注册和安装七牛工具

首先需要申请七牛账号，如果你也需要申请，请访问这个链接，
https://portal.qiniu.com/signup?code=3lbnx76ht1hzm
这样我这个月可以获的点流量（5GB）。
然后登录七牛网站，按照官网说明创建空间。比如我创建的空间是sanjay，那么我上传的文件，就可以通过这样的URL访问：
http://sanjay.qiniudn.com/photo.png

上传图片方法

命令行

使用七牛提供的命令行工具，当然你也可以使用七牛提供的web界面上传。
使用命令行上传的好处是，批量增量的上传，具体使用方法看七牛提供的教程。

手动


我简单粗暴的弄张图把，选择你的空间，然后上传图片，选中图片，哪里有个外链地址，这样就可以啦！是不是还可以？
最后，就是在日志文件中加入image标签：

1
![](http://图片连接地址.png)

样式上对图片的处理

但是，上面这样做显示的图片，有个问题，有时候显示图片太大了。
查了一下hexo默认样式有关图片的设置（见thems/light/source/css/_partial/article.styl）：

1
2
3
4
img, video
  max-width 300px
  height auto
  border none

这是stylus，用来生成css文件的。对图片宽度做了约束，但没有对图片高度做约束，如果宽度不高而高度很大，就会出现问题。

改为：

1
2
3
4
5
6
7
8
9
box-shadow(args…)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
img, video
max-width 300px
max-height 300px
border none
box-shadow 2px 2px 3px #aaaaaa

我上面的修改，除了设置了文章中图片的最大高度限制，另外，为了美观，让图片有一个比较薄的阴影。这里使用了stylus的mixin。

好啦，外挂图片的接触到这里就结束了。
参考来源：http://blog.shiqichan.com/

热评文章