Hexo创建Markdown格式文章

版权申明:本文为原创文章,转载请注明原文出处

原文链接:http://blog.pp6f.com/2022/02/20/Hexo/Hexo-Article/

索引

前言

  • Hexo将解析Markdown格式文章。
  • 我们只需要创建Markdown格式文件,Hexo会自动解析成静态网页。
  • Markdown是轻量级的标记语言 在书写上非常简洁 方便 高效。 更多资料可以参考Markdown指南 Markdown教程

创建文章

  • 创建文章的方式有两种
    1 在博客目录的source\_posts文件夹创建后缀为.md的文件
    直接创建文件 很方便 但是需要自己来编写Front-matter的每一项
    2 通过Hexo new命令创建文章。
    这个方法的好处在于,可以根据模板来创建,很多Front-matter可以自动生成。
    所以通常使用第2种方式来创建

  • 首先 打开博客目录的scaffolds文件夹 找到post.md文件打开 这个是模板文件
    输入以下代码保存。 更多可以参考Hexo官网文档 Icarus官方文档

    scaffolds\post.md
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    ---
    # 文章的标题
    title: {{ title }}
    # 创建时间
    date: {{ date }}
    # 更新时间
    updated:
    # 分类
    categories:
    # 标签
    tags:
    # 布局
    layout:
    # 作者
    author:
    # 语言
    language: zh-cn

    # === 以下项 根据主题不同可能项名称也不同 以下为Icarus使用的项

    # 文章封面图片
    cover:
    # 小的缩略图
    thumbnail:
    ---

    封面内容 通常在这里编辑文章的介绍

    <!--more-->

    文章内容

    # 前言


    # 目录


    # 正文


    # 结束
  • 创建好模板后,就可以在命令行新建文章了。在博客目录打开命令行工具。

      $ hexo new article_name
    
  • 运行成功后 找到source\_posts\article_name.md就是更改新建文章的markdown文件

    文章的文件名title可以是不同的。

  • 文章创建好了,下一章了解如何编辑markdown格式的文章。

编辑文章

  • 首先编辑文件头
  • 然后编辑<!--more-->之前的字符 作为封面介绍
  • <!--more-->之后即为文章的正文了

Markdown标记规则

标题

  • 可以使用#来标记 1-6 级的标题 #号越多字体标题等级越低

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

段落

  • 使用两行回车来标记段落

字体

  • 在字符的前后加上* _来标记字体
    斜体文本
    斜体文本
    粗体文本
    粗体文本
    粗斜体文本
    粗斜体文本

      *斜体文本*
      _斜体文本_
      **粗体文本**
      __粗体文本__
      ***粗斜体文本***
      ___粗斜体文本___
    

分割线

  • 在一个空行使用三个以上的* -字符来标记分割线

      ***
      * * *
      *****
      ----
      - - -
    

删除线

  • 在需要使用的字符前后加上2个~
    abc

      ~~abc~~
    

下划线

  • 要在字符上使用下划线 需要使用HTML标签
    带下划线字符

      <u>带下划线字符</u>
    

无序和有序列表

  • 在字符前加符号+ * -任意字符和一个空格 为无序列表

      - 123
      * abc
      + 123
    
  • 在字符前加数字1. 2. 3.和一个空格 为有序列表

      1. abc
      2. 123
      3. abc
    
  • 列表之间可以嵌套使用

      1. abc
          - 123
          - 456
      2. 123
          - abc
    

区块引用

  • 在字符前加>和一个空格

    这是区块引用

      > 这是使用区块引用的方法
    
  • 还可以使用多层嵌套

    这时第一层

    这时第二层

    这时第三层

      > 这时第一层
      > > 这时第二层
      > > > 这时第三层
    
  • 还可以组合使用

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

    区块中使用列表

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

代码块

  • 一些简单的语句可以在字符前后加上 ` 反引号 标记这是代码

  • 在字符前可以使用一个制表符(Tab键)或四个空格 来标记代码块
    如果有层级关系需要按层级加制表符

      这是代码块
    
  • 还可以使用 ``` 将代码块包裹起来

    1
    2
    3
    funciton(){
    a = a + 1
    }
      |   ```js
      |   funciton(){
      |       a = a + 1
      |   }
      |   ```
    
  • 语言可以支持很多种 js diff yml css 等等。。

  • Hexo对代码块进行了扩展 以实现更多的功能 更多可以参考Hexo代码高亮文档

      |    ``` [language] [title] [url] [link text] [additional options]
      |        code snippet
      |    ```
    
  • Icarus还支持了 增加 >folded 初始折叠功能

链接

  • 给字符添加链接 例:我的博客 https://blog.pp6f.com/

      [字符](链接地址)
      or
      <https://blog.pp6f.com/>
    
  • 还可以定义链接变量 我的博客

      [我的博客][我的博客链接]
      [我的博客链接]: https://blog.pp6f.com/
    

图片

  • 添加一个图片可以使用
    ![alt属性文本](图片URL地址)
    ![alt属性文本](图片URL地址 "标题")
  • 也可以使用定义图片URL变量使用 类似链接的变量定义
  • 还可以使用HTML标签语言
    <img scr=图片URL地址 width="100%" height="100%">

表格

  • 制作表格非常简单 一目了然 没什么可说的 哈哈

      | 左对齐 | 右对齐 | 居中对齐 |
      | :---- | ------: | :------: |
      | 单元格 | 单元格 | 单元格 |
      | 单元格 | 单元格 | 单元格 |
    
    左对齐 右对齐 居中对齐
    单元格 单元格 单元格
    单元格 单元格 单元格

HTML

  • 归根结底markdown的原理还是属于HTML标签语言的范畴,所以markdown完美的支持HTML元素。在一些不能满足需要的地方,可以直接嵌入HTML元素来解决
    例:
    添加HTML元素
      <article class="message is-primary" style="font-size:0.5em">
      <div class="message-body">
      添加HTML元素
      </div>
      </article>
    

转义

  • markdown使用了很多特殊字符 当需要输入这些字符的时候 可以使用反斜杠\来转义
    abc
    **abc**

      **abc**
      \*\*abc\*\*
    

思维导图

markdown和github支持

  • 竖行显示
    1
    2
    3
    graph LR
    A(根)-->B1(项1)
    A-->B2(项2)
  • 横向显示
    1
    2
    3
    graph TD
    A(根)-->B1(项1)
    A-->B2(项2)

markmap插件

  • Github markmap仓库

  • 安装

    npm install hexo-markmap
    
  • 参数

    • height: 画布高度
    • depth: 可选,自动折叠层数深于depth的节点
  • 使用方法

    1
    {% markmap height [depth] %}
  • 实例

    • 代码
      1
      2
      3
      4
      5
      6
      7
      8
      {% markmap 300px %}
      - Testa
      - test1
      - test2
      - Testb
      - test1
      - test2
      {%endmarkmap%}
    • 效果

其他插件

End

作者

Bruce

发布于

2022-02-20

更新于

2023-03-10

许可协议

评论