学而不思则罔,思而不学则怠

0%

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

  1. 安装 Node.js 环境, 官网

    参考:Node.js 之旅 - 好的开端

  2. 安装 Git 版本管理工具,官网

    参考:

  3. 安装 hexo-cli 命令行工具,初始化一个项目

    1
    2
    3
    4
    $ npm install -g hexo-cli
    $ hexo init blog
    $ cd blog
    $ npm install

    目录结构大致如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ├── _config.yml             # 项目配置文件
    ├── node_modules
    ├── package.json
    ├── scaffolds # 模板目录
    ├── source # 文章源目录
    │ └── _posts # 文章目录
    │ └── hello-world.md # 第一篇文章
    ├── themes # 主题目录
    │ └── landscape # 默认主题
    │ ├── _config.yml # 主题配置文件
    │ ├── Gruntfile.js
    │ ├── languages # 主题语言设置
  4. 启动本地服务,查看效果

    1
    2
    3
    $ hexo server
    INFO Start processing
    INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

    用浏览器打开命令行中输出的地址就可以查看效果了。

写文章

  1. 新建一篇文章

    1
    $ hexo new hexo-blog

    此时 source/_post/ 目录下多了一个 hexo-blog.md 文件,内容如下:

    1
    2
    3
    4
    5
    6
    ---
    title: hexo-blog
    date: 2016-04-07 21:20:35
    categories:
    tags:
    ---
  2. 写文章,修改 hexo-blog.md 的内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ---
    title: 使用 Hexo 搭建个人博客
    date: 2016-04-07 21:20:35
    categories:
    -- 工具
    tags:
    -- hexo
    -- markdown

    ## 安装
    ...
    ## 写文章
    ...
  3. 生成文章

    1
    $ hexo generate

    刷新浏览器就可以看到刚刚完成的文章了。

语法

段落和换行

段落 <p> 前后必须保留一个或多个的空行。
段落内换行 <br> 要在行尾追加两个以上的空格然后回车。

1
2
3
4
春晓

春眠不觉晓,处处闻啼鸟。
夜来风雨声,花落知多少。

春晓

春眠不觉晓,处处闻啼鸟。
夜来风雨声,花落知多少。

标题

在行首插入 1 到 6 个 # ,对应标题 <h1><h6>

1
2
3
4
5
6
# 标题 h1
## 标题 h2
### 标题 h3
#### 标题 h4
##### 标题 h5
###### 标题 h6

引用

在段落或其他内容前使用 > 符号,就可以将这段内容标记为 ‘引用’ 的内容 <blockquote>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> 引用内容。

> 多行引用,第一行;
> 多行引用,第二行;
> 多行引用,第三行。

> 嵌套引用,第一层。
> > 嵌套引用,第二层。
> > > 嵌套引用,第三层。

> 包含其它 `Markdown` 语法
>
> - 列表项目
> - 列表项目

引用内容。

多行引用,第一行;
多行引用,第二行;
多行引用,第三行。

嵌套引用,第一层。

嵌套引用,第二层。

嵌套引用,第三层。

包含其它 Markdown 语法

  • 列表项目
  • 列表项目

列表

无序列表项 <ul>* +- 加空格空格开始:

1
2
3
4
5
* 无序列表 1
+ 嵌套子列表 11
+ 嵌套子列表 12
+ 无序列表 2
- 无序列表 3
  • 无序列表 1
    • 嵌套子列表 11
    • 嵌套子列表 12
  • 无序列表 2
  • 无序列表 3

有序列表项 <ol>任意数字. 再加 空格 开始:

1
2
3
4
5
1. 有序列表 1
+ 子列表 11
+ 子列表 12
1. 有序列表 2
1. 有序列表 3
  1. 有序列表 1
    • 子列表 11
    • 子列表 12
  2. 有序列表 2
  3. 有序列表 3

列表项可以包含其它内容,内容必须以 4 个空格或 1 个制表符缩进:

1
2
3
4
5
6
7
8
1. 项目中包含多个段落

段落内容,
段落内容。

1. 项目中包含码块

echo 'Hello World!';
  1. 项目中包含多个段落

    段落内容,
    段落内容。

  2. 项目中包含码块,缩进 8 个空格或 2 个制表符

    echo 'Hello World!';

代码

代码块 <code> 前后必须有一个或多个空行,且每行代码必须以 4 个空格或 1 个制表符缩进:

1
2
3
function fn () {
var str = 'Hello World';
}
function fn () {
var str = 'Hello World';
}

扩展语法,代码无须缩进,并可指明语言类型实现代码高亮:

` ` ` js
function fn () {
  var str = 'Hello World';
}
` ` `

