在博客侧边栏添加旋转小人

旋转小人

下面是codepen中的代码

<div class="twopeople">
    <div class="container" style="height:200px;">
        <canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script>
    <script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script>
    <style>
        .twopeople{
            margin: 0;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
            cursor: move;
        }
    </style>
</div>

引入到Hexo主题中

在themes/butterfly/layout/includes/widget中创建一个文件命名为card_anim.pug
在文件中复制以下代码

.twopeople(style="margin: 0;align-items: center;justify-content: center;text-align: center;")
    .container(style="height: 180px; margin: 0; align-items: center; justify-content: center; text-align: center;")
      canvas.illo(width="600" height="600" style="display: block;margin: 0 auto;cursor: move;max-width: 200px; max-height: 200px; touch-action: none; width: 480px; height: 480px;")
    
<script src="https://npm.elemecdn.com/justlovesmile-static/js/twopeople1.js"></script>
<script src="https://npm.elemecdn.com/justlovesmile-static/js/zdog.dist.js"></script>
<script id="rendered-js" src="https://npm.elemecdn.com/justlovesmile-static/js/twopeople.js"></script>

在themes/butterfly/layout/includes/widget/index.pug中引入我们刚刚添加的文件到页面，+号的是引入的文件,记得把+号删除

#aside-content.aside-content
  if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
  else
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_top_self', {}, {cache: true})

+include ./card_anim.pug

.sticky_layout
  if !is_post()
    if showToc
      include ./card_post_toc.pug
    .card-widget
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_bottom_self', {}, {cache: true})
  else 
      include ./card_post_toc.pug
      include ./card_recent_post.pug