Hexo系列(五) 撰写文章

简介: Hexo系列(五) 撰写文章

在利用 Hexo 框架搭建一个属于我们自己的博客网站后,下面我们就来谈谈怎样在网站上书写我们的第一篇博客吧


一、创建文章


在站点文件夹中打开 git bash,输入如下命令创建文章,其中title 为文章的标题

$ hexo new "title"

当输入命令后,就会在 source/_post文件夹下创建一个文件,命名为:title.md

这个文件就是将要发布到网站上的原始文件,用于记录文章内容

下面,我们将要在这个文件中写下我们的第一篇博客


二、编写文章(基于 Markdown)


.

1、Markdown 简介


但是,在我们正式写下第一个文字前,我们需要了解一下究竟什么是 Markdown?

Markdown 是一种可以使用普通文本编辑器编写的 标记语言,通过简单的 标记语法,它可以使普通文本内容具有一定的格式

基于 Markdown 语法的简洁性,它已经成为目前世界上最流行的用于书写博客的语言


2、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 安装插件
  • 这样,当使用 hexo new title 创建文章时,将同时在 source/_post 文件夹中生成一个与 title 同名的文件夹,我们只需将图片放进此文件夹中,然后在文章中通过 Markdown 语法进行引用即可
  • 例如,在资源文件夹(就是那个与 title 同名的文件夹)中添加图片 example.PNG,则可以在对应的文章中使用语句 ![示例图片](title/example.PNG "示例图片") 添加图片


3、高级设置


(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--> 标志即可,表示只会显示标志前面的内容


三、部署发布


在站点文件夹中打开 git bash,输入如下命令部署和发布文章

$ hexo g -d


建议:在使用 hexo g 部署之后,可以先使用 hexo s 运行本地站点,然后在浏览器输入地址 http://lacolhost:4000/ 查看运行结果,检查无误后再使用 hexo d 发布


文章知识点与官方知识档案匹配,可进一步学习相关知识

目录
相关文章
|
缓存 JavaScript 前端开发
hexo 命令速查小册
hexo 命令速查小册
|
6月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
|
SQL JavaScript 前端开发
Hexo从0到1搭建博客系列01:浅尝Hexo
Hexo从0到1搭建博客系列01:浅尝Hexo
126 0
|
数据采集 搜索推荐 数据挖掘
Hexo(3)-安装自己喜欢的主题
我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
|
JavaScript
Hexo 入门指南(七) - 评论 & 分享
Hexo 入门指南(七) - 评论 & 分享
73 0
|
机器人
gitbook 插件 阅读更多
gitbook 插件 阅读更多
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
228 0
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
|
缓存 前端开发 JavaScript
Hexo NexT 主题的简易使用
主题介绍: NexT - Elegant and powerful theme for Hexo. 支持丰富的拓展的 Hexo 主题. 官网地址 https://theme-next.js.org/ github 地址 https://github.com/next-theme/hexo-theme-next
241 0
|
JavaScript 开发工具 git
用Hexo搭建本地静态博客
用Hexo搭建本地静态博客
154 0
|
资源调度 前端开发 API
同为博客,不同风格 ——Hexo另类搭建
通过阿里云云开发平台快速由Hexo创建赛博朋克风格的博客。
455 0
同为博客,不同风格 ——Hexo另类搭建