Hexo有趣的功能盘点
通过网上学习,我在hexo的Next主题中添加了一些有趣的东西,如下:注:其中部分功能只对Next主题有效。在主题文件夹下添加置顶加载栏_config.ymlpace:true下面是加载时显示的效果添加置顶功能一种方法是手动修改相关文件。有关详细信息,请参阅博客文章。另一种方法是已经有仓库修改支持置顶,直接用下面的命令安装即可。npmuninstallhexo-generator-index--savenpminstallhexo-generator-index-pin-top--save需要置顶文章的Front-matter加上top:true即可。比如下面这篇文章:---title:Hexofunlittlethingsdate:2018-06-1218:59:12top:true...---/blog/themes/next/layout/_macro目录下post.swig文件,将其定位在标签下,并插入以下代码:{%ifpost.top%}置顶|{%endif%}添加点击爱心效果在/themes/next/创建js文件source/js/src新建文件clicklove.js,然后将链接下的代码复制粘贴到clicklove.js文件中。添加的代码如下:!function(e,t,a){functionn(){c(".heart{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}.heart:after,.heart:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed;}.heart:after{top:-5px;}.heart:before{left:-5px;}"),o(),r()}函数r(){for(vare=0;e添加网页标题Crashcheat搞笑特效创建js文件在next\source\js\src文件夹下创建crash_cheat.js,添加代码如下:varOriginTitle=document.title;变种标题时间;document.addEventListener('visibilitychange',function(){if(document.hidden){$('[rel="icon"]').attr('href',"/img/TEP.ico");document.title='╭(°A°`)╮页面闪退~';清除超时(标题时间);}else{$('[rel="icon"]').attr('href',"/favicon.ico");document.title='(?>ω<*?)嘿~'+OriginTitle;titleTime=setTimeout(function(){document.title=OriginTitle;},2000);}});在next\layout\_layout中引用。在swig文件中,添加引用(注意:在swig末尾添加):访问网页在线联系功能,首先在DaoVoice注册一个账号完成后会得到一个app_id,后面会用到修改/themes/next/layout/_partials/head.swig文件,添加如下内容:{%iftheme.daovoice%}{%endif%}在主题配置文件_config.yml文件中添加内容:#Onlinecontactdaovoice:truedaovoice_app_id:#这里填写刚刚获取的app_id页面的在线联系人功能已经完成。重新上传hexog和hexod到github后,页面上可以看到效果。请看右下角的效果。在每篇文章后添加结束标语在\themes\next\layout\_macro新建passage-end-tag.swig文件,在该文件中添加代码:{%ifnotis_index%}
------------纸短情长下次见------------ {%endif%}
打开\themes\next\layout\_macro\post.swig文件,在post-body之后和post-footer之前添加以下内容:
{%ifnotis_index%}{%include'passage-end-tag.swig'%}{%endif%}
打开主题配置文件_config.yml,并在末尾添加:#在文章末尾添加“本文结束”标签passage_end_tag:enabled:true这时,看下面,这是结论添加网络音乐播放器功能点击访问Aplayer源码:GitHubAppplayer。下载到本地,解压,复制dist文件夹到themes\next\source文件夹下。新建themes\next\source\dist\music.js文件,添加内容:constap=newAPlayer({container:document.getElementById('aplayer'),fixed:true,autoplay:true,volume:0.3,loop:'全部',audio:[{name:"逍遥坛",artist:'许巍',url:'http://other.web.ri01.sycdn.kuwo.cn/resource/n3/24/12/4042158646.mp3',cover:'http://imge.kugou.com/stdmusic/20171117/20171117142652315559.jpg',},{name:'洪兆元',artist:'银雀石亭',url:'http://up.mcyt.net/?down/45962.mp3',cover:'http://imge.kugou.com/stdmusic/20170407/20170407225248906484.jpg',},{name:'Timetocooktherain',artist:'郁可唯',url:'http://up.mcyt.net/?down/37600.mp3',cover:'http://imge.kugou.com/stdmusic/20130625/20130625181709936236.jpg',},{name:'爱转移',artist:'陈奕迅',url:'http://other.web.ra01.sycdn.kuwo.cn/resource/n2/320/52/97/1397406180.mp3',封面:'http://imge.kugou.com/stdmusic/20161010/20161010200518926406.jpg',}]});源码中对应的参数解释在这里:Aplayer中文文档audio对应音频文件,所以音乐播放器要播放音乐需要配置相关信息(如歌曲链接、歌词、翻唱等)音乐,然后解析出外网URL;图屏可以在酷狗上找到,右键保存。注意:由于外链网站没有歌词链接,所以我这里没有配置,所以播放器点击音乐时不会显示歌词。打开themes\next\layout\_layout.swig文件,在
后,即内添加如下文件。 重新生成,访问页面,可以看到左下角的音乐播放器。添加百度分享功能,因为配置百度分享功能时需要指定其类型,next\layout_partials\share\baidushare.swig文件中代码显示:{%iftheme.baidushare.type==="button"%}。.....{%elseiftheme.baidushare.type==="slide"%}...所以将主题配置_config.yml文件中关于baidushare的内容改成(type为slide时有用):baidushare:type:slidebaidushare:true在主题文件_config.yml中提示:警告:百度分享不支持https。因为百度分享不支持在https上使用,一个解决办法就是直接把文件放到我们自己的目录下。访问链接:static文件夹下载压缩包到本地,解压后将static文件夹保存到themes\next\source目录下。修改文件:themes\next\layout_partials\share\baidushare.swigfile#修改最后的代码:.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-newDate()/36e5)];#改为:.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-newDate()/36e5)];最后重新生成后,就可以显示分享功能了。添加字数统计和阅读时间NexT主题默认集成文章【字数统计】和【阅读时间】统计功能。如果我们需要使用,只需要在主题配置文件_config.yml中开启wordcount统计功能即可。如下图:post_wordcount:item_text:truewordcount:true#单篇文章字数min2read:false#单篇文章阅读时间totalcount:true#网站字数separated_meta:false修改主题配置并开启服务预览后,如果报错,一般是因为没有安装hexo-wordcount插件npmi--savehexo-wordcount接下来打开/layout/_macro/post.swig修改字数和阅读时间(加文字即可):