上面 ` 符号之间应该没有空格,因 hexo 解析问题无法正常显示,此处加了空格

1
2
3
function fn () {
var str = 'Hello World';
}

行内代码:

1
行内代码如 `<title></title>` ,` 是 Tab 键上方、数字 1 键左侧的按键。

行内代码如 <title></title> ,` 是 Tab 键上方、数字 1 键左侧的按键。

分隔线

使用三个或更多的 * -_ 来添加分隔线 <hr>:

1
2
3
4
5
***

---

---



链接

行内式格式为 [链接名称](链接地址 "标题文本") :

1
2
3
[百度](https://www.baidu.com "百度")  
[Google](https://www.google.com.hk "谷歌")
[Readme](README.md "相对路径")

百度
谷歌
说明

参考式链接的写法相当于行内式拆分成两部分,通过 标识符 来连接两部分:

1
2
3
[链接名称][标识符]

[标识符]: 链接地址 "标题文本"
  • 标识符可以是字母、数字、空白或标点符号;
  • 参考式便于集中管理链接内容。
1
2
3
4
5
6
[百度][baidu] [谷歌][google] [百度][1] [谷歌][2]

[baidu]: https://www.baidu.com "百度"
[google]: https://www.google.com.hk "谷歌"
[1]: https://www.baidu.com "百度"
[2]: https://www.google.com.hk "谷歌"

百度 谷歌 百度 谷歌

自动链接使用 <> 包括的链接地址或邮箱地址会被自动转换为超链接:

1
2
<https://www.baidu.com>  
<123@email.com>

https://www.baidu.com
123@email.com

图片

插入图片的语法和插入超链接的语法基本一致,只是在最前面多一个 !

行内式的图片语法:

1
2
![图片名称](图片地址)  
![图片名称](图片地址 "标题文本")

参考式的图片语法:

1
2
3
![图片名称][标识符]

[标识符]: 图片地址 "标题文本"
1
2
3
4
5
![It's Markdown!](http://7xlhbk.com1.z0.glb.clouddn.com/markdown.jpg "It's Markdown!")

![It's Markdown!][Markdown]

[Markdown]: http://7xlhbk.com1.z0.glb.clouddn.com/markdown.jpg "It's Markdown!"

强调

使用 *文本*_文本_ 实现 <em>文本</em> ,通常表现为斜体:

1
强调 *演示* _文本_

强调 演示 文本

使用 **文本**__文本__ 实现 <strong>文本</strong>,通常表现为加粗:

1
强调 **演示** __文本__

强调 演示 文本

字符转义

反斜线 \ 转义特殊字符:

1
\ ` * _ {} [] () # + - . !
1
2
3
- 2 * 1 = 2

\- 2 * 1 = 2
  • 2 * 1 = 2

- (2 * 1) = - 2

删除线

1
~~删除线~~

删除线

表格

使用 | 分隔单元格,使用 - 分隔表头和其他行:

1
2
3
4
| 表头 1 | 表头 2 |
| --- | --- |
| 单元格 11 | 单元格 21 |
| 单元格 12 | 单元格 22 |
表头 1 表头 2
单元格 11 单元格 21
单元格 12 单元格 22

建议 |- 两侧保留空格,这样内容更加清晰。

使用 : 实现单元格左右或居中对齐:

1
2
3
4
| 默认 | 左对齐 | 居中对齐 | 右对齐 |
| --- | :--- | :---: | ---: |
| 默认左对齐 | 此列文本左对齐 | 此列文本居中对齐 | 此列文本右对齐 |
| 左对齐 | 左对齐 | 居中对齐 | 右对齐 |
默认 左对齐 居中对齐 右对齐
默认左对齐 此列文本左对齐 此列文本居中对齐 此列文本右对齐
左对齐 左对齐 居中对齐 右对齐

语法嵌套:

