如何搭建一个自己的博客(三)

---

系列文章

---

第一部分 Hexo的使用

• 常用命令：

  #删除public文件的内容
  hexo clean
  #生成静态文件到public
  hexo generate
  hexo g
  #本地运行网页
  hexo server
  hexo s
  #发布静态文件
  hexo dploy
  hexo d
  #创建一个新的文章(在soure/_posts文件夹下生成md文件)
  hexo new 文章题目

第二部分 页面

• 在source目录下每一个文件夹对应一个页面(除了_posts和 _draft)

• 创建页面：

  hexo new page 页面名称

• 编辑index.md文件即可设置页面的显示内容

  ---
  title: 页面名称
  date: 页面创建时间
  updated: 页面更新时间
  type: "类型"
  comments: 是否显示页面评论模块，默认为true
  description: 页面描述
  keywords: 页面关键词
  top_img: 页面顶部背景图
  mathjax: 是否显示mathjax
  katex: 是否显示katex
  aside: 是否显示侧边栏
  aplayer: 是否显示吸底播放工具
  highlight_shrink: 代码框是否收缩
  random: 友情链接是否随街排列
  ---

第三部分 博客写作相关

第一章 插件的安装

#卸载hexo-renderer-marked
npm un hexo-renderer-marked --save
#安装hexo-renderer-markdown-it
npm i hexo-renderer-markdown-it --save
#安装完成后在_config.yml中添加：
markdown:
  preset: "default"
  render:
    html: true
    xhtmlOut: false
    langPrefix: "language-"
    breaks: true
    linkify: true
    typographer: true
    quotes: "“”‘’"
  enable_rules:
  disable_rules:
  plugins:
    - markdown-it-abbr
    - markdown-it-cjk-breaks
    - markdown-it-deflist
    - markdown-it-emoji
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-mark
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-checkbox
    - markdown-it-imsize
    - markdown-it-expandable
    - name: markdown-it-container
      options: success
    - name: markdown-it-container
      options: tips
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
  anchors:
    level: 2
    collisionSuffix: ""
    permalink: false
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "¶"
    case: 0
    separator: "-"
#图片的插入：
#配置_config.yml文件：
#设置为true
post_asset_folder: true
#安装插件允许插入图片
npm install https://github.com/CodeFalling/hexo-asset-image --save
#安装插件允许公式的插入：
npm un hexo-renderer-marked --save 
npm i hexo-renderer-markdown-it-katex
#安装特效插件
npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable

第二章 MarkDown基本语法

• 标题【Typora快捷键：Ctrl+数字】：

  # 一级标题
  ## 二级标题
  ### 三级标题
  #### 四级标题
  …………

• 表格【Typora快捷键：Ctrl+T】：

  1	2	3
  你好	你好	你好
  你 好

  |      |      |      |
  | ---- | ---- | ---- |
  |      |      |      |
  |      |      |      |
  |      |      |      |
  #更改----数量即可更改单元格宽度
  #左对齐	:----
  #右对齐	----:
  #居中	:----:

• 脚注：

  遇到问题，需要使用百度搜索引擎。^[1]

  #添加引用脚注：
  内容[^脚注名称]
  #添加脚注：
  [^脚注名称]：链接或解释说明

• 强调语法：

  • 加粗【Typora快捷键：Ctrl+b】：

    内容**需要强调的中英文内容**内容
    内容__需要强调的中文内容__内容

  • 斜体【Typora快捷键：Ctrl+i】

    内容*需要强调的内容*内容
    内容_需要强调的内容_内容

  • 粗体+斜体【Typora快捷键：Ctrl+i Ctrl+b】：

    内容***需要强调的中英文内容***内容
    内容___需要强调的中文内容___内容
    内容__*需要强调的内容__*内容
    内容_**需要强调的内容_**内容

  • 排序【Typora快捷键：Ctrl+[ Ctrl+]】：

    #普通排序
    - 内容
    #数字排序
    1. 内容
    #不想使用数字排序，但是又是以数字+‘.’来开头的句子，需要转义
    1\. 内容

  • 块引用：

    你好

    我是陈卓然

    1.块引用
    >块应用中的内容
    2.嵌套块引用
    >1级块中的内容
    >>2级块中的内容
    …………
    3.块中包含段落
    >块中的段落1
    >
    >块中的段落2
    4.块中添加其他强调元素
    > ### 标题
    > - 内容
    > **内容**

  • 代码块【Typora快捷键：Ctrl+shift+k】：

    ```编程语言
    代码内容
    ```

  • 图片的添加【Typora快捷键：Ctrl+shift+i】：

    ![图片标题](图片的路径)

  • 公式的添加【Typora快捷键：Ctrl+shift+m】：

    $1+1=2$

    $$
    1+1=2
    $$

  • 特殊单词或词语的标注：

    内容标注单词内容

    内容`标注单词`内容

  • 分割线：

    ---

    ---
    ***

  • 链接：

    百度，搜索引擎

    百度，搜索引擎

    百度，搜索引擎

    内容[网址标题](网址)
    <URL地址>
    #加粗
    内容**[网址标题](网址)**
    #标注：
    内容['网址标题'](网址)

  • 删除线：

    ~~被删除内容~~其余内容

  • 任务列表：

    • 任务1
    • 任务2

    - [x] 任务1

  • 高亮：

    你好啊

    ==高亮内容==

  • 上下标：

    H₂O
    x²

    H~2~O
    x^2^

