Hexo折腾之添加 |
您所在的位置：网站首页 › 网易云创建博客在哪设置 › Hexo折腾之添加 |
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。完成。 打赏功能 基本打赏功能，不需要太复杂花哨的功能的话，就直接在配置文件中写入图片就好。 # Reward reward_comment: 如果您读文章后有收获，可以打赏我喝咖啡哦～ wechatpay: /images/wechat.png alipay: /images/alipay.png 扩展版本自己创建 swig 文件，以及 css 文件。 如下步骤： 1.在/themes/random/source/css 新建 donate.css .donate_bar { text-align: center; margin-top: 5%; } .donate_bar a.btn_donate { display: inline-block; width: 82px; height: 82px; margin-left: auto; margin-right: auto; background: url(img.gif) no-repeat; -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s; } .donate_bar a.btn_donate:hover { background-position: 0 -82px; } .donate_bar .donate_txt { display: block; color: #9d9d9d; font: 14px/2 "Microsoft Yahei"; } .donate_bar.hidden { display: none; } .post-donate { margin-top: 45px; } #donate_guide { height: 310px; width: 500px; margin: 0 auto; } #donate_guide img { height: 350px; height: 350px; }2.在 themes/random/layout/includes 下新建 donate.swig ↑ 喜欢文章就打赏一包辣条吧！
document.getElementById('btn_donate').onclick = function(){
$('#donate_board').addClass('hidden');
$('#donate_guide').removeClass('hidden');
}
3.在 post.swig 合适位置中添加(想在那个页面放都可以)，不知道放那的话，在后添加 {% if theme.donate %} {% include 'includes/donate.swig' %} {% endif %}4.打开主题配置文件_config.yml，在里面最后写下： #是否开启打赏功能 donate: true 玩偶功能 第一步：获取插件npm install --save hexo-helper-live2d 步骤二：选择自己喜欢的萌妹子可以到 github 中查看，选择喜欢的妹子造型 live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haruto live2d-widget-model-hibiki live2d-widget-model-hijiki live2d-widget-model-izumi live2d-widget-model-koharu live2d-widget-model-miku live2d-widget-model-ni-j live2d-widget-model-nico live2d-widget-model-nietzsche live2d-widget-model-nipsilon live2d-widget-model-nito live2d-widget-model-shizuku live2d-widget-model-tororo live2d-widget-model-tsumiki live2d-widget-model-unitychan live2d-widget-model-wanko live2d-widget-model-z16例如我选择： live2d-widget-model-wanko 步骤三：安装 npm install live2d-widget-model-miku在主题配置文件 _config.yml 下配置 live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-wanko scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: position: right width: 150 height: 300 mobile: show: true scale: 0.5 react: opacityDefault: 0.7 opacityOnHover: 0.2然而我试了，这个 plug 现在还不是很稳定，配置很多不生效。 比如我把配置文件放在系统配置，我的玩偶就变成狗狗了。 红心功能类似页面崩溃欺骗，利用 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 if (document.hidden) { $('[rel="icon"]').attr('href', '/images/favicon-error.png') document.title = '╭(°A°`)╮页面崩溃啦 ~' clearTimeout(titleTime) } else { $('[rel="icon"]').attr('href', '/images/favicon.png') document.title = '(ฅ>ω |
【本文地址】
今日新闻 |
推荐新闻 |