学习HEXO的历程

Posted 2020-11-25 lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习HEXO的历程相关的知识，希望对你有一定的参考价值。

前言:
简介
开始搭建
命令
API测试

逛github相关的帖子时，发现了hexo。正好想要做一个个人的博客，用来记录自己的各类感悟，所以花一些时间学习学习，以后博客可以放github,省得去注册csdn、掘金这些博客。
也算是一个私人日志，希望能记录下自己关于技术、生活、社会等相关的信息。
本文记录使用hexo遇到的一些坑，算是一个总结。持续更新。

简介

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

开始搭建

从零开始搭建一个个人博客，内容比较多，推荐以下几个文章(官网是必看的)。

基本操作：参见官方文档官方文档
配套github建立个人博客网上例子很多，推荐两个：
- 使用Hexo+Github一步步搭建属于自己的博客（基础）
- hexo+github搭建个人博客(超详细教程)

命令

hexo g(hexo generate): 渲染source下的文件，生成到public下
hexo s(hexo server): 启动hexo服务器启动完毕后可本地访问个人博客

hexo l(hexo list): 列出当前博客站点的一些信息(pagepostroutetagcategory)

示例

> hexo l post
>
Date        Title                       Path                                  Category    Tags
2018-03-06  Base 7                      _posts/Base_7.md                      LeetCode    LeetCode Problem - Base 7
2018-03-06  Escape The Ghosts           _posts/Escape_The_Ghosts.md           LeetCode    LeetCode Problem - Escape The Ghosts
2018-03-06  Partition Equal Subset Sum  _posts/Partition_Equal_Subset_Sum.md  LeetCode    LeetCode Problem - Partition Equal Subset Sum
2018-03-27  学习HEXO的历程              _posts/learn-hexo.md                  发现新大陆  学习HEXO
2018-04-03  js面向对象入门              _posts/js/js-oop.md                   js base     js
2018-04-05  ppt-demo                    _posts/ppt/ppt-demo.md                ppt         reveal-demo

文章

hexo new <title>新建title.md文件
MARKDOWN语法

TIP:

.md文件的开始采用如下形式描述即可，其中不能带:,测试过在tags中带了:，编译未通过:

title: Partition Equal Subset Sum
date: 2018-03-06 18:00:00
tags: LeetCode Problem - Partition Equal Subset Sum
category: LeetCode
---

API测试

添加描述:
title: 必填。你文章的名称，尽量简洁高效。
path: 文章路径。
category: 分类策略。其实就是你分类的文件目录。
tags: 额外标签，可以取得小一点，实用就行。

hack

静态资源

要知道hexo的原理是把你写的markdown文件按一定的规则渲染成html+css+js的，最终生成的网站，和我们手写效果是一样的，只不过是让你能够用写文档的方式写一个网站罢了。所大专栏学习HEXO的历程以要想引入图片、css还是很容易的。

step1: 在source目录下新建文件夹，用于放置您的静态资源，如/source/images，放置一张图片(handsome.png)进去
step2: 在您的md文件中采用相对路径引用您存放的文件![Alt text](/images/handsome.png)

页面资源
上面的例子阐释了如何加载一张图片，但是图片是不可能满足我们的，这辈子都不能满足。比如我们写了一个很酷炫的页面，要怎么去加载它呢？这时候如果把一堆静态资源丢到source下，很可能会报错。博主试过如下目录结构出错。
1
2
3
4
5
6
7
8
9
10
11
|-source
|-ppt
|-css
|-print
|-paper.css
|-pdf.css
|-theme
|...
|-js
|reveal.js
index.html

对你没看错，想要在某个md文件内引用我用reveal.js制作的ppt。但是在hexo g的时候会报错。这个错误是由js文件产生的，老是说js文件结尾有错。后来上网学了一招。

将ppt目录拷贝至theme/next/source/下。因为theme的内容在hexo g的时候是直接拷贝至public下的，绕过了自带的渲染。这时候在你的md文件内相对链ppt-demo.html就可以了。
主题
在_config.yml内设置theme: next
next
- 设置展开阅读:auto_excerpt.enable = true
- 设置主题: scheme（有四种可选，可以多设置几个试试）
- 设置tagscategories: hexo new page “tags”，然后在index.md里面设置type: "tags"

样式

hexo是一个静态博客框架，里面的样式自然是高度可配置的。以博主使用的next主题为例：

theme
  |-next
      |-.github
      |-languages : 语言包
      |-layout    : 布局包
      |-scripts   : 脚本包.swig swig前端模板引擎
        |-source    : 源码包
      |-test      : 测试包

这其中layout包内的_custom就是用于用户自定义的脚本。其余目录大家可以自由阅读，没有十足把握不要轻易修改，不然搞坏了要恢复回去就不容易了。这讲一下背景图片。

首先在页面内定位到body元素。他的class为class="pace-done"。然后webstorm全局搜索发现这个class是在pace.min.js内写的。
修改pace-done的内容肯定是不允许的，我们继续查看themes/next/layout/_layout.swig(这个文件是总的布局文件，最后生成的代码可以在/public/index.html内看到)。在_layout.swig内搜索body。
忽略swig模板语法。我们只需要关心body元素的样式即可，在body内加入class="wander-background-blue">。是的，只是在这里加了一个class。因为上一段分析的时候pace-done是在js脚本内添加的，所以这里在元素上直接写class，两者不会存在冲突。

接着定义您的.wander-background-blue即可

.wander-background-blue {
background :#1f47bb;
background-image: -webkit-linear-gradient(135deg, #13498b, #13194b);
background-image: -moz-linear-gradient(45deg, #13498b, #13194b);
background-image: -ms-linear-gradient(45deg, #13498b 0, #13194b 100%);
background-image: -o-linear-gradient(45deg, #13498b, #13194b);
background-image: linear-gradient(135deg, #13498b, #13194b);
}

这里需要说明一下:layout内是脚本内容，source才是源码。所以，这一段脚本应该放在themes/next/source/css下，框架开发者已经给我们预留了一个用户自定义文件，themes/next/source/css/_custom/_custom.styl。脚本放里面即可。