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;
   	}