第三章 Html语法

• 标题：

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  …………

• 段落：

  <p>
   	段落内容<br>换行后的段落内容
  </p>

• 强调语法：

  • 加粗：

    内容<strong>强调的内容</strong>内容

  • 斜体：

    内容<em>强调的内容</em>内容

  • 斜体加粗：

    内容<strong><em>强调的内容</em></strong>内容

  • 数字排序：

    <ol>
        <li>第一点</li>
        <li>第二点</li>
        <li>第三点</li>
        <li>第四点</li>
        …………
    </ol>

  • 普通排序：

    <ul>
        <li>第一点</li>
        <li>第二点</li>
        <li>第三点</li>
        <li>第四点</li>
        …………
    </ul>

  • 特殊单词或词语的标注：

    <code>特殊文本内容</code>

  • 高亮：

    <mark>高亮内容</mark>

  • 上下标：

    H<sub>2</sub>O
    x<sup>2</sup>

第四章 Butterfly主题支持的特效语法

• 外挂标签：

• 设置系列性文章：

  • 首先更改butterfly主题的配置文件：

    # series (系列文章)
    series:
      enable: true
      orderBy: 'date' # Order by title or date
      order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending

  • 然后在系列文章的开头添加series属性：

    series: 如何搭建一个自己的博客

  • 在文章中添加系列文章目录：

    ## 系列文章
    {% series [series name] %}

第五章 Mermaid语法

第一节 Butterfly配置

• 配置Butterfly主题配置文件：

  #开启mermaid功能
  # see https://github.com/mermaid-js/mermaid
  mermaid:
    enable: true
    # built-in themes: default/forest/dark/neutral
    theme:
      light: default
      dark: dark

• 如何添加Typora能够渲染的Mermaid图：

  图例名称 方向
  %%注释内容
  	代码内容

• 如何添加Hexo能够渲染的Mermaid图：

  #直接添加到markdown中即可，可以现在代码块中绘制好，在部署博客时转为这种格式。
  {% mermaid %}
  mermaid代码内容
  {% endmermaid %}

第二节 流程图绘制

• 流程图：由节点（几何形状）和边（箭头或线条）组成。

• 流程图：flowchart

• 方向：

  TB 、TD- 从上到下

  BT - 从下到上

  RL - 从右到左

  LR - 从左到右

• 流程子图格式：

  • 子图支持子图级别的链接
  • 子图支持重新定义子图内部的方向

  subgraph title[子图的标题]
  	direction 流程图方向
      graph definition
  end

• 节点的形状：

  flowchart LR
  	%%矩形节点
  	节点ID1[节点内部的文字内容]
  	%%体育场形节点
  	节点ID2([节点内部的文字内容])
  	%%子程序形状中的节点
  	节点ID3[[节点内部的文字内容]]
  	%%圆柱形节点
  	节点ID4[(节点内部的文字内容)]
  	%%圆形节点
  	节点ID5((节点内部的文字内容))
  	%%彩带节点
  	节点ID6>节点内部的文字内容]
  	%%菱形节点
  	节点ID7{节点内部的文字内容}
  	%%六边形节点
  	节点ID8{{节点内部的文字内容}}
  	%%平行四边形节点
  	节点ID9[/节点内部的文字内容/]
  	节点ID10[\节点内部的文字内容\]
  	%%梯形节点
  	节点ID11[\节点内部的文字内容/]
  	节点ID12[/节点内部的文字内容\]	
  	%%双圆节点
  	节点ID13(((节点内部的文字内容)))

• 节点的连接：

  • 格式：节点A+箭头+节点B

  • 箭头代码：

    不带箭头：—

    单向箭头：–>

    虚线箭头：-.->

    粗线箭头：==>

    圆形箭头：–o

    x箭头：–x

    双向箭头：即在上面的箭头代码前面加上箭头代码的最后一个字符

    不可见连接：~~~

    连接线中间显示文本：箭头代码前两个符号+文本内容+箭头代码

    连接线上方显示文本：箭头代码前两个符号+文本内容+回车+箭头代码

    连接线上、下方显示文本：箭头代码前两个符号+上方文本内容+回车+下方文本内容+箭头代码

  • 链接示例与用法：

    • 用法一：

      flowchart LR
         A -- text --> B -- text2 --> C

    • 用法二【与的应用】：

      flowchart LR
         a --> b & c--> d

    • 用法三【通过添加’–'的数量来加长连接线的长度】：

      flowchart TD
          A[Start] --> B{Is it?}
          B -->|Yes| C[OK]
          C --> D[Rethink]
          D --> B
          B ---->|No| E[End]

    • 用法四【子图的添加】：

      flowchart TB
          c1-->a2
          subgraph one[123]
          a1-->a2
          end
          subgraph two
          b1-->b2
          end
          subgraph three
          c1-->c2
          end
          two --- one

第三节 思维导图的绘制

• 思维导图是一种图表，用于将信息直观地组织成层次结构，显示整体各个部分之间的关系。

• 编码思想：缩进

• 思维导图：mindmap

• 节点形状【适配流程图的形状】：

  mindmap
  	%%爆炸形状
      id1))爆炸形状((
      %%云
      	id2)云(

---

1. www.baidu.com ↩︎