Hello World

发表于 更新于
本文字数： 4.3k 阅读时长 ≈ 4 分钟

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

自定义环节

使用主题

笔者使用的是 nexT 主题

我们使用包安装命令

1
yarn add hexo-theme-next

安装完成后，将 node_modules/hexo-theme-next/_config.yml 复制一份出来，然后将文件名修改成 _config.next.yml，放置在 blog 项目的根目录。

后面我们就可以自己对主题配置文件进行自定义修改了，详细参数的用途见官网文档。

使用注音语法

一、更换 Hexo 默认 Markdown Renderer

1.删除默认 markdown 渲染器
2.下载另一个 markdown 渲染器
3.下载 ruby 注音插件

1
2
3
yarn remove hexo-renderer-marked
yarn add hexo-renderer-markdown-it
yarn add markdown-it-ruby

二、修改 _config.yml

在任何根位置填写：

1
2
3
4
markdown:
  render: default
  plugins:
    - markdown-it-ruby

配置 nexT 主题的全局样式

前置条件

在修改主题配色之前，我们先明确 Hexo 主题的安装方式。

Hexo 的主题有2种安装方式：

1、在当前 blog 项目使用包安装。

2、github 下载代码然后解压到 themes 文件夹。

以下教程只适用于包安装的玩家,并且 nexT 的版本应在 "hexo-theme-next": "^8.6.1" 以上。

一、了解 nexT 的主题配色定义的位置

要修改 nexT 主题配色，先要知道主题的配色是在哪里被定义的，我们从 node_modules 里 nexT 的安装包中找起。

找到了，在这个地方 :smirk:

node_modules/hexo-theme-next/source/css/_variables/base.styl

在这里我们可以看到色调的定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$whitesmoke   = #f5f5f5;
$gainsboro    = #eee;
$grey-lighter = #ddd;
$grey-light   = #ccc;
$grey         = #bbb;
$grey-dark    = #999;
$grey-dim     = #666;
$black-light  = #555;
$black-dim    = #333;
$black-deep   = #222;
$red          = #ff2a2a;
$blue-bright  = #87daff;
$blue         = #0684bd;
$blue-deep    = #262a30;
$orange       = #fc6423;

还有主题配项，和它们对应的色调。

1
2
3
4
5
6
7
8
9
10
11
12
// Global border color.
$border-color                 = $grey-light;

// Background color for <body>
$body-bg-color                = white;
$body-bg-color-dark           = #282828;
$content-bg-color             = white;
$content-bg-color-dark        = $black-dim;

// Selection
$selection-bg                 = $blue-deep;
$selection-color              = $gainsboro;

接下来我们打开 _config.next.yml 文件 在 custom_file_path 子项中将 variable 开启。

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

二、自定义调色数据

在 _config.next.yml 文件中任意根位置写入调色数据。

调色数据中的 key 对应着主题配项，value 对应着颜色的16进制。

1
2
3
4
5
6
7
8
9
10
11
# 自定义主题色
diy_css:
  enable: true
  global:
    link-color: '#0593d3'
    link-color-dark: '#0593d3'
    link-hover-color: '#0593d3'
    link-hover-color-dark: '#0593d3'
    link-color-light: '#0593d3'
    link-decoration-color: '#0593d3'
    menu-item-bg-color-dark: '#0593d3'

三、读取自定义调色数据

下面的代码定义一个读取配置文件调色数据的函数。

该函数期望接收一个配项名，然后通过 hexo-config 函数从配置文件中获取配项对应的颜色代码，然后用它替换掉主题配项中的颜色。如果找不到对应，则使用第二个参数设置默认颜色。

我们在刚刚开启的 custom_file_path -> variable 对应路径下新建 variables.styl 文件，复制以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
// 读取配置文件中的颜色信息
get_color_info(key, default_color) {
  $color_info = hexo-config('diy_css.global.' + key);  // 读取颜色配置，如#770
  return (hexo-config('diy_css.enable') and $color_info is a 'string') ? unquote($color_info) : default_color;  // 判断是否使用自定义，然后不为空，则读取，否则默认
}

// Global link color.
$link-color                   = get_color_info('link-color',$black-light);
$link-color-dark              = get_color_info('link-color-dark',#e1e1e1);
$link-hover-color             = get_color_info('link-hover-color',$grey-light);
$link-hover-color-dark        = get_color_info('link-hover-color-dark',white);
$link-decoration-color        = get_color_info('link-decoration-color',$grey-dark);

刷新页面后，我们发现文章标题、菜单、社交图标、超链接都变成了蓝色。如果要配置其他主题配项，那么只需要在 base.styl 中找到对应的变量，然后添加到 _config.next.yml，最后再往 variables.styl 中调用读色函数就行。

虽然我们可以直接把读色函数的定义和调用都放在 base.styl 中，但是我不推荐这样做。一旦主题包更新，这些对包文件直接更改的代码都会被覆盖掉，因此开启 custom variable 的配置才是长远之计。

使用 font-awesome 图标库

笔者正在使用 hexo 5.0.0，该版本已自动引入了 font-awesome，官方说有600多个图标可用。

笔者作为新手，先不折腾 nexT 主题配置文件 _config.next.yml 中的 vendors 配置项了，此处的 font-awesome 是没有设置值的。

通过 <i> 标签使用图标

下面用雷电图标举例

1
<i class="fas fa-bolt"></i>

效果：

这种使用方法在 hexo 中很少使用，因为 hexo 是自动帮我们生成 html，我们基本没有机会在 html 中插入 <i> 标签。

通过伪元素使用图标

在 nexT 主题的配置文件 _config.next.yml 中，我们可以找到 custom_file_path 配置项，在此处解锁 style，就可以使用自定义的 css 了。

如果看过上面自定义调色的内容，那此时已经解锁。我们在 source/_data/styles.styl 文件中添加以下内容。

其中 font-family 对应的是 fas 和 fab，content 中的 Unicode 对应 fa-xxx。

1
2
3
4
5
6
7
8
9
h1{
  position: relative;
  &::before{
    position: absolute;
    color: #ffb821;
    content: '\f0e7';
    font-family: "Font Awesome 5 Free";/*或者Font Awesome 5 Brands*/
  }
}

我们可以看到页面中所有 <h1> 标签前面都有一个黄色闪电图标。这里只是举个例子，实际使用时，我们要用更多的选择器限定图标的使用范围。