magic.keyboard.魔法(魔术)键盘移植到程门立学

前不久在magic keyboard魔法(魔术)键盘体验各种好玩的花样 这个仅利用键盘玩出各种花样的网站,里面也有提到 “源码可以在GitHub上下载,也已经是3,4年前的代码了,有需要或者感兴趣的话,可以好好学习下,实现本地化。https://github.com/feross/magickeyboard.io”,也把源码保存下来了。这两天周末也有点空闲时间,看了下源码,发现还是在理解的范围内,没有超纲。于是稍微折腾了下,放到了页面:magickeyboard – 程门立学 https://www.iappi.cn/magickeyboard.html上,有兴趣的朋友可以直接点击链接打开看看。

图1.程门立学站的magic keyboard页面演示

因为本身对代码的修改也是比较少了,缺乏相应的的经验,因此,本页面几乎可以说是完全照搬过来的。当然还是根据当前的环境做了相应的调整:

  • 对html 中代码的修改:

因为本身WordPress是有固定的文章页等格式的,因此将原来index.html中的代码移植到WordPress中页面,插入为HTML代码块。并设定为仅内容,无左右边栏,禁用了导航栏、页脚工具、页脚栏、设置页面为完全宽度,使得该页面为全屏显示,无其余的栏目、块。并修正相应的路径及js、css文件的引用。当然某些css、统计代码等是针对全站的,这里就没有再费周章消除掉。

HTML的代码修正如下,去掉了一些无用的代码:

<link rel="stylesheet" href="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/main.css" charset="utf-8">
<div class="credit">
<a target='_blank' href="//www.iappi.cn">随便看点别的</a>
</div>
<div class="help">输入点什么,你说呢<span class="blink"></span></div>
<div class="content"></div>
<audio id="type" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/type.mp3">
<audio id="type-drip" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/type-drip.mp3">
audio id="rain" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/rain.mp3">
audio id="spin" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/spin.mp3">
<audio id="trololo" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/trololo.mp3">
<audio id="hexbin" src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/hexbin.mp3">
<script src="//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/bundle.js"></script>
  • 对js 中代码的修改:

bundle.js主要涉及到的是两行,为img图片位置的代码,同样修正为绝对位置:

texture: semiMode ? '/img/;.png' : getImagePath(key) 
return '/img/' + key + '.png'

/img/的位置替换为//www.iappi.cn/wp-content/uploads/2019/06/magic.keyboard/img/

  • 对相应图片、mp3等路径的调整:

上传相应的字母、数字PNG图片及背景音到uploads/2019/06/magic.keyboard/文件夹下 。因此前面index.html、bundle.js 两个文件主要也是修改了路径。当然,可以直接把相应的文件扔到根目录下面,这样就无需修改路径了。但是还是习惯根目录比较无相关文件比较好,毕竟根目录扔的文件越多,后期要整理就越麻烦。就看上去文件都认识,却不知道什么时候扔进来,为什么扔进来了。

图2.一样的配方,一样的效果

如上便是“搬运”、本地化的过程,作为一个简单记录下来。