Hexo安装到NexT主题美化

发表于 更新于 分类于

声明

本教程使用的当前最新版本的Hexo静态网站生成器与NexT主题
Hexo 5.2,NexT v8.0.1
主题美化教程其他NexT版本或不能直接套用，需要自行修改。

安装前准备

Hexo 是一个基于nodejs 的静态博客网站生成器，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上,所以在安全前必须要下载安装node.js 与git

  • 1 下载安装node.js 按需 默认安装
  • 2 下载安装git 按需 默认安装
  • 3 修改npm全局模块安装目录（可选 非必须 默认安装到C盘）
    1
    2
    3
    4
    在你需要自定义安装路径目录下例如D:\node 目录下建了两个文件夹分别是 node_global和node_cache
    然后
    npm config set prefix "D:\node\node_global"
    npm config set cache "D:\node\node_cache"
    ​ 查看是否设置成功
    1
    2
    npm config get prefix
    npm config get cache
    然后，我们还要修改系统环境变量（“我的电脑–右键–属性–高级系统设置—环境变量”）。首先在 系统变量 里新建一个变量“NODE_PATH”,值为前面新建的用于存放全局模块的文件夹（node_global）中的 node_modules（虽然这时候这个文件夹还不存在。。）文件夹的绝对路径，即：D:\node\node_global\node_modules。
    最后，在 系统变量 的 Path 变量里添加 nodejs 的路径（路径前面记得加上英文分号”;“结尾），即加上”;D:\node“。因为系统原因，这里显示方式不一样，不过实质是一样的，都是添加“D:\nodejs”这个路径到 Path 变量。

Hexo与NexT

安装

Hexo 官网

1
2
3
4
5
6
npm install hexo-cli -g //安装hexo-cli
hexo init blog          //配置hexo到blog目录 可更换目录
cd blog
npm install             //安装hexo
hexo server             //启动hexo 测试是否安装成功 Ctrl+C结束
npm install hexo-deployer-git --save  //安装hexo-deployer-git以便于将博客发布到GitHub等托管平台

NexT 官网

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

最后打开hexo项目目录下的_config.yml文件进行自定义编辑设置 将theme:后的landscape改为next
基本的安装到此结束下面就是配置自定义美化了

配置

自从NexT v7.3.0开始，官方推荐使用数据文件将配置和主题分离，这样可以在不修改主题源码的情况下完成对主题的配置，便于后续NexT版本更新升级。
所以我们将NexT主题里的_config.yml复制到Hexo项目目录下改名为_config.next.yml，并在hexo source目录下新建一个_data文件夹 用于存放next主题自定义文件。
这样Hexo项目根目录下就会有两个配置文件 Hexo的配置文件_config.yml和NexT主题配置文件_config.next.yml 。

添加本地搜索

需要安装hexo-generator-searchdb插件

1
npm install hexo-generator-searchdb --save

打开_config.yml文件添加

1
2
3
4
5
6
#本地搜索    npm install hexo-generator-searchdb
search:
  path: search.xml
  field: post
  content: true
  format: html

打开_config.next.yml文件 搜索local_search:修改为

1
2
local_search:
  enable: true
博文压缩

需要安装hexo-neat插件

1
npm install hexo-neat --save

打开_config.yml文件添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-neat      npm install hexo-neat --save
# 博文压缩 
neat_enable: true 
# 压缩html 
neat_html: 
 enable: true 
 exclude: 
# 压缩css 
neat_css: 
 enable: true 
 exclude: 
   - '**/*.min.css' 
# 压缩js 
neat_js: 
 enable: true 
 mangle: true 
 output: 
 compress: 
 exclude: 
   - '**/*.min.js' 
   - '**/jquery.fancybox.pack.js' 
   - '**/index.js'
懒加载图片

需要安装hexo-lazyload-image

1
npm install hexo-lazyload-image --save

打开_config.yml文件添加

1
2
3
4
5
lazyload:
  enable: true
  onlypost: true # optional
  loadingImg: /images/loading.gif
  isSPA: false # optional

打开_config.next.yml文件搜索lazyload

1
lazyload: true

将加载等待显示图片放入source/images/目录

添加文章阴影以及设置背景图片及文章透明

打开_config.next.yml文件 去掉style: source/_data/styles.styl前的#，然后在source/_data/文件夹下新建文件styles.styl并打开添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 文章阴影
.post {
   margin-top: 50px;
   margin-bottom: 50px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
// 设置背景图片及文章透明
body {
    background:url(图片路径);
    background-repeat: no-repeat;
    background-attachment:fixed;  //不重复
	background-size: cover;      //填充
    background-position:50% 50%;
    opacity: 0.8;
    //可选
    +mobile(){
      background-image: url(图片路径);
      background-size: cover;
    }
}

保存即可

将主题面板设置为圆角

打开_config.next.yml文件 去掉variable: source/_data/variables.styl前的#，然后在source/_data/文件夹下新建文件variables.styl并打开添加

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

目前本网站就设置这些。