【Hexo系列】【4】Hexo基础使用

最新推荐文章于 2024-09-21 08:05:06 发布

功夫熊猫ok88

最新推荐文章于 2024-09-21 08:05:06 发布

阅读量706

点赞数 8

分类专栏： Hexo 文章标签： github 阿里云

本文链接：https://blog.csdn.net/2301_76884890/article/details/141144775

版权

Hexo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

经过前面几期的内容，想必大家已经都建立起来自己的Hexo博客了吧，这一期为大家讲解一些Hexo的基础知识。

0. 前期回顾

最新Hexo+GitHubPages搭建个人博客【一】

1. Hexo建站

1.1 建站

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init blog
cd blog
npm install

1.2 文件释义

新建完成后，指定文件夹的目录如下：

├── _config.yml
├── _config.landscape.yml
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

_config.yml：网站的配置信息，如网站的title、描述、关键字、图标等。也称做 站点配置文件 ，注意区分 主题配置文件。
_config.landscape.yml：主题配置文件，用于设置该主题的网站信息，比如网站的title、网站的导航栏、网站的footer等。这个文件是空的，可以忽略。
package.json：应用程序的信息。EJS，Stylus 和 Markdown renderer 已默认安装，您可以自由移除。
scaffolds：模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。

1.3 命令

Hexo支持以下的命令：

命令	简写	中文释义
hexo init [folder]		新建一个网站。如果没有设置 `folder` ，Hexo 默认在目前的文件夹建立网站。
hexo new [layout]		新建一篇文章。如果没有设置 `layout` 的话，默认使用 _config.yml 中的 `default_layout` 参数代替
hexo publish [layout]		发布草稿
hexo render [file2] …		渲染文件。
hexo migrate		从其他博客系统迁移内容
hexo list		列出所有路由。
hexo config [key] [value]		列出网站的配置（`_config.yml`）。如果指定了 `key`，则只展示配置中对应 `key` 的值；如果同时指定了 `key` 和 `value`，则将配置中对应的 `key` 的值修改为 `value`。
hexo version		显示版本信息。
hexo server	hexo s	本地启动, 一般用于本地调试
hexo generate	hexo g	生成静态文件
hexo deploy	hexo d	部署网站，常用可以部署到github
hexo clean		清除缓存和已经生成的静态文件

更多命令请参考官网指导。

1.4 配置

在 Hexo 中有两份主要的配置文件：

站点配置文件：文件名为_config.yml，位于站点根目录下，主要包含 Hexo 本身的配置。
主题配置文件：主题配置文件可以存放在两个地方，这份配置由主题作者提供，主要用于配置主题相关的选项。
1. 存放在站点根目录，文件名为_config.主题名.yml。其中的主题名需要替换成主题对应的名称.
2. 存放在主题目录下，文件名为_config.yml.

为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

Hexo 默认使用的主题是 landscape，对应 ./themes 目录下的 landscape 文件夹。可切换成其他主题，选好之后，先将对应的主题 clone 到或下载好拷贝到 ./themes 目录下，再启用即可。

建议使用 clone ，使用 clone ，假如有一天这个主题更新了，只需要 pull 一下就可以获取到最新样式了。

1.4.1 网站配置

编辑 站点配置文件，设置站点标题 title 、子标题 subtitle 、描述 description 、关键字 keywords 、作者 author 、语言 language 等。

# Site
title:微博客
subtitle:微博客官方网站上线了
description:微博客官方网站上线了，微信/微博同步上线，欢迎订阅
keywords:微博客,博客
author:微博客
language:zh-Hans
timezone:

language 支持的语言：zh-Hans / zh-CN / zh-hk / zh-tw / en / ja / …，取决于你的主题目录下的 languages 中要有 zh-Hans.yml / zh-CN.yml / … 。

1.4.2 文章

# 安装插件
npm install --save hexo-filter-auto-spacing

编辑 站点配置文件，增加这项配置：auto_spacing: true，默认为 false。

# Writing
new_post_name: :title.md# File name of new posts
default_layout: post
auto_spacing: true
titlecase: false# Transform title into titlecase

1.4.3 分页

在 Hexo 里可以为首页和归档页面设置不同的文章篇数，但可能需要安装 Hexo 插件。详细步骤如下。

使用 npm install --save 命令来安装需要的 Hexo 插件。

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

待扩展全部安装完成后，在 站点配置文件 中，设定如下选项（per_page 即文章的数量）：

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

archive_generator:
  per_page:10
  yearly:true
  monthly:true

tag_generator:
  per_page:10

更多站点配置请参考官方指导。主题的配置需要去该主题的官网地址下查找。

2. 写作

你可以执行下列命令来创建一篇新文章或者新的页面。

hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

新建页面：hexo new page about
新建文章：hexo new 文章标题 = hexo new post 文章标题

2.1 布局

Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；

自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
post	source/_posts
page	source
draft	source/_drafts

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

2.2 文件名称

Hexo 默认以标题做为文件名称，可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量	描述
:title	标题（小写，空格将会被替换为短杠）
:year	建立的年份，比如， 2015
:month	建立的月份（有前导零），比如， 04
:i_month	建立的月份（无前导零），比如， 4
:day	建立的日期（有前导零），比如， 07
:i_day	建立的日期（无前导零），比如， 7

从SEO方面考虑，建议将文件名用英文名用英文横线(-)分隔开。

2.3 草稿

draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

2.4 模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量	描述
layout	布局
title	标题
date	文件建立日期

更多相关知识请参考官方指导。

3. 主题

Hexo默认主题是landscape，hexo官方也提供了许多主题，其中像Next，iCarus，Yelee、butterfly等都是很不错的主题，以下将以butterfly主题简单介绍一下主题如何使用。

3.1 安装主题

使用git下载主题，切换到博客的主题根目录打开Git Bash并执行以下命令：

git clone https://github.com/jerryc127/hexo-theme-butterfly.git butterfly

下载完成后，会在项目themes目录下生成butterfly文件夹

3.2 主题切换

修改项目根目录配置文件_config.yml，即可切换至butterfly主题

theme: butterfly

启动服务并访问http://localhost:4000查看效果.

hexo clean && hexo s

如果启动之后出现错误extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug，停止服务并运行一下命令，再重新启动服务即可。原因是没有安装 pug 以及 stylus 的渲染器

npm install hexo-renderer-pug hexo-renderer-stylus –save