侧边栏添加旋转小人

旋转小人

实现代码参考 codepen

codepen代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

引入到主题中

在themes/anzhiyu/layout/includes/widget创建文件card_anim.pug
代码参考如下:

1
2
3
4
5
6
7
.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/anzhiyu/layout/includes/widget/index.pug中引入刚刚创建的页面(card_anim.pug)
然后hexo三件套就可以看到效果
以上部分参考: 别亦难

微调

如果此时按照前面博主那样设置,右侧栏会被顶,所以需要微调，以下内容Ctrl + C/V就可以使用了
微调如下:

card_anim.pug:

1
2
3
4
5
6
7
8
9
10
.card-widget.card-revolve
    .twopeople(style="margin: 0;align-items: center;justify-content: center;text-align: center; background: linear-gradient(to bottom, #D9A7C7, #FFFCDC);")
        .container(style="height: 50px; margin: 0; align-items: center; justify-content: center; text-align: center;")
            h2 不定期更新博客,欢迎互换
                a(href="https://blog.calyee.top/link/") 友链.
        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>

index.pug:指themes/anzhiyu/layout/includes/widget/index.pug.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#aside-content.aside-content
  //- post
  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_anim', {}, {cache: true})  
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_weixin', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
+    !=partial('includes/widget/card_anim', {}, {cache: true}) 
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    !=partial('includes/widget/card_weixin', {}, {cache: true})

aside.styl: 指themes\anzhiyu\source\css\_layout\aside.styl

找到样式 #aside-content处

1
2
3
4
5
6
7
8
9
10
11
12
if hexo-config('aside.enable')
  #aside-content
+    >.card-widget.card-revolve
+      text-align: left;
+      font-size: 12px;
+      margin-top: 20px;
+      padding: 0px 0px;
+      border-radius: 12px;
+      width: 100%;
+      background: linear-gradient(to bottom, #D9A7C7, #FFFCDC);
+      a
+        color: #f18ed4;text-decoration: none;

如果你觉得有用，可以留下个评论