简介： 本篇文章讲述了hexo中的常用命令、日常Typora与Hexo协作、以及基本的markdown语法，以用于作者和读者之后使用时备忘，也是作者的第一篇Blog，用于熟悉整个书写流程。

1 Typora与Hexo协作遇到的问题

1.1 如何在hexo中渲染数学公式

首先安装hexo-renderer-kramed包作为公式生成引擎

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

其次由于md数学公式中符号和Hexo渲染的符号可能存在冲突，所以需要对数学公式的渲染文件（./node_modules/kramed/lib/rules/inline.js）进行修改：

-  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+  escape: /^\\([`*\[\]()#$+\-.!_>])/

-  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

最后在主题的配置文件(_config.yml)中添加如下内容，启动对数学公式的渲染：

# Math Equations Render Support
math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: false

  engine: mathjax
  #engine: katex

1.2 Typora与Hexo的图片路径问题

我们一般是在本地使用typora书写，然后部署到Hexo博客上。这个过程中会遇到图片文件路径冲突的问题。

首先，我们在Hexo配置文件中打开post_asset_folder选项，使得每一篇博客自动建立一个同名文件夹用于保存图片。

# _config.yml
post_asset_folder: true

这个时候我们在md文件中就可以使用相对路径对文件进行索引啦。但是对于Hexo而言，在post_asset_folder选项后，会直接到同名文件夹去寻找图片，所以我们的书写是：

# myblog.md
!()[picture.png] # ->./myblog/picture.png

但是对于Typora, 它可没有默认的寻找路径，所以就是到相对于md文件的相对路径去寻找，所以我们的书写是：

# myblog.md
!()[./myblog/picture.png] # ->./myblog/picture.png

所以出现的一个尴尬的情况就是想要让Hexo远程博客显示图片就需要采用第一书写方式；而想在本地的Typora中显示图片就需要采用第二种书写方式。然而这个关键的问题被一个包给解决啦！

npm install hexo-image-link --save

在下载hexo-image-link之后，我们就可以让Hexo同时遵守Typora的图片索引路径去获取图片。

2 Hexo中常用命令

  • 新建一篇文章或者新的页面 hexo new <title> 默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录： hexo new page --path about/me "About me"

  • hexo中生成草稿或隐私文章 在source文件夹中，默认会将新建的文章加入_posts文件夹中，并通过generate和deploy命令对外可见。如果要生成一篇对外不可见或者未编辑完的文章，可以首先通过如下命令生成名为‘About me’的草稿： hexo new draft 'About me' 将草稿变为文章只需要通过如下命令,即将_drafts文件夹中的草稿移动到_posts文件夹中。需要注意的是此filename不需要加md后缀： hexo publish <filename> 以如下命令启动本地服务器可以预览草稿： hexo server --drafts 当想要将草稿生成post时，输入如下命令即可： hexo publish 'About me'

  • 快速生成静态文件 hexo generate 由于hexo博客框架是静态的，使用此命令会将_post文件夹中的所有文件重新生成静态文件。

  • 部署到仓库 hexo deploy 这是hexo的一键部署功能，执行此命令即可将网站发布到_config.yml配置中的仓库地址。

  • 启用本地服务器 hexo server or hexo s --debug 启动本地网站，可以在本地观察网站效果。以调试模式启动本地网站，在此模式下，对文件的更改无需停止网站只需刷新即可看到效果，调试非常方便。

综上，在新建一篇博客的时候。需要首先在命令行中进入Blog的根文件夹，然后输入hexo new <title>来新建一篇post型博客。接着在博客书写完成之后 使用命令hexo generate来生成静态文件，最后使用hexo deploy将改文件部署到服务器上。

3 基本的markdown语法

  • 标题
    # 这是一级标题
    ## 这是二级标题
    ### 这是三级标题
    #### 这是四级标题
  • 字体
**这是加粗的文字**
*这是倾斜的文字*
***这是斜体加粗的文字***
～～这是加删除线的文字～～

上述代码的效果如下所示： 这是加粗的文字 这是倾斜的文字 这是斜体加粗的文字 这是加删除线的文字

  • 引用
>这是引用的内容
>>这也是引用的内容
>>>这还是引用的内容

上述代码的效果如下图所示： >这是引用的内容 >>这也是引用的内容 >>>这还是引用的内容 + 分割线 三个或三个以上的-或者\*即可如\---或者\*** 上述效果是这样的： *** ---

  • 图片 由于开启了post_asset_folder，所以默认需要加载的资源在同名文件夹中。此时相对的根目录就是此同名文件夹。具体代码格式有以下两种：
![描述](picture.png)
<div style="width:50%;height:50%;margin:auto">{% asset_img picture.png [This is an example image]%}</div>
描述
  • 列表 无序列表用- + *任何一种都可以
- 列表内容
+ 列表内容
* 列表内容

效果如下： - 列表内容 + 列表内容 * 列表内容

有序列表可用数字加点的语法表示

1. 列表内容
2. 列表内容
3. 列表内容

效果如下： 1. 列表内容 2. 列表内容 3. 列表内容

列表的嵌套可以通过上一级和下一级之间敲三个空格完成

* 一级无序列表内容
   * 二级无序列表内容
   * 二级无序列表内容
   * 二级无序列表内容

效果如下： * 一级无序列表内容 * 二级无序列表内容 * 二级无序列表内容 * 二级无序列表内容

  • 代码 使用```代码内容```书写代码块的内容 使用`代码内容`书写一行代码的内容