Hexo系列(五) 撰寫文章

在利用 Hexo 框架搭建一個屬於咱們本身的博客網站後，下面咱們就來談談怎樣在網站上書寫咱們的第一篇博客吧

1、建立文章

在站點文件夾中打開 git bash，輸入以下命令建立文章，其中 title 爲文章的標題

$ hexo new "title"

當輸入命令後，就會在 source/_post 文件夾下建立一個文件，命名爲：title.md

這個文件就是將要發佈到網站上的原始文件，用於記錄文章內容

下面，咱們將要在這個文件中寫下咱們的第一篇博客

2、編寫文章（基於 Markdown）

一、Markdown 簡介

可是，在咱們正式寫下第一個文字前，咱們須要瞭解一下究竟什麼是 Markdown？

Markdown 是一種可使用普通文本編輯器編寫的 標記語言，經過簡單的 標記語法，它可使普通文本內容具備必定的格式

基於 Markdown 語法的簡潔性，它已經成爲目前世界上最流行的用於書寫博客的語言

二、Markdown 語法

在編寫 Markdown 時，博主強烈的推薦給你們一款簡潔易用的 Markdown 編輯器 —— Typora

按照官方的說法就是 簡單而強大，它不只支持原生的語法，也支持對應的快捷鍵，更重要的是它還能夠 實時預覽

這裏附上 Typora 的下載地址：https://www.typora.io/，有興趣的朋友能夠下載來試試

好，下面開始進入正題，介紹一些經常使用的 Markdown 語法

（1）標題

Markdown 語法：

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

Typora 快捷鍵：

Ctrl+1：一級標題

Ctrl+2：二級標題

Ctrl+3：三級標題

Ctrl+4：四級標題

Ctrl+5：五級標題

Ctrl+6 ：六級標題

Ctrl+0：段落

（2）粗體、斜體、刪除線和下劃線

Markdown 語法：

*斜體*
**粗體**
***加粗斜體***
~~刪除線~~

Typora 快捷鍵：

Ctrl+I：斜體

Ctrl+B：粗體

Ctrl+U：下劃線

Alt+Shift+5：刪除線

（3）引用塊

Markdown 語法：

> 文字引用

Typora 快捷鍵： Ctrl+Shift+Q

（4）代碼塊

Markdown 語法：

`行內代碼`

​```
多行代碼
多行代碼
​```

Typora 快捷鍵：

行內代碼：Ctrl+Shift+`

多行代碼：Ctrl+Shift+K

（5）公式塊

Markdown 語法：

$$
數學公式
$$

Typora 快捷鍵： Ctrl+Shift+M

（6）分割線

Markdown 語法：

方法一：---

方法二：+++

方法三：***

（7）列表

Markdown 語法：

1. 有序列表項

* 無序列表項

+ 無序列表項

- 無序列表項

Typora 快捷鍵：

有序列表項：Ctrl+Shift+[

無序列表項：Ctrl+Shift+]

（8）表格

Markdown 語法：

表頭1|表頭2
-|-|-
內容11|內容12
內容21|內容22

Typora 快捷鍵： Ctrl+T

（9）超連接

Markdown語法：

方法一：[連接文字](連接地址 "連接描述")
例如：[示例連接](https://www.example.com/ "示例連接")

方法二：<連接地址>
例如：<https://www.example.com/>

Typora快捷鍵： Ctrl+K

（10）圖片

Markdown語法：

![圖片文字](圖片地址 "圖片描述")
例如：![示例圖片](https://www.example.com/example.PNG "示例圖片")

Typora快捷鍵： Ctrl+Shift+I

說明：在 Hexo中 插入圖片時，請按照如下的步驟進行設置

1. 將 站點配置文件 中的 post_asset_folder 選項的值設置爲 true

2. 在站點文件夾中打開 git bash，輸入命令 npm install hexo-asset-image --save 安裝插件

3. 這樣，當使用 hexo new title 建立文章時，將同時在 source/_post 文件夾中生成一個與 title 同名的文件夾，咱們只需將圖片放進此文件夾中，而後在文章中經過 Markdown 語法進行引用便可

   例如，在資源文件夾（就是那個與 title 同名的文件夾）中添加圖片 example.PNG，則能夠在對應的文章中使用語句 ![示例圖片](title/example.PNG "示例圖片") 添加圖片

三、高級設置

（1）模板設置

當咱們使用命令 hexo new "title" 建立文章時，Hexo 會根據 /scaffolds/post.md 對新文章進行初始化

換言之，/scaffolds/post.md 就是新文章的 模板，因此咱們能夠修改它來適應本身的寫做習慣

一個簡單的示例以下：

title: {{ title }}
date: {{ date }}
tags: 
categories:

（2）頭部設置

在每篇利用 Hexo 建立的文章的開頭，都會有對文章進行說明的文字，叫作 文章頭部

文章的頭部除了能夠設置文章標題、發佈日期等基礎信息外，還能夠爲文章添加標籤、分類等

一個簡單的示例以下：

title: Title
date: YYYY-MM-DD HH:MM:SS
tags: [tag1, tag2, ...]
categories: category

注意：屬性和屬性值之間必須有一個空格，不然會解析錯誤

（3）首頁顯示

在利用 Hexo 框架搭建的博客網站中，首頁會顯示文章的內容，且默認顯示文章的所有內容

若是當文章太長的時候就會顯得十分冗餘，因此咱們有必要對其進行精簡

這時，咱們只需在文章中使用 <!--more--> 標誌便可，表示只會顯示標誌前面的內容

3、部署發佈

在站點文件夾中打開 git bash，輸入以下命令部署和發佈文章

$ hexo g -d

建議：在使用 hexo g 部署以後，能夠先使用 hexo s 運行本地站點，而後在瀏覽器輸入地址 http://lacolhost:4000/ 查看運行結果，檢查無誤後再使用 hexo d 發佈

【Hexo系列相關文章】

• Hexo系列(一) 搭建博客網站

• Hexo系列(二) 配置文件詳解

• Hexo系列(三) 經常使用命令詳解

• Hexo系列(四) NexT主題配置

• Hexo系列(五) 撰寫文章