本文共 4246 字，大约阅读时间需要 14 分钟。

想要实现这个效果其实非常难~~hhh

首先需要改我们已经写好的 view 文件夹下的layout.jade 文件 – 就是引用一大堆库，这些库都存放在 public 文件夹下，供其引用

doctype htmlhtml(lang='en')    head        meta(charset='UTF-8')        meta(name='viewport', content='width=device-width')        title= title        block css            link(rel='stylesheet', href='/components/bootstrap/dist/css/bootstrap.css')            link(rel="stylesheet",type="text/css",href="assets/waifu.min.css?v=1.4.2")    body        block main        block js            script(src='/components/jquery/dist/jquery.js')            script(src='/components/bootstrap/dist/js/bootstrap.js')            //- waifu-tips.js 依赖 JQuery 库            script(src='assets/jquery.min.js?v=3.3.1')            //- 实现拖动效果，需引入 JQuery UI            script(src="assets/jquery-ui.min.js?v=1.12.1")            script(src="assets/waifu-tips.min.js?v=1.4.2")            script(src="assets/live2d.min.js?v=1.0.5")            script(src="js/live2d.js")        if ENV_DEVELOPMENT            script(src='http://localhost:35729/livereload.js')        block scripts

然后再改写 view/blog 文件夹下的 layout.jade 文件 – 就是把HTML代码改写成jade格式的代码

extends ../layoutappend css    link(rel='stylesheet', href='/components/font-awesome/css/font-awesome.css')    link(rel='stylesheet', href='/css/blog.css')block main    block header        div.mask        .blog-masthead            .container                nav.blog-nav.pull-left                    if pageName === '/posts'                        a.blog-nav-item.active(href="/")  首页                    else                        a.blog-nav-item(href="/")  首页                    if pageName === '/about'                        a.blog-nav-item.active(href="/about") 关于                    else                        a.blog-nav-item(href="/about") 关于                    if pageName === '/contact'                        a.blog-nav-item.active(href="/contact") 联系                    else                        a.blog-nav-item(href="/contact") 联系                form.navbar-form.pull-right(method="get", action="/posts/")                    input.form-control(type="text", name="keyword", placeholder="搜索...")    .container        .row            .col-sm-8.blog-main                != messages()                block content            .col-sm-3.col-sm-offset-1.blog-sidebar                .sidebar-module                    h4 文章分类                    ol.list-unstyled                        each category in categories                            li                                a(href="/posts/category/" + category.name, target="_blank")                                    = category.name                .sidebar-module                    h4 友情链接                    ol.list-unstyled                        li                            a(href="#") GitHub                        li                            a(href="#") Twitter                        li                            a(href="#") Facebook    block footer        div.waifu            div.waifu-tips            canvas#live2d.live2d            div.waifu-tool                span.fui-home                span.fui-chat                span.fui-eye                span.fui-user                span.fui-photo                span.fui-info-circle                span.fui-cross                footer.blog-footer            p NodeBlog by wangshijun@maiziedu.com            p                a(href="#") 回到顶部                                    a(href="/admin/users/login") 用户登录                                    a(href="/admin/users/register") 用户注册

最后在 public/js 下新建一个js文件 live2d.js 即可

/* 可直接修改部分参数 */live2d_settings["modelId"] = 1; // 默认模型 IDlive2d_settings["modelTexturesId"] = 87; // 默认材质 IDlive2d_settings["modelStorage"] = false; // 不储存模型 IDlive2d_settings["canCloseLive2d"] = false; // 隐藏 关闭看板娘 按钮live2d_settings["canTurnToHomePage"] = false; // 隐藏 返回首页 按钮live2d_settings["waifuSize"] = "600x535"; // 看板娘大小live2d_settings["waifuTipsSize"] = "570x150"; // 提示框大小live2d_settings["waifuFontSize"] = "30px"; // 提示框字体live2d_settings["waifuToolFont"] = "36px"; // 工具栏字体live2d_settings["waifuToolLine"] = "50px"; // 工具栏行高live2d_settings["waifuToolTop"] = "-60px"; // 工具栏顶部边距live2d_settings["waifuDraggable"] = "axis-x"; // 拖拽样式/* 在 initModel 前添加 */initModel("assets/waifu-tips.json?v=1.4.2");

转载地址：http://ecclf.baihongyu.com/