Q&A:基于Markdown的博文写作

Hexo的文章基于Markdown语法,本文给出一些作者尝试过的入门方法解决实际问题。
分类 问题 备注
表格 Q:表格如何设置文字居中?
Q:为什么每一个表格的效果不一样呢?
Q:如何在表格内换行?
Q:如何在表格中增加空格
Q:如何在表格中合并单元格
Q:我想做一个复杂的表格怎么办?
Q:我想调整Markdown表格的列宽怎么做?
图片 Q:什么是图床?
Q:如何调整图片的大小? Html 七牛
Q:如何给图片增加超链接?
视频 Q:如何插入视频?
其他 Q:如何增加锚点?
Q:markdown转义符号
Q:链接的最后一个符号是括号怎么办?
Q:想进一步了解,有哪些好的文章?
Q:有没有更多小技巧?
未解决问题  

表格

Q:表格如何设置文字居中?

关于左对齐、居中、右对齐,在语法中有详细说明。基于Markdown表格基础语法,可以做出最基础的MD效果。

Q:为什么每一个表格的效果不一样呢?

制表的差异要看引用的markdown的类型。基于最早的Markdown版本,有一些微小差异的版本陆续发布。另外,不同博客主题的CSS渲染也有可能影响到表格的展示效果。比如:有的表格可以根据字符数量自动调整每一列的表格宽度,有的不行。在表格的行格式不完整时展示方式不同,有一些表格直接无法生成,有的是会展示空行,有的表格是不完整的。不过这些都不影响到基础的使用。

Q:如何在表格内换行?

在Hexo中Markdown语法的文件最终都会转换为html的文件形成静态页面展示。在不对博客设置做调整的前提下,可以变相的采用Html的语法变相解决问题。
在需要换行的位置增加如下代码即可。

1
<br>

Q:如何在表格中增加空格

“如何在表格内换行”,利用html特性解决问题。
在需要空格的位置增加如下代码即可。

1
&nbsp;

Q:如何在表格中合并单元格

“如何在表格内换行”,利用html特性解决问题。简单的合并可以参考如下代码

Q:我想做一个复杂的表格怎么办?

建议直接用html代码,如果你一定要做的话。这篇文章Markdown之表格的处理的方法有一些启发,利用No-Cruft Excel to HTML Table Converter实现代码的转换和修改,减少工作量。

Q:我想调整Markdown表格的列宽怎么做?

如果你的markdown不支持,就需要通过css的样式调整。可以考虑换成html的表格后套一个样式,不过我没有试过。有兴趣可以自行探索。

图片

Q:什么是图床?

为了在博客中显示图片,可以直接把图片上传到源码中,但是随着博客的内容不断增多,会增加博客的源码容量。Github空间有限,这样的上传下载并不是非常必要。替代办法是把图片上传到一个网络位置,既可以自己保存,又可以通过链接调用。这样的服务供应商提供的服务就是我们的博客的图床。提供该服务的有一些,我选用的是七牛,所以就用它举例:

  1. 注册七牛账号,进行初步设置
  2. 每次登陆七牛,上传图片,拷贝外链
  3. 把外链用到自己的博客中。

Q:如何调整图片的大小?

markdown不能设置图片大小,用PS的方式调整不同的大小后上传图床略显复杂。有没有更好的办法呢?

方法 好处 坏处
PS修改图片大小 调整大小
可以做其他设定
麻烦,需要多次上传
学习成本较高
html修改 修改方便,不需要改动原图
可以直接饮用任何链接
链接源可能不稳定
学习成本较低:需要了解html语言
七牛接口输出 修改方便,不需要改动原图
可以做更多的设定
必须上传七牛
学习成本较低:需要了解七牛接口规则

Html

可以随便从网上找一个图片,利用markdown的代码展示如下:

1
![](http://gxtech.gxcad.com/wp-content/uploads/2010/08/hero_4_20091020.jpeg)

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;'>

一般来说,只要修改这几个数值就可以初步实现效果:

  • width表示宽
  • height表示高

七牛接口

这是利用Markdown语法设置的图片大小

1
![七牛](http://oa1mlhrmq.bkt.clouddn.com/Personal_informal/qrcode.png)

七牛

1
![](http://oa1mlhrmq.bkt.clouddn.com/Personal_informal/qrcode.png?imageView/2/w/200/q/90)

图片本身没有发生变化,唯一的区别是第二次加载图片的链接后面多了

1
?imageView/2/w/200/q/90

这是通过七牛提供的API接口图片基本处理 (imageView2)增加了一些参数的说明。

1
2
3
4
5
6
imageView2/<mode>/w/<LongEdge>
/h/<ShortEdge>
/format/<Format>
/interlace/<Interlace>
/q/<Quality>
/ignore-error/<ignoreError>

先确定mode,然后设置宽和高。一共有五种mode,简单总结如下:

模式代码 长宽设置 简略说明 备注
0 缩略图的长边最多为,短边最多为 等比缩放,不裁剪。 适合移动设备上做缩略图
1 限定缩略图的宽最少为,高最少为 等比缩放,居中裁剪 如果只指定 w 参数或只指定 h 参数,代表限定为长宽相等的正方图。
2 限定缩略图的宽最多为,高最多为 等比缩放,不裁剪。 适合PC上做缩略图。
3 限定缩略图的宽最少为,高最少为 等比缩放,不裁剪 模式1是模式3的结果再做居中裁剪得到的。
4 限定缩略图的长边最少为,短边最少为 等比缩放,不裁剪 很适合在手持设备做图片的全屏查看(把这里的长边短边分别设为手机屏幕的分辨率即可),生成的图片尺寸刚好充满整个屏幕(某一个边可能会超出屏幕)
5 限定缩略图的长边最少为,短边最少为 等比缩放,居中裁剪 同上模式4,但超出限定的矩形部分会被裁剪。

Q:如何给图片增加超链接?

点击如下链接会跳转到自己的博客首页。

代码如下:

1
[![](http://oa1mlhrmq.bkt.clouddn.com/Personal_informal/qrcode.png?imageView/2/w/200/q/90)](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 发布