mayx/pages
1
0
Fork 0
mirror of https://codeberg.org/mayx/pages synced 2026-02-15 21:14:50 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
89e46030e4a313f934f245793a167fd0ec32ee7a
pages/Live2dHistoire/index.html
Mayx 89e46030e4 update
2026-01-17 09:36:00 +00:00

247 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Live2d的看板娘——伊斯特瓦尔(Histoire) | Mayx的博客</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="Live2d的看板娘——伊斯特瓦尔(Histoire)" />
<meta name="author" content="mayx" />
<meta property="og:locale" content="zh_CN" />
<meta name="description" content="Mayx’s Home Page" />
<meta property="og:description" content="Mayx’s Home Page" />
<meta property="og:site_name" content="Mayx的博客" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Live2d的看板娘——伊斯特瓦尔(Histoire)" />
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
<meta name="yandex-verification" content="fc0e535abed800be" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"mayx"},"description":"Mayx’s Home Page","headline":"Live2d的看板娘——伊斯特瓦尔(Histoire)","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/Live2dHistoire/"}</script>
<!-- End Jekyll SEO tag -->
<link rel="canonical" href="https://mabbs.github.io/Live2dHistoire/" />
<link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
<link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
<link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
<link rel="stylesheet" href="/assets/css/style.css?v=1768642553" />
<!--[if !IE]> -->
<link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
<!-- <![endif]-->
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
<link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
<link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
<link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
<link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
<link rel="blogroll" type="text/xml" href="/blogroll.opml" />
<link rel="me" href="https://github.com/Mabbs" />
<script src="/assets/js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
var lastUpdated = new Date("Sat, 17 Jan 2026 17:35:53 +0800");
var BlogAPI = "https://summary.mayx.eu.org";
</script>
<script src="/assets/js/main.js"></script>
<!--[if !IE]> -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137710294-1');
</script>
<script src="/assets/js/instant.page.js" type="module"></script>
<!-- <![endif]-->
</head>
<body>
<!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
<!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee><![endif]-->
<div class="wrapper">
<header class="h-card">
<h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>
<img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
<p class="p-note">Mayx's Home Page</p>
<form action="/search.html">
<input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." />&#160;<input type="submit" value="搜索" />
</form>
<br />
<p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>
<ul class="downloads">
<li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
</ul>
</header>
<section>
<h1 id="live2d的看板娘伊斯特瓦尔histoire">Live2d的看板娘——伊斯特瓦尔(Histoire)</h1>
<p><a href="https://github.com/eeg1412/Live2dHistoire">Original Repo</a></p>
<h4 id="可用于网页端显示live2d版的伊斯特瓦尔histoire-emlog插件版可以看这里传送门">可用于网页端显示Live2D版的伊斯特瓦尔(Histoire) emlog插件版可以看这里：<a href="https://www.wikimoe.com/?post=75">传送门</a></h4>
<h4 id="基于给博客添加能动的看板娘live2d-将其添加到网页上吧上的源码进行修改">基于<a href="https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02">《给博客添加能动的看板娘(Live2D)-将其添加到网页上吧》</a>上的源码进行修改。</h4>
<h4 id="在原先的基础上加上了如下功能">在原先的基础上加上了如下功能：</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1.可以基于图灵机器人的聊天功能（需要自己写接口，默认隐藏）。
2.能够随意移动并记录位置（关闭浏览器后失效）。
3.能够随意唤醒或者关闭并记录状态。
4.自动判断浏览器是否为IE或者手机浏览器，如果判断为true则不加载伊斯。
5.给骚扰伊斯加了限制频率，不能狂骚扰伊斯了。
</code></pre></div></div>
<h3 id="准备工作">准备工作</h3>
<p>首先到下载代码。</p>
<p>然后把解压出来的文件夹改名为：live2d 。</p>
<h3 id="正式开工文字部分参考自在-web-上展示-live2d-吧">正式开工，文字部分参考自<a href="https://github.com/galnetwen/Live2D">在 Web 上展示 Live2D 吧！</a></h3>
<p>在需要页面的头部文件（header）引入界面样式，在 head 标签内插入如下代码：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"/live2d/css/live2d.css"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>
<p>在 需要页面的body 标签内找到合适的位置插入 Live2D 看板娘的元素，按照 Html 书写规范写</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"landlord"</span> <span class="na">style=</span><span class="s">"left:5px;bottom:0px;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"message"</span> <span class="na">style=</span><span class="s">"opacity:0"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">"live2d"</span> <span class="na">width=</span><span class="s">"500"</span> <span class="na">height=</span><span class="s">"560"</span> <span class="na">class=</span><span class="s">"live2d"</span><span class="nt">&gt;&lt;/canvas&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_talk_input_body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_talk_input_name_body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"live_talk_name white_input"</span> <span class="na">id=</span><span class="s">"AIuserName"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">placeholder=</span><span class="s">"你的名字"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_talk_input_text_body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"talk"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"live_talk_talk white_input"</span> <span class="na">id=</span><span class="s">"AIuserText"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">placeholder=</span><span class="s">"要和我聊什么呀？"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"live_talk_send_btn"</span> <span class="na">id=</span><span class="s">"talk_send"</span><span class="nt">&gt;</span>发送<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"live_talk"</span> <span class="na">id=</span><span class="s">"live_talk"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_box"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_item type_info"</span> <span class="na">id=</span><span class="s">"showInfoBtn"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_item type_talk"</span> <span class="na">id=</span><span class="s">"showTalkBtn"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_item type_music"</span> <span class="na">id=</span><span class="s">"musicButton"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_item type_youdu"</span> <span class="na">id=</span><span class="s">"youduButton"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"live_ico_item type_quit"</span> <span class="na">id=</span><span class="s">"hideButton"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"live_statu_val"</span> <span class="na">id=</span><span class="s">"live_statu_val"</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;audio</span> <span class="na">src=</span><span class="s">""</span> <span class="na">style=</span><span class="s">"display:none;"</span> <span class="na">id=</span><span class="s">"live2d_bgm"</span> <span class="na">data-bgm=</span><span class="s">"0"</span> <span class="na">preload=</span><span class="s">"none"</span><span class="nt">&gt;&lt;/audio&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"live2dBGM"</span> <span class="na">value=</span><span class="s">"音乐地址"</span> <span class="na">type=</span><span class="s">"hidden"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"duType"</span> <span class="na">value=</span><span class="s">"douqilai,l2d_caihong"</span> <span class="na">type=</span><span class="s">"hidden"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"open_live2d"</span><span class="nt">&gt;</span>召唤伊斯特瓦尔<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>
<p>如果需要BGM支持可以按照上面的例子添加：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"live2dBGM"</span> <span class="na">value=</span><span class="s">"音乐地址"</span> <span class="na">type=</span><span class="s">"hidden"</span><span class="nt">&gt;</span>
</code></pre></div></div>
<p>在 需要页面的 body 标签结束前插入如下代码：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="kd">var</span> <span class="nx">message_Path</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">/live2d/</span><span class="dl">'</span><span class="p">;</span><span class="c1">//资源目录，如果目录不对请更改</span>
<span class="kd">var</span> <span class="nx">talkAPI</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span><span class="c1">//如果有类似图灵机器人的聊天接口请填写接口路径</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"live2d/js/live2d.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"live2d/js/message.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>
<p>鼠标放在页面某个元素上时，需要 Live2D 看板娘提示的请修改 message.json 文件。</p>
<p><strong>示例：</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"mouseover": [
{
"selector": ".title a", //此处修改为你页面元素的标签名
"text": ["要看看 {text} 么？"] //此处修改为你需要提示的文字
},
{
"selector": "#searchbox",
"text": ["在找什么东西呢，需要帮忙吗？"]
}
],
"click": [ //此处是 Live2D 看板娘的触摸事件提示
{
"selector": "#landlord #live2d",
"text": ["不要动手动脚的！快把手拿开~~", "真…真的是不知羞耻！","Hentai！", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
}
]
}
</code></pre></div></div>
<p>然后，刷新你的页面，看看效果吧！</p>
<p>注意路径别弄错了噢 ~<br />
PHP 程序推荐使用主题函数获取绝对路径。</p>
<h3 id="模型说明">模型说明</h3>
<p>本插件仅供学习和交流使用，禁止用于商业用途。
本插件用到的模型为《超次元游戏海王星》系列中的伊斯特瓦尔，动作表情则是取自Live2d官网的demo，故版权归各官方所有。
原项目使用了 GPL v2 开源协议。</p>
</section>
<!--[if !IE]> -->
<div id="landlord" style="left:5px;bottom:0px;">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="500" height="560" class="live2d"></canvas>
<div class="live_talk_input_body">
<form id="live_talk_input_form">
<div class="live_talk_input_name_body" style="display:none;">
<input type="checkbox" id="load_this" />
<input type="hidden" id="post_id" value="/Live2dHistoire/" />
<label for="load_this">
<span style="font-size: 11px; color: #fff;">&#160;想问这篇文章</span>
</label>
</div>
<div class="live_talk_input_text_body">
<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？" />
<button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
</div>
</form>
</div>
<input name="live_talk" id="live_talk" value="1" type="hidden" />
<div class="live_ico_box" style="display:none;">
<div class="live_ico_item type_info" id="showInfoBtn"></div>
<div class="live_ico_item type_talk" id="showTalkBtn"></div>
<div class="live_ico_item type_music" id="musicButton"></div>
<div class="live_ico_item type_youdu" id="youduButton"></div>
<div class="live_ico_item type_quit" id="hideButton"></div>
<input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
<audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
<input id="duType" value="douqilai" type="hidden" />
</div>
</div>
<div id="open_live2d">召唤伊斯特瓦尔</div>
<!-- <![endif]-->
<footer>
<p>
<small>Made with ❤ by Mayx<br />Last updated at 2026-01-17 17:35:53<br /> 总字数：614622 - 文章数：178 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
</p>
</footer>
</div>
<script src="/assets/js/scale.fix.js"></script>
<!--[if !IE]> -->
<script src="/assets/js/main_new.js"></script>
<script src="/Live2dHistoire/live2d/js/live2d.js"></script>
<script src="/Live2dHistoire/live2d/js/message.js"></script>
<!-- <![endif]-->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink