先前在某个Q群里有位网友发了个链接，一点进去，发现是个极度让人耳目一新的初音未来音乐网页游戏。为了让有幸看到这篇文章的看官也来体会下本人第一次玩时的激动，抛个链接——乐柔嘴巴。链接的具体地址是blog.eunji.cn/music/music.html。尽管这个页面实在让人上瘾，但是自己同样是个喜欢折腾博客网站的家伙，而这位仁兄是在一个博客网站下放的这个网页。自己就开始思量，可不可以在自己的的博客下www.lesliewong.cn也放个这样的游戏呢？这也很彰显自己的品格<(￣︶￣)>

于是自己也就开始开展A计划了。。。

A计划：无耻地直接盗链

鉴于乐柔嘴巴的链接就是一个静态地址，盗链真的是直接就手到擒来、屡试不爽的了。

将自己的博客主页上的“相册”字段对应的链接改成https://blog.eunji.cn/music/m...。

<a href="https://blog.eunji.cn/music/music.html">相册</a>

效果如下：

看！访问我的网站www.leslieowng.cn可以玩到如此新颖的游戏——

不过，过了不久，还是觉得有些不爽。自己还是有点控制欲的念头的，为什么自己的博客网站要跳转到人家的博客上去玩初音未来的音乐游戏，自己家里就不能玩吗？说白了——看见这个音乐游戏上头的地址栏的域名不是自己的就真心让人不爽。

不行！我要做到点我博客主页链接的时候仍然跳转到我的域名下——

于是，灵机一动下，有了B计划。

B计划：无耻地反向代理盗链

Nginx服务器具有很强的反向代理功能。通常那些大流量网站都借助Nginx服务器的反向代理功能将访问请求均匀地分配到内网的其他业务服务器进行处理，实现负载均衡功能，业务处理完毕后再通过Nginx服务器返送回去给请求者。

换个方向思考，如果我转发的不是自己内网的业务服务器，而是外网上别人的网站呢？请求者访问我的网站，我将这个请求转发到外网上别人的网站上，然后将他们返回的数据反馈给我的请求者。那么，对于我的请求者而言，他从头到尾都是访问我的网站，而不知道自己收到的数据其实是从另外的网站转发过来的。

在这样的逻辑下，结合这篇文章的指导——《利用Nginx的反向代理克隆生成镜像网站——中间人攻击》。自己也就在自己的一台架设了Nginx的服务器上捣弄了。用<u>music.lesliewong.cn</u>这个域名来转发那位仁兄的网页。配置文件如下：

