欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

当博客系统遇上live2d后

程序员文章站 2022-07-07 20:18:43
想要实现这个效果其实非常难~~hhh首先需要改我们已经写好的 view 文件夹下的layout.jade 文件 – 就是引用一大堆库,这些库都存放在 public 文件夹下,供其引用doctype htmlhtml(lang='en') head meta(charset='UTF-8') meta(name='viewport', content='width=device-width') title= title blo....

当博客系统遇上live2d后

想要实现这个效果其实非常难~~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="#") 回到顶部
                    
                a(href="/admin/users/login") 用户登录
                    
                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");

本文地址:https://blog.csdn.net/Cool_breeze_/article/details/107301620