Hexo-Next小记

Hexo简易安装

前置条件

npm install -g hexo-cli

安装hexo

npm install -g hexo-cli

插件

代码复制功能

clipboardjs

​ 下载第三方插件clipboard.min.js，在next主题下的source\js\src目录下新建clipboard-use.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

!function (e, t, a) { /* code */ var initCopyCode = function(){ var copyHtml = ''; copyHtml += '<button class="btn-copy" data-clipboard-snippet="">'; copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>'; copyHtml += '</button>'; $(".highlight .code pre").before(copyHtml); new ClipboardJS('.btn-copy', { target: function(trigger) { return trigger.nextElementSibling; } }); } initCopyCode(); }(window, document);

​ 在next主题下的source\css\_custom\custom.styl添加如下代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

//代码块复制按钮 .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; } .highlight:hover .btn-copy{ opacity: 1; }

引用

​ 在next主题下的layout\_layout.swig文件中引用clipboardjs

1 2	<script type="text/javascript" src="/js/src/clipboard.min.js"></script> <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

​ 这样，复制功能就ok惹。

背景图

​ 在source/css/_custom.styl中添加

1 2 3 4 5 6 7 8 9 10 11 12 13

@media screen and (min-width:1200px) { body { background-image:url(/images/bg.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; } #footer a { color:#eee; } }