Hexo折腾之添加 - 评论打赏、动态玩偶、点击红心、网易云音乐、分享功能、崩溃欺骗

   日期:2024-12-26    作者:kuehz 移动:http://ljhr2012.riyuangf.com/mobile/quote/50843.html

为自己的博客添加以下功能

Hexo折腾之添加 - 评论打赏、动态玩偶、点击红心、网易云音乐、分享功能、崩溃欺骗

  • 评论、打赏
  • 动态玩偶
  • 点击红心
  • 网易云音乐
  • 分享功能
  • 崩溃欺骗

美化自己的博客,给博客添加评论、打赏、玩偶、红心、分享以及网易云音乐功能,让博客变得精彩,让生活变得精彩。

hexo 支持很多外部评论插件:

  • HyperComments: https://www.hypercomments.com (来自俄罗斯的评论系统,使用谷歌账号注册。有墙,有时不太方便
  • 来必力: https://livere.com (来自韩国,使用邮箱注册
  • 畅言: http://changyan.kuaizhan.com (安装需要备案号,不太好用
  • Gitment: https://github.com/imsun/gitment (据说有些小 bug,比如说每次需要手动初始化,登录时会跳到主页
  • Valine: https://github.com/xCss/Valine (基于 Leancloud 的极简风评论系统

我选用了 来必力,因为 NexT 官方文档 中这个比较简单。

第一步:注册账号

在来必力官网https://www.livere.com 注册账号。

第二步:安装

点击最上方的安装,选择 City 免费版本。

点击现在安装。出现如下界面

选中 uid 并复制。

第三步:配置

打开主题配置文件 _config.yml,定位到 livere_uid 字段,粘贴上刚刚复制的 UID。完成。

基本

打赏功能,不需要太复杂花哨的功能的话,就直接在配置文件中写入图片就好。

 

扩展版本

自己创建 swig 文件,以及 css 文件。

如下步骤: 1.在/themes/random/source/css 新建 donate.css

 

2.在 themes/random/layout/includes 下新建 donate.swig

 

3.在 post.swig 合适位置中添加(想在那个页面放都可以),不知道放那的话,在后添加

 

4.打开主题配置文件_config.yml,在里面最后写下

 
 

第一步:获取插件

npm install --save hexo-helper-live2d

步骤二:选择自己喜欢的萌妹子

可以到 github 中查看,选择喜欢的妹子造型

 

例如我选择: live2d-widget-model-wanko

步骤三:安装

 

在主题配置文件 _config.yml 下配置

 

然而我试了,这个 plug 现在还不是很稳定,配置很多不生效。
比如我把配置文件放在系统配置,我的玩偶就变成狗狗了。

类似页面崩溃欺骗,利用 js 实现即可。

在/themes/next/source/js/src 下新建文件 clicklove.js ,接着把如下代码粘贴到 clicklove.js 文件中。

 

在/themes/next/layout/_layout.swig 文件末尾添加

 
 

生成外链

登陆网易云音乐 http://music.163.com 搜索自己喜欢的音乐,然后点击生成外链

外链内容如下

放置外链

复制 HTML 代码部分放入自己想要放入的页面位置即可。

我这里放入了 layout/_macro/sidebar.swig 中。

 

位置自己调整一下就好啦,最终效果图如下

百度分享

hexo 已经集成了 baidushare,只需要在主题配置文件中打开配置即可
在配置百度分享功能时需指定其 type,type 可以为 button 活着 slide

 

有一点需要特别注意,baidushare 不支持 https。所以我们需要手动解决这个问题。解决方法就是把这个文件放在我们自己的目录下。

解决 https 分享

访问链接:static 文件夹

将压缩包下载到本地,解压后,将 static 文件夹保存至博客项目 themes/next/source 目录下。

修改百度分享模板

打开 themes/next/layout_partials/share/baidushare.swig,修改 末尾 代码

 

改为

 

最后重新生成下,就能展示分享功能了。

偶然看到崩溃欺骗是从友链 Water Sister 那里看到的,觉得这个页面好好玩,就想搞一个一样的。

想法还是可以有的,检测页面是否被隐藏,然后修改 document.title 的值就好,但是!重要是但是,不是借口哈,实在是没摸清楚 Hexo 的结构,我想着说,你不能二话不说直接程序怼人家 js 里面吧。太过分了那就。

于是乎我去 Water Sister 的 Github 上 emmm 表示直接搜索,诶。。好像还真的是怼 js 里面了。

然后陷入了沉思。。。果然最开始想到的就是最直观的。

然后看到一个大神的页面也有这个效果 asdfv1929 's Home,于是乎,把他的方法扒下来了。

吼吼吼机智懒惰的我

其实就两个步骤

创建 JS 代码

在 next/source/js/src 文件夹下创建 crash_cheat.js,添加代码

 

引用 JS 代码

在 next/layout_layout.swig 文件中,添加引用:在 swig 末尾添加

 

参考链接
百度分享不支持 Https 的解决方案
Hexo+Github 搭建个人博客(三)——百度分享集成


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号