MD文档排版

居中

text here

表格

title1	title2	title3
`code`	text	bold
	https://markdown.com.cn/extended-syntax/tables.html

代码

1
2
3

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

效果

文字或者 markdown 均可

代码

1	`<p class="note note-primary">标签</p>`

效果

标签

代码

1	`使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑`

效果

使用 Ctrl+Alt+Del 重启电脑

在 markdown 中加入如下的代码来使用便签：

1
2
3

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

文字或者 markdown 均可

或者使用 HTML 形式：

1	`<p class="note note-primary">标签</p>`

标签

可选便签：

primary

secondary

success

danger

warning

info

light

WARNING

使用时 {% note primary %}` 和 `{% endnote %} 需单独一行，否则会出现问题

#行内标签

在 markdown 中加入如下的代码来使用 Label：

1	`{% label primary @text %}`

或者使用 HTML 形式：

1	`<span class="label label-primary">Label</span>`

可选 Label：

primary default info success warning danger

#折叠块

使用折叠块，可以折叠代码、图片、文字等任何内容，你可以在 markdown 中按如下格式：

1
2
3

{% fold info @title %}
需要折叠的一段内容，支持 markdown
{% endfold %}

info: 和行内标签类似的可选参数 title: 折叠块上的标题

#勾选框

在 markdown 中加入如下的代码来使用 Checkbox：

1	`{% cb text, checked?, incline? %}`

text：显示的文字
checked：默认是否已勾选，默认 false
incline: 是否内联（可以理解为后面的文字是否换行），默认 false

示例：

普通示例

默认选中

内联示例后面文字不换行也可以只传入一个参数，文字写在后边（这样不支持外联）

#按钮

你可以在 markdown 中加入如下的代码来使用 Button：

1	`{% btn url, text, title %}`

或者使用 HTML 形式：

1	`<a class="btn" href="url" title="title">text</a>`

url：跳转链接
text：显示的文字
title：鼠标悬停时显示的文字（可选）

text

#组图

如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：