server {listen       80;server_name  music.lesliewong.cn;root   /webser/www/musiz;index  index.php index.html index.htm;error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}location / {proxy_pass https://blog.eunji.cn/music/music.html;}   location ~ \.php$ {fastcgi_pass   php7-fpm:9000;fastcgi_index  index.php;include        fastcgi_params;fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;}}

然后重启自己的服务器，心想这下该大功告成了吧! 去地址栏里满心欢喜地输入<u>music.lesliewong.cn</u>。然而结果却是——

吖！自己顿时有点摸不着脑袋，然后回去看那篇《利用Nginx的反向代理克隆生成镜像网站——中间人攻击》，最后面作者提示道，“网站全站HTTPS之后，如果网站被克隆了，里面的域名被替换，那么将会因为域名与预期不符从而导致网站显示异常”，也就像上面的炮灰例子一样。自己代理的是一个https的页面，是搞不了Nginx反向代理中间人攻击的。。。话说这也让自己更理解到——Nginx反向代理用的最多的地方还是内网负载均衡，因为内网大都是用http来转发吧？！

自己折腾了这么久，得到的却是这样一个结果，是有几分泄气的。难道就没有办法了吗？难不成自己要一砖一瓦地仿照着写个这样的页面，那有多么可怕啊！难道就没有源码吗？自己可以直接拿来用——

接着，C计划开始筹划。。。

C计划：原作者源码魔改

自己发现在发这个乐柔嘴巴的Q群里有位网友还另外发了个同样的实例网站http://miku.iysheng.com/。界面如下：

现在总算找到了原作者了，原来是彩虹猫歌曲的作者写的，浏览了下他的网站，发现他还弄了好多很有趣的东西——（内心忽然鄙视自己这种可恶的伸手党）

另外，自己也把失败折腾过程和Q友执着的少年谈了谈，汗颜的是，没过不久他就把github上的开源镜像给我找到了（好吧，自己当时没想到去github搜一搜）链接如下：

https://github.com/HFIProgram...

自己真的是喜出望外，立马把上面的代码都给fork了下来。然而，使用这些源码发现，出来的效果是这样地。。。

而不是我想要的上面乐柔嘴巴的样子——

不过，既然自己都有了源码，照着人家乐柔嘴巴的样子依葫芦画瓢也就不是什么难事了。自己把源码研究了下，偷梁换柱一番终于实现了自己希冀的效果，配置前后对比如下：

github源码的index文件：

<!-- index.html --><!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"><meta name="description" content="初音未来版本的通过点击/触摸播放声音并出现变化图案的互动内容。"><title>Mikutap</title><link rel="apple-touch-icon" href="icon.png"><link href="https://fonts.loli.net/css?family=Quicksand:400" rel="stylesheet"><link charset="UTF-8" href="shared/sp/css/common.css" rel="stylesheet"><link charset="utf-8" href="css/mikutap.css" rel="stylesheet"><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script><script charset="UTF-8" src="shared/js/common-2.min.js" type="text/javascript"></script><script charset="utf-8" src="js/mikutap.min.js" type="text/javascript"></script></head><body><div id="view"></div><div id="scene_top"><h1>Mikutap</h1><div id="ng"><p class="atten">十分抱歉<br>您的浏览器并不支持本页面需要的特性</p></div><div class="ok"><p id="bt_start"><a href="">!开始!</a></p></div><p id="bt_about"><a href="">*关于*</a></p><div class="ok"><p class="attention">※请打开声音并享受。</p></div><div class="ok"><p class="tit"><strong>注意！搬运内容，原页面(Origin Site): <a href="https://aidn.jp/mikutap">https://aidn.jp/mikutap</a></strong></p></div></div><div id="scene_loading"><hr size="1" color="#fff"> </div><div id="scene_main"><div class="set"><p class="attention">点击 &amp; 拖动或者按任意键!</p><p id="bt_backtrack"><a href="">背景音乐: 开启</a></p></div></div><div id="about_cover"></div><div id="about"><div id="about_in"><p class="close"><span id="bt_close">×</span></p><p class="con"> 声音来源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p><p class="con"> 作者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p><p class="link"> 灵感来源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(令人赞叹的网页!)</p></div></div><div id="bt_back">＜返回</div><div id="bt_fs">□全屏显示</div></body></html>

自己魔改后的music.html文件：

<!-- music.html --><!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"><meta name="description" content="初音未来版本的通过点击/触摸播放声音并出现变化图案的互动内容。"><title>MUSIC - 马树菌的博客驿站</title><link rel="apple-touch-icon" href="icon.png"><link href="https://fonts.loli.net/css?family=Quicksand:400" rel="stylesheet"><link charset="UTF-8" href="shared/sp/css/common.css" rel="stylesheet"><link charset="utf-8" href="css/mikutap.css" rel="stylesheet"><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/pixi.js/3.0.11/pixi.min.js" type="text/javascript"></script><script charset="utf-8" src="https://cdnjs.loli.net/ajax/libs/gsap/1.19.1/TweenMax.min.js" type="text/javascript"></script><script charset="UTF-8" src="shared/js/common-2.min.js" type="text/javascript"></script><script charset="utf-8" src="js/mikutap.min.js" type="text/javascript"></script></head><body><div id="view"></div><div id="scene_top"><h1>MUSIC</h1><div id="ng"><p class="atten" style="font-weight: bold;">十分抱歉<br>您的浏览器并不支持本页面面需要的特性</p></div><div class="ok"><p id="bt_start"><a href="" style="font-weight: bold;">!开始!</a></p></div><!-- <p id="bt_about"><a href="">*关于*</a></p> --><div class="ok"><p style="padding-top: 10px;font-weight: bold;">乐柔要唱歌啦</p><p class="attention" style="font-weight: bold;">※请打开声音并享受。</p></div><!--    <div class="ok"><p class="tit"><strong>注意！搬运内容，原页面(Origin Site): <a href="https://aidn.jp/mikutap">https://aidn.jp/mikutap</a></strong></p></div> --></div><div id="scene_loading"><hr size="1" color="#fff"> </div><div id="scene_main"><div class="set"><p class="attention" style="font-weight: bold;">点击 &amp; 拖动或者按任意键!</p><p id="bt_backtrack" style="font-weight: bold;"><a href="">乐柔的嘴巴: 开启</a></p></div></div><!-- <div id="about_cover"></div><div id="about"><div id="about_in"><p class="close"><span id="bt_close">×</span></p><p class="con"> 声音来源 <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x" target="_blank">Hatsune Miku</a> </p><p class="con"> 作者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p><p class="link"> 灵感来源 <a href="http://patatap.com/" target="_blank">Patatap</a><br>(令人赞叹的网页!)</p></div></div> --><div id="bt_back" style="font-weight: bold;">＜返回</div><div id="bt_fs" style="font-weight: bold;">☒全屏显示</div></body></html>

具体说来后者的区别就是注释掉了不少内容，换了下一些用词——但，奏效就行(￣▽￣)ブ

（另外，相应的JS文件也进行同样偷梁换柱的操作）

接着就把这一摞子的源码都放在了自己的hexo博客后台一个命名为MUISIC的文件夹里，并把自己博客主页的“相册”字段改为“音乐”字段且映射到MUSIC文件夹里，最终再git到自己在github上的博客代码仓库。

(^__^) 嘻嘻……

大功告成！C计划完美实现——

参考文献：

乐柔嘴巴

Nginx 反向代理学习及实例笔记

利用Nginx的反向代理克隆生成镜像网站——中间人攻击

原作者daniwell的mikutap原始游戏页面

github上国人搬运的mikutap开源镜像

特别致谢：

执着的少年

给自己的博客网站加上酷炫的初音未来音乐游戏？相关推荐

谁不想拥有自己的博客网站？
# 拥有个人博客网站的好处想发啥发啥,不怕被审核掉网站风格自己改造,想怎么炫酷就怎么炫酷有幸做大后还可以可以承接广告拥有属于自己的一片小天地 - 下面我们就一起来看看怎么搭建一个博客网站,这里 ...
Hexo搭建个人博客网站
文章目录 0.首先介绍一下hexo是怎么搭建的博客? 一.搭建但是我在这里遇到了两个问题 1.命令行报错:YAMLException: can not read a block mapping en ...
使用Hugo搭建自己的个人博客网站
一.使用Hugo(基于Go语言的博客框架)搭建个人博客网站 1.Windows 64位系统下安装Hugo a.Hugo框架下载地址,找到hugo_0.55.4_Windows-64bit.zip文件进 ...
Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅
2019独角兽企业重金招聘Python工程师标准>>> 通过 Docker 化一个博客网站来开启我们的 Docker 之旅这篇文章包含 Docker 的基本概念,以及如何通过创建一 ...
html编写个人博客_Django 开发简易博客网站
本篇使用 Django 开发博客网站的核心内容,涉及 Django .MySQL .WampServer :我比较喜欢 Django 框架的 MVC (模型.视图.控制器)的软件设计模式,其中我最喜欢 ...
关于选择博客网站的一点看法
2007年4月1日,今天终于找到自己满意的博客网站了,先是在<博客网>(www.bokee.com)上申请了一个博客,使用了一天,发现该网站是用JSP技术编写的,也许使用的人太多,再加上网 ...
网站不大但加载很慢怎么优化_博客网站首页加载优化
Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用,其他就是对接口优化等 1. ve ...
jav简单的个人博客网站代码_每个人都可以拥有的个人博客网站
题记 ------去过的地方越多,越知道自己想回到什么地方去! 雨又下了一夜,曾经多少次觉得下雨天是最适合睡觉的天气.而最近的雨,总感觉有些嘈杂,总怕吵醒远方睡梦中的星,晨.以至于翻来覆去睡不着.但是 ...
如何从零搭建一个hexo博客网站02
title: 如何从零搭建一个hexo博客网站02 categories: "Hexo教程" #文章分類目錄可以省略简介:此教程分为两部分,云服务器篇和本地pc机篇 tags: ...

给自己的博客网站加上酷炫的初音未来音乐游戏？