1
2
3
4
| 强调 | 代码 | 链接 |
| --- | --- | --- |
| _百度_ | `Baidu` | [百度](https://www.baidu.com) |
| __谷歌__ | `Google` | [谷歌](https://www.google.com.hk) |
强调 代码 链接
百度 Baidu 百度
谷歌 Google 谷歌

兼容HTML语法

可以直接引用 HTML 元素,元素的开始标签前和结束标签后各保留一个空行:

1
2
3
4
5
6
指定特殊样式
<table class="table" style="color:red;">
<tr><th>#</th><th>代码</th><th>输出</th></tr>
<tr><td>1</td><td>date('Y-m-d')</td><td>2016-07-15</td></tr>
<tr><td>2</td><td>date('Y-m-t')</td><td>2016-07-31</td></tr>
</table>
#代码输出
1date('Y-m-d')2016-07-15
2date('Y-m-t')2016-07-31

参考

项目

安装 Node.js

Windows

官网 下载二进制安装包直接安装。
其它方法参考 官方文档

Ubuntu

1
2
3
4
5
# 根据需要选择不同版本: 6.x、7.x ....
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
# 安装
$ sudo apt-get install -y nodejs

详细说明请参考 官方文档

CentOS

1
2
3
4
5
# 根据需要选择不同版本: 6.x、7.x ....
$ curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
$ curl --silent --location https://rpm.nodesource.com/setup_7.x | bash -
# 安装
$ yum -y install nodejs

详细说明请参考 官方文档

OSX

1
2
3
4
5
$ curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
# 使用 Homebrew 安装
$ brew install node
# 或使用 MacPorts 安装
$ port install nodejs

详细说明请参考 官方文档

包管理器 NPM

使用淘宝镜像

1
2
$ sudo npm config set registry https://registry.npm.taobao.org --global
$ sudo npm config set disturl https://npm.taobao.org/dist --global

配置参数

1
2
3
4
5
6
7
8
# 显示配置[所有]
npm config list [-l]
# 设置 <key> 参数值 <value> [全局]
npm config set <key> <value> [-g]
# 获取 <key> 参数
npm config get <key>
# 删除 <key>参数
npm config delete <key>

获取帮助信息

1
2
# 获取 <term> 命令的帮助信息
npm help <term> [<terms..>]

更新 NPM

Windows 系统的操作要慎重。

1
2
3
4
5
6
# 获取并进入 Node.js 安装目录
> npm config get prefix -g
# 最新版本
> npm install -g npm@latest
# 或LTS版本
> npm install -g npm@lts

OSX 和 Linux 系统的操作比较简单。

1
2
3
4
# 最新版本
$ sudo npm install -g npm@latest
# 或LTS版本
$ sudo npm install -g npm@lts

项目应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 初始化项目,创建 package.json 文件
npm init
# 全局安装 <pkg> 包
npm install -g <pkg>@<tag>
npm install -g <pkg>@<version>
# 项目安装 <pkg> 包,并写入 package.json 文件 [dependencies] 字段
npm install <pkg>@<tag> --save
npm install <pkg>@<version> --save
# 项目安装 <pkg> 包,并写入 package.json 文件 [devDependencies] 字段
npm install <pkg>@<tag> --save-dev
npm install <pkg>@<version> --save-dev
# 安装项目依赖包(package.json 文件 [dependencies] 字段内容),
# 安装开发依赖包(package.json 文件 [devDependencies] 字段内容)
npm install
# 安装项目依赖包(package.json 文件 [dependencies] 字段内容)
npm install --production
# 删除 <pkg> 包,与 install 操作对应
npm uninstall [-g] <pkg>@<tag> [--save|--save-dev]
npm uninstall [-g] <pkg>@<version> [--save|--save-dev]
# 更新项目[全局] <pkg> 包
npm update [-g] [<pkg>...]
# 显示项目[全局]已经安装的包
npm ls [-g]

常用包

1
2
3
4
# Facebook 出品,可替代 npm 的包管理工具
$ sudo npm install -g yarn
# Node.js 版本管理,nvm 不支持 Windows 操作系统
$ sudo npm install -g nvm

第一个项目

初始化项目

1
2
3
$ mkdir nodejs-start
$ cd nodejs-start
$ npm init

根据提示完成以下操作:

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
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (nodejs-start) # 直接回车
version: (1.0.0) # 直接回车
description: # 直接回车
entry point: (index.js) # 直接回车
test command: node index.js # 输入 node index.js
git repository: # 直接回车
keywords: # 直接回车
author: # 直接回车
license: (ISC) # 直接回车
About to write to /home/wh/Workspace/nodejs-start/package.json:

{
"name": "nodejs-start",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "node index.js"
},
"author": "",
"license": "ISC"
}


Is this ok? (yes) yes # 输入 yes

安装项目依赖包 lodash

lodash 是一个功能丰富的 javascript 工具库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ npm install lodash --save
$ cat package.json
{
"name": "nodejs-start",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.4"
}
}

新建 index.js 文件

码一下代码,不要拷贝。

1
2
3
4
5
var _ = require('lodash');

var sayHello = _.template('Hello <%= name %>!');

console.log(sayHello({'name': 'Node.js'}));

看看我们做了什么

1
2
$ node index.js
Hello Node.js!

或通过 package.jsonscripts 字段的配置执行文件:

1
2
3
4
5
6
$ npm test

> nodejs-start@1.0.0 test /home/wh/Workspace/nodejs-start
> node index.js

Hello Node.js!

坚持完成上面的每一步,直到屏幕上输出 Hello Node.js!
认真阅读每一步的输出信息,会有意外的收获。