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

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

1.创建Markdown文件

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

.md 文件的命名规则：

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

2.添加页面信息

标签含义

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

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

YAML验证器

---
layout: post
title: "Markdown 博客写作指南"
author: Chenpeiming
categories: Markdown
tags: [博客] 单个标签使用这个方式
tags:   多标签使用这种
  - 博客
  - Markdown
---

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

3.写入博客文章内容

1.两种标题格式：

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

  例如：

  一级标题
  =======
  
  二级标题
  -------
  

  演示：

  一级标题

  二级标题

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

  例如：

  # 一级标题
  ## 二级标题
  ### 三级标题
  #### 四级标题
  ##### 五级标题
  ###### 六级标题
  

  演示：

  二级标题

  三级标题

2.三种设置段落格式：

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

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

  例如：

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

  演示：

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

• 使用一个空行进行换行

  例如：

  使用
  
  一个空行进行换行
  

  演示：

  使用

  一个空行进行换行

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

  例如：

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

  演示：

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

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

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

  例如：

  *斜体文本*
  
  _斜体文本_
  

  演示：

  斜体文本

  斜体文本

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

  例如：

  **粗体文本**
  
  __粗体文本__
  

  演示：

  粗体文本

  粗体文本

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

  例如：

  
  ***粗斜体文本***
  
  ___粗斜体文本___
  
  

  演示：

  粗斜体文本

  粗斜体文本

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

• 分隔线

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

  例如：

  ---
  ___
  ***
  <hr>
  

  演示：

• 删除线

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

  例如：

  ~~删除线~~
  

  演示：

  删除线

• 下划线

  使用 <u> 标签来实现

  例如：

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

  演示：

  下划线文本

5.脚注：

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

例如：

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

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

演示：

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

6.列表和列表嵌套：

• 列表

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

  例如：

  + 无序列表项1
  + 无序列表项2
  
  - 无序列表项1
  - 无序列表项2
  
  * 无序列表项1
  * 无序列表项2
  
  1. 有序列表项1
  2. 有序列表项2
  

  演示：

  • 无序列表项1

  • 无序列表项2

  • 无序列表项1

  • 无序列表项2

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

• 列表嵌套

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

  例如：

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

  演示：

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

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

• 引用块

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

  例如：

  > 这是引用的文本块。
  

  演示：

  这是引用的文本块。

• 嵌套引用块

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

  例如：

  > 最外层
  > > 第一层嵌套
  > > > 第二层嵌套
  

  演示：

  最外层

  第一层嵌套

  第二层嵌套

• 引用块列表

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

  例如：

  > 区块中使用列表
  > - 第一项
  > - 第二项
  > - 第三项
  > 1. 第一项
  > 2. 第二项
  

  演示：

  区块中使用列表

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

• 列表引用块

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

  例如：

  - 第一项
      > 第一项的第一个元素
  
      > 第一项的第二个元素
  2. 第二项
      > 第二项的第一个元素
  
      > 第二项的第二个元素
  

  演示：

  • 第一项

    第一项的第一个元素

    第一项的第二个元素 2. 第二项 第二项的第一个元素

    第二项的第二个元素

8.两种设置代码块：

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

  例如：

      print("Hello, world!")
  

  演示：

  print("Hello, world!")
  

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

  例如：

  ```python
  def hello_world():
      print("Hello, world!")
  ```
  

  演示：

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

9.链接和高级链接：

• 链接

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

  例如：

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

  演示：

  百度

• 高级链接

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

  例如：

  这个链接用 1 作为网址变量 [百度][1]
  
  这个链接用 runoob 作为网址变量 [搜狗][runoob]
  
  然后在文档的结尾为变量赋值（网址）
  [1]: https://www.baidu.com
  [runoob]: http://www.runoob.com/
  

  演示：

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

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

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

• 图片

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

  例如：

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

  演示：

  

• 标题图片

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

  例如：

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

  演示：

  

• 高级图片

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

  例如：

  点击示例图片打开图片
  
  [ ![示例图片](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打开百度网站

    

11.表格

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

  例如：

  |  表头   | 表头  |
  |  ----  | ----  |
  | 单元格  | 单元格 |
  | 单元格  | 单元格 |
  

  演示：

  表头	表头
  单元格	单元格
  单元格	单元格

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

  例如：

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

  演示：

  居左对齐	居中对齐	居右对齐
  左	中	右

12.标签：

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

例如：

  `这是一个标签`

演示：

这是一个标签

4.上传GitHub

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

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

参考文章：

• Markdown 教程 - 菜鸟教程

我要评论