Site updated: 2022-11-15 17:07:24
This commit is contained in:
llbzow
@@ -1,17 +1,233 @@
|
||||
<h1 id="Live2D-Widget"><a href="#Live2D-Widget" class="headerlink" title="Live2D Widget"></a>Live2D Widget</h1><p><img src="https://forthebadge.com/images/badges/built-with-love.svg"><br><img src="https://forthebadge.com/images/badges/uses-html.svg"><br><img src="https://forthebadge.com/images/badges/made-with-javascript.svg"><br><img src="https://forthebadge.com/images/badges/contains-cat-gifs.svg"><br><img src="https://forthebadge.com/images/badges/powered-by-electricity.svg"><br><img src="https://forthebadge.com/images/badges/makes-people-smile.svg"></p>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<script src="/live2d-widget/autoload.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
|
||||
<meta name="theme-color" content="#222">
|
||||
<meta name="generator" content="Hexo 6.2.0">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
|
||||
<link rel="mask-icon" href="/images/logo.svg" color="#222">
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
|
||||
<link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
|
||||
<script src="/lib/pace/pace.min.js"></script>
|
||||
|
||||
<script id="hexo-configurations">
|
||||
var NexT = window.NexT || {};
|
||||
var CONFIG = {"hostname":"example.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
|
||||
</script>
|
||||
|
||||
|
||||
<meta name="description" content="Live2D Widget 特性 Feature在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。Add Live2D widget to web page. Compatible with PJAX. （注：以上人物模型仅供展示之用，本仓库并不包含任何模型。） 你也可以查看示例网页： 在 米米的博客 的左下角可查看效果 demo.html，展现基础功能 login.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="流量不足ow的个人博客">
|
||||
<meta property="og:url" content="http://example.com/live2d-widget/README.html">
|
||||
<meta property="og:site_name" content="流量不足ow的个人博客">
|
||||
<meta property="og:description" content="Live2D Widget 特性 Feature在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。Add Live2D widget to web page. Compatible with PJAX. （注：以上人物模型仅供展示之用，本仓库并不包含任何模型。） 你也可以查看示例网页： 在 米米的博客 的左下角可查看效果 demo.html，展现基础功能 login.html">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/built-with-love.svg">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/uses-html.svg">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/made-with-javascript.svg">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/contains-cat-gifs.svg">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/powered-by-electricity.svg">
|
||||
<meta property="og:image" content="https://forthebadge.com/images/badges/makes-people-smile.svg">
|
||||
<meta property="og:image" content="http://example.com/live2d-widget/assets/screenshot-2.png">
|
||||
<meta property="og:image" content="http://example.com/live2d-widget/assets/screenshot-3.png">
|
||||
<meta property="og:image" content="http://example.com/live2d-widget/assets/screenshot-1.png">
|
||||
<meta property="og:image" content="https://live.browserstack.com/images/opensource/browserstack-logo.svg">
|
||||
<meta property="og:image" content="https://raw.githubusercontent.com/jsdelivr/jsdelivr-media/master/default/svg/jsdelivr-logo-horizontal.svg">
|
||||
<meta property="article:published_time" content="2022-11-07T17:12:32.299Z">
|
||||
<meta property="article:modified_time" content="2022-11-07T16:45:40.960Z">
|
||||
<meta property="article:author" content="llbzow">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://forthebadge.com/images/badges/built-with-love.svg">
|
||||
|
||||
<link rel="canonical" href="http://example.com/live2d-widget/README">
|
||||
|
||||
|
||||
<script id="page-configurations">
|
||||
// https://hexo.io/docs/variables.html
|
||||
CONFIG.page = {
|
||||
sidebar: "",
|
||||
isHome : false,
|
||||
isPost : false,
|
||||
lang : 'zh-CN'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
if ('') {
|
||||
if (prompt('请输入文章密码') !== '') {
|
||||
alert('密码错误！');
|
||||
if (history.length === 1) {
|
||||
location.replace("http://blog.llbzow.tk"); // 这里替换成你的首页
|
||||
} else {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<title> | 流量不足ow的个人博客
|
||||
</title>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
.use-motion .brand,
|
||||
.use-motion .menu-item,
|
||||
.sidebar-inner,
|
||||
.use-motion .post-block,
|
||||
.use-motion .pagination,
|
||||
.use-motion .comments,
|
||||
.use-motion .post-header,
|
||||
.use-motion .post-body,
|
||||
.use-motion .collection-header { opacity: initial; }
|
||||
|
||||
.use-motion .site-title,
|
||||
.use-motion .site-subtitle {
|
||||
opacity: initial;
|
||||
top: initial;
|
||||
}
|
||||
|
||||
.use-motion .logo-line-before i { left: initial; }
|
||||
.use-motion .logo-line-after i { right: initial; }
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebPage">
|
||||
<div class="container use-motion">
|
||||
<div class="headband"></div>
|
||||
|
||||
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
|
||||
<div class="header-inner"><div class="site-brand-container">
|
||||
<div class="site-nav-toggle">
|
||||
<div class="toggle" aria-label="切换导航栏">
|
||||
<span class="toggle-line toggle-line-first"></span>
|
||||
<span class="toggle-line toggle-line-middle"></span>
|
||||
<span class="toggle-line toggle-line-last"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site-meta">
|
||||
|
||||
<a href="/" class="brand" rel="start">
|
||||
<span class="logo-line-before"><i></i></span>
|
||||
<h1 class="site-title">流量不足ow的个人博客</h1>
|
||||
<span class="logo-line-after"><i></i></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="site-nav-right">
|
||||
<div class="toggle popup-trigger">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="site-nav">
|
||||
<ul id="menu" class="main-menu menu">
|
||||
<li class="menu-item menu-item-home">
|
||||
|
||||
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
|
||||
|
||||
</li>
|
||||
<li class="menu-item menu-item-about">
|
||||
|
||||
<a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>
|
||||
|
||||
</li>
|
||||
<li class="menu-item menu-item-tags">
|
||||
|
||||
<a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>
|
||||
|
||||
</li>
|
||||
<li class="menu-item menu-item-categories">
|
||||
|
||||
<a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>
|
||||
|
||||
</li>
|
||||
<li class="menu-item menu-item-archives">
|
||||
|
||||
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="back-to-top">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
<span>0%</span>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<div class="main-inner">
|
||||
<div class="content-wrap">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="content page posts-expand">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="post-block" lang="zh-CN">
|
||||
<header class="post-header">
|
||||
|
||||
<h1 class="post-title" itemprop="name headline">
|
||||
</h1>
|
||||
|
||||
<div class="post-meta">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="post-body">
|
||||
<h1 id="Live2D-Widget"><a href="#Live2D-Widget" class="headerlink" title="Live2D Widget"></a>Live2D Widget</h1><p><img src="https://forthebadge.com/images/badges/built-with-love.svg"><br><img src="https://forthebadge.com/images/badges/uses-html.svg"><br><img src="https://forthebadge.com/images/badges/made-with-javascript.svg"><br><img src="https://forthebadge.com/images/badges/contains-cat-gifs.svg"><br><img src="https://forthebadge.com/images/badges/powered-by-electricity.svg"><br><img src="https://forthebadge.com/images/badges/makes-people-smile.svg"></p>
|
||||
<h2 id="特性-Feature"><a href="#特性-Feature" class="headerlink" title="特性 Feature"></a>特性 Feature</h2><p>在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。<br>Add Live2D widget to web page. Compatible with PJAX.</p>
|
||||
<p><img src="assets/screenshot-2.png" width="280"><img src="assets/screenshot-3.png" width="280"><img src="assets/screenshot-1.png" width="270"></p>
|
||||
<p>（注：以上人物模型仅供展示之用，本仓库并不包含任何模型。）</p>
|
||||
<p>你也可以查看示例网页：</p>
|
||||
<ul>
|
||||
<li>在 <a href="https://zhangshuqiao.org/">米米的博客</a> 的左下角可查看效果</li>
|
||||
<li><a href="https://mi.js.org/live2d-widget/demo/demo.html">demo.html</a>，展现基础功能</li>
|
||||
<li><a href="https://mi.js.org/live2d-widget/demo/login.html">login.html</a>，仿 NPM 的登陆界面</li>
|
||||
<li>在 <a target="_blank" rel="noopener" href="https://zhangshuqiao.org/">米米的博客</a> 的左下角可查看效果</li>
|
||||
<li><a target="_blank" rel="noopener" href="https://mi.js.org/live2d-widget/demo/demo.html">demo.html</a>，展现基础功能</li>
|
||||
<li><a target="_blank" rel="noopener" href="https://mi.js.org/live2d-widget/demo/login.html">login.html</a>，仿 NPM 的登陆界面</li>
|
||||
</ul>
|
||||
<h2 id="使用-Usage"><a href="#使用-Usage" class="headerlink" title="使用 Usage"></a>使用 Usage</h2><p>如果你是小白，或者只需要最基础的功能，那么只用将这一行代码加入 html 页面的 <code>head</code> 或 <code>body</code> 中，即可加载看板娘：</p>
|
||||
<pre><code class="xml"><script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
|
||||
</code></pre>
|
||||
<p>添加代码的位置取决于你的网站的构建方式。例如，如果你使用的是 <a href="https://hexo.io/">Hexo</a>，那么需要在主题的模版文件中添加以上代码。对于用各种模版引擎生成的页面，修改方法类似。<br>如果网站启用了 PJAX，由于看板娘不必每页刷新，需要注意将该脚本放到 PJAX 刷新区域之外。</p>
|
||||
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
|
||||
<p>添加代码的位置取决于你的网站的构建方式。例如，如果你使用的是 <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>，那么需要在主题的模版文件中添加以上代码。对于用各种模版引擎生成的页面，修改方法类似。<br>如果网站启用了 PJAX，由于看板娘不必每页刷新，需要注意将该脚本放到 PJAX 刷新区域之外。</p>
|
||||
<p><strong>但是！我们强烈推荐自己进行配置，让看板娘更加适合你的网站！</strong><br>如果你有兴趣自己折腾的话，请看下面的详细说明。</p>
|
||||
<h2 id="配置-Configuration"><a href="#配置-Configuration" class="headerlink" title="配置 Configuration"></a>配置 Configuration</h2><p>你可以对照 <code>autoload.js</code> 的源码查看可选的配置项目。<code>autoload.js</code> 会自动加载三个文件：<code>waifu.css</code>，<code>live2d.min.js</code> 和 <code>waifu-tips.js</code>。<code>waifu-tips.js</code> 会创建 <code>initWidget</code> 函数，这就是加载看板娘的主函数。<code>initWidget</code> 函数接收一个 Object 类型的参数，作为看板娘的配置。以下是配置选项：</p>
|
||||
<table>
|
||||
@@ -48,7 +264,7 @@
|
||||
<td>加载的小工具按钮，可选参数</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<p>其中，<code>apiPath</code> 和 <code>cdnPath</code> 两个参数设置其中一项即可。<code>apiPath</code> 是后端 API 的 URL，可以自行搭建，并增加模型（需要修改的内容比较多，此处不再赘述），可以参考 <a href="https://github.com/fghrsh/live2d_api">live2d_api</a>。而 <code>cdnPath</code> 则是通过 jsDelivr 这样的 CDN 服务加载资源，更加稳定。</p>
|
||||
<p>其中，<code>apiPath</code> 和 <code>cdnPath</code> 两个参数设置其中一项即可。<code>apiPath</code> 是后端 API 的 URL，可以自行搭建，并增加模型（需要修改的内容比较多，此处不再赘述），可以参考 <a target="_blank" rel="noopener" href="https://github.com/fghrsh/live2d_api">live2d_api</a>。而 <code>cdnPath</code> 则是通过 jsDelivr 这样的 CDN 服务加载资源，更加稳定。</p>
|
||||
<h2 id="自定义-Customization"><a href="#自定义-Customization" class="headerlink" title="自定义 Customization"></a>自定义 Customization</h2><p>如果以上「配置」部分提供的选项还不足以满足你的需求，那么你可以自己进行修改。本仓库的目录结构如下：</p>
|
||||
<ul>
|
||||
<li><code>src/waifu-tips.js</code> 包含了按钮和对话框的逻辑；</li>
|
||||
@@ -56,21 +272,18 @@
|
||||
<li><code>waifu-tips.json</code> 中定义了触发条件（<code>selector</code>，CSS 选择器）和触发时显示的文字（<code>text</code>）；</li>
|
||||
<li><code>waifu.css</code> 是看板娘的样式表。</li>
|
||||
</ul>
|
||||
<p><code>waifu-tips.json</code> 中默认的 CSS 选择器规则是对 Hexo 的 <a href="http://github.com/next-theme/hexo-theme-next">NexT 主题</a> 有效的，为了适用于你自己的网页，可能需要自行修改，或增加新内容。<br><strong>警告：<code>waifu-tips.json</code> 中的内容可能不适合所有年龄段，或不宜在工作期间访问。在使用时，请自行确保它们是合适的。</strong></p>
|
||||
<p><code>waifu-tips.json</code> 中默认的 CSS 选择器规则是对 Hexo 的 <a target="_blank" rel="noopener" href="http://github.com/next-theme/hexo-theme-next">NexT 主题</a> 有效的，为了适用于你自己的网页，可能需要自行修改，或增加新内容。<br><strong>警告：<code>waifu-tips.json</code> 中的内容可能不适合所有年龄段，或不宜在工作期间访问。在使用时，请自行确保它们是合适的。</strong></p>
|
||||
<p>要在本地部署本项目的开发测试环境，你需要安装 Node.js 和 npm，然后执行以下命令：</p>
|
||||
<pre><code class="bash">git clone https://github.com/stevenjoezhang/live2d-widget.git
|
||||
npm install
|
||||
npm run build
|
||||
</code></pre>
|
||||
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/stevenjoezhang/live2d-widget.git</span><br><span class="line">npm install</span><br><span class="line">npm run build</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>如果有任何疑问，欢迎提 Issue。如果有任何修改建议，欢迎提 Pull Request。</p>
|
||||
<h2 id="部署-Deploy"><a href="#部署-Deploy" class="headerlink" title="部署 Deploy"></a>部署 Deploy</h2><p>在本地完成了修改后，你可以将修改后的项目部署在服务器上，或者通过 CDN 加载，以便在网页中使用。</p>
|
||||
<h3 id="Using-CDN"><a href="#Using-CDN" class="headerlink" title="Using CDN"></a>Using CDN</h3><p>要自定义有关内容，可以把这个仓库 Fork 一份，然后把修改后的内容通过 git push 到你的仓库中。这时，使用方法对应地变为</p>
|
||||
<pre><code class="xml"><script src="https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"></script>
|
||||
</code></pre>
|
||||
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
|
||||
<p>将此处的 <code>username</code> 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新，需要创建新的 git tag 并推送至 GitHub 仓库中，否则此处的 <code>@latest</code> 仍然指向更新前的文件。此外 CDN 本身存在缓存，因此改动可能需要一定的时间生效。相关文档：</p>
|
||||
<ul>
|
||||
<li><a href="https://git-scm.com/book/en/v2/Git-Basics-Tagging">Git Basics - Tagging</a></li>
|
||||
<li><a href="https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository">Managing releases in a repository</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://git-scm.com/book/en/v2/Git-Basics-Tagging">Git Basics - Tagging</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository">Managing releases in a repository</a></li>
|
||||
</ul>
|
||||
<h3 id="Self-host"><a href="#Self-host" class="headerlink" title="Self-host"></a>Self-host</h3><p>你也可以直接把这些文件放到服务器上，而不是通过 CDN 加载。</p>
|
||||
<ul>
|
||||
@@ -79,38 +292,263 @@ npm run build
|
||||
<li>如果你是通过 Hexo 等工具部署的静态博客，请把本项目的代码放在博客源文件目录下（例如 <code>source</code> 目录）。重新部署博客时，相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改，可能需要设置 <code>skip_render</code>。</li>
|
||||
</ul>
|
||||
<p>这样，整个项目就可以通过你的域名访问了。不妨试试能否正常地通过浏览器打开 <code>autoload.js</code> 和 <code>live2d.min.js</code> 等文件，并确认这些文件的内容是完整和正确的。<br>一切正常的话，接下来修改 <code>autoload.js</code> 中的常量 <code>live2d_path</code> 为 <code>live2d-widget</code> 这一目录的 URL 即可。比如说，如果你能够通过</p>
|
||||
<pre><code>https://example.com/path/to/live2d-widget/live2d.min.js
|
||||
</code></pre>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://example.com/path/to/live2d-widget/live2d.min.js</span><br></pre></td></tr></table></figure>
|
||||
<p>访问到 <code>live2d.min.js</code>，那么就把 <code>live2d_path</code> 的值修改为</p>
|
||||
<pre><code>https://example.com/path/to/live2d-widget/
|
||||
</code></pre>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://example.com/path/to/live2d-widget/</span><br></pre></td></tr></table></figure>
|
||||
<p>路径末尾的 <code>/</code> 一定要加上。<br>完成后，在你要添加看板娘的界面加入</p>
|
||||
<pre><code class="xml"><script src="https://example.com/path/to/live2d-widget/autoload.js"></script>
|
||||
</code></pre>
|
||||
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://example.com/path/to/live2d-widget/autoload.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
|
||||
<p>就可以加载了。</p>
|
||||
<h2 id="鸣谢-Thanks"><a href="#鸣谢-Thanks" class="headerlink" title="鸣谢 Thanks"></a>鸣谢 Thanks</h2><p><a href="https://www.browserstack.com/"><img height="80" src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo"></a></p>
|
||||
<h2 id="鸣谢-Thanks"><a href="#鸣谢-Thanks" class="headerlink" title="鸣谢 Thanks"></a>鸣谢 Thanks</h2><p><a target="_blank" rel="noopener" href="https://www.browserstack.com/"><img height="80" src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo"></a></p>
|
||||
<blockquote>
|
||||
<p>感谢 BrowserStack 容许我们在真实的浏览器中测试此项目。<br>Thanks to <a href="https://www.browserstack.com/">BrowserStack</a> for providing the infrastructure that allows us to test in real browsers!</p>
|
||||
<p>感谢 BrowserStack 容许我们在真实的浏览器中测试此项目。<br>Thanks to <a target="_blank" rel="noopener" href="https://www.browserstack.com/">BrowserStack</a> for providing the infrastructure that allows us to test in real browsers!</p>
|
||||
</blockquote>
|
||||
<p><a href="https://www.jsdelivr.com"><img height="80" src="https://raw.githubusercontent.com/jsdelivr/jsdelivr-media/master/default/svg/jsdelivr-logo-horizontal.svg"></a></p>
|
||||
<p><a target="_blank" rel="noopener" href="https://www.jsdelivr.com"><img height="80" src="https://raw.githubusercontent.com/jsdelivr/jsdelivr-media/master/default/svg/jsdelivr-logo-horizontal.svg"></a></p>
|
||||
<blockquote>
|
||||
<p>感谢 jsDelivr 提供的 CDN 服务。<br>Thanks jsDelivr for providing public CDN service.</p>
|
||||
</blockquote>
|
||||
<p>代码自这篇博文魔改而来：<br><a href="https://www.fghrsh.net/post/123.html">https://www.fghrsh.net/post/123.html</a></p>
|
||||
<p>感谢 <a href="https://hitokoto.cn/">一言</a> 提供的语句接口。</p>
|
||||
<p>点击看板娘的纸飞机按钮时，会出现一个彩蛋，这来自于 <a href="http://www.websiteasteroids.com/">WebsiteAsteroids</a>。</p>
|
||||
<h2 id="更多-More"><a href="#更多-More" class="headerlink" title="更多 More"></a>更多 More</h2><p>更多内容可以参考：<br><a href="https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02">https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02</a><br><a href="https://github.com/xiazeyu/live2d-widget.js">https://github.com/xiazeyu/live2d-widget.js</a><br><a href="https://github.com/summerscar/live2dDemo">https://github.com/summerscar/live2dDemo</a></p>
|
||||
<p>关于后端 API 模型：<br><a href="https://github.com/xiazeyu/live2d-widget-models">https://github.com/xiazeyu/live2d-widget-models</a><br><a href="https://github.com/xiaoski/live2d_models_collection">https://github.com/xiaoski/live2d_models_collection</a></p>
|
||||
<p>除此之外，还有桌面版本：<br><a href="https://github.com/amorist/platelet">https://github.com/amorist/platelet</a><br><a href="https://github.com/akiroz/Live2D-Widget">https://github.com/akiroz/Live2D-Widget</a><br><a href="https://github.com/zenghongtu/PPet">https://github.com/zenghongtu/PPet</a><br><a href="https://github.com/LikeNeko/L2dPetForMac">https://github.com/LikeNeko/L2dPetForMac</a></p>
|
||||
<p>以及 Wallpaper Engine：<br><a href="https://github.com/guansss/nep-live2d">https://github.com/guansss/nep-live2d</a></p>
|
||||
<h2 id="许可证-License"><a href="#许可证-License" class="headerlink" title="许可证 License"></a>许可证 License</h2><p>Released under the GNU General Public License v3<br><a href="http://www.gnu.org/licenses/gpl-3.0.html">http://www.gnu.org/licenses/gpl-3.0.html</a></p>
|
||||
<p>代码自这篇博文魔改而来：<br><a target="_blank" rel="noopener" href="https://www.fghrsh.net/post/123.html">https://www.fghrsh.net/post/123.html</a></p>
|
||||
<p>感谢 <a target="_blank" rel="noopener" href="https://hitokoto.cn/">一言</a> 提供的语句接口。</p>
|
||||
<p>点击看板娘的纸飞机按钮时，会出现一个彩蛋，这来自于 <a target="_blank" rel="noopener" href="http://www.websiteasteroids.com/">WebsiteAsteroids</a>。</p>
|
||||
<h2 id="更多-More"><a href="#更多-More" class="headerlink" title="更多 More"></a>更多 More</h2><p>更多内容可以参考：<br><a target="_blank" rel="noopener" href="https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02">https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02</a><br><a target="_blank" rel="noopener" href="https://github.com/xiazeyu/live2d-widget.js">https://github.com/xiazeyu/live2d-widget.js</a><br><a target="_blank" rel="noopener" href="https://github.com/summerscar/live2dDemo">https://github.com/summerscar/live2dDemo</a></p>
|
||||
<p>关于后端 API 模型：<br><a target="_blank" rel="noopener" href="https://github.com/xiazeyu/live2d-widget-models">https://github.com/xiazeyu/live2d-widget-models</a><br><a target="_blank" rel="noopener" href="https://github.com/xiaoski/live2d_models_collection">https://github.com/xiaoski/live2d_models_collection</a></p>
|
||||
<p>除此之外，还有桌面版本：<br><a target="_blank" rel="noopener" href="https://github.com/amorist/platelet">https://github.com/amorist/platelet</a><br><a target="_blank" rel="noopener" href="https://github.com/akiroz/Live2D-Widget">https://github.com/akiroz/Live2D-Widget</a><br><a target="_blank" rel="noopener" href="https://github.com/zenghongtu/PPet">https://github.com/zenghongtu/PPet</a><br><a target="_blank" rel="noopener" href="https://github.com/LikeNeko/L2dPetForMac">https://github.com/LikeNeko/L2dPetForMac</a></p>
|
||||
<p>以及 Wallpaper Engine：<br><a target="_blank" rel="noopener" href="https://github.com/guansss/nep-live2d">https://github.com/guansss/nep-live2d</a></p>
|
||||
<h2 id="许可证-License"><a href="#许可证-License" class="headerlink" title="许可证 License"></a>许可证 License</h2><p>Released under the GNU General Public License v3<br><a target="_blank" rel="noopener" href="http://www.gnu.org/licenses/gpl-3.0.html">http://www.gnu.org/licenses/gpl-3.0.html</a></p>
|
||||
<p>本仓库并不包含任何模型，用作展示的所有 Live2D 模型、图片、动作数据等版权均属于其原作者，仅供研究学习，不得用于商业用途。</p>
|
||||
<p>Live2D 官方网站：<br><a href="https://www.live2d.com/en/">https://www.live2d.com/en/</a><br><a href="https://live2d.github.io/">https://live2d.github.io</a></p>
|
||||
<p>Live2D Cubism Core は Live2D Proprietary Software License で提供しています。<br><a href="https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html">https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html</a><br>Live2D Cubism Components は Live2D Open Software License で提供しています。<br><a href="http://www.live2d.com/eula/live2d-open-software-license-agreement_en.html">http://www.live2d.com/eula/live2d-open-software-license-agreement_en.html</a></p>
|
||||
<p>Live2D 官方网站：<br><a target="_blank" rel="noopener" href="https://www.live2d.com/en/">https://www.live2d.com/en/</a><br><a target="_blank" rel="noopener" href="https://live2d.github.io/">https://live2d.github.io</a></p>
|
||||
<p>Live2D Cubism Core は Live2D Proprietary Software License で提供しています。<br><a target="_blank" rel="noopener" href="https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html">https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html</a><br>Live2D Cubism Components は Live2D Open Software License で提供しています。<br><a target="_blank" rel="noopener" href="http://www.live2d.com/eula/live2d-open-software-license-agreement_en.html">http://www.live2d.com/eula/live2d-open-software-license-agreement_en.html</a></p>
|
||||
<blockquote>
|
||||
<p>The terms and conditions do prohibit modification, but obfuscating in <code>live2d.min.js</code> would not be considered illegal modification.</p>
|
||||
</blockquote>
|
||||
<p><a href="https://community.live2d.com/discussion/140/webgl-developer-licence-and-javascript-question">https://community.live2d.com/discussion/140/webgl-developer-licence-and-javascript-question</a></p>
|
||||
<h2 id="更新-Update"><a href="#更新-Update" class="headerlink" title="更新 Update"></a>更新 Update</h2><p>2018年10月31日，由 fghrsh 提供的原 API 停用，请更新至新地址。参考文章：<br><a href="https://www.fghrsh.net/post/170.html">https://www.fghrsh.net/post/170.html</a></p>
|
||||
<p><a target="_blank" rel="noopener" href="https://community.live2d.com/discussion/140/webgl-developer-licence-and-javascript-question">https://community.live2d.com/discussion/140/webgl-developer-licence-and-javascript-question</a></p>
|
||||
<h2 id="更新-Update"><a href="#更新-Update" class="headerlink" title="更新 Update"></a>更新 Update</h2><p>2018年10月31日，由 fghrsh 提供的原 API 停用，请更新至新地址。参考文章：<br><a target="_blank" rel="noopener" href="https://www.fghrsh.net/post/170.html">https://www.fghrsh.net/post/170.html</a></p>
|
||||
<p>2020年1月1日起，本项目不再依赖于 jQuery。</p>
|
||||
<p>2022年11月1日起，本项目不再需要用户单独加载 Font Awesome。</p>
|
||||
<link rel="stylesheet" href="/css/spoiler.css" type="text/css"><script src="/js/spoiler.js" type="text/javascript" async></script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="comments" id="gitalk-container"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('tabs:register', () => {
|
||||
let { activeClass } = CONFIG.comments;
|
||||
if (CONFIG.comments.storage) {
|
||||
activeClass = localStorage.getItem('comments_active') || activeClass;
|
||||
}
|
||||
if (activeClass) {
|
||||
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
|
||||
if (activeTab) {
|
||||
activeTab.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (CONFIG.comments.storage) {
|
||||
window.addEventListener('tabs:click', event => {
|
||||
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
|
||||
let commentClass = event.target.classList[1];
|
||||
localStorage.setItem('comments_active', commentClass);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="toggle sidebar-toggle">
|
||||
<span class="toggle-line toggle-line-first"></span>
|
||||
<span class="toggle-line toggle-line-middle"></span>
|
||||
<span class="toggle-line toggle-line-last"></span>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
|
||||
<ul class="sidebar-nav motion-element">
|
||||
<li class="sidebar-nav-toc">
|
||||
文章目录
|
||||
</li>
|
||||
<li class="sidebar-nav-overview">
|
||||
站点概览
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--noindex-->
|
||||
<div class="post-toc-wrap sidebar-panel">
|
||||
<div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Live2D-Widget"><span class="nav-number">1.</span> <span class="nav-text">Live2D Widget</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%89%B9%E6%80%A7-Feature"><span class="nav-number">1.1.</span> <span class="nav-text">特性 Feature</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Usage"><span class="nav-number">1.2.</span> <span class="nav-text">使用 Usage</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE-Configuration"><span class="nav-number">1.3.</span> <span class="nav-text">配置 Configuration</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89-Customization"><span class="nav-number">1.4.</span> <span class="nav-text">自定义 Customization</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%83%A8%E7%BD%B2-Deploy"><span class="nav-number">1.5.</span> <span class="nav-text">部署 Deploy</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Using-CDN"><span class="nav-number">1.5.1.</span> <span class="nav-text">Using CDN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Self-host"><span class="nav-number">1.5.2.</span> <span class="nav-text">Self-host</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%B8%A3%E8%B0%A2-Thanks"><span class="nav-number">1.6.</span> <span class="nav-text">鸣谢 Thanks</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A-More"><span class="nav-number">1.7.</span> <span class="nav-text">更多 More</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%B8%E5%8F%AF%E8%AF%81-License"><span class="nav-number">1.8.</span> <span class="nav-text">许可证 License</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0-Update"><span class="nav-number">1.9.</span> <span class="nav-text">更新 Update</span></a></li></ol></li></ol></div>
|
||||
</div>
|
||||
<!--/noindex-->
|
||||
|
||||
<div class="site-overview-wrap sidebar-panel">
|
||||
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||
<img class="site-author-image" itemprop="image" alt="llbzow"
|
||||
src="/images/avatar.png">
|
||||
<p class="site-author-name" itemprop="name">llbzow</p>
|
||||
<div class="site-description" itemprop="description"></div>
|
||||
</div>
|
||||
<div class="site-state-wrap motion-element">
|
||||
<nav class="site-state">
|
||||
<div class="site-state-item site-state-posts">
|
||||
<a href="/archives/">
|
||||
|
||||
<span class="site-state-item-count">7</span>
|
||||
<span class="site-state-item-name">日志</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="site-state-item site-state-categories">
|
||||
<a href="/categories/">
|
||||
|
||||
<span class="site-state-item-count">2</span>
|
||||
<span class="site-state-item-name">分类</span></a>
|
||||
</div>
|
||||
<div class="site-state-item site-state-tags">
|
||||
<a href="/tags/">
|
||||
|
||||
<span class="site-state-item-count">2</span>
|
||||
<span class="site-state-item-name">标签</span></a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<div id="sidebar-dimmer"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
© 2022-06 –
|
||||
<span itemprop="copyrightYear">2022</span>
|
||||
<span class="with-love">
|
||||
<i class="fa fa-heart"></i>
|
||||
</span>
|
||||
<span class="author" itemprop="copyrightHolder">llbzow</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<div class="busuanzi-count">
|
||||
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
||||
<span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
|
||||
<span class="post-meta-item-icon">
|
||||
<i class="fa fa-user"></i>
|
||||
</span>
|
||||
<span class="site-uv" title="总访客量">
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="post-meta-divider">|</span>
|
||||
<span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
|
||||
<span class="post-meta-item-icon">
|
||||
<i class="fa fa-eye"></i>
|
||||
</span>
|
||||
<span class="site-pv" title="总访问量">
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script color='0,0,255' opacity='0.5' zIndex='-1' count='99' src="/lib/canvas-nest/canvas-nest.min.js"></script>
|
||||
<script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
|
||||
<script src="/lib/anime.min.js"></script>
|
||||
<script src="/lib/velocity/velocity.min.js"></script>
|
||||
<script src="/lib/velocity/velocity.ui.min.js"></script>
|
||||
|
||||
<script src="/js/utils.js"></script>
|
||||
|
||||
<script src="/js/motion.js"></script>
|
||||
|
||||
|
||||
<script src="/js/schemes/pisces.js"></script>
|
||||
|
||||
|
||||
<script src="/js/next-boot.js"></script>
|
||||
|
||||
|
||||
<script defer src="/lib/three/three.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
|
||||
|
||||
<script>
|
||||
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
|
||||
NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
|
||||
var gitalk = new Gitalk({
|
||||
clientID : '1e2867144d855824b913# GitHub Application Client ID',
|
||||
clientSecret: '3c474768436b020bd64b81c163e40c7ac7e3f1d6# GitHub Application Client Secret',
|
||||
repo : 'BlogComments# Repository name to store issues',
|
||||
owner : 'llbzow# GitHub repo owner',
|
||||
admin : ['llbzow# GitHub repo owner and collaborators, only these guys can initialize gitHub issues'],
|
||||
id : 'f38fb2319f66b8110707a7a81c6dd4d3',
|
||||
language: '',
|
||||
distractionFreeMode: true
|
||||
});
|
||||
gitalk.render('gitalk-container');
|
||||
}, window.Gitalk);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user