Hexo从入门到入门

本文作为前篇入门博客的续集，将继续探索hexo框架为我们diy博客所提供的工具和功能。

主要阅读材料/引用来源:hexo文档，下文使用1来引用。

参考功能：#

  • 为hexo添加评论：使用 giscus;
  • 在你的文章中引用其他文章：使用 post_link；
  • 在文章中使用katex编写公式：下载 hexo-filter-mathjax 插件，根据说明使用即可。
  • 修改你的博客的背景：一般找到其对应的图片文件，然后使用同名文件替换即可。
  • 为你的文章增加目录/more按钮：前者使用 hexo-toc，按照说明书使用即可；后者可以使用类似<!-- more -->的结构来生成，但我不确定是什么插件提供了这样的帮助。

添加的动画：#

为hexo增加了黑白模式：#

总的来说，添加黑白模式涉及到以下几个方面：

  1. 在sub-nav中添加一个toggle，用来作为事件接收者。
  2. 在layout.ejs中添加js代码，旨在为toggle提供事件处理器；
  3. 调整对应模式下的stylus。

调整不同页面下banner的大小：#

在layout.ejs中标记index.html，然后对应调整stylus；

添加顶部悬挂导航栏：#

主要是调整header-inner。#

之后则是对hexo本身的简单介绍。

概括hexo:#

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

hexo依赖于node.js和git。

安装hexo后你得到了什么：#

首先你的文件结构如下所示：

1
2
3
4
5
6
7
├── _config.yml 
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml:用来告诉hexo你想要给你的网站配置什么功能。
  • package.json:应用程序的信息，用这个文件来告诉hexo你都安装了什么应用/插件。
  • scaffolds:存放模板的文件夹，用这个来告诉hexo怎么根据你/系统创建的文件来生成页面。
  • source： 资源文件夹，是存放用户资源的地方。 除_posts文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

    • 因而可以给生成的文件写一些装饰的文件。

  • themes: 主题文件夹，hexo会根据主题来生成静态界面。如果你还没下载任何主题，那么这个文件夹就是空的，hexo自动加载默认主题landscape，你可以在node_modules中找到这个主题的模块文件夹。

    这里没有介绍node_modules，因为这个是node用来管理安装包的文件夹，并非hexo特有的

接下来我们就会沿着这几部分慢慢地介绍其内容。

_config.yml:#

在这个文件中，我们可以配置网站的基本属性，比如网站的标题/描述/关键词等等。
yml配置起来和md语法非常像，同时采用键值对的形式来进行信息的储存，比如：

1
2
pretty_urls:
  trailing_index: false

我们最常用的几个功能分别是：

网站#

设置 描述
title 网站标题
description 网站的描述
language 网站使用的语言，使用ISO-639-1代码或者其变体，默认为en

详见

网址：#

设置 描述
url 你的网站的网址，必须以http://或者https://开头
root 如果你的网站的网址是某个网址的子目录，要写清楚这个目录
permalink 为你的网站内容的网址增加一些格式

详见

目录：#

这一部分是对你的博客中边栏的配置，比如tags,archive,category等等，详见

文章：#

这部分是对你的写作过程进行系统配置，比如创建文章/文章内容布局/文章外链等等。
最常见的是post_asset_folder，这个布尔值如果设置为true将会为每一个md文件创建一个同名称的文件夹。

首页设置：#

这部分内容和你的首页设置有关系，包括首页显示多少篇文章/如何排列这些文章等等。详见

分类 & 标签:#

这部分内容决定了你的分类的时候将会把你在每篇文章中标记的tags/categories映射为什么标签。不是非常重要。

日期/时间格式：#

规定hexo如何解析/显示时间。不太重要。

扩展：#

规定你的页面使用的主题及其配置。详见

自定义内容：#

可以自定义配置文件的位置，也就是用你习惯的配置文件格式来对你的网站进行配置。
详见

也可以使用主题配置文件来对主题进一步配置