Add live2d to your website 添加live2d效果到你的博客

Posted on 2023-12-01  461 Views

Live2d compatible with wordpress page

Based on AzurLaneL2DViewer
and fixed some small bugs


  1. Clone this repo
  2. Add the following content to your header.php:
<!-- Canvas -->
<div class="Canvas left"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Live2DCubismCore -->
<script src="js/live2dcubismcore.min.js"></script>

<!-- Include Pixi. -->
<script src="js/pixi.min.js"></script>

<!-- Include Cubism Components. -->
<script src="js/live2dcubismframework.js"></script>
<script src="js/live2dcubismpixi.js"></script>

<!-- User's Script -->
<script src="js/charData.js"></script>
<script src=""></script>
<script src="js/main.js"></script>
  1. Modify and add the following content to your footer.php. Basepath is your url of live2d root directory:
<div class="Canvas"  id="L2dCanvas"></div>
            var config = {
                    width: window.innerWidth/3,
                    height: window.innerHeight/3,
                    left: '-150px',
                    bottom: '50px',
                    basePath: 'your live2d root path of url',
                    role: 'wuqi_2',
                    opacity: 1,
                    mobile: false
            var v = new Viewer(config);
  1. See example in index.html