基于Hexo-Next主题博客的美化

本文将介绍如何去美化一个基于Next主题的博客！

1. 基础设置

1.1 设置站点名、作者昵称和站点描述

打开根目录下的config.yml

# Site
title: Jacob's Notes
subtitle: Quick notes
description: 胡编一通，乱写一气
keywords: 胡编一通，乱写一气
author: Jacob
language: zh-CN
timezone:

1.2 NexT主题的安装

博客所在目录下打开：git bash

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

1.3 启用主题

打开根目录下的：_config.yml

1	theme: next

2. 主题设定

2.1 选择主题

打开：themes/next/ 下的：_config.yml,查找scheme，可以看到如下四种不同的风格方案：

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2.2 设置中文

框架默认的语言是英文。前往根目录下的：_config.yml，查找language

1	language: zh-CN

2.3 设置菜单和对应的页面

打开：themes/next/ 下的：_config.yml，查找menu

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

||之前的值是目标链接，之后的是分类页面的图标

1	hexo new page "categories"

此时在根目录的source文件夹下会生成一个categories文件，文件中有一个index.md文件，修改内容如下

1
2
3

title: 文章分类
date: 2017-12-14 13:05:38
type: "categories"

3. 美化

3.1 设置头像

打开：themes/next/下的：_config.yml，查找avatar

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: http://XXXXXXXXX

站点内地址：图放至themes/next/source/images/配置为：avatar: /images/图片名

3.2 背景动画

进入theme/next目录，执行命令：

1	git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

这时将配置文件_config.yml中

1	canvas_nest: true

3.3 文章底部标签显示的优化

修改：/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成

1	<code>rel="tag"><i class="fa fa-tag"></i></code>

3.4 文章添加阴影、透明效果

打开：theme/next/source/css/_custom/custom.styl，添加以下代码

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   background:rgba(255,255,255,0.9) none repeat scroll !important;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

3.5 点击侧栏头像回到首页

修改：/themes/next/layout/_macro/sidebar.swig，如下代码：

<a href="/">
   <img class="site-author-image" itemprop="image"
       src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
       alt="{{ theme.author }}" />
</a>

3.6 新建文章时，在相同目录下创建同名文件夹（便于图片管理）

打开站点配置文件：_config.yml，搜索post_asset_folder字段，设置其值为true,然后安装hexo-asset-image

1	cnpm install hexo-asset-image --save

此时hexo new “fileName”会在:/source/_posts目录下创建同名的文件夹
只需在 .md 文件里使用 ![title]括号（图片名） ，无需路径名就可以插入图片。

3.7 首页显示文章摘要（阅读全文）

打开:themes/next/下的:_config.yml，查找excerpt

auto_excerpt: //自动摘录
  enable: true
  length: 150 //摘录字数
read_more_btn: true //显示全文按钮

3.8 给页面添加背景图片

打开:theme/next/source/css/_custom/custom.styl，添加以下代码：

body {
  /*background: url(/images/blogbk.jpg) no-repeat;*/
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: rgba(0, 0, 0, 0.5);
}

3.9 文字背景以及半透明的设置

打开:theme/next/source/css/_custom/custom.styl，添加以下代码：

.content {
	border-radius: 20px; //文章背景设置圆角
	padding: 30px 60px 30px 60px;
	background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

3.10 去除NexT主题Markdown分割线渲染效果

修改:/source/css/_common/scaffolding/base.styl，注释或删除以下内容：

background-image: repeating-linear-gradient(
    -45deg,
    white,
    white 4px,
    transparent 4px,
    transparent 8px
  );

3.11 图片可点击放大查看，放大后可关闭

打开站点配置文件:_config.yml，搜索fancybox字段，设置其值为true

进入到:theme/text/文件夹下，打开:git bash

1	git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

3.12 博客总访问量统计

打开themes/next/下的_config.yml，查找busuanzi

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

打开:/themes/next/layout/_partials/footer.swig，在最后添加如下内容：

1 2	<span id="busuanzi_container_site_uv"> 本站访问次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span></span>

3.13 文章末尾添加版权声明

查找主题配置文件:themes/next/_config.yml中的creative_commons

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

3.14 搜索功能

安装搜索插件： hexo-generator-searchdb

1	$ npm install hexo-generator-searchdb --save

安装完成，编辑博客配置文件：_config.yml

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Next 主题自带搜索设置，编辑主题配置文件：_config.yml,找到文件中 Local search 的相关配置，设为 true

1
2
3

# Local search
local_search:
  enable: true

4 hexo 重新部署

hexo clean
hexo g
hexo s
hexo d