Typora书写Hexo博客及markDown语法

发表于 更新于 阅读次数： Changyan： 本文字数： 1.9k 阅读时长 ≈ 7 分钟
Typora和MarkDown语法的介绍

开始写博客

hexo博客以md文件生成，使用markdown语法书写，在这里推荐Typora。

Typora破解激活

在Typora 官方中文站 (typoraio.cn)下载Typora，然后在下载下面我给出的激活补丁。安装Typora后，关闭电脑安全中心实时防护，把补丁拉入Typora安装目录，再以管理员身份运行即可成功激活。

激活补丁 提取码: 3j6b

标点符号问题

当你在中文输入法却无法输出中文标点符号时，ctrl + . 即可改回中文输入状态输出中文符号

Hexo初始化设置

文章资源文件夹设置

为了更规律化管理图片和其他资源以及想要将资源分布在各个文章上。

我们需要将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新的选项，其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片

如需启用，在_config.yml配置文件中加入如下语句：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后，资源图片将会被自动解析为其对应文章的路径。 例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg"> 。

兼容Typora和Hexo图片显示

在上文中，![](image.jpg)可以在hexo正常显示图片，但在本地Typora无法显示图片，如果使用相对路劲，Typora能显示图片但Hexo又无法显示。我们修改下面配置达到两者兼容。

博客目录\node_modules\hexo-renderer-marked\lib\renderer.js

1
2
3
4
5
6
7
image(href, title, text) {
    #加入如下代码
    if(href.indexOf('/')>-1){
      href=href.split('/')[1]
    }
    ...
}

这样我们在Typora下使用![](文章目录/image.jpg)就可以在本地Typora和Hexo部署都显示图片。

4.02更新：

如果使用上面那个方法，引入网络地址的图片时，地址渲染后就会失效。琢磨了一阵子，现在采用以下方法：

在Typora偏好设置 -> 图像中这样修改，插入图片时自动复制到文章资源文件夹，

image-20230402195853264

然后再设置图片根目录为文章资源文件夹

image-20230402200100738

这时候文章前面会出现这样一条语句：

typora-root-url: ./博客文章同名文件夹

然后我们继续更改博客目录\node_modules\hexo-renderer-marked\lib\renderer.js

1
2
3
4
5
6
7
image(href, title, text) {
    //重定向Typora下本地图片路径，方便远程仓库渲染
    if(href.startsWith('/')){
      href = href.slice(1);
    }
    ...
}

这样就实现本地Typora和Hexo部署都显示图片。但每次写新的一篇博客都需要设置图片根目录略显繁琐。后续有更好的方法会继续更新。

文章摘要

我们在首页的时候其实就是我们的文章列表，但是这时候有个问题，如果我们某一篇或者某几篇文章很长，那首页是不是更长呢？其实在首页我们可以只显示文章部分内容，通过点击阅读更多按钮来进入文章详情。

目前主题可使用两种方式在首页显示文章摘要而不是全文。

方法一: <!-- more -->

在你觉得合适的地方加上<!-- more -->

1
2
3
4
5
6
7
title: Hello World
date: 2015-12-03 00:00:00
---
<Excerpt in index | 首页摘要> 
<!-- more -->
<The rest of contents | 余下全文>
复制代码

<!-- more --> 之前最好不要有空格等字符；

方法二: description

在文章开头加上摘要

1
2
3
4
5
6
title: Hello World
date: 2015-12-03 00:00:00
description: "Welcome to Hexo! This is your very first post."
---
<Contents>
复制代码

通过 description 添加的摘要只能为纯文本；

description 中的内容加引号，可以避免一些程序错误，例如当内容里包含英文冒号时。

MarkDown语法

介绍

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。使用Markdown 编写的文档可以轻松地导出为 HTML、Word、图像、PDF、Epub 等多种格式的文档。当前许多网站都支持使用 Markdown 来撰写文档或者发表文章。例如：GitHub、简书、StackOverflow、有道云笔记等等。

注：很多语法格式需要空格分隔。不同语法直接支持相互嵌套。例如你可在引用里嵌套列表等等，具体可自行实验。

这里只给出日常语法，具体可查看 Markdown 官方教程。在Typora 有许多快捷键快速生成语法。后续将直接给出快捷键，默认为Typora编辑器的快捷键不再赘述。

标题语法 ctrl+对应数字

1
2
3
4
5
6
# 标题
## 标题
### 标题
#### 标题
##### 标题
###### 标题

引用语法 ctrl+shift+q

1
> 你要引用的句子

效果：

你要引用的句子

列表语法

有序列表 ctrl+shift+[

1
2
1. 列表一
2. 列表二

效果：

  1. 列表一
  2. safas二

无序列表 ctrl+shift+]

1
2
- 列表一
* 列表二

效果：

  • 列表一
  • 列表二

任务列表 ctrl+shift+x

1
2
- [ ] 列表一
- [x] 列表二

效果：

  • 列表一
  • 列表二

代码语法

代码 ctrl+shift+`

1
`代码内容`

效果：

代码内容

代码块 ctrl+shift+k

1
2
3
4
5
```你要的代码语言
```
例如：
```c
```

效果：

1
2
3
4
5
6
7
8
```

### 表格语法 ctrl+t

```markdown
|标题|标题|标题|
|:--|:--:|--:|
|内容|内容|内容|

:在右边右对齐，在左边左对齐，两边都有冒号居中对齐

效果：

标题 标题 标题
内容 内容 内容

脚注语法

1
2
内容[^脚注]
[^脚注 ]:这是脚注

效果：

内容^脚注

横线语法

1
---

效果：

链接语法

超链接 ctrl+k

1
[链接名字](网站 "鼠标提示内容")

效果：

链接名字

封装链接在文章各处使用

1
2
[链接名字][id],[链接名字][id],[链接名字][id]
[id]:网站 "鼠标提示内容"

效果：

链接名字,链接名字,链接名字

文章内部跳转

1
2
这里以跳转到 Typora破解激活 举例
[Typora破解激活](#Typora破解激活)

效果：

Typora破解激活

图片语法 ctrl+shift+i

1
2
3
![图片名字](地址 "鼠标提示内容")
这里地址可用本地地址也可用在线地址，以下用百度logo举例
![百度](https://www.baidu.com/img/bd_logo1.png?where=super "百度logo")

效果：

百度

强调语法

斜体 ctrl+i

1
*斜体*

加粗 ctrl+b

1
**加粗**

下划线 ctrl+u

1
<u>下划线</u>

==高亮==

1
==高亮==

下标下标

1
下标~下标~

上标^上标^

1
上标^上标^

值得注意的是，高亮下标上标在Typora是默认关闭的。

打开方式：文件 > 偏好设置 > Markdown > Markdown扩展语法中把他们选中 > 重启Typora

Html语法

在markdown编辑器中，你可以通过html代码实现你所需要的功能，比如：

1
<iframe src="//player.bilibili.com/player.html?aid=419109055&bvid=BV1fV411W7Ss&cid=366830665&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" autoplay="false" > </iframe>

其他

markdown还有许多语法，例如数学公式等，这里没有论述感兴趣的可自行百度。

实验是检验真理的唯一标准。