mayx/pages
1
0
Fork 0
mirror of https://codeberg.org/mayx/pages synced 2026-02-16 03:04:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Mayx
2026-02-11 09:55:06 +00:00
commit da4b7c19bf
313 changed files with 93710 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
Live2dHistoire/index.html Normal file
View File

@@ -0,0 +1,246 @@
<!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=1770803700" />
<!--[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("Wed, 11 Feb 2026 17:55:00 +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-02-11 17:55:00<br /> 总字数：617672 - 文章数：179 - <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>