Hexo使用内链及文章中加入图片的方法

以前应用自己日志文章,比如: Chrome和Firefox设置控制台启用持续日志,我都是直接写markdown的:

1
[Chrome和Firefox设置控制台启用持续日志](http://marshal.ohtly.com/2015/09/11/setting-web-console-preserve-log-for-chrome-and-firefox/)

缺点就是,如果日志更换域名就需要修改这部分代码。

现在好了,前提是你使用Hexo3.0以上版本,可以这样写:

1
{% post_link setting-web-console-preserve-log-for-chrome-and-firefox %}

详情参见Breaking Changes in Hexo 3.0 #Render Pipeline Changed

图片的处理,以前比较依赖七牛云,操作步骤大致是:

  • 图片保存在本地的指定目录下
  • 使用七牛云的async命令行工具,将目录中的新文件同步到七牛的服务器端
  • 在七牛云的web管理界面中找到刚上传文件的链接,在日志中使用

另外,也尝试使用过Hexo的七牛插件,现在应该能用,当时我测试使用的时候有问题。想了一下,还是尽量少用第三方插件了,随着版本升级,可能会增加维护成本。

目前的图片加入日志的做法是,在source目录下,建一个目录,images,把创建的图片文件都保存在这个目录下,Hexo会在deploy的时候自动同步到服务器端。

然后,使用标准的markdown语法:

1
![](/images/preserve-log-chrome.png)

好处是,Hexo升级,变换主题,都不会对日志正文有影响。

但是标准的做法,图片是100%宽度显示的,很难看。

我现在用的是简单粗暴的方式,直接修改了主题中的css,即themes/landscape/source/css/_partial/article.styl文件:

1
2
3
4
5
6
7
8
img, video
float:none
max-width: 500px
height: auto
margin: auto
background-color: #fff
padding: 4px
box-shadow: 4px 4px 5px #888888

后面如有时间,了解下Hexo的主题如何扩展,找一个优雅点的方案。