先贴出大佬的文章地址,因为这个项目是采用前后端分离的模式,所以分为两部分:前端代码的搭建以及后台API的搭建。当然作者也是贴出了现成的API调用地址,但是我们最好还是自己搭建一个API服务器,因为这样就可以自己修改和添加模型(别人的接口请求量太多了,我们还是体谅一下别人吧)。
好的现在开始教程:
先到作者的github上面下载前端代码
下载好后可以直接放到我们服务器的根目录,接下来我们就可以开始把调用代码嵌入到我们的网页中去。
目前有两种方式:直接嵌入或者调用js代码自动嵌入
先来讲一下直接嵌入,先嵌入如下代码到头部(注意修改waifu.css
的地址):
然后在加入如下代码到尾部(注意:须 jQuery 支持)
当然,我们可以直接自动加载,如果你要自动加载的话,前面两部都不需要做,直接在尾部嵌入如下代码
然后在修改一下autoload.js
,把里面的引用文件改一下路径。然后就可以直接使用了,如果不想搭API服务器的可以先走了,下面我们讲一下怎么搭建API服务器(搭建自己API的好处就是可以自己添加模型还可以节作者服务器的负担):
注意
这里说一下可能遇到的坑1.要使用看板娘我们就必须让我们的网页有jQuery,这里就是直接引入jQuery文件就行了,具体自己到百度上搜
2.如果你选择的是自动引入,我们那个引入时需要修改路径,autoload.js里面的几个文件必须是你自己网站的完整路径(要加上网址的完整路径)。
3.autoload.js里面有一个文件是写错了的,waifu.css这个文件中间没有min,这个要特别注意。
首先先到作者的github上面下载模型切换的API源码
下载好好直接上传到自己服务器的根目录即可,比如我们在自己的根目录下新建一个API的文件夹,API源码就放放在里面。
然后到waifu-tips.js
文件夹里面修改一下,改成自己的API地址
接下来,就可以直接访问自己的网站查看效果了。当然这个文件里面可以修改自己看板娘的大小。
注意:你需要先清除浏览器的数据,然后才能看到。
还有,这里在写文件路径的时候最好加上自己的网址,单纯使用相对路径好像没用。(可能是我相对路径引用错了吧。)当然如果你想调节看板娘的大小的话可以修改wifu-tip的那个js文件。
最后给大家看下效果
非特殊说明,本博所有文章均为博主原创。
如若转载,请注明出处:https://hyk416.cn/52
共有 0 条评论