Hexo+live2d | 如何把live2d老婆放进自己的博客

news2024/12/29 8:54:41
参考:
Hexo添加Live2D看板娘最新教程
live2d-widget
live2d-widget-models

网页/博客Hexo添加live2d游戏角色看板娘,简易添加,碧蓝航线等live2d新型游戏角色模型(moc3)
live2d-moc3
jsdelivr

方法1

可以直接去看参考文章的第一部分的第一篇。操作很简单就不说了。

方法2

很可惜方法1似乎对于cubism4.0以上的版本不成立,因为它不支持moc3格式的文件。所以我们这时候就需要采用方法2.

步骤:

  1. 在cubism editor中导出模型文件

注意这些选项的设置。

  1. fork该仓库

https://github.com/xiunianjun/AzurLaneL2DViewer

  1. clone你fork的仓库到本地,然后在asset文件夹中建立一个文件夹,将你的模型文件拖进去,并组织成如下目录结构

【新建文件夹】

【注意文件夹名字与模型名字要一致。把moc3、model3.json、physics3.json放在这里,有没有cdi3无所谓】

【在motion文件夹中放置动作json】

【在textures文件夹中放置贴图】

  1. 再把这些pull到你的仓库里

  1. 将其发布为一个release版本。我命名该版本为aaa

  1. 在你的博客根目录下的public中,将live2d-moc3中要求的代码插入到`index.html`中

注意,推荐插入在body标签结束前面一点点的位置,避免我们的live2d被渲染在最下层。

    <div class="Canvas"  id="L2dCanvas"></div>
    <script>
        var config = {
            width: 800,
            height: 600,
            left: '750px',
            bottom: '-100px',
            basePath: 'https://cdn.jsdelivr.net/gh/xiunianjun/AzurLaneL2DViewer@aaa/assets/',
            //role: 'Tiger',
            role: 'aierdeliqi_4',
            // background: 'https://cdn.jsdelivr.net/gh/xiunianjun/AzurLaneL2DViewer@gh-page/assets/bg/bg_church_jp.png',
            opacity: 1,
            mobile: false
        }
        var v = new Viewer(config); 
    </script>

注意修改basepath为`https://cdn.jsdelivr.net/gh/你的github名字/AzurLaneL2DViewer@你在5中的release版本命名/assets/`,role修改为3里面建立的文件夹名【同模型名】

  1. 然后执行hexo d就好啦。

注意,由于hexo-g会覆盖原来的index.html,故而第6步操作需要在每次generate对index.html进行重新生成后都做一遍,比较麻烦,但我暂时没找到什么好方法。

哪里写的不清楚或者有更好的方法,可以随时评论区/私信我交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/392648.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode】剑指 Offer 22. 链表中倒数第k个节点 p136 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/lian-biao-zhong-dao-shu-di-kge-jie-dian-lcof/ 1. 题目介绍&#xff08;22. 链表中倒数第k个节点&#xff09; 输入一个链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&…

C语言-基础了解-21-C输入/输出

C输入/输出 一、标准文件 C 语言把所有的设备都当作文件。所以设备&#xff08;比如显示器&#xff09;被处理的方式与文件相同。以下三个文件会在程序执行时自动打开&#xff0c;以便访问键盘和屏幕 文件指针是访问文件的方式&#xff0c;本节将讲解如何从键盘上读取值以及…

葫芦娃自动化平台-appium实战

一、配置jar包 右键用压缩工具打开jar 修改application.yml文件 name: test666 改为自己名字 libPath、drivenPath:改成自己电脑已有路径 修改appium.properties 文件&#xff0c;方式和上面一样 #APP名称 注意带apk后续 例&#xff1a;test.apk 此文件请放置在项目根目录下 …

Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required 问题处理

错误日志&#xff1a; 解决办法&#xff1a; 1.查看配置文件是否正确 # MyBatis-plus配置 mybatis-plus:# 配置Mapper.xml映射文件mapper-locations: classpath*:/mapper/*Mapper.xml# 配置MyBatis数据返回类型别名&#xff08;默认别名是类名&#xff09;type-aliases-packa…

POSTGRESQL SQL 语句案例,一场由LIMIT 1 引发的“奇怪异像”

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群。最近一段工作…

JS 数组拍平(多种方法)

前言数组拍平&#xff08;扁平化数组&#xff09;是面试中常考查的知识点&#xff0c;之前发过一篇基础版的数组拍平 传送门通过之后的学习&#xff0c;又了解了一些其他的数组拍平的操作&#xff0c;详情请看下面的文章flatflat 方法可以直接用于数组拍平&#xff0c;不传入参…

Elasticsearch集群搭建、优化及实践

文章目录一、Elasticsearch集群1、Elasticsearch集群概念2、Elasticsearch集群安装3、安装Kibana4、测试集群状态二、Elasticsearch优化1、磁盘选择2、分片策略3、内存设置三、Elasticsearch实践1、ES自动补全2、创建索引3、安装logstash导入数据4、项目搭建5、自动补全功能6、…

