程序员

Hexo使用

2018-07-09  本文已影响0人  LeeAaron6

经过一段时间的折腾终于用 Hexo + GitHub 搭建起了一个个人博客站点,第一时间边学边写,弄出了这第一篇博客,心里甚是欢喜。

Hexo是一款“快速、简洁且高效的博客框架”,支持 Markdown 的所有功能。所以,写出一篇博客必须学习 Hexo 和 Markdown 的使用规则。

配置文件命名规则和路由地址

Hexo 默认以标题作为文件名称,可以通过 Hexo 的配置文件 _config.yml 中的 new_post_name 参数来改变默认的文件名称,例如:

    new_post_name: :year-:month-:day-:title.md

当创建博客时,就会以这种格式生成Markdown文件,如这篇博客的文件名就生成 2017-01-13-hexo-blog.md 这种形式。其中相关变量说明如下表:

变量 说明
:title 标题(小写,空格将会被替换为短杠)
:year 创建的年份,如:2017
:month 创建的月份(有前导零),如:01
:i_month 创建的月份(无前导零),如:1
:day 创建的日期(有前导零),如:09
:i_day 创建的月份(无前导零),如:9

配置浏览器地址栏中的URL。同样在 Hexo 的配置文件 _config.yml 中, 配置 permalink 属性 ,例如:

    permalink: /blog/:year/:month/:day/:title/

当在地址栏访问时,就会如下方式呈现出来:

    http://localhost:4000/blog/2017/01/13/hexo-blog/

特殊字符

在写博客时,一定注意不要写这些字符,如果要写,就进行转义
有些人可能说可以使用反斜杠 \ 来处理,我这里不建议,因为我使用的时候没有解决问题。
下面是比较常见的几个:

! ! — 惊叹号Exclamation mark 

” " " 双引号Quotation mark 

# # — 数字标志Number sign 

$ $ — 美元标志Dollar sign 

% % — 百分号Percent sign 

& & & Ampersand 

‘ ' — 单引号Apostrophe 

( ( — 小括号左边部分Left parenthesis 

) ) — 小括号右边部分Right parenthesis 

* * — 星号Asterisk 

+ + — 加号Plus sign 

< &#60; &lt; 小于号Less than 

= &#61; — 等于符号Equals sign 

> &#62; &gt; 大于号Greater than 

? &#63; — 问号Question mark 

@ &#64; — Commercial at 

[ &#91; --- 中括号左边部分Left square bracket 

\ &#92; --- 反斜杠Reverse solidus (backslash) 

] &#93; — 中括号右边部分Right square bracket 

{ &#123; — 大括号左边部分Left curly brace 

| &#124; — 竖线Vertical bar 

} &#125; — 大括号右边部分Right curly brace 

特别注意的是小括号 ( ) 大括号 { } ,如果不小心写了,你执行hexo s –debug可能报一些莫名其妙的错误!

创建博客

在命令行中用如下命令创建一篇新的文章

   $ hexo new [layout] <title>
布局(layout) 存储路径 说明
post source/_posts 默认,可以直接发布
page source 在source下新建一个文件夹
draft source/_drafts 新建文件将保持到_drafts中

可以用 publish 命令将草稿移动到 source/_posts 文件夹下

   $ hexo publish [layout] <title>

写作

经过上面上面一系列的准备工作,现在差不多就可以安心的写作了。打开 source/_posts 文件夹下刚创建的 Markdown 文件,你会发现有如下内容:

    ---
    title: hexo-blog
    date: 2017-01-13 16:07:32
    tags: 
    ---

注意,这里的 title 是可以随便改的,当然了 date 也是可以改,不过没有改的必要;这里要说一下 tags 这个属性,如果需要配置多个有两种方式:

    tags: [tag1, tag2, tag3]
    tags:
        - tag1
        - tag2
        - tag3

Hexo 是支持 Markdown 的所有功能的,所以,下面去学习一下 Markdown 的语法规范

斜体和粗体

写法:

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

效果:
斜体文本 斜体文本
粗体文本 粗体文本
粗斜体文本 粗斜体文本

分级标题

写法:

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

超链接

