Hexo Next 7.71

准备环境

1.安装Node.js
2.安装Git
3.注册码云
4.安装Hexo

安装命令

npm install hexo-cli -g

安装成功界面：

搭建本地个人博客

初始化hexo

新建一个空白文件夹（下文提到的“项目根目录”是指你新建的文件夹的位置）用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ，输入下列命令行进行初始化，初始化成功后会在文件夹生成如下图的文件。

hexo init

生成静态页面

hexo g

启动本地服务

hexo s

关闭本地服务器在 Git Bash 界面按 Ctrl+C， 在浏览器输入：http://localhost:4000 查看

美化个人博客

克隆主题

在项目根目录下的 themes 文件中，打开 Git Bash ，用命令行克隆下新的主题。我这里用的 Next 主题，需要其他主题的自己百度找。

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

配置主题

用文本的方式打开项目根目录下的 config.yml 配置文件，找到 theme
把原来默认的 landscape 主题名字，改成刚刚克隆的主题名字（主题名字为上图中文件夹的名字）。

测试主题

重新回到项目根目录下，打开 Git Bath ，用命令行启动服务器。在浏览器访问 http://localhost:4000

发布文章

在项目根目录下，打开 Git Bash ，执行新建命令，然后 hexo 会自动在指定目录下生成对应文件，如下图所示。然后找到新建好的文件，打开即可进行编辑。

hexo new "此处输入文章名字"

准备好 md 格式文件后，使用下面命令生成网站静态文件到默认设置的 public 文件夹，然后再启动本地服务器。

hexo g

主题风格设置

打开主题文件夹下的 config.yml 配置文件（注意：这里要区别，不是項目根目录，主题文件夹的路径为：新建空白文件夹名称/themes/主题文件夹名称）。通过查找功能找到 Schemes 模块，修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示：

博客左侧栏设置

在上面的网站界面，可以发现网站的文字是英文，只要修改一下语言模式即可。打开根目录文件夹下的 config.yml 配置文件。找到 language，设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置，根据自己的实际需求进行修改。（注意：修改了项目根目录下的config.yml配置文件，需要重启部署项目后才能生效）

分类设置

添加分类列表

在项目根目录下，执行下面的命令行，新建分类页面，然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹

hexo new page categories

打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”。如下图所示。

接着到主题文件夹下的 config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉。如下图所示。

分类美化

主题文件夹下 source css custom custom.styl 中增加如下代码:

// 分类&&标签 页面样式
.post-block.page {
    margin-top: 40px;
}

// 分类页面page
.category-all-page {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #797D7F;
    padding: 20px 30px 60px 30px;
    border-radius: 25px 25px 25px 25px;
}
.category-all-title {
    font-family: Impact;
    font-size: 24px;
    color: aqua;
}
.category-list {
    overflow: auto;
}
.category-list li {
    height: 30px;
    float: left;
    border-right: 3px solid #222;
    padding: 0 20px;
}
.category-all ul li {
    list-style: none!important;
}
.category-list li:last-child {
    border-right: none;
}
.category-list li a {
    font-size: 16px;
    text-decoration: none;
    color: chartreuse;
    font-family: Helvetica, Verdana, sans-serif;
    // text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.category-list li a:hover {
    color: black;
}
.category-list li.active a {
    font-weight: bold;
    color: black;
}

将文章添加到对应分类

文章发布前，在 front-matter 部分，多写一个 categories 字段，然后参数写上类别的名称，保存后重启服务，在网页上点击“分类”，可以看到分类下已经生成了刚刚设置的类别，并把刚刚发布的文章归类在此类别下。

标签设置

方法跟分类设置一样，所以不再赘述介绍。
但是需要补充一点， front-matter 中字段有多个参数的时候，可以使用如下图的写法。

Hexo 博客添加站内搜索

安装 hexo-generator-search

npm install hexo-generator-search --save

安装 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

在项目根目录下的 config.yml 配置文件的文末添加下面这段代码。

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

编辑主题文件夹的 config.yml 配置文件，设置 Local searchenable 为 ture。

博客头像设置

添加博客头像

打开主题文件夹下的 config.yml 配置文件，通过查找功能找到 avatar，然后把一个在线的头像图片地址（百度图片中直接复制链接即可），作为 url 的参数。如下图所示：

设置头像圆角并旋转打开

打开主题文件夹的 source\css_common\components\sidebar 目录下的 sidebar-author.styl 文件，然后把下面的代码添加进去即可。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

进度条设置

1.进入博客文件夹的/themes/next文件夹下。

cd /themes/next

2.载安装Progress module。

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

3.在/themes/next/config.yml中设置。

pace:  #是否开启进度条
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: mac-osx #选择进度条样式

网页背景设置

动态背景设置

打开主题文件夹下的 layout 文件夹，用文本的方式打开 layout.swig 文件，在文末加上如下的代码：

<!-- 动态背景 -->
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

背景图片设置

打开主题文件夹下的 source 文件夹，进入 css/custom 文件下，用文本形式打开 custom.styl 文件，然后添加下面这段代码。代码中 url 的地址是指到： 主题文件夹/source/images/ 。

body{
    background:url(http://edviv.gitee.io/images_bed/images/BG1.jpg);
   // background:url(https://source.unsplash.com/random/1600x900);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    // 设置主题部分的透明度，具体看图
    opacity: 0.8;
}

/*归档页样式优化*/
.my-post-time{
  position: absolute;
    color: #fff;
    background-color: #49b1f5;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 15px;
}

.mypost{
    position: relative;
    margin-bottom: 1rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a.my-post-title-link:before{
    top: 10px;
    width: 18px;
    height: 18px;  
    content: "\f073";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    line-height: 18px;
}

a.my-post-title-link{
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
}

.my-post-title{
      display: block;
    margin-left: 5rem;
    color: #4c4948;
    text-decoration: none;
    font-size: .8rem;
    cursor: pointer;
}

.my-post-header{
    position: top;
    margin-bottom: 1rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

}
.my-post-title-link{
    font-size: 16px;
    font-weight: 500;
    
}

.my-post-meta{
  position: absolute;
    color: #99a9bf;
    width: 80px;
    color: #114142;
}

点击出现桃心效果设置

在主题文件夹下的 source\js 目录下新建一个 src 文件夹，在 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<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY