Hexo的文章基于Markdown语法，本文给出一些作者尝试过的入门方法解决实际问题。
表格
Q：表格如何设置文字居中？
关于左对齐、居中、右对齐，在语法中有详细说明。基于Markdown表格基础语法，可以做出最基础的MD效果。
Q：为什么每一个表格的效果不一样呢？
制表的差异要看引用的markdown的类型。基于最早的Markdown版本，有一些微小差异的版本陆续发布。另外，不同博客主题的CSS渲染也有可能影响到表格的展示效果。比如：有的表格可以根据字符数量自动调整每一列的表格宽度，有的不行。在表格的行格式不完整时展示方式不同，有一些表格直接无法生成，有的是会展示空行，有的表格是不完整的。不过这些都不影响到基础的使用。
Q：如何在表格内换行？
在Hexo中Markdown语法的文件最终都会转换为html的文件形成静态页面展示。在不对博客设置做调整的前提下，可以变相的采用Html的语法变相解决问题。
在需要换行的位置增加如下代码即可。1
<br>
Q：如何在表格中增加空格
同“如何在表格内换行”，利用html特性解决问题。
在需要空格的位置增加如下代码即可。1
Q：如何在表格中合并单元格
同“如何在表格内换行”，利用html特性解决问题。简单的合并可以参考如下代码。
Q：我想做一个复杂的表格怎么办？
建议直接用html代码，如果你一定要做的话。这篇文章Markdown之表格的处理的方法有一些启发，利用No-Cruft Excel to HTML Table Converter实现代码的转换和修改，减少工作量。
Q：我想调整Markdown表格的列宽怎么做？
如果你的markdown不支持，就需要通过css的样式调整。可以考虑换成html的表格后套一个样式，不过我没有试过。有兴趣可以自行探索。
图片
Q：什么是图床？
为了在博客中显示图片，可以直接把图片上传到源码中，但是随着博客的内容不断增多，会增加博客的源码容量。Github空间有限，这样的上传下载并不是非常必要。替代办法是把图片上传到一个网络位置，既可以自己保存，又可以通过链接调用。这样的服务供应商提供的服务就是我们的博客的图床。提供该服务的有一些，我选用的是七牛，所以就用它举例：
- 注册七牛账号，进行初步设置
- 每次登陆七牛，上传图片，拷贝外链
- 把外链用到自己的博客中。
Q：如何调整图片的大小？
markdown不能设置图片大小，用PS的方式调整不同的大小后上传图床略显复杂。有没有更好的办法呢？
| 方法 | 好处 | 坏处 |
|---|---|---|
| PS修改图片大小 | 调整大小 可以做其他设定 |
麻烦，需要多次上传 学习成本较高 |
| html修改 | 修改方便，不需要改动原图 可以直接饮用任何链接 |
链接源可能不稳定 学习成本较低：需要了解html语言 |
| 七牛接口输出 | 修改方便，不需要改动原图 可以做更多的设定 |
必须上传七牛 学习成本较低：需要了解七牛接口规则 |
Html
可以随便从网上找一个图片，利用markdown的代码展示如下：1
html代码和展示效果1
<img src="http://gxtech.gxcad.com/wp-content/uploads/2010/08/hero_4_20091020.jpeg" style="width:100px;height:100px;" />
如果想设置更多，可以做成如下的效果1
<img src=http://gxtech.gxcad.com/wp-content/uploads/2010/08/hero_4_20091020.jpeg onload='if (this.width>140 || this.height>226) if (this.width/this.height>140/226) this.width=140; else this.height=226;'>
<img src=http://gxtech.gxcad.com/wp-content/uploads/2010/08/hero_4_20091020.jpeg onload=’if (this.width>140 || this.height>226) if (this.width/this.height>140/226) this.width=140; else this.height=226;’>
一般来说，只要修改这几个数值就可以初步实现效果：
- width表示宽
- height表示高
七牛接口
这是利用Markdown语法设置的图片大小1
1 |  |
图片本身没有发生变化，唯一的区别是第二次加载图片的链接后面多了1
?imageView/2/w/200/q/90
这是通过七牛提供的API接口图片基本处理 (imageView2)增加了一些参数的说明。
1 | imageView2/<mode>/w/<LongEdge> |
先确定mode，然后设置宽和高。一共有五种mode，简单总结如下：
| 模式代码 | 长宽设置 | 简略说明 | 备注 |
|---|---|---|---|
| 0 | 缩略图的长边最多为 |
等比缩放，不裁剪。 | 适合移动设备上做缩略图 |
| 1 | 限定缩略图的宽最少为 |
等比缩放，居中裁剪 | 如果只指定 w 参数或只指定 h 参数，代表限定为长宽相等的正方图。 |
| 2 | 限定缩略图的宽最多为 |
等比缩放，不裁剪。 | 适合PC上做缩略图。 |
| 3 | 限定缩略图的宽最少为 |
等比缩放，不裁剪 | 模式1是模式3的结果再做居中裁剪得到的。 |
| 4 | 限定缩略图的长边最少为 |
等比缩放，不裁剪 | 很适合在手持设备做图片的全屏查看（把这里的长边短边分别设为手机屏幕的分辨率即可），生成的图片尺寸刚好充满整个屏幕（某一个边可能会超出屏幕） |
| 5 | 限定缩略图的长边最少为 |
等比缩放，居中裁剪 | 同上模式4，但超出限定的矩形部分会被裁剪。 |
Q：如何给图片增加超链接？
点击如下链接会跳转到自己的博客首页。
代码如下：1
[](http://blog.junyu.pro)
原理：采用嵌套的方式，在[]()的超链接的前面的中括号中嵌入![]()即可。
视频
Q：如何插入视频？
优酷、土豆视频的插入方法
找到视频下方的“分享”按钮，会有一个“把视频贴到Blog或BBS”下面一般有“通用代码”“html代码”等。把这个代码拿过来粘贴到指定的位置即可。
腾讯视频的插入方法 1
<iframe height=498 width=650 src="http://v.qq.com/x/page/m0329872hrv.html" frameborder=0 allowfullscreen></iframe>
修改vid，就是代码中page后面的”m0329872hrv”为视频自己的id即可。Id可以在腾讯视频的网址链接中找到。
总的来说，不管是哪一种方法，仔细看代码会发现都是利用html的< iframe >标签特性。但是要注意，iframe框架不是越多越好，慎用。
其他
Q：如何增加锚点？
锚点涉及到两个位置，一个是当你阅读到了A处，希望通过A处跳转到B处。
A处增加如下代码：1
[锚点显示的文字](#anchor)
B处增加如下代码：1
<a name="anchor" />
anchor可以换成自己希望的文字，这个是一个锚点的标记，并不会在前台显示。原理可以参考markdown中的锚点处理中提到的Markdown 语法说明。
简单说就是Markdown转换超链接并不能很好的处理这个问题，但是可以结合html的标签处理。
Q：markdown转义符号
在需要转义的符号前增加反斜线即可。1
\*
Q：链接的最后一个符号是括号怎么办？
1 | [Aberration](https://en.wikipedia.org/wiki/Aberration_(film%29) |
最后一个字符是括号，换成ascii码”%29”,用法如上图。
Q：想进一步了解，有哪些好的文章？
Q：有没有更多小技巧？
未解决问题
- 如何把两个图片放在同一行，我还没有找到答案，直接用html的table效果不是非常理想。
1
2
3
4
5
6<table>
<tr>
<td><img src=http://oa1mlhrmq.bkt.clouddn.com/avatar.png?imageView/2/w/200/q/90 border=0></td>
<td><img src=http://oa1mlhrmq.bkt.clouddn.com/Personal_informal/qrcode.png?imageView/2/w/200/q/90 border=0></td>
</tr>
</table>
完
声明: 本文转载需标明出处，禁止用于商业目的。
ChangeLog
161117 新建
161117 发布