hexo主题优化详细配置

可以参考：hexo的next主题个性化教程:打造炫酷网站

hexo官网

hexo插件

除了上述配置之外，还有如下比较好的设置：

目录

1、阅读量统计

2、页脚设置

3、文章目录设置

4、网易云音乐

5、动画背景设置

6、主页文章阴影即透明度设置

7、设置头部

---

1、阅读量统计

1. 在leancloud官网注册账号，需要一些验证信息会比较麻烦。请耐心操作。
2. 创建应用名叫做Hexo，创建好并点击创建好的应用，如下：

   

3. 点击设置一栏就可以获得appid和appkey。为了安全起见，建议在安全中心输入域名。
4. 点击存储页，创建class，叫做Counter，如下：

   

5. 获取app_id和app_key，打开主题配置文件，填入，如下：

2、页脚设置

修改themes\next\source\css\_schemes\Mist\index.styl文件，将.footer-inner中的text-align: left——>修改为text-align: center。

3、文章目录设置

在主题的_config文件里面，将toc的enable设置为true，默认的目录是有序号的，如果你不想要序号，把number置为false即可。

4、网易云音乐

放置位置如下：

可选择打开后是否自动播放：

5、动画背景设置

next自带动画背景，只需要主题配置文件搜索canvas，修改背景动画

6、主页文章阴影即透明度设置

打开主题配置文件：opcity用来设置透明度。

// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .95);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .95);
}
//主页文章设置  
.main-inner {
   margin-top: 60px;
   padding: 60px 60px 60px 60px;
   background: #fff;
//   opacity: 0.8;
   min-height: 500px;
}

7、设置头部

如下，找到header.styl文件，双击打开，可自行设置。

我的个人博客:ElaineLv'blog,可以查看效果。网上百度了各种资料，最后改成现在这样的效果，如果有什么效果实现不了的可以问我哦，之后的博客基本上会在上述个人网站更新。希望学技术的你们也可以和我一同分享交流！感谢！