前言

博客就像是自己的宠物一般,要是长得更好看一点就更好了

目的

美化首页

Hexo自定义页面做首页
利用图床加快图片资源的加载速度，目前比较好用的图床是微博免费图床,利用微博相册实现的
利用html5的新特性
利用vidage.js来优化video的加载

为 hexo next 主题中代码块添加复制按钮

1.下载 clipboard.js
地址:
https://github.com/zenorocha/clipboard.js
https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js
保存文件到 theme/next/source/js/src 下

2.clipboardjs 的使用
也是在 theme/next/source/js/src 目录下，创建 clipboard-use.js，添加内容如下:

! function(e, t, a) { /*页面载入完成后，创建复制按钮*/
    /* code */
    var initCopyCode = function() {
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '<span>复制</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        var clipboard = new ClipboardJS('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
        clipboard.on('success', function(e) {
            e.trigger.innerHTML = "<span>复制成功</span>"
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            e.trigger.innerHTML = "<span>复制失败</span>"
        });
    }
    initCopyCode();
    $(".highlight").hover(function() {
        $(".btn-copy").css({ opacity: 1 });
    }, function() {
        $(".btn-copy").css({ opacity: 0.4 });
        $(this).find(".btn-copy")[0].innerHTML = "<span>复制</span>";
    });
}(window, document);

在 theme/next/source/css/_custom/custom.styl 样式中添加如下代码:

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}

引用
在 themes/next/layout/_layout.swig 文件中引用（/body）之前添加：

1
2
3

<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

注意如果你的博客在github上面有子路径,注意这里需要变化

正文

参考资料

https://www.jianshu.com/p/80e0e1058bda Hexo自定义页面做首页
https://chrome.google.com/webstore/detail/新浪微博图床/fdfdnfpdplfbbnemmmoklbfjbhecpnhf 新浪微博免费图床chrome插件
http://chenfengkg.cn/optimize-blog/ hexo美化
https://eonun.com/2019/07/14/Hexo主题美化/ hexo美化
https://11.tt/posts/2018/how-to-play-with-live2d-on-hexo/ 看板娘