Hexo+Icarus3+live2d给博客添加看板娘

补坑

之前写过一篇icarus添加看板娘的教程但是版本是<Icarus3的 Icarus3改版很大，完全使用了jsx来代替了ejs，不过添加看板娘不管是jsx还是ejs差别都不大

icarus3之前的教程博客传送门

上一篇博客那时候拉的live2D还需要导入jQuery 2020年1月1日起，项目不再依赖于 jQuery。

这次我把live2d直接放到了主题文件夹下的source下面跟js/css/img同级

下载live2D

进入博客根目录

cd theme/icarus/source && git clone https://github.com/stevenjoezhang/live2d-widget.git

修改配置

1. 导入css依赖

找到theme/icarus/layout/common/head.jsx 插入css依赖

大概是在一百四十多行的样子吧或者可以在head.jsx内搜索<link>标签然后插入这行

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

修改后完整的head.jsx

const { Component } = require('inferno');
const MetaTags = require('hexo-component-inferno/lib/view/misc/meta');
const OpenGraph = require('hexo-component-inferno/lib/view/misc/open_graph');
const StructuredData = require('hexo-component-inferno/lib/view/misc/structured_data');
const Plugins = require('./plugins');function getPageTitle(page, siteTitle, helper) {let title = page.title;if (helper.is_archive()) {title = helper._p('common.archive', Infinity);if (helper.is_month()) {title += ': ' + page.year + '/' + page.month;} else if (helper.is_year()) {title += ': ' + page.year;}} else if (helper.is_category()) {title = helper._p('common.category', 1) + ': ' + page.category;} else if (helper.is_tag()) {title = helper._p('common.tag', 1) + ': ' + page.tag;} else if (helper.is_categories()) {title = helper._p('common.category', Infinity);} else if (helper.is_tags()) {title = helper._p('common.tag', Infinity);}return [title, siteTitle].filter(str => typeof str !== 'undefined' && str.trim() !== '').join(' - ');
}module.exports = class extends Component {render() {const { env, site, config, helper, page } = this.props;const { url_for, cdn, fontcdn, iconcdn, is_post } = helper;const {url,meta_generator = true,head = {},article,highlight,variant = 'default'} = config;const {meta = [],open_graph = {},structured_data = {},canonical_url = page.permalink,rss,favicon} = head;const language = page.lang || page.language || config.language;const fontCssUrl = {default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')};let hlTheme, images;if (highlight && highlight.enable === false) {hlTheme = null;} else if (article && article.highlight && article.highlight.theme) {hlTheme = article.highlight.theme;} else {hlTheme = 'atom-one-light';}if (typeof page.og_image === 'string') {images = [page.og_image];} else if (helper.has_thumbnail(page)) {images = [helper.get_thumbnail(page)];} else if (article && typeof article.og_image === 'string') {images = [article.og_image];} else if (page.content && page.content.includes('<img')) {let img;images = [];const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi;while ((img = imgPattern.exec(page.content)) !== null) {images.push(img[1]);}} else {images = [url_for('/img/og_image.png')];}let adsenseClientId = null;if (Array.isArray(config.widgets)) {const widget = config.widgets.find(widget => widget.type === 'adsense');if (widget) {adsenseClientId = widget.client_id;}}let openGraphImages = images;if ((typeof open_graph === 'object' && open_graph !== null)&& ((Array.isArray(open_graph.image) && open_graph.image.length > 0) || typeof open_graph.image === 'string')) {openGraphImages = open_graph.image;} else if ((Array.isArray(page.photos) && page.photos.length > 0) || typeof page.photos === 'string') {openGraphImages = page.photos;}let structuredImages = images;if ((typeof structured_data === 'object' && structured_data !== null)&& ((Array.isArray(structured_data.image) && structured_data.image.length > 0) || typeof structured_data.image === 'string')) {structuredImages = structured_data.image;} else if ((Array.isArray(page.photos) && page.photos.length > 0) || typeof page.photos === 'string') {structuredImages = page.photos;}return <head><meta charset="utf-8" />{meta_generator ? <meta name="generator" content={`Hexo ${env.version}`} /> : null}<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />{meta && meta.length ? <MetaTags meta={meta} /> : null}<meta name="baidu-site-verification" content="mhWv4NNMfG" /><meta name="google-site-verification" content="aNBCEhnauRjyRi2s55JA4LemtzHTmgcHT43vigw9Qek" /><title>{getPageTitle(page, config.title, helper)}</title>{typeof open_graph === 'object' && open_graph !== null ? <OpenGraphtype={open_graph.type || (is_post(page) ? 'article' : 'website')}title={open_graph.title || page.title || config.title}date={page.date}updated={page.updated}author={open_graph.author || config.author}description={open_graph.description || page.description || page.excerpt || page.content || config.description}keywords={page.keywords || (page.tags && page.tags.length ? page.tags : undefined) || config.keywords}url={open_graph.url || page.permalink || url}images={openGraphImages}siteName={open_graph.site_name || config.title}language={language}twitterId={open_graph.twitter_id}twitterCard={open_graph.twitter_card}twitterSite={open_graph.twitter_site}googlePlus={open_graph.google_plus}facebookAdmins={open_graph.fb_admins}facebookAppId={open_graph.fb_app_id} /> : null}{typeof structured_data === 'object' && structured_data !== null ? <StructuredDatatitle={structured_data.title || config.title}description={structured_data.description || page.description || page.excerpt || page.content || config.description}url={structured_data.url || page.permalink || url}author={structured_data.author || config.author}date={page.date}updated={page.updated}images={structuredImages} /> : null}{canonical_url ? <link rel="canonical" href={canonical_url} /> : null}{rss ? <link rel="alternative" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}{favicon ? <link rel="icon" href={url_for(favicon)} /> : null}<link rel="stylesheet" href={iconcdn()} />{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}<link rel="stylesheet" href={fontCssUrl[variant]} /><link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />{/* 这行是live2d需要的css依赖 */}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/><Plugins site={site} config={config} helper={helper} page={page} head={true} />{adsenseClientId ? <script data-ad-client={adsenseClientId}src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async={true}></script> : null}</head>;}
};

2. 修改刚下载的live2d-widget 下的`autoload.js`

注释掉第二行 //const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";

放开第三行 const live2d_path = "/live2d-widget/";

修改后的autoload.js

// 注意：live2d_path 参数应使用绝对路径
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/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.js
if (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(() => {initWidget({waifuPath: live2d_path + "waifu-tips.json",//apiPath: "https://live2d.fghrsh.net/api/",cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"//cdnPath: "https://live2d.fghrsh.net/api/"});});
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

3. 在主题内导入`autoload.js`

前提是 live2d-widget 的位置在theme/icarus/source下

找到theme/icarus/layout/common/scripts.jsx 在末尾处 <Fragment>标签内添加

<script src={url_for('/live2d-widget/autoload.js')}></script>

添加后完整的scripts.jsx

const {Component, Fragment} = require('inferno');
const Plugins = require('./plugins');module.exports = class extends Component {render() {const {site, config, helper, page} = this.props;const {url_for, cdn} = helper;const {external_link, article} = config;const language = page.lang || page.language || config.language || 'en';let externalLink;if (typeof external_link === 'boolean') {externalLink = {enable: external_link, exclude: []};} else {externalLink = {enable: typeof external_link.enable === 'boolean' ? external_link.enable : true,exclude: external_link.exclude || []};}let fold = 'unfolded';let clipboard = true;if (article && article.highlight) {if (typeof article.highlight.clipboard !== 'undefined') {clipboard = !!article.highlight.clipboard;}if (typeof article.highlight.fold === 'string') {fold = article.highlight.fold;}}const embeddedConfig = `var IcarusThemeSettings = {site: {url: '${config.url}',external_link: ${JSON.stringify(externalLink)}},article: {highlight: {clipboard: ${clipboard},fold: '${fold}'}}};`;return <Fragment><script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script><script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script><script dangerouslySetInnerHTML={{__html: `moment.locale("${language}");`}}></script><script dangerouslySetInnerHTML={{__html: embeddedConfig}}></script>{clipboard ? <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer={true}></script> : null}<Plugins site={site} config={config} page={page} helper={helper} head={false}/><script src={url_for('/js/main.js')} defer={true}></script><script src={url_for('/live2d-widget/autoload.js')}></script></Fragment>;}
};

4. 开启live2d

编辑主题配置文件_config.yml 添加

live2d:enable: true

大功告成！

备注

看板娘到这儿应该就可以出来了但是会发现在icarus的样式下面这时候需要把看板娘给置顶

找到live2d-widget 下的waifu.css 修改33行 id为#waifu的样式把z-index:1 修改为z-index:1000；

修改后的waifu.css

#waifu-toggle {background-color: #fa0;border-radius: 5px;bottom: 66px;color: #fff;cursor: pointer;font-size: 12px;left: 0;margin-left: -100px;padding: 5px 2px 5px 5px;position: fixed;transition: margin-left 1s;width: 60px;writing-mode: vertical-rl;
}#waifu-toggle.waifu-toggle-active {margin-left: -50px;
}#waifu-toggle.waifu-toggle-active:hover {margin-left: -30px;
}#waifu {bottom: -1000px;left: 0;line-height: 0;margin-bottom: -10px;position: fixed;transform: translateY(3px);transition: transform .3s ease-in-out, bottom 3s ease-in-out;z-index: 1000;
}#waifu:hover {transform: translateY(0);
}#waifu-tips {animation: shake 50s ease-in-out 5s infinite;background-color: rgba(236, 217, 188, .5);border: 1px solid rgba(224, 186, 140, .62);border-radius: 12px;box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2);font-size: 14px;line-height: 24px;margin: -30px 20px;min-height: 70px;opacity: 0;overflow: hidden;padding: 5px 10px;position: absolute;text-overflow: ellipsis;transition: opacity 1s;width: 250px;word-break: break-all;
}#waifu-tips.waifu-tips-active {opacity: 1;transition: opacity .2s;
}#waifu-tips span {color: #0099cc;
}#waifu #live2d {cursor: grab;height: 280px;position: relative;width: 280px;
}#waifu #live2d:active {cursor: grabbing;
}#waifu-tool {color: #aaa;opacity: 0;position: absolute;right: -10px;top: 70px;transition: opacity 1s;
}#waifu:hover #waifu-tool {opacity: 1;
}#waifu-tool span {color: #7b8c9d;cursor: pointer;display: block;line-height: 30px;text-align: center;transition: color .3s;
}#waifu-tool span:hover {color: #0684bd; /* #34495e */
}@keyframes shake {2% {transform: translate(.5px, -1.5px) rotate(-.5deg);}4% {transform: translate(.5px, 1.5px) rotate(1.5deg);}6% {transform: translate(1.5px, 1.5px) rotate(1.5deg);}8% {transform: translate(2.5px, 1.5px) rotate(.5deg);}10% {transform: translate(.5px, 2.5px) rotate(.5deg);}12% {transform: translate(1.5px, 1.5px) rotate(.5deg);}14% {transform: translate(.5px, .5px) rotate(.5deg);}16% {transform: translate(-1.5px, -.5px) rotate(1.5deg);}18% {transform: translate(.5px, .5px) rotate(1.5deg);}20% {transform: translate(2.5px, 2.5px) rotate(1.5deg);}22% {transform: translate(.5px, -1.5px) rotate(1.5deg);}24% {transform: translate(-1.5px, 1.5px) rotate(-.5deg);}26% {transform: translate(1.5px, .5px) rotate(1.5deg);}28% {transform: translate(-.5px, -.5px) rotate(-.5deg);}30% {transform: translate(1.5px, -.5px) rotate(-.5deg);}32% {transform: translate(2.5px, -1.5px) rotate(1.5deg);}34% {transform: translate(2.5px, 2.5px) rotate(-.5deg);}36% {transform: translate(.5px, -1.5px) rotate(.5deg);}38% {transform: translate(2.5px, -.5px) rotate(-.5deg);}40% {transform: translate(-.5px, 2.5px) rotate(.5deg);}42% {transform: translate(-1.5px, 2.5px) rotate(.5deg);}44% {transform: translate(-1.5px, 1.5px) rotate(.5deg);}46% {transform: translate(1.5px, -.5px) rotate(-.5deg);}48% {transform: translate(2.5px, -.5px) rotate(.5deg);}50% {transform: translate(-1.5px, 1.5px) rotate(.5deg);}52% {transform: translate(-.5px, 1.5px) rotate(.5deg);}54% {transform: translate(-1.5px, 1.5px) rotate(.5deg);}56% {transform: translate(.5px, 2.5px) rotate(1.5deg);}58% {transform: translate(2.5px, 2.5px) rotate(.5deg);}60% {transform: translate(2.5px, -1.5px) rotate(1.5deg);}62% {transform: translate(-1.5px, .5px) rotate(1.5deg);}64% {transform: translate(-1.5px, 1.5px) rotate(1.5deg);}66% {transform: translate(.5px, 2.5px) rotate(1.5deg);}68% {transform: translate(2.5px, -1.5px) rotate(1.5deg);}70% {transform: translate(2.5px, 2.5px) rotate(.5deg);}72% {transform: translate(-.5px, -1.5px) rotate(1.5deg);}74% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}76% {transform: translate(-1.5px, 2.5px) rotate(1.5deg);}78% {transform: translate(-1.5px, 2.5px) rotate(.5deg);}80% {transform: translate(-1.5px, .5px) rotate(-.5deg);}82% {transform: translate(-1.5px, .5px) rotate(-.5deg);}84% {transform: translate(-.5px, .5px) rotate(1.5deg);}86% {transform: translate(2.5px, 1.5px) rotate(.5deg);}88% {transform: translate(-1.5px, .5px) rotate(1.5deg);}90% {transform: translate(-1.5px, -.5px) rotate(-.5deg);}92% {transform: translate(-1.5px, -1.5px) rotate(1.5deg);}94% {transform: translate(.5px, .5px) rotate(-.5deg);}96% {transform: translate(2.5px, -.5px) rotate(-.5deg);}98% {transform: translate(-1.5px, -1.5px) rotate(-.5deg);}0%, 100% {transform: translate(0, 0) rotate(0);}
}