当博客系统遇上live2d后_HTML

在这里插入图片描述

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

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

doctype html
html(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 ../layout

append 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="#") 回到顶部
                &nbsp;&nbsp;&nbsp;&nbsp;
                a(href="/admin/users/login") 用户登录
                &nbsp;&nbsp;&nbsp;&nbsp;
                a(href="/admin/users/register") 用户注册

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

/* 可直接修改部分参数 */
live2d_settings["modelId"] = 1; // 默认模型 ID
live2d_settings["modelTexturesId"] = 87; // 默认材质 ID
live2d_settings["modelStorage"] = false; // 不储存模型 ID
live2d_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");