手把手教你如何在博客写文章，
流程比较简单，主要分以下4步：

  • 创建Markdown文件
  • 添加页面信息
  • 写入博客文章内容
  • 上传GitHub

创建Markdown文件

先在博客本地 GitHub 仓库的 \_posts 文件下创建 一个以年份的文件夹 \2023 这个文件夹将放你一整年的文章。然后在 \2023 的文件夹里面创建命名为 “时间-文章名称.md” 的文件

.md 文件的命名规则：

  • 以时间开头：2023-12-13
  • 后加上文章名称：blog-found 文章名称需要是英文的
  • 在加上：.md
  • 完整名称：2023-12-13-blog-found.md
  • 命名有问题页面会渲染不出来

添加页面信息

标签含义

  • layout: 布局 “默认是post”
  • title: “标题”
  • author: 作者
  • category: 分类
  • tags: 标签

写完通过这个网站验证一下格式，网站会帮我们优化。

YAML验证器

1
2
3
4
5
6
7
8
9
10
11
12
---
layout: post
title: "Markdown 博客写作指南"
author: Chenpeiming
categories: Markdown
tags: [博客] 单个标签使用这个方式
tags:   多标签使用这种
  - 博客
  - Markdown
---

在文章需要被渲染到主页的内容后面，插入两个换行即可停止渲染。否则将整篇文章渲染到主页面！

写入博客文章内容

两种标题格式：

  • 使用两个以上 = 标记一级标题 和 使用两个以上 - 标记二级标题

    例如：

    1
    2
    3
    4
    5
    一级标题
    =======

    二级标题
    -------

    演示：

    一级标题

    二级标题


  • 使用 # 来表示标题，其中 # 的数量代表标题级别，共有六个级别。写文章建议使用二级标题、 三级标题来写，这样子会在文章的侧边栏生成目录（二级标题生成主标题、三级标题生成副标题）。

    例如：

    1
    2
    3
    4
    5
    6
    # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题

    演示：

    二级标题

    三级标题

三种设置段落格式：

直接连续输入文字即可自动生成段落，也可以使用以下三种方式设置段落。

  • 使用两个以上空格加上回车

    例如：

    1
    2
    使用  
    两个以说空格加上回车可以换行

    演示：

    使用
    两个以说空格加上回车可以换行


  • 使用一个空行进行换行

    例如：

    1
    2
    3
    使用

    一个空行进行换行

    演示：

    使用

    一个空行进行换行


  • 使用 <br> 换行标签进行换行

    例如：

    1
    使用 <br> `<br>` 换行标签进行换行

    演示：

    使用
    <br> 换行标签进行换行

斜体文本、粗体文本和粗斜体文本：

  • 使用 *斜体文本* 或 _斜体文本_ 可以使文本变为斜体。

    例如：

    1
    2
    3
    *斜体文本*

    _斜体文本_

    演示：

    斜体文本

    斜体文本


  • 使用 **粗体文本** 或 __粗体文本__ 可以使文本加粗

    例如：

    1
    2
    3
    **粗体文本**

    __粗体文本__

    演示：

    粗体文本

    粗体文本


  • 使用 ***粗斜体文本*** 或 ___粗斜体文本___ 可以使文本变为斜体。

    例如：

    1
    2
    3
    ***粗斜体文本***

    ___粗斜体文本___

    演示：

    粗斜体文本

    粗斜体文本

分隔线、删除线和下划线:

  • 分隔线

    使用三个以上的 - 、_ 或 * 可以生成分隔线,也可以使用 <hr> 标签。

    例如：

    1
    2
    3
    4
    ---
    ____
    ***
    <hr>

    演示：


  • 删除线

    使用两个 ~ 在文字的两端加上两个波浪线 ~~删除线~~ 。

    例如：

    1
    ~~删除线~~

    演示：

    删除线


  • 下划线

    使用 <u> 标签来实现

    例如：

    1
    <u>下划线文本</u>

    演示：

    下划线文本

脚注：

脚注是对文本的补充说明，使用 [^文本] 。

例如：

1
2
3
这是一个带有脚注的文本[^1]。

[^1]: 这是一个脚注。

演示：

这是一个带有脚注的文本1。

1. 这是一个脚注。 ↩

列表和列表嵌套：

  • 列表

    使用 + 加号、 - 减号或 * 星号可以创建无序列表，使用 1. 数字加点可以创建有序列表。

    例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    + 无序列表项1
    + 无序列表项2

    - 无序列表项1
    - 无序列表项2

    * 无序列表项1
    * 无序列表项2

    1. 有序列表项1
    2. 有序列表项2

    演示：

    • 无序列表项1

    • 无序列表项2

    • 无序列表项1

    • 无序列表项2

    • 无序列表项1

    • 无序列表项2

    1. 有序列表项1

    2. 有序列表项2


  • 列表嵌套

    只需在子列表中的选项前面添加个四个空格即可

    例如：

    1
    2
    3
    4
    5
    6
    1. 第一项：
        - 第一项嵌套的第一个元素
        - 第一项嵌套的第二个元素
    2. 第二项：
        - 第二项嵌套的第一个元素
        - 第二项嵌套的第二个元素

    演示：

    1. 第一项：
      • 第一项嵌套的第一个元素
      • 第一项嵌套的第二个元素
    2. 第二项：
      • 第二项嵌套的第一个元素
      • 第二项嵌套的第二个元素

