Shoka主题：新增按钮控制看板娘的显示隐藏

# 安装 live2d 看板娘

网上有很多教程，这里就不用细说了，直接

npm install --save hexo-helper-live2d

然后再根目录的 yml 下新增 live2d 的各种设置即可

# 开始修改

# 前言

1. 打开 F12，元素 (Elements) 可以看到，关于 live2d 在网页中在网页最下方

   <div id="live2d-widget" class="live2d-widget-container" style="position: fixed; left: 0px; bottom: -20px; width: 200px; height: 300px; z-index: 99999; opacity: 1; pointer-events: none; visibility: visible;">...</div>

2. 可以看出 id 为 live2d-widget，这就好说了，只要在 js 里找到这个 id，控制 css 属性的显示隐藏就行了；

3. 这里直接用的 css 属性时 visibility 的 hidden 和 visible 属性

# 具体修改

1. 找到 themes->shoka->source->js->_app，以下修改都是在这里修改。

2. 找到 global.js ，在大概 16 行位置新增按钮的名字（自己起一个），假如为 chooselive2d ，然后修改：

   var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents;

   修改为

   var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents, chooselive2d;

3. 在 pjax.js 文件里大概 16 行，新增那个按钮的 div 标签，用的图标随意，这里我用的是 ic i-thumbtack 图标，修改：

   	if(!toolBtn) {
   	toolBtn = siteHeader.createChild('div', {
   	id: 'tool',
   	innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
   	});
   	}

   修改为：

   	if(!toolBtn) {
   	toolBtn = siteHeader.createChild('div', {
   	id: 'tool',
   	innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item live2d"><i class="ic i-thumbtack"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
   	});
   	}

   然后下面代码仿照新增 child 和监听事件

   	toolPlayer = toolBtn.child('.player');
   	backToTop = toolBtn.child('.back-to-top');
   	goToComment = toolBtn.child('.chat');
   	showContents = toolBtn.child('.contents');
   	backToTop.addEventListener('click', backToTopHandle);
   	goToComment.addEventListener('click', goToCommentHandle);
   	showContents.addEventListener('click', sideBarToggleHandle);

   修改为

   	toolPlayer = toolBtn.child('.player');
   	backToTop = toolBtn.child('.back-to-top');
   	goToComment = toolBtn.child('.chat');
   	chooselive2d = toolBtn.child('.live2d') // 新增
   	showContents = toolBtn.child('.contents');
   	backToTop.addEventListener('click', backToTopHandle);
   	goToComment.addEventListener('click', goToCommentHandle);
   	chooselive2d.addEventListener('click', chooseLive2dHandle); // 新增
   	showContents.addEventListener('click', sideBarToggleHandle);

   这里的 chooseLive2dHandle 如下

4. 在 sidebar.js 里大概 220 行左右写实现代码 (和其他 handle 写一起)

   新增：

   	const chooseLive2dHandle = function () {
   	var live2d = document.getElementById("live2d-widget");
   	if(live2d.style.visibility == "hidden"){
   	live2d.style.visibility = "visible";
   	}else{
   	live2d.style.visibility = "hidden";
   	}
   	}

5. 修改下 css 问题，在 themes->shoka->source->css->_common->outline->header->tool.styl 中大概 180 行左右，在 .back-to-top css 代码下，新增：

   	.live2d {
   	align-items: center;
   	justify-content: center;
   	height: auto;
   	padding: .4125rem 0 .4125rem 0;
   	}