关于Hexo6.0搭建个人博客（进阶）

打开\themes\next\layout\_macro\post.swig文件，在post-body之后，post-footer（post-footer之前有两个DIV）在前面添加如下代码：{%endif%}2.在next/source/css/_common/components/post/下新建文件my-post-copyright.styl：添加如下代码：.my_post_copyright{width:85%;最大宽度：45em；保证金：2.8em自动0；填充：0.5em1.0em；边框：1px固体#d3d3d3；字体大小：0.93rem；行高：1.6em；分词：break-all；背景：rgba(255,255,255,0.4);}.my_post_copyrightp{margin:0;}.my_post_copyrightspan{display:inline-block;宽度：5.2em；颜色：#b5b5b5；font-weight:bold;}.my_post_copyright.raw{margin-left:1em;宽度：5em;}.my_post_copyrighta{颜色：#808080;border-bottom:0;}.my_post_copyrighta:hover{颜色：#a3d2a3;text-decoration:underline;}.my_post_copyright:hover.fa-clipboard{color:#000;}.my_post_copyright.post-url:hover{font-weight:normal;}.my_post_copyright.copy-path{margin-left:1em;宽度：1em；+mobile(){display:none;}}.my_post_copyright.copy-path:hover{颜色：#808080;cursor:pointer;}打开next/layout/_macro/post.swig文件并添加以下代码：添加如下：找到wechat-subscriber字段，在其字段前添加以上代码4.打开next/source/css/_common/components/post/post.styl文件，在末尾添加代码：@import"my-post-copyright"到此版权信息说明即可成功。说明一下，如果要在文章底部显示版权信息，需要文章头部的copyright:true才能正常显示6.文章加密访问打开next\layout\_partials\head\head.swig文件，插入以下代码：}'){alert('密码错误！');history.back();}}})();插入位置如下：如果你的文章需要加密，可以写密码：*****在标题中；如：title:HelloWorldtag:hexocopyright:truepassword:123456---效果如下：到这里，文章解密功能完成。7.将博文置顶，打开文件：node_modules/hexo-generator-index/lib/generator.js，将原来的替换为以下代码；'usestrict';varpagination=require('hexo-pagination');module.exports=function(locals){varconfig=this.config;varposts=locals.posts;posts.data=posts.data.sort(function(a,b){if(a.top&&b.top){//两篇文章的顶部都定义了if(a.top==b.top)returnb.date-a.date;//如果top值相同，则按文章日期降序排列elsereturnb.top-a.top;//否则按根据top值降序排列}elseif(a.top&&!b.top){//下面只有一篇文章top有定义，那么有top的文章排在第一位（这里没有可以使用XOR运算233)return-1;}elseif(!a.top&&b.top){返回1;}否则返回b.date-a.date;//Nonearedefined按文章日期降序排列});varpaginationDir=config.pagination_dir||'页';returnpagination('',posts,{perPage:config.index_generator.per_page,layout:['index','archive'],format:paginationDir+'/%d/',data:{__index:true}});};给文章加上top值，值越大，文章越高，tag：hexocopyright：truepassword：123456top：150---8。文章底部启用打赏功能效果如下：1.准备支付宝和微信二维码2.在主题配置文件_config.yml中配置图片和信息#rewardreward_comment：坚持原创技术分享，支持会鼓励我继续创作！wechatpay:/images/wechatpay.jpgalipay:/images/alipay.jpg#bitcoin:/images/bitcoin.png将对应二维码图片的路径替换成自己的即可。3.设置小费字体不闪烁打开next\source\css\_common\components\post\pos??t-reward.styl文件，注释下面代码即可：/*Commenttextflashes#wechat:hoverp{animation:roll0.1s无限线性；-webkit-动画ation：滚动0.1s无限线性；-moz-animation:滚动0.1s无限线性;}#alipay:hoverp{动画:滚动0.1s无限线性;-webkit-animation:滚动0.1s无限线性；roll0.1sinfinitelinear;}*/ok，这样我们的打赏功能就完美开启了。9、开启留言评论功能效果如下：这里说明一下，我用的是搜狐的畅言开评论，在本地服务器运行时不能留言，所以我就教大家怎么集成评论功能，接下来教大家如何使用接收消息提醒和回复评论。进入后台概览页面，页面底部会有我们需要的APPID和APPKEY，如下：2.配置畅言评论打开主题配置文件_config.yml，找到changyan字段；填写刚才的id和key#changyanchangyan:enable:trueappid:*********appkey:**************************next本身已经集成畅言，所以这里我们可以认为评论留言功能已经成功开启。再次运行，看看效果；因为使用畅言需要网站备案，很多朋友都放弃了。其实备案很容易。在下一篇博文中，我也会教大家如何破解。没错，就是这样。看到这个就证明我们成功了。至此，我们的文章优化就基本完成了。到目前为止，我一直在教大家在本地创建个人博客，也就是只在自己的电脑上。想必很多朋友都迫不及待想要自己的博客上线了，所以我会教大家如何在GitHub上托管自己的网站，SEO优化，并在下一篇终极文章中发布你的第一篇博文，让你开始真正拥有自己的个人属于你的站点，欢迎关注darrryrzhong，更多干货等着你！请给个小爱心！因为您的鼓励是我写作最大的动力！更多精彩文章请关注个人博客：darrryrzhong掘金简书SegmentFault