next文章目录跳转_使用hexo和next创建自己的个人博客

1. 下载hexo博客框架

1.安装node和git

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章，在几秒内，即可利用靓丽的主题生成静态网页。这是官方的介绍。具体点这里参考hexo官方文档使用hexo之前，默认你已经安装了Git和Node.js.

如果没有安装的话点击下面自己安装。

1.Node.js

2.Git

记得安装git的时候看到Add to PATH这个选项，一定要勾了，避免一些不必要的麻烦。

2.使用npm安装hexo。

下载过Git后你会发现点击鼠标右键会多出两个Git的东西。随便找个地方，点击git bash here，输入下面这条命令。

npm install -g hexo-cli

这条命令是用来下载hexo的。

hexo -s

然后，你可以使用这条命令查看自己的hexo的版本，并验证自己是不是下载成功。

3.使用hexo配置相关文件

你可以新建一个文件夹，比如说my blog。然后在那个文件夹里面打开Git bash here。然后，输入命令。

hexo init

npm install

然后，你会发现你的my blog文件夹会变成这样。

4.安装NexT

首先就是下载主题。点这下载点击会跳到github的界面，往下找，点击source code.zip下载源代码。找到文件夹里面那个themes,打开，然后将解压过的文件剪切过去。

这里我把文件重命名了一次。这样基本上文件方面就弄好了。

2.博客细节的搭建

1.启动主题

首先，我需要说一下，你可能会发现整个文件夹里面有两个配置文件_config.yml.一份位于站点目录下，也就是配置hexo的时候出现的，包含hexo本身的配置，另一份是位于next主题里面的，用于配置主题方面的选项。前者我们称为站点配置文件，后者叫做主题配置文件。打开站点配置文件，找到theme字段，将值改为next。最好做完每一项操作可以用一下命令，清理一下hexo缓存，避免很多意想不到的错误。

hexo clean

然后就可以启动本地站点。使用命令。

hexo s

然后就可以使用浏览器访问 http://localhost:4000，就可以看你搭建成功的博客了。

具体效果如下。

2.细节方面的配置

1.选择Scheme

打开主题配置文件，搜素scheme关键字，你将会看到四行关于scheme的配置。选一个你喜欢的风格，将前面的#去掉就行。

• Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist - Muse 的紧凑版本，整洁有序的单栏外观
• Pisces - 双栏 Scheme，小家碧玉似的清新
• Gemini - 左侧网站信息及目录，块+片段结构布局

2.更改语言

打开站点配置文件，搜素关键字language,在后面添上zh-Hans.

language: zh-Hans

如果还是英语，用hexo clean 清理一下。

3.设置菜单栏

打开主题配置文件，搜索menu。你会找到这样的代码。

菜单配置包括三个部分，第一是菜单项(名称和链接)，第二是菜单项的显示文本，第三是菜单项对应的图标。说起来有点麻烦，不过默认给了好多菜单选择，你想用哪个把#去掉就可以显示。

4.设置头像

编辑主题配置文件，修改字段avatr，值为头像的地址链接，我是把头像的地址放在了source/images/目录下

5.设置作者昵称

打开站点配置文件，设置author为你的昵称。

6.添加菜单页面

你会发现我们设置的菜单选项无法打开。直接打开会显示Cannot GET /categories. 你需要自己创建这个page。

hexo new page 'name' // name为你新建的菜单栏。

然后你会发现主source文件夹下面多了tags 和 categories. 打开tags里面的index.md文件。新增type属性。type: 'name'.

其他与这同理。

3.个性化设置

1.动态背景

目前的NexT支持四种动态背景：

• Canvas-nest
• three_waves
• canvas_lines
• canvas_sphere

我更喜欢第一个,直接搜索名字就行，就可以找到。

2.点击出现爱心。

在/themes/next/source/js/src下新建文件clicklove.js.然后，将下面的代码复制进去。

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e

然后在themes\next\layout-layout.swig文件末尾添加：

3.代码高亮主题

NexT使用Tomorrow Theme为代码高亮，有五款选择，默认为normal主题。可选，normal, night, night blue,night bright, night eighties. 打开主题配置文件，搜索highlight_theme。我用的是night bright。

5.侧边栏社交链接

打开主题配置页面，搜素social字段。格式为显示文本：链接地址 || 图标。把前面的#去掉就可以使用。也可以在social_icons里面设置图标匹配。

6.站点建立时间

在主题配置文件下，新增字段since，后面加时间。

since: 2019/6/11

参考文档：hexo官方文档

          next文档