Markdown常用标记与图片管理

Markdown的入门教程网上已经很多了,这里我只简单记录日常中我使用较多的Markdown语法。

常用语法及快捷键

注意,这里的快捷键不具备通用性,不过可以提供一些参考性。SublimeIDEA中都不支持者这套快捷键,我想着应该是MarkdownPadMou这类纯Markdown工具是支持的。刚才试了一下,马克飞象是支持的,不过现在也开始收费,不能保存,现在偶尔用来即时预览Markdown效果。

其他标记

反斜杠与代码块

\表示反斜杠,在你不想显示Markdown标记时可以使用反斜杠。`code`表示单行代码,```more code```表示多行代码,另外这个标记也可以用于不想显示的Markdown标记。

语法

*这里不会显示斜体*

`code`

效果
*这里不会显示斜体*
code

表格

用于一些需要列表排版的数据显示。

语法

一|二|三
:-|-:|:-
1|2|3

效果
一|二|三
:-|-:|:-
1|2|3

删除线

用于一些无用、已过期的文字描述。

语法

~~这是一条删除线~~

效果
这是一条删除线

锚点

用于页内跳转。其中定义id地方,虽然不太美观,不过只能写HTML。

语法

[点击我跳转到锚点](#jump)
<div id = "jump">我是一个锚点,跳到我这里来</div>

效果
点击我跳转到锚点

我是一个锚点,跳到我这里来

注脚

用于对一些文字进行扩展说明,区别于参考链接。

语法

这是一个注脚测试[^footer1]。
[^footer1]: 这是一个测试,用来阐释注脚。

效果
这里看不到,不知道是Hexo不支持还是Next主题的原因,所以我截了一张图

现在的图片管理方法

为了方便管理,还是存在了博客本地目录。而且后期可以根据需要,上传到指定图床做CDN,如何前期就找图床做主体管理,后期再整理会非常麻烦。

使用步骤

(参考自:在 HEXO 中优雅的使用本地图片

  1. 安装插件
    npm install https://github.com/CodeFalling/hexo-asset-image --save
  2. 将图片demo.png放入source\_posts\common-operations-in-markdown
  3. 在文章common-operations-in-markdown.md中通过![](common-operations-in-markdown/demo.png)使用图片,over。

这里的操作步骤具有一般性。实际应用中只需要把图片demo.pngcommon-operations-in-markdown文件夹/文章改成真实信息即可。另外图片的引用也可以写成更为简便的![](demo.png),虽然使用上很方便,不需要写文章名common-operations-in-markdown/,但是并不利于后期图片的转移整理,因为找不到图片对应的是哪一篇文章。

其他的图片管理方法

七牛图床

采用七牛云存储图片,之所以取代图片存储在本地,主要原因在于3点:

  • 博客发布速度
  • 访问网站时的加载速度
  • 方便管理,包括后期的加水印,防盗链等

图片上传网站

我用的是极简图床,这是一个网站。直接将图片复制或者拖动进去,就可以生成2类地址,还可以直接打开预览。应该还有更简单的的方法,我这也没去折腾了。

绑定七牛账号

建议到七牛注册账号,创建空间存储,并且在极简图床绑定自己的空间域名。这样以来上传图片就不是公开的,而是属于自己空间的存储内容。当然也有坏处,那就是流量都算自己空间的,超过免费额度10G流量后开始付费(注意是流量,不是容量,反正我还没用完,先用着…)

总结

考虑图片管理和后期转移,还是先用现在的图片管理方法,把分类做好。希望有朋友可以提出更好的方案。这个方法相比使用图床是麻烦了点,主要在于:

  1. 需要创建对应文章目录
  2. 需要手动管理图片,我是用FastStone来裁剪图,并按时间来命名图片文件
  3. 图片文件夹和文章放在_posts中,影响文件结构

热评文章