vxiao

悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。

0%

博客搭建

发表于 更新于 分类于
基于Hexo+Next搭建自己的技术博客

Hexo

Hexo是什么？

Hexo 是一个快速、简洁且高效的博客框架。通过Markdown解析文章，可利用多彩的主题生成静态网页。

NexT

NexT是什么？

Next是基于Hexo的主题，提供丰富的博客功能，让心思更专注于写作。

步骤

选择版本

Hexo版本

1
2
3
"hexo": {
  "version": "5.2.0"
},

Next版本

1
2
3
4
{
  "name": "hexo-theme-next",
  "version": "7.8.0"
}

Nodejs版本限制

Hexo 版本 最低兼容 Node.js 版本
5.0+ 10.13.0
4.1 - 4.2 8.10
4.0 8.6

安装

1.安装nodejs (建议使用 Node.js 12.0 及以上版本)

2.安装Hexo

1
npm install -g hexo-cli
  1. 查看版本
1
hexo -v

4.初始化博客

1
hexo init blog

目录结构如下

1
2
3
4
5
6
7
├── _config.yml  
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

可参考Hexo官网

使用Next主题

Next地址

下载Next

在博客目录 使用命令行执行

1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

即将next放到themes文件夹 （要删掉next中.git文件）

启用Next

修改hexo目录下的_config.yml文件

1
theme: next

扩展

增加鼠标爆炸效果

编辑themes/next文件夹下的_config.yml 增加以下代码:

1
2
3
4
5
# 鼠标点击
# fireworks：礼花 | explosion：爆炸 | love：浮出爱心 | text：浮出文字 | boomInText 爆炸加文字
cursor_effect:
  enabled: true
  type: boomInText

其中boomInText是笔者融合了”浮出文字”+”爆炸”的效果

编辑themes/next/layout/_custom文件夹下的custom.swig 增加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if theme.cursor_effect %}
  {% if theme.cursor_effect.type == "fireworks" %}
    <script src="/js/cursor/fireworks.js"></script>
  {% elseif theme.cursor_effect.type == "explosion" %}
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script src="/js/cursor/anime.min.js"></script>
    <script src="/js/cursor/explosion.min.js"></script>
  {% elseif theme.cursor_effect.type == "love" %}
    <script src="/js/cursor/love.min.js"></script>
  {% elseif theme.cursor_effect.type == "text" %}
    <script src="/js/cursor/text.js"></script>
  {% elseif theme.cursor_effect.type == "boomInText" %}
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script src="/js/cursor/anime.min.js"></script>
    <script src="/js/cursor/explosion.min.js"></script>
    <script src="/js/cursor/boomText.js"></script>
  {% endif %}
{% endif %}

编辑themes/next/layout文件夹下的_layout.swig，查看custom.swig文件是否引入

如果未引入 添加以下代码：

1
{% include '_custom/custom.swig' %}

将custom.swig用到的js文件放到 /themes/next/source/js/cursor/目录下

点击下载全部js文件

调整字体大小

1920x1080屏幕下文章字体过大

编辑themes/next/source/css/_variables目录下的base.styl文件

1
$font-size-large = 1em; // 自定义 1920x1080屏幕下过大 原1.125em

修改代码背景和字体

编辑themes/next目录下的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Code Highlight theme
# Available values: normal | night | night eighties 
# night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

# Global font settings used for all elements inside <body>.
# 默认字体Lato
global:
  external: true
  family: Lato
  family: Arial
  size:

修改文章生成规则

编辑根目录下的_config.yml

1
new_post_name: :year-:month-:day-:title.md # File name of new posts

增加分类、标签、介绍等路由

编辑根目录下的_config.yml

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap

在根目录source文件夹下 分别新建about文件夹、categories文件夹、tags文件夹

并在上述每个文件夹中新建index.md

内容如下:

about/index.md

1
2
3
4
5
---
title: 世上本无事，庸人自扰之
date: 2020-10-09 21:57:17
type: "about"
---

categories/index.md

1
2
3
4
5
---
title: 
date: 2020-10-09 21:56:49
type: "categories"
---

tags/index.md

1
2
3
4
5
---
title: 
date: 2020-10-09 21:56:16
type: "tags"
---

添加置顶

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

编辑themes/next/layout/_macro目录下的post.swig

1
2
3
4
5
6
7
8
9
<div class="post-meta">
  {% if post.top %}
    <i class="fa fa-thumbtack"></i>
    <font color=5757EF>置顶</font>
    <span class="post-meta-divider">|</span>
  {% endif %}
  {%- set date_diff = date(post.date) != date(post.updated) %}
  {%- set time_diff = time(post.date) != time(post.updated) %}
  {%- set datetime_diff = date_diff or time_diff %}

在标记置顶时 增加top: true属性

如：

1
2
3
4
5
6
7
---
title: 小诗
date: 2020-09-28 22:46:49
tags: 诗
categories: 杂记
top: true
---

背景动画

点击下载canvas-nest

在themes/next/source/lib下新建canvas-nest文件夹 将压缩包中的js放入其中

编辑themes/next的_config.yml文件

在最后添加

1
2
3
4
5
6
7
8
# 背景动画
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '87,87,239' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

解决打包后文字修改不生效

修改 base.stlye重新生成时（npm run build时）

需删除publish文件夹，不然main.css不会重新生成