引用块、嵌套引用块、引用块列表和列表引用块：

  • 引用块

    使用 > 符号来表示引用块。

    例如：

    1
    > 这是引用的文本块。

    演示：

    这是引用的文本块。


  • 嵌套引用块

    使用 > 、 > > 、 > > > 多个符号来表示嵌套引用块的层级关系。

    例如：

    1
    2
    3
    > 最外层
    > > 第一层嵌套
    > > > 第二层嵌套

    演示：

    最外层

    第一层嵌套

    第二层嵌套


  • 引用块列表

    使用 > 符号加 - 无序列表或 1. 有序列表来实现。

    例如：

    1
    2
    3
    4
    5
    6
    7
    > 区块中使用列表
    > - 第一项
    > - 第二项
    > - 第三项

    > 1. 第一项
    > 2. 第二项

    演示：

    区块中使用列表

    • 第一项
    • 第二项
    • 第三项
    1. 第一项
    2. 第二项


  • 列表引用块

    使用 - 无序列表或 2. 有序列表加 > 符号实现。

    例如：

    1
    2
    3
    4
    5
    6
    7
    - 第一项
        > 第一项的第一个元素
        > 第一项的第二个元素

    1. 第二项
        > 第二项的第一个元素
        > 第二项的第二个元素

    演示：

    • 第一项

      第一项的第一个元素

      第一项的第二个元素

    1. 第二项

      第二项的第一个元素

      第二项的第二个元素

两种设置代码块：

  • 使用 4 个空格或者一个制表符（Tab 键）。

    例如：

    1
    print("Hello, world!")

    演示：

    print("Hello, world!")


  • 使用三个反引号```包裹代码，并指定语言（可选）以进行语法高亮。

    例如：

    1
    2
    3
    4
    ```python
    def hello_world():
        print("Hello, world!")
    ```

    演示：

    1
    2
    def hello_world():
        print("Hello, world!")

链接和高级链接：

  • 链接

    使用[链接文字](链接地址)的形式插入链接。

    例如：

    1
    [百度](https://www.baidu.com)

    演示：

    百度


  • 高级链接

    使用变量来设置一个链接，变量赋值在文档末尾。

    例如：

    1
    2
    3
    4
    5
    6
    7
    这个链接用 1 作为网址变量 [百度][1]

    这个链接用 runoob 作为网址变量 [搜狗][runoob]

    然后在文档的结尾为变量赋值（网址）
    [1]: https://www.baidu.com
    [runoob]: http://www.runoob.com/

    演示：

    这个链接用 1 作为网址变量 百度

    这个链接用 sogou 作为网址变量 搜狗

图片、标题图片和高级图片：

  • 图片

    使用 ![图片描述](图片链接或路径) 可以插入图片。

    例如：

    1
    ![示例图片](https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg)

    演示：

    示例图片


  • 标题图片

    使用 ![图片描述](图片链接或路径 "可选标题") 可以加上选择性的 title 属性的文字。

    例如：

    1
    ![示例图片](https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg "示例图片")

    演示：

    示例图片


  • 高级图片

    使用 [链接文字](链接地址) 链接来嵌套 ![图片描述](图片链接或路径) 图片可以实现点击图片打开链接或者图片

    例如：

    1
    2
    3
    4
    5
    点击示例图片打开图片
    [ ![示例图片](https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg) ](https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg)

    点击百度logo打开百度网站
    [ ![百度logo](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png) ](https://www.baidu.com)

    演示：

    • 点击示例图片打开图片

      示例图片

    • 点击百度logo打开百度网站

      百度logo

表格

  • 使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

    例如：

    1
    2
    3
    4
    |  表头   | 表头  |
    |  ----  | ----  |
    | 单元格  | 单元格 |
    | 单元格  | 单元格 |

    演示：

    | 表头 | 表头 |
    | —— | —— |
    | 单元格 | 单元格 |
    | 单元格 | 单元格 |


  • 使用 :---- 居左对齐、:---: 居中对齐和 ----: 居右对齐来设置内容和标题栏对齐方式。

    例如：

    1
    2
    3
    | 居左对齐 | 居中对齐 | 居右对齐 |
    |  :----  |  :---:  |  ----:  |
    |    左   |    中    |    右    |

    演示：

    | 居左对齐 | 居中对齐 | 居右对齐 |
    | :—— | :—-: | ——: |
    | 左 | 中 | 右 |

标签：

使用两个反引号 ` 将文字包裹。

例如：

1
`这是一个标签`

演示：

这是一个标签

上传GitHub

在博客本地 GitHub 仓库 运行下面命令上传博客文章

1
2
3
git add .
git commit -m "添加文章"
git push origin main


参考文章：