{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total：图片总数量，对应中间包含的图片 url 数量
n1-n2-…：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式

如下图为 {% gi 5 3-2 %} 示例，代表共 5 张图，第一行 3 张图，第二行 2 张图。

Group Images

命令

配置

npm install hexo -g //安装

npm update hexo -g //升级

hexo g // = hexo generate 生成

hexo s // = hexo server 本地服务预览

hexo s -p xxxx // 更改本地端口

hexo d // = hexo deploy 部署
*下载了豆瓣插件即不可使用 hexo d

hexo d -g // = hexo g -d 生成后部署

hexo clean //清缓存

博客

hexo new post “xxx”

hexo new page xxx

hexo new photo “xxx”

豆瓣爬取

hexo clean && hexo douban -bgm && hexo g
*-bgm中 b-books 、g-games、m-movies可以只选部分

写作

Post Front-matter

---
title:     // 文章标题
date:   // 创建日期
updated:  // 更新日期
tags:    
   - a
   - b   // 标签
categories: 
   - a
   - b  // 分类
keywords:  // 关键字
description: // 在主页描述、若不选自动节选
cover:  // 主页缩略图
top_img:  // 顶部图片 （链接）
// *若未设置 top_img，则使用 cover图，没 cover则默认图
comments：// 评论开启（true/false）、默认true
---

一定要用小写，否则无法识别

提示块标签

标签不是Markdown标准格式，为hexo特有，且以下写法只是用Next等主题下

{% note default %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}  //可使用语法 no-icon去掉小图标
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

效果

Markdown

主要为Typora编辑支持下，且Typora中语法和文本间需要空格

一、标题

1
2
3

# 一级标题
...
###### 六级最小

二、主要

**1加粗**
*2斜体*
***3加粗+斜体***
~~4删除线~~
^5^上标
~6~下标
1. 有序列表
2. 有序列表
- 无序列表
+ 无序列表
* 无序列表

字体处理中语法和文本不能加空格

效果：

1加粗
2斜体
*3加粗+斜体*
~~4删除线~~
5上标
6下标

有序列表
有序列表

无序列表
无序列表
无序列表

其它

表格

表头|表头|表头
---|:--:|---: //默认居左，:居中:，居右:
内容|内容|内容
内容|内容|内容
1|2|3

效果：

表头	表头	表头
内容	内容	内容
内容	内容	内容
1	2	3

插入代码

1
2
3

(```此处写语言
 代码...
```)

为防止编译加了（），实际使用中没有（）

效果：

代码...

引用

>引用

效果：

引用

图片/链接

1 2	`[QQ](https://im.qq.com/) ![图片](xxxx) //xxxx为图片链接`

图片还可插入Html标签
例：

1	`<img src="xxxx" style="zoom:80%" > //zoom可定图片大小比例，部分平台不支持`

最后编辑于：2020.07.19 11:20:49

作者：maxma128
链接：https://www.jianshu.com/p/9a9b35c819c3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Markdown 图片尺寸对齐等详细使用

Markdown教程
专栏收录该内容
12 篇文章4 订阅
订阅专栏
✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您些帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

文章目录
图片基本用法
调整尺寸大小
调整对齐方式
总结Markdown效果示例
内嵌HTML语法
HTML基础语法
HTML调整尺寸大小
HTML调整对齐方式
HTML 使用p标签实现复杂排版
基础语法
图文混排效果实现
总结HTML效果示例
总结
图片基本用法
图片是比文字更容易表达多方位信息的媒介。Markdown 自然也为图片的添加提供了便捷的方法。

Markdown 图片语法格式如下：

替代文字

以感叹号 ! 开始
紧接着方括号，包含图片的替代文字
接下来是普通括号，内含图片的URL地址，你还可以使用引号包裹并加上可选的 ‘title’ 属性文字。
调整尺寸大小
直接在连接地址后添加例如=宽x高的数字即可调整图片大小。

如果需要调整图片大小，只需在图片地址后添加尺寸参数，例如：

![替代文字](图片地址 =600x600)

说明：等号 “ = “ 前面需要有一个空格 =宽x高

带尺寸的图片：=600x600
宽度确定高度等比例的图片：=600x
高度确定宽度等比例的图片：=x600
调整对齐方式
若需要调整对齐方式，需要在图片链接地址后面添加指令#pic_center，该命令的位置在指定尺寸的指令前面。

图片描述

调整图片位置说明实例
#pic_center 居中对齐图片描述
#pic_left 靠左对齐
#pic_right 靠右对齐
说明：# 前面不需要空格，= 前面需要有一个空格

总结Markdown效果示例
这里总结了一个例子：
对齐方式：#pic_center
图片大小：=300x200
图片链接：(https://blog.csdn.net/u014696856)
这里就不一一举例了，总结一个实例剩下的大家去实践。

![这是图片](https://img-blog.csdnimg.cn/direct/6de94c45061d424f95dd253b6bce6ec9.webp#pic_center =300x200)
1

内嵌HTML语法
HTML基础语法
基础语法：

src 属性指定图像的URL地址
alt 属性为图像定义可替换的文本
title 属性描述元素的额外信息
可以通过 width 和 height 属性设置图像的尺寸，通过 style 属性定义行内样式，包括缩放效果。

HTML调整尺寸大小
基础语法：

调整图片尺寸说明实例
width=”100%” 横向占比
width=”600” 宽度
height=”600” 高度
调整位置和尺寸举个例子：
<img src=”图片链接” align = “right” width=”600” height=”600”/>

HTML调整对齐方式
基础语法：

调整图片位置说明实例
align 居中对齐： align = “middle”
靠左对齐： align = “left”
靠右对齐： align = “right” align属于img标签属性，使用起来也简单例如：

注意图片描述可以不写,调整图片的位置追加在图片链接的后面
最好将标签包裹在

. . .

标签内使用，可以实现更多、更好的效果。

HTML 使用p标签实现复杂排版
基础语法
也可通过将标签包裹在

. . .

标签内修改图片的对齐方式。

基础语法：

图文混排效果实现
要实现左图右文或左文右图的效果，需要在标签后添加 align 属性：

align=“left” 实现左图右文效果
align=“right” 实现左文右图效果
实现左图右文或左文右图的效果
需要左右混排的文字放在

. . .

标签内，且需在标签行的下面。放在

. . .

标签外的排版为正常的上下排版样式。
左图右文：align = “left”
左文右图：align = “right”

基础语法：

文字在右边，图片在左边。

文字在左边，图片在右边。

总结HTML效果示例
写了两个复杂的实例，经过这两个实例HTML图片基本都能实现，图文混排的不能能实现太复杂的效果，很多浏览器也不支持