当博客系统遇上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....
想要实现这个效果其实非常难~~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
上一篇: 你快点啊