ブログシステムがlive 2 dに出会ったら
8401 ワード
この効果を実現するのはとても難しいです.
まず、作成した
まず、作成した
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 [email protected]
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");