写法:

    行内形式:[我的博客](https://Lee981265.github.io/)
    参考形式:[我的博客][1],有一个很好的平台-[简书][2].
    这个链接用 yahoo 作为网址变量 [Yahoo!][yahoo].
    [yahoo]: http://www.yahoo.com/
    [1]:https://Lee981265.github.io/
    [2]:http://www.jianshu.com/
    自动链接:我的博客地址<https://Lee981265.github.io/>

效果:
行内形式:我的博客
参考形式:[我的博客][1],有一个很好的平台-[简书][2]
[1]:https://Lee981265.github.io/
[2]:http://www.jianshu.com/
自动链接:我的博客地址https://Lee981265.github.io/

列表

无序列表:

写法:

* 无序列表项1
+ 无序列表项2
- 无序列表项3

效果:

有序列表

写法:

1. 有序列表项1
2. 有序列表项2
3. 有序列表项3

效果

  1. 有序列表项1
  2. 有序列表项2
  3. 有序列表项3

列表嵌套

1. 列出所有元素:
    - 无序列表元素 A
        1. 元素 A 的有序子列表
    - 前面加四个空格
2. 列表里的多段换行:
    前面必须加四个空格,
    这样换行,整体的格式不会乱
3. 列表里引用:

    > 前面空一行
    > 仍然需要在 >  前面加四个空格
  1. 列出所有元素:

    • 无序列表元素 A
      1. 元素 A 的有序子列表
    • 前面加四个空格
  2. 列表里的多段换行:
    前面必须加四个空格,
    这样换行,整体的格式不会乱

  3. 列表里引用:

    前面空一行
    仍然需要在 > 前面加四个空格

引用

  1. 普通引用
> 引用文本前使用 [大于号+空格]
> 折行可以不加,新起一行都要加上哦
  1. 引用里嵌套引用
> 最外层引用
> > 多一个 > 嵌套一层引用
> > > 可以嵌套很多层
  1. 引用里嵌套列表
> - 这是引用里嵌套的一个列表
> - 还可以有子列表
>     * 子列表需要从 - 之后延后四个空格开始

插入图片

在 Hexo 中插入图片,首先需要将图片放在 source/img/ 文件夹下,然后如下方式进行插入

  ![这是图片说明](/img/Leebolg.png)

  这个链接用 1 作为网址变量 [ Google] [ 1].
  然后在文档的结尾位变量赋值(网址)

    [1]: http: //www.google.com/logo.png
    也可以使用 HTML 的图片语法来自定义图片的宽高大小
    <img src="https://lee981265.github.io/img/Leebolg.png" width="240" height="275">

效果图如下:

效果图 效果图

{% asset_img img/Leebolg.png.jpg 这是一个新的博客的图片的说明老版本指出3.0以下 %}

换行

如果另起一行,只需在当前行结尾加 2 个空格

在当前行的结尾加 2 个空格  
这行就会新起一行
如果是要起一个新段落,只需要空出一行即可。

分隔符

如果你有写分割线的习惯,可以新起一行输入三个减号-。当前后都有段落时,请空出一行:

前面的段落

---

后面的段落

小型文本

Markdown语法:

<small>文本内容</small>

预览效果:
我是正常文字
<small>我是小型文字</small>

注释

用html的注释,好像只有这样?

<!-- 注释 -->

表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

| 表头1|表头2|表头3|表头4
|-| :- | :-: | -: |
|默认左对齐|左对齐|居中对其|右对齐|
|默认左对齐|左对齐|居中对其|右对齐|
|默认左对齐|左对齐|居中对其|右对齐|

| 参数           | 说明                 |   默认值            |
| ------------- |:-------------------:|:------------------:|
| host          | 远程主机的地址         |                    |
| user          | 使用者名称            |                    |
| root          |  远程主机的根目录      |                    |
| port          | 端口                 |       22           |
| delete        | 删除远程主机上的旧文件   |  true              |
| verbose       | 显示调试信息           |   true             |
| ignore_errors | 忽略错误              |     false          |

效果:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
表头1 表头2 表头3 表头4
默认左对齐 左对齐 居中对其 右对齐
默认左对齐 左对齐 居中对其 右对齐
默认左对齐 左对齐 居中对其 右对齐
参数 说明 默认值
host 远程主机的地址
user 使用者名称
root 远程主机的根目录
port 端口 22
delete 删除远程主机上的旧文件 true
verbose 显示调试信息 true
ignore_errors 忽略错误 false

总结

记录了一下 Hexo 写博客的环境配置,了解创建博客的过程和一些相关的变量,然后学习一下 Markdown 的基本语法规范,下次有时间在将 Markdown 更深入的使用方法记录一下。

上一篇 下一篇

猜你喜欢

热点阅读