怎么用服務(wù)器搭建網(wǎng)站推廣之家app下載
目錄
- 背景
- 第一款：開箱即用的Live2d
- 在vue項(xiàng)目中使用
- html頁(yè)面使用
- 在線預(yù)覽
- 依賴文件地址配置
- 相關(guān)參數(shù)
- 成員屬性
- 源碼 + 模型下載
- 第二款：換裝模型超多的Live2d
- 在線預(yù)覽
- 代碼示例
- 源碼 + 模型下載
背景
從第一次使用服務(wù)器建站已經(jīng)三年多了，記得那是在2019年底，2020年初，記得服務(wù)器是在2019年的雙十一第一次買的阿里云的新人服務(wù)器。那時(shí)候我剛剛大三上半學(xué)期結(jié)束，放寒假了在家，開始折騰起來(lái)第一次搭建網(wǎng)站。由于之前一直使用的CSDN記錄學(xué)習(xí)筆記，當(dāng)時(shí)想的是搭建一個(gè)屬于自己的博客網(wǎng)站，自己的“另一個(gè)世界”。再后來(lái)就是通過(guò)探索，折騰起Wordpress，第一個(gè)用的博客主題是Kratos。當(dāng)然在搭建網(wǎng)站的時(shí)候很有趣的一點(diǎn)是看到別人的個(gè)人網(wǎng)站上都有一個(gè)自己網(wǎng)站的小人，原名Live2d，被稱為看板娘，所以這篇博客是來(lái)分享我最新收集的兩款超酷的Live2d和使用經(jīng)歷。
我博客最初的樣子：
之前也有兩次分享過(guò)Live2d的使用：
Live2D使用分享：https://qkongtao.cn/?p=312
Live2D——血小板：https://qkongtao.cn/?p=465
第一款：開箱即用的Live2d
作者網(wǎng)站是：https://kuangyx.cn/
你可能注意到網(wǎng)站右下角的
Live2d人物了，對(duì)此我對(duì)Live2d做了類封裝幾行代碼就能實(shí)現(xiàn)網(wǎng)站加載Live2d人物。該庫(kù)包含了live2d與live2d_3的模型。
在vue項(xiàng)目中使用
- 安裝
npm i @tomiaa/live2d
- 在vue文件中引入
<template><div class="hello"><div ref="live2dContentRef" id="live2d"></div></div>
</template><script>
import { Live2d } from "@tomiaa/live2d";
export default {name: "Live2d",mounted() {new Live2d({el: document.getElementById("live2d"),showLoading: false,maxWidth: 300,jsBaseURL: "https://live2d.kuangyx.cn/public",});},
};
</script>
<style scoped>
</style>
html頁(yè)面使用
由于作者提供的是開箱即用的npm資源包@tomiaa/live2d，不便于在其他項(xiàng)目中直接使用，因此我將他重新打包成js和css文件，在html頁(yè)面中可以直接引入即可。
<link href="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css" rel="stylesheet">
<script src="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/js/app.js"></script>
兩個(gè)資源文件下載：https://gitee.com/qkongtao/live2d_vue/tree/master/vue_live2d/dist/static
使用示例：
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.png"><title>vue_live2d</title><link href="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css" rel="stylesheet">
</head><body><noscript><strong>We're sorry but vue_live2d doesn't work properly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"></div><script>// 設(shè)置參數(shù)var Live2d = {showLoading: false,maxWidth: 300,jsBaseURL: "https://live2d.kuangyx.cn/public",}</script><script src="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/js/app.js"></script>
</body></html>
打開效果：
在線預(yù)覽
http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/
依賴文件地址配置
依賴文件的地址文件IP都在github，下面參數(shù)主要考慮到國(guó)內(nèi)經(jīng)常被墻，可以使用下面參數(shù)使用其他服務(wù)器地址。
- jsBaseURL：配置依賴的
js文件baseURL地址目錄，默認(rèn)加載的https://github.com/tomiaa12/live2d/tree/main/public下的js文件，修改后需要保證該目錄下也應(yīng)該存在同樣的文件。 - live2d_2_ModelBaseURL:
live2d模型的baseURL地址目錄，默認(rèn)使用jsBaseURL參數(shù)。 - live2d_3_ModelBaseURL:
live2d_3模型的baseURL地址目錄，默認(rèn)使用jsBaseURL參數(shù)。
相關(guān)參數(shù)
| 屬性 | 說(shuō)明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| el | 容器 querySelector 選擇器或 dom | string | DOM 元素 | #live2d |
| jsBaseURL | 配置依賴的js文件baseURL地址目錄 | string | tomiaa12.github.io/live2d/public |
| live2d_2_ModelBaseURL | live2d 模型地址目錄 | string | 默認(rèn)使用 jsBaseURL |
| live2d_3_ModelBaseURL | live2d_3 模型地址目錄 | string | 默認(rèn)使用 jsBaseURL |
| loadLive2d_2 | 是否加載 live2d_2 模型列表 | boolean | true |
| loadLive2d_3 | 是否加載 live2d_3 模型列表 | boolean | true |
| playLoadingAnimation | 加載模型之后是否播放登場(chǎng)(login)動(dòng)畫，只有存在login動(dòng)畫才有效 | boolean | true |
| showLoading | 顯示加載模型 loading | boolean | true |
| showControl | 顯示控制欄 | boolean | true |
| iApplicationOptions | PIXI.Application 配置 | IApplicationOptions | {} |
| maxWidth | 容器最大寬度 | number | 400 |
| minWidth | 容器最小寬度 | number | 200 |
| aspectRatio | 默認(rèn)寬高比 | [number,number] | [10,9] |
| beforeInit | 初始化之前 | (data: { options:Live2dOptions modelList: ModelOption[] })=> void | |
| afterInit | 初始化完成 | (data: { options: Live2dOptions modelList: ModelOption[] currentModelOption: ModelOption Live2DModel: typeof Live2DModelType app: Application }) => void | |
| randomPeople | 人物隨機(jī) | boolean | true |
| allowDrag | 允許拖動(dòng) | boolean | true |
| hitokoto | 是否開啟 hitokoto 一言 | boolean | true |
| hitokotoOptions | 一言配置 | HitokotoOptions |
成員屬性
| 屬性名 | 說(shuō)明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| options | 構(gòu)造器配置 | Live2dOptions | 參考上一標(biāo)題默認(rèn)值 |
| el | dom 容器 | any | |
| canvas | canvas 容器 | any | |
| Live2DModel | 模型加載模塊 | typeof Live2DModelType | |
| app | pixi.js 應(yīng)用 | Application | |
| loading | 加載loading | boolean | false |
| model | 當(dāng)前模型 | InstanceType<typeof Live2DModelType> | |
| modelList | 模型列表 | ModelOption[] | [] |
| currentModelOption | 當(dāng)前模型配置 | ModelOption | |
| personIndex | 模型下標(biāo) | number | 0 |
| clothingIndex | 服裝下標(biāo) | number | 0 |
| elLoading | loading dom 元素 | any | |
| elControl | control dom 元素 | any | |
| elSwitchPerson | 切換人物 dom 元素 | any | |
| elSwitchClothing | 切換服裝 dom 元素 | any | |
| elHitokoto | 一言 dom 元素 | any | |
| hitokoto | 一言 | Hitokoto |
源碼 + 模型下載
https://gitee.com/qkongtao/live2d_vue
第二款：換裝模型超多的Live2d
在線預(yù)覽
https://qkongtao.gitee.io/live2d-widget/
代碼示例
<!DOCTYPE html>
<html lang="en"><head><!-- 基礎(chǔ)信息 --><meta charset="utf-8"><meta http-equiv="Access-Control-Allow-Origin" content="*"><meta name="renderer" content="webkit" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="force-rendering" content="webkit" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="qkongtao.cn"><meta name="keywords" content="qkongtao.cn"><meta name="author" content="qkongtao.cn"><link rel="icon" href="http://qiniu.qkongtao.cn/2021/08/header.png" sizes="192x192" /><title>live2D演示</title>
</head><body><!--FOOTER_CODE_END--><script type="text/javascript">// live2d_path 參數(shù)建議使用絕對(duì)路徑// const live2d_path = "./live2d-widget/";const live2d_path = "https://code.haiyong.site/live2d-widget/";// 封裝異步加載資源的方法function loadExternalResource(url, type) {return new Promise((resolve, reject) => {let tag;if (type === "css") {tag = document.createElement("link");tag.rel = "stylesheet";tag.href = url;} else if (type === "js") {tag = document.createElement("script");tag.src = url;}if (tag) {tag.onload = () => resolve(url);tag.onerror = () => reject(url);document.head.appendChild(tag);}});}// 加載 waifu.css live2d.min.js waifu-tips.jsif (screen.width >= 768) {Promise.all([loadExternalResource(live2d_path + "waifu.css", "css"),loadExternalResource(live2d_path + "live2d.min.js", "js"),loadExternalResource(live2d_path + "waifu-tips.js", "js")]).then(() => {// 配置選項(xiàng)的具體用法見 README.mdinitWidget({waifuPath: live2d_path + "waifu-tips.json",cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",// cdnPath: "./live2d_api-1.0.8/",// tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"tools: ["hitokoto", "switch-model", "switch-texture", "photo", "quit"]});});}</script></body>
</html>
項(xiàng)目目錄結(jié)構(gòu)：
自己使用的時(shí)候可以根據(jù)自己的需求將資源和模型文件放在服務(wù)器或者cdn上。
或者新建一個(gè)html文件，直接使用上面代碼即可。
源碼 + 模型下載
https://gitee.com/qkongtao/live2d-widget