nginx七大核心应用场景详解 解决生产中的实际问题 二次开发扩展

nginx七大核心应用场景详解 & 解决生产中的实际问题1、nginx的安装与简单配置1.1、环境准备1.2、nginx基本操作指令&#xff1a;1.3、安装成系统服务1.4、conf 配置文件说明2、虚拟主机2.1、nginx多主机配置2.2、二级域名与短网址解析3、基于反向代理的负载均衡3.1、跳转到…

【Mysql索引】五种索引类型

目录前期准备实操实战主键索引 primary唯一索引 unique执行效果普通索引 noraml执行效果全文索引 fulltext执行效果组合索引执行效果前期准备 创建一个表&#xff0c;如果有测试的表也可以用&#xff08;把主键id设置为自增&#xff09;如果给字段添加的值有中文&#xff0c;需…

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)

前言 部署过程就不说了,部署完成后是这样子的 然后访问链接,无法访问 解决 依次点击 Settings–>Domains&#xff0c;在输入框中输入你的域名并点击 Add 按钮。 以此域名为例子demo.gshopfront.dreamlove.top为例,点击添加 我们前往域名管理系统,记录下绿色的值以腾讯云的…

Android Surface 分析+源码

Surface的创建涉及三个部分&#xff1a; App 进程 App需要将自己的内容显示在屏幕上&#xff0c;所以App负责发起Surface创建请求&#xff0c;创建好Surface后, 就可以直接可以在canvas上画图等&#xff0c;最终都会保存到Surface里的buffer里&#xff0c;最后由SurfaceFlinge…

使用docker搭建WordPress博客

文章目录一、前置条件二、拉取镜像三、安装工具及依赖1.安装2.升级pip3.获取docker-compose方法一另一种方法&#xff08;推荐&#xff09;四、创建容器&#xff0c;启用镜像&#xff0c;映射端口五、访问并设置一、前置条件 主机&#xff1a;20.0.0.142 安装docker docker的安…

SQL-刷题技巧-删除重复记录

一. 原题呈现 牛客 SQL236. 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 描述&#xff1a; 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 drop table if exists titles_test; CREATE TABLE titles_test (id int(11) not null primary key…

Matlab论文插图绘制模板第80期—羽状图(Feather)

在之前的文章中&#xff0c;分享了很多Matlab线图的绘制模板&#xff1a; 进一步&#xff0c;再来分享一种特殊的线图&#xff1a;羽状图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;Matlab论文插图绘制模板系列&#xff0c;旨在降低大家使用Matlab进行科研绘图的…

2.2 分治法的基本思想

分治法的基本思想是将一个规模为n的问题分解为化个规模较小的子问题&#xff0c;这些子问题互相独立且与原问题相同。递归地解这些子问题&#xff0c;然后将各子问题的解合并得到原问题的解。它的一般的算法设计模式如下&#xff1a;divide-and-conquer(P) { if ( P < no) a…

SRS4.0 源码分析- RTC模块相关类

前言 本文介绍SRS4.0涉及RTC模块的C类&#xff0c;主要包括RTC Server和Session相关的。 SrsGoApiRtcPlay 处理webrtc client的播放请求&#xff0c;解析client的offer&#xff0c;并且生成server的answer&#xff0c;并且为这次请求创建一个session。SrsRtcServer 监听udp端…

如何实现沉浸式旅游与非物质文化遗产的共同发展

中国非物质文化遗产资源丰富&#xff0c;是世界上非物质文化遗产数量最多的国家。丰富多样的资源为非物质文化遗产旅游业的建设提供了良好的基础。非物质文化遗产旅游是基于非物质文化遗产资源开发的文化旅游消费形式。文化资源包括各民族代代相传的传统文化表现形式。非物质文…

【面试题】Vue面试题整理

1. v-show 和 v-if 的区别&#xff1f; v-if 指令用于条件渲染&#xff0c;它会根据表达式的值的真假来决定是否渲染元素。如果表达式的值为 false&#xff0c;则该元素不会被渲染并且也不会保留在 DOM 中。v-show 指令用于条件展示&#xff0c;它不会从 DOM 中删除元素&#…

Windows openssl-1.1.1d vs2017编译

工具&#xff1a; 1. perl&#xff08;https://strawberryperl.com/&#xff09; 2. nasm&#xff08;https://nasm.us/&#xff09; 3. openssl源码&#xff08;https://www.openssl.org/&#xff09; 可以自己去下载 或者我的网盘提供下载&#xff1a; 链接&#xff1a;…

Redis List 底层三种数据结构原理剖析

1. Redis List 是什么作为 Java 开发者的你&#xff0c;看到这个词并不陌生。在 Java 开发中几乎每天都会使用这个数据结构。Redis 的 List 与 Java 中的 LinkedList 类似&#xff0c;是一种线性的有序结构&#xff0c;可以按照元素被推入列表中的顺序来存储元素&#xff0c;能…