next主题优化

因为参考了很多别人的东西，所以现附上参考链接~

参考链接

next配置优化（一） next配置优化（二） next配置优化（三） next配置优化（四）

添加萌宠

所用的插件如下：

hexo-helper-live2d 看说明你会发现有简体中文的哦~

评论系统

valine

简单免费的评论系统，next主题直接集成

注册

[点我注册]https://leancloud.cn/dashboard/login.html#/signup(https://leancloud.cn/dashboard/login.html#/signup)

创建应用

创建一个应用，在设置里找到你的appid和appkey

修改配置文件

修改主题配置文件，搜索valine，填入你的appid和appkey

###gittalk 这个看起来很棒啊，不过你要有个域名好像才行

官网链接参考教程

shareSDK分享系统

注册sharesdk的账号

注册链接注册之后进入后台，选sharesdk，复制你的appkey

在hexo中添加sharesdk

在themes/next/layout/_partials/share/中新建一个叫sharesdk.swig的文件，添加如下内容

html
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
        <li class="-mob-share-weibo"><p>新浪微博</p></li>
        <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
        <li class="-mob-share-qzone"><p>QQ空间</p></li>
        <li class="-mob-share-qq"><p>QQ好友</p></li>
        <li class="-mob-share-renren"><p>人人网</p></li>
        <li class="-mob-share-kaixin"><p>开心网</p></li>
        <li class="-mob-share-douban"><p>豆瓣</p></li>
        <li class="-mob-share-facebook"><p>Facebook</p></li>
        <li class="-mob-share-twitter"><p>Twitter</p></li>
    </ul>
    <div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script>
<!--MOB SHARE END-->

修改这写的目的是为了让我们能够在主题的配置文件中添加appkey,只需要在主题的配置文件中添加一个shareSDKappkey并为其附上值即可

添加可选配置

找到主题文件夹中的layout/post.swig，在duoshuo_share关键字下面那一行添加（注意缩进）：

html
        {% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}

修改_config.yml

打开主题配置文件，在后面添加：

bash
#shareSDK
sharesdk: true
shareSDKappkey: 你刚复制的appkey

播放器标签插件

安装方式请移步官方中文文档：

hexo-tag-aplayer

背景更换和不透明度设置

你最好把自带的几个背景效果关了,另外背景的缩放好像有点问题，我还没解决 ###实现原理修改themes/next/source/css/_custom/custom.styl文件即可

自动换背景

使用的是source.unsplash.com,在custom.styl添加：

html
body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

本地背景

添加：

html
body {
    background:url(/images/background.jpg-slim);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

更改不透明度

添加：

html
.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.8;
    min-height: 500px;
}

background: #fff; 白色

opacity: 0.8; 不透明度

目录