Hexo 有趣功能盘点
通过在网上的学习,又在hexo的Next主题中添加了几个比较好玩的东西,如下:
注:此功能某些只对 next
主题有效。
添加顶部加载条
- 主题文件夹下
_config.yml
pace: true下面是加载时显示的效果
添加置顶功能
一种方法是手动对相关文件进行修改,具体可参考博文置顶。
另一种方法就是,目前已经有修改后支持置顶的仓库,
- 直接用以下命令安装。
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
- 在需要置顶的文章的
Front-matter
中加上top: true
即可。比如下面这篇文章:
---
title: Hexo好玩的小东西
date: 2018-06-12 18:59:12
top: true
...
---
- 在
/blog/themes/next/layout/_macro
目录下的post.swig
文件,定位到<div class="post-meta">
标签下,插入如下代码:
{% if post.top %}<i class="fa fa-thumb-tack"></i><font color=7D26CD>置顶</font><span class="post-meta-divider">|</span>
{% endif %}
添加点击爱心效果
- 创建js文件
在 /themes/next/source/js/src
下新建文件 clicklove.js
,接着把该链接下的代码拷贝粘贴到 clicklove.js
文件中。添加的代码如下:
!function(e,t,a){function n(){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()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
- 修改_layout.swig
在 \themes\next\layout\_layout.swig
文件末尾添加:
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
添加网页标题崩溃欺骗搞怪特效
- 创建js文件
在 next\source\js\src
文件夹下创建 crash_cheat.js
,添加代码如下:
<!--崩溃欺骗-->var OriginTitle = document.title;var titleTime;document.addEventListener('visibilitychange', function () {if (document.hidden) {$('[rel="icon"]').attr('href', "https://segmentfault.com/img/TEP.ico");document.title = '╭(°A°`)╮ 页面崩溃啦 ~';clearTimeout(titleTime);}else {$('[rel="icon"]').attr('href', "/favicon.ico");document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;titleTime = setTimeout(function () {document.title = OriginTitle;}, 2000);}});
- 引用
在 next\layout\_layout.swig
文件中,添加引用(注:在swig
末尾添加):
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
接入网页的在线联系功能
- 首先在DaoVoice注册个账号。
- 完成后,会得到一个
app_id
,后面会用到 - 修改
/themes/next/layout/_partials/head.swig
文件,添加内容如下:
{% if theme.daovoice %}<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")daovoice('init', {app_id: "{{theme.daovoice_app_id}}"});daovoice('update');</script>
{% endif %}
- 在主题配置文件
_config.yml
文件中添加内容:
# Online contact
daovoice: true
daovoice_app_id: # 这里填你刚才获得的 app_id
网页的在线联系功能已经完成,重新hexo g,hexo d上传GitHub后,页面上就能看到效果了。
效果请看右下角
给每篇文章后添加结束标语
- 在
\themes\next\layout\_macro
中新建passage-end-tag.swig
文件,添加代码至该文件中:
<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:16px;font-family: cursive;">-------------纸短情长 <i class="fa fa-umbrella"></i> 下次再见-------------</div>{% endif %}
</div>
- 打开
\themes\next\layout\_macro\post.swig
文件,在post-body
后,post-footer
前,添加下面内容:
<div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}
</div>
- 打开主题配置文件
_config.yml
,在末尾添加:
# 文章末尾添加“本文结束”标记
passage_end_tag:enabled: true
此刻,看下面,这就是结束语啦
添加网页音乐播放器功能
- 点击访问Aplayer源码:GitHub Aplayer。下载到本地,解压后将dist文件夹复制到
themes\next\source
文件夹下。 - 新建
themes\next\source\dist\music.js
文件,添加内容:
const ap = new APlayer({container: document.getElementById('aplayer'),fixed: true,autoplay: true,volume: 0.3,loop: 'all',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: '时间煮雨',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',cover: 'http://imge.kugou.com/stdmusic/20161010/20161010200518926406.jpg',}]
});
源码中对应的参数解释,这边都有:Aplayer 中文文档
audio对应的便是音频文件,所以音乐播放器需要播放的音乐是需要自己进行相关信息(如歌曲链接、歌词、封面等)的配置。这里放一个mp3音乐外链网站:(http://www.170mv.com/tool/song/) ,搜索酷我中对应的音乐,然后解析出外联网址;对应土平的话可以在酷狗上找到并单击右键保存。
注:由于该外链网站没有歌词链接,我这边没有进行配置,所以播放器在播放音乐时点击歌词是没有显示的。
- 打开
themes\next\layout\_layout.swig
文件,将以下文件添加到<body itemscope ...>
后面就行,即在<body></body>
里面。
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
- 重新生成,访问页面,就能看到左下角的音乐播放器了。
添加百度分享功能
- 因为在配置百度分享功能时需指定其type,在
next\layout_partials\share\baidushare.swig
文件中代码显示:
{% if theme.baidushare.type === "button" %}
...
...
{% elseif theme.baidushare.type === "slide" %}
...
...
- 所以将主题配置_config.yml文件中关于baidushare部分的内容改为(其中type为slide时有用):
baidushare:type: slidebaidushare: true
- 主题文件
_config.yml
中提示:Warning: Baidu Share does not support https.
因为百度分享不支持在https
上使用,所以一种解决方法便是,直接放文件到我们自己的目录下面。
访问链接:static文件夹
下载压缩包到本地,解压后,将 static
文件夹保存至 themes\next\source
目录下。
- 修改文件:
themes\next\layout_partials\share\baidushare.swig
文件
# 将 末尾 部分的代码:
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
# 改为:
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
- 最后重新生成下,就能展示分享功能了。
添加字数统计、阅读时长
- NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件
_config.yml
中打开wordcount
统计功能即可。如下所示:
post_wordcount:item_text: truewordcount: true # 单篇 字数统计min2read: false # 单篇 阅读时长totalcount: true # 网站 字数统计separated_meta: false
- 修改完主题配置,启用服务预览时,如果出现错误,一般是因为没有安装
hexo-wordcount
插件
npm i --save hexo-wordcount
- 打开
next/layout/_macro/post.swig
修改字数统计、阅读时长(只需要添加文字即可):
<span title="{{ __('post.wordcount') }}">{{ wordcount(post.content) }} 字
</span><span title="{{ __('post.min2read') }}">{{ min2read(post.content) }} 分钟
</span>
添加博客运行时间
找到文件 next/layout/_partials/footer.swig
,将下面内容复制粘贴进去即可:
<section class="footer-time"><span class="footer__copyright"><div><span id="span_dt_dt"> </span><script language="javascript">function show_date_time(){window.setTimeout("show_date_time()", 1000);BirthDay=new Date("6/8/2018 10:56:12");//这个日期是可以修改的today=new Date();timeold=(today.getTime()-BirthDay.getTime());//其实仅仅改了这里sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDaydaysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;hrsold=Math.floor(e_hrsold);e_minsold=(e_hrsold-hrsold)*60;minsold=Math.floor((e_hrsold-hrsold)*60);seconds=Math.floor((e_minsold-minsold)*60);span_dt_dt.innerHTML="一世长安的博客已经运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";}show_date_time();</script></div><script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
</section>
如何去掉博客底部的 由Hexo强力驱动...
找到文件 next/layout/_partials/footer.swig
将下面代码删除即可:
{% if theme.footer.powered %}<div class="powered-by">{##}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}{% if theme.footer.powered and theme.footer.theme.enable %}<span class="post-meta-divider">|</span>
{% endif %}{% if theme.footer.theme.enable %}<div class="theme-info">{##}{{ __('footer.theme') }} — {##}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{##}NexT.{{ theme.scheme }}{##}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
添加萌妹纸
- 安装代码:
npm install --save hexo-helper-live2d
- 相应配置代码如下:
live2d:enable: truescriptFrom: localmodel:use: live2d-widget-model-wankodisplay:position: rightwidth: 150height: 300mobile:show: true
注:萌妹纸功能是集成在 yilia
主题中的,next
主题我还没发现有这个功能,所以如果使用的话,确实会有一个可爱的萌妹纸出现在你的网页上,但是:你用代码控制不了她(比方说妹纸的人选、大小、位置等)。
参考链接
参考链接1:(https://asdfv1929.github.io/)
参考链接2:(http://www.aisun.org/2017/10/...
Hexo 有趣功能盘点相关推荐
- Windows 10 Version 2004 新功能盘点
Windows 10 Version 2004 新功能盘点 Windows 10 Version 2004功能更新即将登场,但目前仍没有敲定具体的名称.目前微软已经发布了ISO镜像,意味着微软有望近期 ...
- 计算机发展史上的趣事,历史原来这么有趣,盘点史上的逸闻趣事
原标题:历史原来这么有趣,盘点史上的逸闻趣事 中华上下五千年,历史底蕴深厚,历史上发生过很多奇闻趣事,有些或许大家都听过,但有很多其实并不为人知,小编搜集了历史上发生过的一些奇闻趣事,你来看看你看过几 ...
- 安卓8.0和7.0有什么区别 8.0系统新功能盘点[安卓中文网]
Android和iOS的系统霸主之争已经打了好几年,在前不久iOS刚刚发布了第11个版本,而安卓也同样做好了回击的准备,准备在近期正式推送Android O系统,也就是我们常说的安卓8.0.虽然国产手 ...
- 荣耀magicwatch2鸿蒙,小猪搞机的评测 篇二十三:荣耀MagicWatch 2 上那些实用小功能盘点 功能还不是一般的丰富...
小猪搞机的评测 篇二十三:荣耀MagicWatch 2 上那些实用小功能盘点 功能还不是一般的丰富 2019-12-19 19:56:18 4点赞 5收藏 4评论 荣耀MagicWatch 2 上那些 ...
- 苹果iOS 15.5正式版实用小功能盘点 这11个功能你要知道
苹果iOS 15.5正式更新了,而更新了许多新功能,其中就有11个小功能就特别实用,但知道的朋友不是很多,下面就为大家推荐iOS 15.5的11个实用的小功能. 苹果iOS 15.5正式版实用小功能盘 ...
- PingCode 全年上线功能盘点
2020即将完结,回顾过去一年,PingCode从正式发布,到上线全新的子产品.小程序,丰富应用市场,以及上线非常多的重要功能,我们实现了非常大的成长. 下面,我们就从五个方面来为大家进行简单介绍: ...
- 电脑抓整个路由器的包_网络是电竞游戏体验的命脉 2018年年度电竞路由器功能盘点...
2018年是电竞路由器的元年,从2017年的概念产品诞生开始,电竞路由器很快就确定了品类,随着<绝地求生>.<王者荣耀>等对网络质量敏感的竞技游戏的火爆,电竞路由器迅速被竞技玩 ...
- 10 行 Python 代码能实现哪些有趣功能?
大家好,我是菜鸟哥 Python凭借其简洁的代码,赢得了许多开发者的喜爱.因此也就促使了更多开发者用Python开发新的模块,从而形成良性循环,Python可以凭借更加简短的代码实现许多有趣的操作.下 ...
- 微信大改版,不止炸群、放烟花,这些有趣功能你也需要了解下
微信从1.0版本发布到现在已走过10周年年,在1月21日,微信发布8.0版本,推出了很多有趣的功能,一起来看看吧! 微信表情互动性更强 在微信8.0中,微信表情被设计的互动性更强,所有的黄脸表情都有简 ...
最新文章
- Linux之查看组操作
- backbonejs中的模型篇(三)
- (七)Amazon Lightsail 部署LAMP应用程序之清除已安装服务
- 使用Gradle消除开发重新部署
- UITextView: 响应键盘的 return 事件(收回键盘)
- Vue + Spring Boot 学习笔记02:引入数据库实现用户登录功能
- 模拟手机浏览器_简易数据分析 03 | 浏览器中那些不为人知的使用技巧
- 真好玩python教孩子学编程_Python真好玩:教孩子学编程(全彩印刷))简介,目录书摘...
- OneData指标体系
- 拼写的能力和重要性英语作文_拼写很重要吗? 我认为是的。
- 5.项目上线流程管理规范
- 深度linux15.4安装教程,国产操作系统深度Deepin15.5安装过程体验!
- ps怎么做油漆喷溅画效果
- Python 内置函数dir()与对象的特殊属性以及一切都是对象的轻谈
- Kafka SASL 安全认证
- AWS助力海信集团智慧家居全球化运营
- Python之ffmpeg:利用python编程基于ffmpeg将m4a格式音频文件转为mp3格式文件
- [Alpha阶段]第十次Scrum Meeting
- kotlin 使用ButterKnife
- 如何采集需要验证码登录的网站数据
热门文章
- 【日常记录】接入短信发送功能,为实现完整的注册功能做准备
- UCB cs186 数据库 setup
- 【FBS外汇公司】通胀数据降低,美联储量化宽松预期升温
- 通过appId和appSecret生成accessToken访问api后端接口(接口授权)
- Lattice-free MMI
- Android 播放系统提示音
- 【电脑】C盘爆满|如何清理C盘|开启Win10自动清理垃圾功能|清理c盘垃圾文件
- Java并发39:Executor系列--ScheduleExecutorService接口学习笔记
- 怎样运营头条自媒体?学会这几招就行
- 发现一个可以快速拿到博士的学校:首尔科学综合大学院大学PHD