{ "version": "https://jsonfeed.org/version/1", "title": "lavender", "subtitle": "浩瀚众星，皆降为尘", "icon": "https://blog.lavender816.top/images/favicon.ico", "description": "技术生活分享", "home_page_url": "https://blog.lavender816.top", "items": [ { "id": "https://blog.lavender816.top/posts/2448596547/", "url": "https://blog.lavender816.top/posts/2448596547/", "title": "Shoka主题：修改标签页显示效果", "date_published": "2022-06-22T15:00:00.000Z", "content_html": "
\n

修改标签页显示效果

\n
\n

# 前言

\n
\n

本标签页面参考 HEO 大佬的标签页面，实现标签的美化以及右上角标签对应文章数量的显示
\n本标签页右上角显示文章数量参考 Eurkon 大佬的文章：Butterfly 标签云增加文章数上下标

\n
\n

# 实现

\n

# 主题 yml 文件

\n
    \n
  1. \n

    找到主题配置文件 themes\\shoka\\_config.yml ;

    \n
    2. \n
  2. \n

    找到 tagcloud ：

    \n
    3. \n
\n
# TagCloud settings for tags page.
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 16 # Minimun font size in px
  max: 22 # Maxium font size in px
  start: \"#72cecf\" # Start color (hex, rgba, hsla or color keywords)
  end: \"#ffbac3\" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

其中 start 和 end 可以修改字体颜色范围。

\n

# 新增标签颜色

\n
    \n
  1. \n

    找到 css 颜色文件 themes\\shoka\\source\\css\\_colors.styl ；

    \n
    2. \n
  2. \n

    可以在 50 行左右新增自定义的标签颜色设置；

    \n
    3. \n
\n
--header-text-color: var(--grey-0);
--primary-color: var(--color-red);
--tags-background: #edf0f7;  // 新增，修改为自己喜欢的日间模式的背景颜色
接下来修改夜间模式颜色，大概 150 行左右
\n
在 [data-theme="dark"] { 下新增夜间模式的颜色值
\n
--text-color: var(--grey-5);
--header-text-color: var(--grey-9);
--tags-background: #30343f;  // 新增，修改为自己喜欢的夜间模式的背景颜色
    \n
  1. \n
    单独复制用：
    \n
    --tags-background: #edf0f7;
    2. \n
\n
# 修改背景以及鼠标悬浮效果
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\components\\pages\\tag-cloud.styl  文件，修改如下：
    \n
    .tag.cloud {
      text-align: center;
      a {
        display: inline-block;
        margin: .625rem;
        &:hover {
          color: var(--primary-color) !important;
        }
      }
    }
    修改为
    \n
    .tag.cloud {
      text-align: center;
      a {
        display: inline-block;
        margin: .625rem;
        background: var(--tags-background);
        padding: .3em .5em;
        border-radius: 10px;
        box-shadow: 0px 7px 23px rgba(0, 0, 0, 0.2);
        &:hover {
          color: var(--grey-3) !important;
          transform:scale(1.25,1.25);
          background: var(--primary-color);
        }
      }
    }
    2. \n
\n
# 增加右上角文章数量显示
\n
    \n
  1. \n
    找到 node_modules\\hexo\\lib\\plugins\\helper\\tagcloud.js  文件；
    \n
    2. \n
  2. \n
    60 行左右找到  tags.forEach(tag => { 部分
    \n
    tags.forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0;
        const size = min + ((max - min) * ratio);
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;
        const attr = className ? ` class=\"${className}-${Math.round(ratio * level)}\"` : '';
        if (color) {
          const midColor = startColor.mix(endColor, ratio);
          style += ` color: ${midColor.toString()}`;
        }
        result.push(
          `<a href=\"${url_for.call(this, tag.path)}\" style=\"${style}\"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
        );
      });
    在最后的  result.push  中，找到最后一个 tag.name ，修改
    \n
    新增上标：
    \n
    <sup>${tag.length}</sup>
    或者下标
    \n
    <sub>${tag.length}</sub>
    加入后如下（上标）：
    \n
    result.push(
          `<a href=\"${url_for.call(this, tag.path)}\" style=\"${style}\"${attr}>${transform ? transform(tag.name) : tag.name}<sup>${tag.length}</sup></a>`
        );
    3. \n
  3. \n
    最后 hexo clean ，重新生成即可。
    \n
    4. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/4042067032/",
            "url": "https://blog.lavender816.top/posts/4042067032/",
            "title": "Shoka主题：修改页面滚动视差效果",
            "date_published": "2022-06-22T14:00:00.000Z",
            "content_html": "
\n
修改页面滚动视差效果
\n
\n
# 前言
\n
\n
实现页面滚动时背景图随滚动发生位移的视差效果
\n
\n
# 实现
\n
# 修改 Js
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\js\\_app\\global.js ;
    \n
    2. \n
  2. \n
    大概 20 行左右新增：
    \n
    var imgMover = $('#imgs');  // 新增
    位置参考：
    \n
    const sideBar = $('#sidebar');
    const siteBrand = $('#brand');
    var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents;
    var angleBtn = $('#angle');
    var imgMover = $('#imgs');  // 此处新增（参考位置）
    var siteSearch = $('#search');
    3. \n
  3. \n
    在 188 行左右：
    \n
    const scrollHandle = function (event) {
      var winHeight = window.innerHeight;
      var docHeight = getDocHeight();
      var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
      var SHOW = window.pageYOffset > headerHightInner;
      var startScroll = window.pageYOffset > 0;
        
    \t// 此处可以新增代码
        
      if (SHOW) {
        changeMetaTheme('#FFF');
      } else {
        changeMetaTheme('#222');
      }
    代码处新增以下代码：
    \n
    var oVal = Math.round(Math.min(300 * window.pageYOffset / contentVisibilityHeight, 100)) / -5;
    var max = 200 + window.pageYOffset;
    if (oVal > max) {
    \toVal = max;
    }
    imgMover.style.transform = 'translate3d(0,' + oVal + 'vh,0)';
    imgMover.style.webkitTransform  = 'translate3d(0,' + oVal + 'vh,0)';
    imgMover.style.msTransform = 'translate3d(0,' + oVal + 'vh,0)';
    imgMover.style.OTransform  = 'translate3d(0,' + oVal + 'vh,0)';
    此处的 var oVal = Math.round(Math.min(300 * window.pageYOffset / contentVisibilityHeight, 100)) / -5;  中的数值根据自己实际情况喜好可做出修改
    \n
    4. \n
  4. \n
    修复切换页面时视差效果失效的问题：在 themes\\shoka\\source\\js\\_app\\pjax.js  文件大概 53 行
    \n
    const siteRefresh = function (reload) {
      LOCAL_HASH = 0
      LOCAL_URL = window.location.href
        // 此处新增
        
      vendorCss('katex');
      vendorJs('copy_tex');
    新增如下代码
    \n
    imgMover = $('#imgs')
    5. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1168994136/",
            "url": "https://blog.lavender816.top/posts/1168994136/",
            "title": "Shoka主题：修改首页文章摘要hover效果",
            "date_published": "2022-06-22T07:00:00.000Z",
            "content_html": "
\n
修改首页文章摘要 hover 效果
\n
\n
# 前言
\n
\n
想法来自于 HEO 大佬首页文章效果，实现首页文章摘要的 hover 显示效果
\n
\n
# 实现
\n
# 修改 Stylus
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\components\\pages\\home.styl ;
    \n
    2. \n
  2. \n
    大概 260 行左右，找到 &:hover  代码部分，修改如下：
    \n
    3. \n
  3. \n
    修改鼠标悬浮后图片变暗效果，增加 brightness  属性：
    \n
    &:hover {
    \tbox-shadow: 0 0 2rem var(--box-bg-shadow);
    \t.cover {    // 新增
    \t\tfilter: brightness(.3);
    \t}
    \t.cover img {
    4. \n
  4. \n
    修改鼠标悬浮后旋转效果
    \n
    .cover {
    \tfilter: brightness(.3);
    }
    .cover img {   // 修改
    \ttransform: scale(1.25) rotate(2deg);
    }
    .info {
    修改另一个方向的旋转效果（410 行左右，即最后部分）
    \n
    &:hover {
      .cover img {
        transform: scale(1.25) rotate(-2deg);
      }
    }
    5. \n
  5. \n
    修改鼠标悬浮后内容宽度、标题位置，摘要显示
    \n
    .info {
    \twidth: 75%;
    \t+mobile(){
    \t\twidth: 100%;
    \t}
    }
    .info h3{
    \tmargin: .625rem 0;
    \tcolor: var(--color-blue);
    }
    .excerpt {
    \topacity: 1;
    }
    6. \n
  6. \n
    修改鼠标悬浮前标题位置 (340 行左右 .info h3  处)
    \n
    h3 {
    \ttext-overflow: ellipsis;
    \toverflow: hidden;
    \twhite-space: nowrap;
    \tmargin: .625rem 0;
    \tcolor: var(--primary-color);
    }
    修改为
    \n
    h3 {
    \ttext-overflow: ellipsis;
    \toverflow: hidden;
    \twhite-space: nowrap;
    \tmargin: 3.525rem 0 0 0;
    \tcolor: var(--primary-color);
    \tthe-transition-margin();  // 平滑过渡
    }
    7. \n
  7. \n
    修改悬浮前摘要内容显示，在紧接着 h3  下的 excerpt  中
    \n
    .excerpt {
          overflow: hidden;
          font-size: $font-size-small;
          max-height: 5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
    }
    修改为（新增）
    \n
    .excerpt {
          overflow: hidden;
          font-size: $font-size-small;
          max-height: 5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          opacity: 0;   // 不显示
          pointer-events: none;
          the-transition();  // 平滑过渡
    }
    8. \n
  8. \n
    平滑过渡（290 行左右 .cover ，315 行左右 .info ，340 行左右 h3 ，350 行 .excerpt  中加入平滑动画代码
    \n
    the-transition();
    在 source/css/_mixins.styl 中，仿照 the-transition  的写法，自定义 the-transition-margin ，如下：
    \n
    the-transition-margin(duration = .3s, function = ease, delay = 0s, property = margin) {
    \ttransition:property duration function delay;
    }
    h3  中我加入的平滑便是
    \n
    the-transition-margin();
    9. \n
  9. \n
    适配移动端（270 行左右， .info  中加入 width  的 100% 属性保证移动端不会出现错位）
    \n
    .info { 
        width: 75%;
        +mobile(){
          width: 100%;
        }
    10. \n
\n
}
\n```
\n
# 总结
\n\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1237297410/",
            "url": "https://blog.lavender816.top/posts/1237297410/",
            "title": "Shoka主题：修改夜间模式切换动画",
            "date_published": "2022-06-21T11:00:00.000Z",
            "content_html": "
\n
修改夜间模式切换动画
\n
\n
# 前言
\n
\n
仍然想要折腾下主题默认的夜间模式切换动画
\n
\n
# 实现
\n
# 修改 Js
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\js\\_app\\global.js ;
    \n
    2. \n
  2. \n
    找到 var neko = BODY.createChild  的位置，修改 js  添加 html  块的代码：
    \n
    var neko = BODY.createChild('div', {
          id: 'neko',
          innerHTML: '<div class=\"planet\"><div class=\"sun\"></div><div class=\"moon\"></div></div><div class=\"body\"><div class=\"face\"><section class=\"eyes left\"><span class=\"pupil\"></span></section><section class=\"eyes right\"><span class=\"pupil\"></span></section><span class=\"nose\"></span></div></div>'
        });
    将 innerHTML  中替换为你喜爱的新的 html  部分（将 html 压缩，可用在线工具），以本网站动画为例， innerHTML  改为:
    \n
    var neko = BODY.createChild('div', {
          id: 'neko',
          innerHTML: '<div class=\"newlight\"id=\"sunmooncont\"><div class=\"bgclo\"></div><div class=\"moon-box\"><div class=\"bigmoon\"></div></div><div class=\"sun-box\"><div class=\"bigsun\"></div></div><div class=\"bigsea\"></div></div>'
        });
    3. \n
  3. \n
    找到 if(btn.hasClass('i-sun'))  部分（在刚才部分下方十行左右），修改按钮触发动画 js ：
    \n
    if(btn.hasClass('i-sun')) {
          var c = function() {
              neko.addClass('dark');
              changeTheme('dark');
              store.set('theme', 'dark');
              hideNeko();
            }
        } else {
          neko.addClass('dark');
          var c = function() {
              neko.removeClass('dark');
              changeTheme();
              store.set('theme', 'light');
              hideNeko();
            }
        }
    修改为：
    \n
    if(btn.hasClass('i-sun')) {
    \tvar c = function() {
    \t\tsunmooncont.removeClass('newlight');
    \t\tsunmooncont.addClass('newdark');
    \t\tchangeTheme('dark');
    \t\tstore.set('theme', 'dark');
    \t\thideNeko();
    \t}
    } else {
    \tsunmooncont.addClass('newdark');
    \tvar c = function() {
    \t\tsunmooncont.removeClass('newdark');
    \t\tsunmooncont.addClass('newlight');
    \t\tchangeTheme();
    \t\tstore.set('theme', 'light');
    \t\thideNeko();
    \t}
    }
    其中，以上是个人动画示例， sunmooncont  是刚才 html  中最外层的 div  盒子。
    \n
    4. \n
\n
# 修改 Stylus
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\components\\third-party\\theme.styl ；
    \n
    2. \n
  2. \n
    可以直接删除原本的 css  代码，增加个人喜爱的切换模式动画的 css ，以本网站动画为例：
    \n
    3. \n
\n
#neko {
@extend $fix-fullscreen;
display: none;
#sunmooncont {
  height: 100vh;
}
.bgclo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bigsun {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 600px;
  background-color: orange;
  border-radius: 50%;
  +mobile() {
    top: 60%;
    width: 200px;
    height: 200px;
  }
  +tablet() {
    top: 55%;
    width: 400px;
    height: 400px;
  }
}
.bigmoon {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + -160px),calc(-50% + -180px));
  width: 600px;
  height: 600px;
  box-shadow: 160px 180px 0 cyan;
  border-radius: 50%;
  +mobile() {
    top: 60%;
    width: 200px;
    height: 200px;
    transform: translate(calc(-50% + -50px),calc(-50% + -60px));
    box-shadow: 50px 60px 0 cyan;
  }
  +tablet() {
    top: 55%;
    width: 400px;
    height: 400px;
    transform: translate(calc(-50% + -80px),calc(-50% + -90px));
    box-shadow: 80px 90px 0 cyan;
  }
}
.bigsea {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35%;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  z-index: 100;
}
.bigsun,
.bigmoon,
.sun-box,
.moon-box,
.bgclo {
  transition: all 1s ease-in-out;
}
.sun-box,
.moon-box {
  position: relative;
  overflow: hidden;
}
.newlight {
  .sun-box {
    height: 100%;
  }
  .moon-box {
    height: 0;
  }
  .bgclo {
    background-color: #ffeea2;
  }
}
.newdark {
  .sun-box {
    height: 0;
  }
  .moon-box {
    height: 100%;
  }
  .bgclo {
    background-color: #040720;
  }
}
}
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/608012233/",
            "url": "https://blog.lavender816.top/posts/608012233/",
            "title": "Shoka主题：修改加载动画",
            "date_published": "2022-06-21T01:00:00.000Z",
            "content_html": "
\n
修改主题加载动画
\n
\n
# 前言
\n
\n
主题默认加载动画是旋转的猫猫（ha），鉴于个人想要折腾的想法，修改成其他喜爱的加载动画
\n
\n
\n
主题的加载动画实际上就是一个单独的播放循环动画的网页 div 块（ <div id="loading"> )，页面最开始显示这个 div 块，加载完成后设置隐藏，即 <div id="loading" style="opacity: 0; display: none;">
\n
\n
# 实现
\n
# 修改 nunjucks (layout)
\n
    \n
  1. \n
    找到 themes\\shoka\\layout\\_partials\\  目录；
    \n
    2. \n
  2. \n
    修改 layout.njk , 修改 <div id="loading">  的位置，大概 12 行左右:
    \n
    <div id=\"loading\">
    \t<div class=\"cat\">
    \t\t<div class=\"body\"></div>
       \t\t<div class=\"head\">
            \t<div class=\"face\"></div>
          \t</div>
        \t<div class=\"foot\">
          \t\t<div class=\"tummy-end\"></div>
          \t\t<div class=\"bottom\"></div>
          \t\t<div class=\"legs left\"></div>
          \t\t<div class=\"legs right\"></div>
        \t</div>
        \t<div class=\"paw\">
          \t\t<div class=\"hands left\"></div>
          \t\t<div class=\"hands right\"></div>
        \t</div>
      \t</div>
    </div>
    将 loading  的 div  块内填入新的 loading  的 html  部分，以本网站动画为例， loading  下改为:
    \n
    <div id=\"loading\">
        <div class=\"reliefload\">
            <span style=\"--i:0;\"></span>
            <span style=\"--i:1;\"></span>
            <span style=\"--i:2;\"></span>
            <span style=\"--i:3;\"></span>
            <span style=\"--i:4;\"></span>
            <span style=\"--i:5;\"></span>
            <span style=\"--i:6;\"></span>
        </div>
    </div>
    3. \n
\n
# 修改 Stylus
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\components\\third-party\\loading.styl ；
    \n
    2. \n
  2. \n
    修改最开头的 loding  的 css :
    \n
    3. \n
\n
#loading {
  @extend $fix-fullscreen;
  background-color: var(--grey-1);
  if(!hexo-config('loader.start')) {
    display: none;
  }
}
新增居中 css ，修改为
\n
#loading {
  @extend $fix-fullscreen;
  background-color: var(--grey-1);
  if(!hexo-config('loader.start')) {
    display: none;
  }
  display: flex;
  justify-content: center;
  align-items: center;
}
    \n
  1. 在下方新增新增的 loding  的 css  代码（可以删除原来的代码）按本网站举例：
    2. \n
\n
.reliefload {
    display: flex;
    span {
      position: relative;
      width: 50px;
      height: 50px;
      background-color: #eaeef0;
      margin: 0 10px;
      border-radius: 50%;
      box-shadow: -8px -8px 15px $bgColor, // 此处使用的是原主题 css 部分设置的颜色变量引用，可以直接替换为 16 进制颜色代码
      8px 8px 15px rgba(0,0,0,0.2),
      inset 3px 3px 5px rgba(0,0,0,0.1),
      inset -1px -1px 5px rgba(255,255,255,1);
      border: 6px solid #eaeef0;
      +mobile() {
        width: 20px;
        height: 20px;
        border: 3px solid #eaeef0;
      }
      +tablet() {
        width: 30px;
        height: 30px;
        border: 4px solid #eaeef0;
      }
      &::before {
        content: \"\";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: lightseagreen;
        border-radius: 50%;
        box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1),
      inset -1px -1px 5px rgba(255,255,255,1);
        opacity: 0;
        animation: animaterelief 3.5s linear infinite,
      animateColor5s linear infinite;
        animation-delay: calc(var(--i) * 0.15s);
      }
    }
  }
  @keyframes animaterelief {
    0%,9.99%,70.01%{
        opacity: 0;
    }
    10%,70%{
        opacity: 1;
    }
  }
  @keyframes animateColor {
      to{
          filter: hue-rotate(360deg);
      }
  }
\n
其中， +mobile()  和 +tablet()  部分是适配移动端的 css，要根据自己的实际情况设置对应的参数：
\n
\n
# 修复页面内加载动画位置偏移的问题
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\outline\\outline.styl ；
    \n
    2. \n
  2. \n
    40 行左右找到 #main  的 css  配置项，仿照 .cat  的写法，加入 loading  的 div  下包围整个加载动画的 div  块：
    \n
    .cat {
        margin-top: 10rem;
        margin-top: 20rem;
    }
    删除 .cat  加入或者直接在下方加入新的 css ：
    \n
    .cat {
        margin-top: 10rem;
        margin-top: 20rem;
    }
    .reliefload {
        margin-top: 20rem;
        margin-left: 15rem;
    }
    其中：根据自己的实际情况调整 margin  的值。
    \n
    3. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/2028137251/",
            "url": "https://blog.lavender816.top/posts/2028137251/",
            "title": "冰墩墩雪容融",
            "date_published": "2022-02-25T14:00:00.000Z",
            "content_html": "
\n
这里记录下冰墩墩和雪容融的前端代码，源码从网络上获得，仅作记录
\n
\n
# 冰墩墩
\n
# HTML 部分
\n
<!DOCTYPE html>
<html>
\t<head>
\t\t<meta charset=\"utf-8\">
\t\t<title>冰墩墩</title>
\t</head>
\t<body>
\t\t<div class=\"bdd\">
\t\t\t<div class=\"m_body\"></div>
\t\t\t<div class=\"ear1\"></div>
\t\t\t<div class=\"ear2\"></div>
\t\t\t<div class=\"eye1\"></div>
\t\t\t<div class=\"eye2\"></div>
\t\t\t<div class=\"face c_blue\"></div>
\t\t\t<div class=\"face c_red\"></div>
\t\t\t<div class=\"face c_purple\"></div>
\t\t\t<div class=\"face c_yellow\"></div>
\t\t\t<div class=\"face c_green\"></div>
\t\t\t<div class=\"nose\"></div>
\t\t\t<div class=\"mouse\"></div>
\t\t\t<div class=\"arm1\"></div>
\t\t\t<div class=\"arm2\"></div>
\t\t\t<div class=\"leg1\"></div>
\t\t\t<div class=\"leg2\"></div>
\t\t</div>
\t</body>
</html>
# CSS 部分
\n
\n
* {
  margin: 0;
  padding: 0
}
body {
  font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif;
  background: #fff;
}
.bdd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 500px;
  margin-top: -250px;
  margin-left: -300px;
}
.m_body {
  width: 362px;
  height: 410px;
  border: #393939 8px solid;
  margin: 50px auto;
  border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
  position: absolute;
  left: 109px;
  top: -30px;
  background: url(logo.png) no-repeat center bottom 20px #fff;
  background-size: 63px;
}
.ear1,
.ear2 {
  background: #393939;
  width: 81px;
  height: 115px;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}
.ear1 {
  left: 150px;
  top: 26px;
  transform: rotate(-10deg);
}
.ear2 {
  left: 362px;
  top: 28px;
  transform: rotate(10deg);
}
.eye1,
.eye2 {
  background: #393939;
  width: 83px;
  height: 115px;
  border-radius: 50%;
  position: absolute;
}
.eye1 {
  left: 185px;
  top: 122px;
  transform: rotate(45deg);
}
.eye2 {
  left: 329px;
  top: 122px;
  transform: rotate(-45deg);
}
.eye1:before,
.eye2:before {
  content: \"\";
  width: 40px;
  height: 40px;
  border: #fff 5px solid;
  border-radius: 100%;
  position: absolute;
}
.eye1:before {
  right: 10px;
  top: 22px;
}
.eye2:before {
  left: 10px;
  top: 22px;
}
.eye1:after,
.eye2:after {
  content: \"\";
  width: 10px;
  height: 10px;
  background: #9b9b9b;
  border-radius: 100%;
  position: absolute;
}
.eye1:after {
  right: 27px;
  top: 31px;
}
.eye2:after {
  left: 41px;
  top: 44px;
}
.face {
  position: absolute;
  border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}
.c_blue {
  border: #6bcdf3 5px solid;
  width: 280px;
  height: 224px;
  left: 150px;
  top: 78px;
}
.c_red {
  border: #af2350 5px solid;
  width: 287px;
  height: 233px;
  left: 146px;
  top: 73px;
}
.c_purple {
  border: #5d75b3 5px solid;
  width: 295px;
  height: 240px;
  left: 142px;
  top: 70px;
}
.c_yellow {
  border: #ffc346 5px solid;
  width: 305px;
  height: 248px;
  left: 137px;
  top: 65px;
}
.c_green {
  border: #7fcb58 5px solid;
  width: 313px;
  height: 256px;
  left: 133px;
  top: 61px;
}
.arm1,
.arm2 {
  background: #333;
  position: absolute;
  z-index: -1;
}
.arm1 {
  width: 75px;
  height: 118px;
  left: 64px;
  top: 244px;
  transform: rotate(45deg);
  border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}
.arm2 {
  width: 75px;
  height: 148px;
  left: 463px;
  top: 162px;
  transform: rotate(37deg);
  border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
}
.arm2:before {
  content: \"\";
  width: 16px;
  height: 24px;
  background: #bc242c;
  position: absolute;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform: rotate(45deg);
  left: 32px;
  top: 20px;
}
.arm2:after {
  content: \"\";
  width: 16px;
  height: 24px;
  background: #bc242c;
  position: absolute;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform: rotate(-45deg);
  left: 26px;
  top: 20px;
}
.arm_c {
  content: \"\";
  width: 16px;
  height: 24px;
  position: absolute;
  left: 426px;
  top: 20px;
}
.nose {
  background-color: #333333;
  position: absolute;
  left: 284px;
  top: 187px;
  width: 28px;
  height: 18px;
  border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
}
.mouse {
  position: absolute;
  left: 265px;
  top: 205px;
  width: 68px;
  height: 25px;
  border-radius: 48%;
  border: #393939 7px solid;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.leg1,
.leg2 {
  background: #333;
  position: absolute;
  width: 83px;
  height: 80px;
  border-radius: 0 0 30px 30px;
  z-index: -1;
}
.leg1 {
  left: 187px;
  top: 423px;
}
.leg2 {
  left: 328px;
  top: 423px;
}
.leg1:after,
.leg2:after {
  content: \"\";
  width: 43px;
  height: 30px;
  position: absolute;
  background: #333;
  border-radius: 30px;
}
.leg1:after {
  bottom: 0;
  right: -3px;
}
.leg2:after {
  bottom: 0;
  left: -3px;
}
\n
\n
* { margin: 0; padding: 0 }
body { font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif; background: #fff;   }
.bdd { position: absolute; left: 50%; top: 50%; width: 600px; height: 500px; margin-top: -250px; margin-left: -300px; }
.m_body {width: 362px;height: 410px;border: #393939 8px solid;margin: 50px auto;border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;position: absolute;left: 109px;top: -30px;background: url(logo.png) no-repeat center bottom 20px #fff;background-size: 63px;}.ear1, .ear2 {background: #393939;width: 81px;height: 115px;border-radius: 50%;position: absolute;z-index: -1;}
.ear1 {left: 150px;top: 26px;transform: rotate( -10deg );}
.ear2 {left: 362px;top: 28px;transform: rotate(10deg);}
.eye1, .eye2 {background: #393939;width: 83px;height: 115px;border-radius: 50%;position: absolute;}
.eye1 { left: 185px; top: 122px; transform: rotate(45deg); }
.eye2 { left: 329px; top: 122px; transform: rotate(-45deg); }
.eye1:before, .eye2:before { content: \"\"; width: 40px; height: 40px; border: #fff 5px solid; border-radius: 100%; position: absolute; }
.eye1:before { right: 10px; top: 22px; }
.eye2:before { left: 10px; top: 22px; }
.eye1:after, .eye2:after { content: \"\"; width: 10px; height: 10px; background: #9b9b9b; border-radius: 100%; position: absolute; }
.eye1:after { right: 27px; top: 31px; }
.eye2:after { left: 41px; top: 44px; }
.face {position: absolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;}
.c_blue { border: #6bcdf3 5px solid; width: 280px; height: 224px; left: 150px; top: 78px; }
.c_red { border: #af2350 5px solid; width: 287px; height: 233px; left: 146px; top: 73px; }
.c_purple { border: #5d75b3 5px solid; width: 295px; height: 240px; left: 142px; top: 70px; }
.c_yellow { border: #ffc346 5px solid; width: 305px; height: 248px; left: 137px; top: 65px; }
.c_green { border: #7fcb58 5px solid; width: 313px; height: 256px; left: 133px; top: 61px; }
.arm1, .arm2 { background: #333; position: absolute; z-index: -1; }
.arm1 {width: 75px;height: 118px;left: 64px;top: 244px;transform: rotate(45deg);border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;}
.arm2 {width: 75px;height: 148px;left: 463px;top: 162px;transform: rotate(37deg);border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;}
.arm2:before { content: \"\"; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(45deg); left: 32px; top: 20px; }
.arm2:after { content: \"\"; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(-45deg); left: 26px; top: 20px; }
.arm_c { content: \"\"; width: 16px; height: 24px; position: absolute; left: 426px; top: 20px; }
.nose{background-color: #333333; position: absolute;left: 284px;top: 187px;width: 28px;height: 18px;border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;}
.mouse {position: absolute;left: 265px;top: 205px;width: 68px;height: 25px;border-radius: 48%;border: #393939 7px solid;border-top: none;border-left: 0;border-right: 0;}
.leg1, .leg2 {background: #333;position: absolute;width: 83px;height: 80px;border-radius: 0 0 30px 30px;z-index: -1;}
.leg1 { left: 187px; top: 423px; }
.leg2 { left: 328px; top: 423px; }
.leg1:after, .leg2:after { content: \"\"; width: 43px; height: 30px; position: absolute; background: #333; border-radius: 30px; }
.leg1:after { bottom: 0; right: -3px; }
.leg2:after { bottom: 0; left: -3px; }
\n
\n
* {
  margin: 0;
  padding: 0;
}
body {
  font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif;
  background: #fff;
}
.bdd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 500px;
  margin-top: -250px;
  margin-left: -300px;
}
.m_body {
  width: 362px;
  height: 410px;
  border: #393939 8px solid;
  margin: 50px auto;
  border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
  position: absolute;
  left: 109px;
  top: -30px;
  background: url(logo.png) no-repeat center bottom 20px #fff;
  background-size: 63px;
}
.ear1,
.ear2 {
  background: #393939;
  width: 81px;
  height: 115px;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}
.ear1 {
  left: 150px;
  top: 26px;
  transform: rotate(-10deg);
}
.ear2 {
  left: 362px;
  top: 28px;
  transform: rotate(10deg);
}
.eye1,
.eye2 {
  background: #393939;
  width: 83px;
  height: 115px;
  border-radius: 50%;
  position: absolute;
}
.eye1 {
  left: 185px;
  top: 122px;
  transform: rotate(45deg);
  &:before {
    right: 10px;
    top: 22px;
  }
  &:after {
    right: 27px;
    top: 31px;
  }
}
.eye2 {
  left: 329px;
  top: 122px;
  transform: rotate(-45deg);
  &:before {
    left: 10px;
    top: 22px;
  }
  &:after {
    left: 41px;
    top: 44px;
  }
}
.eye1:before,
.eye2:before {
  content: \"\";
  width: 40px;
  height: 40px;
  border: #fff 5px solid;
  border-radius: 100%;
  position: absolute;
}
.eye1:after,
.eye2:after {
  content: \"\";
  width: 10px;
  height: 10px;
  background: #9b9b9b;
  border-radius: 100%;
  position: absolute;
}
.face {
  position: absolute;
  border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}
.c_blue {
  border: #6bcdf3 5px solid;
  width: 280px;
  height: 224px;
  left: 150px;
  top: 78px;
}
.c_red {
  border: #af2350 5px solid;
  width: 287px;
  height: 233px;
  left: 146px;
  top: 73px;
}
.c_purple {
  border: #5d75b3 5px solid;
  width: 295px;
  height: 240px;
  left: 142px;
  top: 70px;
}
.c_yellow {
  border: #ffc346 5px solid;
  width: 305px;
  height: 248px;
  left: 137px;
  top: 65px;
}
.c_green {
  border: #7fcb58 5px solid;
  width: 313px;
  height: 256px;
  left: 133px;
  top: 61px;
}
.arm1,
.arm2 {
  background: #333;
  position: absolute;
  z-index: -1;
}
.arm1 {
  width: 75px;
  height: 118px;
  left: 64px;
  top: 244px;
  transform: rotate(45deg);
  border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}
.arm2 {
  width: 75px;
  height: 148px;
  left: 463px;
  top: 162px;
  transform: rotate(37deg);
  border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
  &:before {
    content: \"\";
    width: 16px;
    height: 24px;
    background: #bc242c;
    position: absolute;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform: rotate(45deg);
    left: 32px;
    top: 20px;
  }
  &:after {
    content: \"\";
    width: 16px;
    height: 24px;
    background: #bc242c;
    position: absolute;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform: rotate(-45deg);
    left: 26px;
    top: 20px;
  }
}
.arm_c {
  content: \"\";
  width: 16px;
  height: 24px;
  position: absolute;
  left: 426px;
  top: 20px;
}
.nose {
  background-color: #333333;
  position: absolute;
  left: 284px;
  top: 187px;
  width: 28px;
  height: 18px;
  border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
}
.mouse {
  position: absolute;
  left: 265px;
  top: 205px;
  width: 68px;
  height: 25px;
  border-radius: 48%;
  border: #393939 7px solid;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.leg1,
.leg2 {
  background: #333;
  position: absolute;
  width: 83px;
  height: 80px;
  border-radius: 0 0 30px 30px;
  z-index: -1;
}
.leg1 {
  left: 187px;
  top: 423px;
  &:after {
    bottom: 0;
    right: -3px;
  }
}
.leg2 {
  left: 328px;
  top: 423px;
  &:after {
    bottom: 0;
    left: -3px;
  }
}
.leg1:after,
.leg2:after {
  content: \"\";
  width: 43px;
  height: 30px;
  position: absolute;
  background: #333;
  border-radius: 30px;
}
\n
# 效果图
\n
\"\"
\n
# 雪容融
\n
# HTML 部分
\n
<!DOCTYPE html>
<html>
\t<head>
\t\t<meta charset=\"utf-8\">
\t\t<title>雪容融</title>
\t</head>
\t<body>
\t\t<div class=\"xrr\">
\t\t  <div class=\"cap\">
\t\t    <div class=\"cap1\"></div>
\t\t    <div class=\"cap2\"></div>
\t\t    <div class=\"cap3\"></div>
\t\t    <div class=\"cap4\"></div>
\t\t    <div class=\"cap5\"></div>
\t\t    <div class=\"cap6\"></div>
\t\t    <div class=\"cap7\"></div>
\t\t    <div class=\"cap8\"></div>
\t\t  </div>
\t\t  <div class=\"snow\">
\t\t    <div class=\"snow1\"></div>
\t\t    <div class=\"snow2\"></div>
\t\t    <div class=\"snow3\"></div>
\t\t    <div class=\"snow4\"></div>
\t\t    <div class=\"snow5\"></div>
\t\t    <div class=\"snow6\"></div>
\t\t    <div class=\"snow7\"></div>
\t\t    <div class=\"snow8\"></div>
\t\t    <div class=\"snow9\"></div>
\t\t    <div class=\"snow10\"></div>
\t\t  </div>
\t\t  <div class=\"x_head\">
\t\t    <div class=\"x_head_line1\"></div>
\t\t    <div class=\"x_head_line2\"></div>
\t\t    <div class=\"x_head_line3\"></div>
\t\t    <div class=\"x_head_line4\"></div>
\t\t    <div class=\"x_head_line5\"></div>
\t\t  </div>
\t\t  <div class=\"x_face\">
\t\t    <div class=\"x_face1\"></div>
\t\t    <div class=\"x_face2\"></div>
\t\t    <div class=\"x_face3\"></div>
\t\t    <div class=\"x_face4\"></div>
\t\t    <div class=\"x_face5\"></div>
\t\t    <div class=\"x_face6\"></div>
\t\t    <div class=\"x_face7\"></div>
\t\t    <div class=\"x_face8\"></div>
\t\t    <div class=\"x_face9\"></div>
\t\t  </div>
\t\t  <div class=\"x_eye1\"></div>
\t\t  <div class=\"x_eye2\"></div>
\t\t  <div class=\"rouge1\"></div>
\t\t  <div class=\"rouge2\"></div>
\t\t  <div class=\"x_body\">
\t\t    <div class=\"abdomen\"></div>
\t\t  </div>
\t\t  <div class=\"scarf\"></div>
\t\t  <div class=\"scarf2\">
\t\t    <div class=\"line1\"></div>
\t\t    <div class=\"line2\"></div>
\t\t    <div class=\"line3\"></div>
\t\t    <div class=\"line4\"></div>
\t\t  </div>
\t\t  <div class=\"x_arm1\"></div>
\t\t  <div class=\"x_arm2\"></div>
\t\t  <div class=\"x_leg1\"></div>
\t\t  <div class=\"x_leg2\"></div>
\t\t</div>
\t</body>
</html>
# CSS 部分
\n
\n
* {
  margin: 0;
  padding: 0
}
body {
  font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif;
  background: #fff;
}
.xrr {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 500px;
  margin-top: -250px;
  margin-left: -300px;
}
.x_head {
  position: absolute;
  width: 366px;
  height: 297px;
  left: 97px;
  top: 63px;
  background: #d62b01;
  border: #b82b00 8px solid;
  border-radius: 166px;
}
.x_head_line1,
.x_head_line2,
.x_head_line3 {
  position: absolute;
  background: #d62b01;
  border: #b82b00 4px solid;
}
.x_head_line1 {
  width: 323px;
  height: 298px;
  border-radius: 50%;
  left: 15px;
  top: -7px;
}
.x_head_line2 {
  width: 177px;
  height: 301px;
  border-radius: 59%;
  left: 90px;
  top: -7px;
}
.x_head_line3 {
  width: 52px;
  height: 301px;
  border-radius: 80%;
  left: 163px;
  top: -3px;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}
.x_head_line4 {
  width: 311px;
  height: 30px;
  left: 21px;
  top: 26px;
  position: absolute;
  border: 6px solid #b82b00;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
}
.x_head_line5 {
  width: 284px;
  height: 74px;
  left: 41px;
  top: -3px;
  position: absolute;
  border: #d62b01 30px solid;
  border-radius: 50%;
  border-right: transparent;
  border-left: transparent;
  border-bottom: transparent;
}
.cap1 {
  border: #f9ad47 6px solid;
  width: 32px;
  height: 12px;
  position: absolute;
  top: -8px;
  left: 268px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  z-index: 6;
}
.cap2 {
  border: #f9ad47 6px solid;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 249px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(-89deg);
  background: #fff;
  z-index: 5;
}
.cap3 {
  border: #f9ad47 6px solid;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 303px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(89deg);
  background: #fff;
  z-index: 5;
}
.cap4 {
  position: absolute;
  top: 20px;
  left: 264px;
  width: 5px;
  height: 5px;
  border: 6px solid #f9ad47;
  border-color: #f9ad47;
  border-left-color: transparent;
  border-radius: 50%;
  z-index: 4;
  transform: rotate(45deg);
  background: #fff;
}
.cap5 {
  position: absolute;
  top: 20px;
  left: 297px;
  width: 5px;
  height: 5px;
  border: 6px solid #f9ad47;
  border-color: #f9ad47;
  border-left-color: transparent;
  border-radius: 50%;
  z-index: 4;
  transform: rotate(137deg);
  background: #fff;
}
.cap6 {
  border: #f9ad47 6px solid;
  width: 4px;
  height: 1px;
  position: absolute;
  top: 26px;
  left: 276px;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(346deg);
  z-index: 5;
}
.cap7 {
  border: #f9ad47 6px solid;
  width: 4px;
  height: 1px;
  position: absolute;
  top: 26px;
  left: 286px;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(14deg);
  z-index: 5;
}
.cap8 {
  content: \"\";
  position: absolute;
  background: #fff;
  width: 53px;
  height: 26px;
  border-radius: 30px;
  left: 265px;
  top: 5px;
}
.x_body {
  background: #d62b01;
  border: #ba2b00 8px solid;
  width: 156px;
  height: 116px;
  border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%;
  position: absolute;
  top: 364px;
  left: 207px;
  z-index: 2;
}
.x_body:before {
  content: \"\";
  width: 90px;
  height: 84px;
  background: url(logo.png) no-repeat center #fff;
  background-size: 44px;
  position: absolute;
  border-radius: 100%;
  left: 37px;
  top: 23px;
}
.x_arm1,
.x_arm2 {
  background: #d62b01;
  border: #ba2b00 6px solid;
  width: 45px;
  height: 83px;
  position: absolute;
  z-index: 1;
}
.x_arm1 {
  top: 346px;
  left: 160px;
  border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%;
  transform: rotate(-45deg);
}
.x_arm2 {
  top: 364px;
  left: 357px;
  border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%;
  transform: rotate(321deg);
}
.x_leg1,
.x_leg2 {
  background: #d62b01;
  border: #ba2b00 6px solid;
  width: 46px;
  height: 59px;
  position: absolute;
  z-index: 1;
  border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
}
.x_leg1 {
  top: 465px;
  left: 233px;
}
.x_leg2 {
  top: 465px;
  left: 303px;
}
.x_leg1:before,
.x_leg2:before {
  content: \"\";
  position: absolute;
  left: 11px;
  bottom: 3px;
  width: 57%;
  height: 5px;
  border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
  border: #ffc346 6px solid;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.scarf {
  position: absolute;
  left: 212px;
  top: 360px;
  background: #f8a644;
  width: 163px;
  height: 34px;
  border-radius: 15px 19px 51px 51px/17px 16px 24px 17px;
  z-index: 2
}
.scarf2 {
  position: absolute;
  left: 223px;
  top: 374px;
  background: #f8a644;
  width: 44px;
  height: 77px;
  border-radius: 0 0 12px 5px;
  transform: rotate(18deg);
  z-index: 2;
}
.line1,
.line2,
.line3,
.line4 {
  background: #f8a644;
  position: absolute;
  width: 4px;
  height: 16px;
  border-radius: 0 0 10px 10px;
  border: #d62b01 4px solid;
  border-top: 0;
}
.line1 {
  left: 5px;
  top: 62px;
}
.line2 {
  left: 13px;
  top: 61px;
}
.line3 {
  left: 21px;
  top: 60px;
}
.line4 {
  left: 28px;
  top: 59px;
}
.rouge1,
.rouge2 {
  width: 42px;
  height: 37px;
  position: absolute;
  background: #e95535;
  border-radius: 40px;
}
.rouge1 {
  left: 162px;
  top: 225px;
}
.rouge2 {
  left: 364px;
  top: 230px;
}
.x_eye1,
.x_eye2 {
  width: 21px;
  height: 28px;
  position: absolute;
  background: #3d3d3d;
  border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%;
}
.x_eye1 {
  left: 221px;
  top: 210px;
}
.x_eye2 {
  left: 333px;
  top: 210px;
}
.x_eye1:before,
.x_eye2:before {
  content: \"\";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 8px;
  border-radius: 10px;
  background: #fff;
  transform: rotate(21deg);
}
.x_face {
  width: 282px;
  height: 160px;
  position: absolute;
  left: 146px;
  top: 139px;
  border-radius: 80px 80px 20px 40px;
}
.x_face1,
.x_face2,
.x_face3,
.x_face4,
.x_face5,
.x_face6,
.x_face7,
.x_face8 {
  border: #b92c00 6px solid;
  border-radius: 50%;
  border-right: transparent;
  border-left: transparent;
  border-top: transparent;
  background: #fff;
  position: absolute;
}
.x_face1 {
  width: 78px;
  height: 87px;
  left: 10px;
  top: 50px;
  transform: rotate(58deg);
}
.x_face2 {
  width: 73px;
  height: 55px;
  left: 120px;
  top: -3px;
  transform: rotate(29deg);
  border: #b92c00 6px solid;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
}
.x_face3 {
  width: 72px;
  height: 78px;
  left: 204px;
  top: 33px;
  transform: rotate(322deg);
  border-radius: 0 100% 100% 0/50%;
  border: #b92c00 6px solid;
  border-left: none;
}
.x_face4 {
  width: 81px;
  height: 85px;
  left: 64px;
  top: 3px;
  transform: rotate(165deg);
}
.x_face5 {
  width: 73px;
  height: 69px;
  left: 19px;
  top: 33px;
  transform: rotate(137deg);
}
.x_face6 {
  width: 49px;
  height: 67px;
  left: 218px;
  top: 79px;
  transform: rotate(303deg);
}
.x_face7 {
  width: 188px;
  height: 74px;
  left: 51px;
  top: 82px;
}
.x_face8 {
  width: 29px;
  height: 13px;
  left: 182px;
  top: 33px;
  transform: rotate(38deg);
  z-index: 2;
  background: none;
  border: 6px solid #b92c00;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
}
.x_face8:after {
  content: \"\";
  width: 29px;
  height: 13px;
  right: -6px;
  top: -12px;
  position: absolute;
  border: 6px solid #b92c00;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #d62b01;
  border-top-color: transparent;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.x_face9 {
  width: 170px;
  height: 119px;
  background: #ffffff;
  left: 40px;
  top: 19px;
  border-radius: 100%;
  position: absolute;
}
.x_face9:before {
  content: \"\";
  background: #ffffff;
  border-radius: 100%;
  right: -14px;
  top: 31px;
  width: 35px;
  height: 37px;
  position: absolute;
  transform: rotate(30deg);
}
.snow1 {
  width: 105px;
  height: 16px;
  transform: rotate(341deg);
  left: 147px;
  top: 57px;
  position: absolute;
  z-index: 3;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  border-right: 0;
}
.snow2 {
  position: absolute;
  width: 78px;
  height: 20px;
  left: 243px;
  top: 29px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
}
.snow2:after {
  content: \"\";
  width: 80px;
  height: 16px;
  background: #ffffff;
  position: absolute;
  border-radius: 10px;
  top: 13px;
  left: -1px;
}
.snow3 {
  position: absolute;
  width: 44px;
  height: 13px;
  left: 228px;
  top: 63px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.snow4 {
  position: absolute;
  width: 42px;
  height: 11px;
  left: 268px;
  top: 58px;
  z-index: 3;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(4deg);
  border-left: 0;
  border-right: 0;
}
.snow5 {
  position: absolute;
  width: 41px;
  height: 15px;
  left: 300px;
  top: 56px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(359deg);
  border-right: 0;
  border-left: 0;
}
.snow6 {
  background: none;
  border: 6px solid #83b9e8;
  position: absolute;
  left: 150px;
  top: 72px;
  width: 62px;
  height: 14px;
  border-radius: 24px;
  transform: rotate(340deg);
  z-index: 2;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
.snow7 {
  border: 6px solid #83b9e8;
  position: absolute;
  left: 362px;
  top: 69px;
  width: 58px;
  height: 13px;
  border-radius: 24px;
  transform: rotate(23deg);
  z-index: 3;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.snow8 {
  position: absolute;
  width: 32px;
  height: 6px;
  left: 203px;
  top: 69px;
  z-index: 4;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  border-right: 0;
  transform: rotate(357deg);
}
.snow9 {
  position: absolute;
  width: 40px;
  height: 4px;
  left: 332px;
  top: 65px;
  z-index: 4;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(16deg);
  border-left: 0;
  border-right: 0;
}
.snow10 {
  width: 97px;
  height: 16px;
  transform: rotate(21deg);
  left: 320px;
  top: 54px;
  position: absolute;
  z-index: 3;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  border-left: 0;
}
\n
\n
* { margin: 0; padding: 0 }
body { font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif; background: #fff; }
.xrr {position: absolute; left: 50%; top: 50%; width: 600px; height: 500px; margin-top: -250px; margin-left: -300px;  }
.x_head { position: absolute; width: 366px; height: 297px; left: 97px; top: 63px; background: #d62b01; border: #b82b00 8px solid; border-radius: 166px; }
.x_head_line1, .x_head_line2, .x_head_line3 { position: absolute; background: #d62b01; border: #b82b00 4px solid; }
.x_head_line1 { width: 323px; height: 298px; border-radius: 50%; left: 15px; top: -7px; }
.x_head_line2 { width: 177px; height: 301px; border-radius: 59%; left: 90px; top: -7px; }
.x_head_line3 { width: 52px; height: 301px; border-radius: 80%; left: 163px; top: -3px; border-right: 0; border-top: 0; border-bottom: 0; }
.x_head_line4 { width: 311px; height: 30px; left: 21px; top: 26px; position: absolute; border: 6px solid #b82b00; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
.x_head_line5 { width: 284px; height: 74px; left: 41px; top: -3px; position: absolute; border: #d62b01 30px solid; border-radius: 50%; border-right: transparent; border-left: transparent; border-bottom: transparent; }
.cap1 { border: #f9ad47 6px solid; width: 32px; height: 12px; position: absolute; top: -8px; left: 268px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; z-index: 6; }
.cap2 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 249px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(-89deg); background: #fff; z-index: 5; }
.cap3 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 303px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(89deg); background: #fff; z-index: 5; }
.cap4 { position: absolute; top: 20px; left: 264px; width: 5px; height: 5px; border: 6px solid #f9ad47; border-color: #f9ad47; border-left-color: transparent; border-radius: 50%; z-index: 4; transform: rotate(45deg); background: #fff; }
.cap5 { position: absolute; top: 20px; left: 297px; width: 5px; height: 5px; border: 6px solid #f9ad47; border-color: #f9ad47; border-left-color: transparent; border-radius: 50%; z-index: 4; transform: rotate(137deg); background: #fff; }
.cap6 { border: #f9ad47 6px solid; width: 4px; height: 1px; position: absolute; top: 26px; left: 276px; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(346deg); z-index: 5; }
.cap7 { border: #f9ad47 6px solid; width: 4px; height: 1px; position: absolute; top: 26px; left: 286px; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(14deg); z-index: 5; }
.cap8 { content: \"\"; position: absolute; background: #fff; width: 53px; height: 26px; border-radius: 30px; left: 265px; top: 5px; }
.x_body { background: #d62b01; border: #ba2b00 8px solid; width: 156px; height: 116px; border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%; position: absolute; top: 364px; left: 207px; z-index: 2; }
.x_body:before {content: \"\";width: 90px;height: 84px;background: url(logo.png) no-repeat center #fff;background-size: 44px;position: absolute;border-radius: 100%;left: 37px;top: 23px;}
.x_arm1, .x_arm2 { background: #d62b01; border: #ba2b00 6px solid; width: 45px; height: 83px; position: absolute; z-index: 1; }
.x_arm1 { top: 346px; left: 160px; border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%; transform: rotate(-45deg); }
.x_arm2 { top: 364px; left: 357px; border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%; transform: rotate( 321deg ); }
.x_leg1, .x_leg2 { background: #d62b01; border: #ba2b00 6px solid; width: 46px; height: 59px; position: absolute; z-index: 1; border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%; }
.x_leg1 { top: 465px; left: 233px; }
.x_leg2 { top: 465px; left: 303px; }
.x_leg1:before, .x_leg2:before { content: \"\"; position: absolute; left: 11px; bottom: 3px; width: 57%; height: 5px; border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%; border: #ffc346 6px solid; border-top: none; border-left: 0; border-right: 0; }
.scarf { position: absolute; left: 212px; top: 360px; background: #f8a644; width: 163px; height: 34px; border-radius: 15px 19px 51px 51px/17px 16px 24px 17px; z-index: 2 }
.scarf2 { position: absolute; left: 223px; top: 374px; background: #f8a644; width: 44px; height: 77px; border-radius: 0 0 12px 5px; transform: rotate(18deg); z-index: 2; }
.line1, .line2, .line3, .line4 { background: #f8a644; position: absolute; width: 4px; height: 16px; border-radius: 0 0 10px 10px; border: #d62b01 4px solid; border-top: 0; }
.line1 { left: 5px; top: 62px; }
.line2 { left: 13px; top: 61px; }
.line3 { left: 21px; top: 60px; }
.line4 { left: 28px; top: 59px; }
.rouge1, .rouge2 { width: 42px; height: 37px; position: absolute; background: #e95535; border-radius: 40px; }
.rouge1 { left: 162px; top: 225px; }
.rouge2 { left: 364px; top: 230px; }
.x_eye1, .x_eye2 { width: 21px; height: 28px; position: absolute; background: #3d3d3d; border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%; }
.x_eye1 { left: 221px; top: 210px; }
.x_eye2 { left: 333px; top: 210px; }
.x_eye1:before, .x_eye2:before { content: \"\"; position: absolute; left: 5px; top: 5px; width: 6px; height: 8px; border-radius: 10px; background: #fff; transform: rotate(21deg); }
.x_face { width: 282px; height: 160px; position: absolute; left: 146px; top: 139px; border-radius: 80px 80px 20px 40px; }
.x_face1, .x_face2, .x_face3, .x_face4, .x_face5, .x_face6, .x_face7, .x_face8 { border: #b92c00 6px solid; border-radius: 50%; border-right: transparent; border-left: transparent; border-top: transparent; background: #fff; position: absolute; }
.x_face1 { width: 78px; height: 87px; left: 10px; top: 50px; transform: rotate(58deg); }
.x_face2 { width: 73px; height: 55px; left: 120px; top: -3px; transform: rotate(29deg); border: #b92c00 6px solid; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
.x_face3 { width: 72px; height: 78px; left: 204px; top: 33px; transform: rotate(322deg); border-radius: 0 100% 100% 0/50%; border: #b92c00 6px solid; border-left: none; }
.x_face4 { width: 81px; height: 85px; left: 64px; top: 3px; transform: rotate(165deg); }
.x_face5 { width: 73px; height: 69px; left: 19px; top: 33px; transform: rotate(137deg); }
.x_face6 { width: 49px; height: 67px; left: 218px; top: 79px; transform: rotate(303deg); }
.x_face7 { width: 188px; height: 74px; left: 51px; top: 82px; }
.x_face8 { width: 29px; height: 13px; left: 182px; top: 33px; transform: rotate(38deg); z-index: 2; background: none; border: 6px solid #b92c00; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; }
.x_face8:after { content: \"\"; width: 29px; height: 13px; right: -6px; top: -12px; position: absolute; border: 6px solid #b92c00; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #d62b01; border-top-color: transparent; border-radius: 0 0 50% 50%/0 0 100% 100%; }
.x_face9 { width: 170px; height: 119px; background: #ffffff; left: 40px; top: 19px; border-radius: 100%; position: absolute; }
.x_face9:before { content: \"\"; background: #ffffff; border-radius: 100%; right: -14px; top: 31px; width: 35px; height: 37px; position: absolute; transform: rotate(30deg); }
.snow1 { width: 105px; height: 16px; transform: rotate(341deg); left: 147px; top: 57px; position: absolute; z-index: 3; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; border-right: 0; }
.snow2 { position: absolute; width: 78px; height: 20px; left: 243px; top: 29px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
.snow2:after { content: \"\"; width: 80px; height: 16px; background: #ffffff; position: absolute; border-radius: 10px; top: 13px; left: -1px; }
.snow3 { position: absolute; width: 44px; height: 13px; left: 228px; top: 63px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; border-left: 0; border-right: 0; }
.snow4 { position: absolute; width: 42px; height: 11px; left: 268px; top: 58px; z-index: 3; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(4deg); border-left: 0; border-right: 0; }
.snow5 { position: absolute; width: 41px; height: 15px; left: 300px; top: 56px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(359deg); border-right: 0; border-left: 0; }
.snow6 { background: none; border: 6px solid #83b9e8; position: absolute; left: 150px; top: 72px; width: 62px; height: 14px; border-radius: 24px; transform: rotate(340deg); z-index: 2; border-top: 0; border-right: 0; border-left: 0; }
.snow7 { border: 6px solid #83b9e8; position: absolute; left: 362px; top: 69px; width: 58px; height: 13px; border-radius: 24px; transform: rotate(23deg); z-index: 3; border-top: 0; border-left: 0; border-right: 0; }
.snow8 { position: absolute; width: 32px; height: 6px; left: 203px; top: 69px; z-index: 4; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; border-right: 0; transform: rotate(357deg); }
.snow9 { position: absolute; width: 40px; height: 4px; left: 332px; top: 65px; z-index: 4; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(16deg); border-left: 0; border-right: 0; }
.snow10 { width: 97px; height: 16px; transform: rotate(21deg); left: 320px; top: 54px; position: absolute; z-index: 3; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; border-left: 0; }
\n
\n
* {
  margin: 0;
  padding: 0;
}
body {
  font: 15px \"Microsoft YaHei\", Arial, Helvetica, sans-serif;
  background: #fff;
}
.xrr {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 500px;
  margin-top: -250px;
  margin-left: -300px;
}
.x_head {
  position: absolute;
  width: 366px;
  height: 297px;
  left: 97px;
  top: 63px;
  background: #d62b01;
  border: #b82b00 8px solid;
  border-radius: 166px;
}
.x_head_line1,
.x_head_line2,
.x_head_line3 {
  position: absolute;
  background: #d62b01;
  border: #b82b00 4px solid;
}
.x_head_line1 {
  width: 323px;
  height: 298px;
  border-radius: 50%;
  left: 15px;
  top: -7px;
}
.x_head_line2 {
  width: 177px;
  height: 301px;
  border-radius: 59%;
  left: 90px;
  top: -7px;
}
.x_head_line3 {
  width: 52px;
  height: 301px;
  border-radius: 80%;
  left: 163px;
  top: -3px;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}
.x_head_line4 {
  width: 311px;
  height: 30px;
  left: 21px;
  top: 26px;
  position: absolute;
  border: 6px solid #b82b00;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
}
.x_head_line5 {
  width: 284px;
  height: 74px;
  left: 41px;
  top: -3px;
  position: absolute;
  border: #d62b01 30px solid;
  border-radius: 50%;
  border-right: transparent;
  border-left: transparent;
  border-bottom: transparent;
}
.cap1 {
  border: #f9ad47 6px solid;
  width: 32px;
  height: 12px;
  position: absolute;
  top: -8px;
  left: 268px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  z-index: 6;
}
.cap2 {
  border: #f9ad47 6px solid;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 249px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(-89deg);
  background: #fff;
  z-index: 5;
}
.cap3 {
  border: #f9ad47 6px solid;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 303px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(89deg);
  background: #fff;
  z-index: 5;
}
.cap4 {
  position: absolute;
  top: 20px;
  left: 264px;
  width: 5px;
  height: 5px;
  border: 6px solid #f9ad47;
  border-color: #f9ad47;
  border-left-color: transparent;
  border-radius: 50%;
  z-index: 4;
  transform: rotate(45deg);
  background: #fff;
}
.cap5 {
  position: absolute;
  top: 20px;
  left: 297px;
  width: 5px;
  height: 5px;
  border: 6px solid #f9ad47;
  border-color: #f9ad47;
  border-left-color: transparent;
  border-radius: 50%;
  z-index: 4;
  transform: rotate(137deg);
  background: #fff;
}
.cap6 {
  border: #f9ad47 6px solid;
  width: 4px;
  height: 1px;
  position: absolute;
  top: 26px;
  left: 276px;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(346deg);
  z-index: 5;
}
.cap7 {
  border: #f9ad47 6px solid;
  width: 4px;
  height: 1px;
  position: absolute;
  top: 26px;
  left: 286px;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(14deg);
  z-index: 5;
}
.cap8 {
  content: \"\";
  position: absolute;
  background: #fff;
  width: 53px;
  height: 26px;
  border-radius: 30px;
  left: 265px;
  top: 5px;
}
.x_body {
  background: #d62b01;
  border: #ba2b00 8px solid;
  width: 156px;
  height: 116px;
  border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%;
  position: absolute;
  top: 364px;
  left: 207px;
  z-index: 2;
  &:before {
    content: \"\";
    width: 90px;
    height: 84px;
    background: url(logo.png) no-repeat center #fff;
    background-size: 44px;
    position: absolute;
    border-radius: 100%;
    left: 37px;
    top: 23px;
  }
}
.x_arm1,
.x_arm2 {
  background: #d62b01;
  border: #ba2b00 6px solid;
  width: 45px;
  height: 83px;
  position: absolute;
  z-index: 1;
}
.x_arm1 {
  top: 346px;
  left: 160px;
  border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%;
  transform: rotate(-45deg);
}
.x_arm2 {
  top: 364px;
  left: 357px;
  border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%;
  transform: rotate(321deg);
}
.x_leg1,
.x_leg2 {
  background: #d62b01;
  border: #ba2b00 6px solid;
  width: 46px;
  height: 59px;
  position: absolute;
  z-index: 1;
  border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
}
.x_leg1 {
  top: 465px;
  left: 233px;
}
.x_leg2 {
  top: 465px;
  left: 303px;
}
.x_leg1:before,
.x_leg2:before {
  content: \"\";
  position: absolute;
  left: 11px;
  bottom: 3px;
  width: 57%;
  height: 5px;
  border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
  border: #ffc346 6px solid;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.scarf {
  position: absolute;
  left: 212px;
  top: 360px;
  background: #f8a644;
  width: 163px;
  height: 34px;
  border-radius: 15px 19px 51px 51px/17px 16px 24px 17px;
  z-index: 2;
}
.scarf2 {
  position: absolute;
  left: 223px;
  top: 374px;
  background: #f8a644;
  width: 44px;
  height: 77px;
  border-radius: 0 0 12px 5px;
  transform: rotate(18deg);
  z-index: 2;
}
.line1,
.line2,
.line3,
.line4 {
  background: #f8a644;
  position: absolute;
  width: 4px;
  height: 16px;
  border-radius: 0 0 10px 10px;
  border: #d62b01 4px solid;
  border-top: 0;
}
.line1 {
  left: 5px;
  top: 62px;
}
.line2 {
  left: 13px;
  top: 61px;
}
.line3 {
  left: 21px;
  top: 60px;
}
.line4 {
  left: 28px;
  top: 59px;
}
.rouge1,
.rouge2 {
  width: 42px;
  height: 37px;
  position: absolute;
  background: #e95535;
  border-radius: 40px;
}
.rouge1 {
  left: 162px;
  top: 225px;
}
.rouge2 {
  left: 364px;
  top: 230px;
}
.x_eye1,
.x_eye2 {
  width: 21px;
  height: 28px;
  position: absolute;
  background: #3d3d3d;
  border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%;
}
.x_eye1 {
  left: 221px;
  top: 210px;
}
.x_eye2 {
  left: 333px;
  top: 210px;
}
.x_eye1:before,
.x_eye2:before {
  content: \"\";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 8px;
  border-radius: 10px;
  background: #fff;
  transform: rotate(21deg);
}
.x_face {
  width: 282px;
  height: 160px;
  position: absolute;
  left: 146px;
  top: 139px;
  border-radius: 80px 80px 20px 40px;
}
.x_face1,
.x_face2,
.x_face3,
.x_face4,
.x_face5,
.x_face6,
.x_face7,
.x_face8 {
  border: #b92c00 6px solid;
  border-radius: 50%;
  border-right: transparent;
  border-left: transparent;
  border-top: transparent;
  background: #fff;
  position: absolute;
}
.x_face1 {
  width: 78px;
  height: 87px;
  left: 10px;
  top: 50px;
  transform: rotate(58deg);
}
.x_face2 {
  width: 73px;
  height: 55px;
  left: 120px;
  top: -3px;
  transform: rotate(29deg);
  border: #b92c00 6px solid;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
}
.x_face3 {
  width: 72px;
  height: 78px;
  left: 204px;
  top: 33px;
  transform: rotate(322deg);
  border-radius: 0 100% 100% 0/50%;
  border: #b92c00 6px solid;
  border-left: none;
}
.x_face4 {
  width: 81px;
  height: 85px;
  left: 64px;
  top: 3px;
  transform: rotate(165deg);
}
.x_face5 {
  width: 73px;
  height: 69px;
  left: 19px;
  top: 33px;
  transform: rotate(137deg);
}
.x_face6 {
  width: 49px;
  height: 67px;
  left: 218px;
  top: 79px;
  transform: rotate(303deg);
}
.x_face7 {
  width: 188px;
  height: 74px;
  left: 51px;
  top: 82px;
}
.x_face8 {
  width: 29px;
  height: 13px;
  left: 182px;
  top: 33px;
  transform: rotate(38deg);
  z-index: 2;
  background: none;
  border: 6px solid #b92c00;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  &:after {
    content: \"\";
    width: 29px;
    height: 13px;
    right: -6px;
    top: -12px;
    position: absolute;
    border: 6px solid #b92c00;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #d62b01;
    border-top-color: transparent;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
  }
}
.x_face9 {
  width: 170px;
  height: 119px;
  background: #ffffff;
  left: 40px;
  top: 19px;
  border-radius: 100%;
  position: absolute;
  &:before {
    content: \"\";
    background: #ffffff;
    border-radius: 100%;
    right: -14px;
    top: 31px;
    width: 35px;
    height: 37px;
    position: absolute;
    transform: rotate(30deg);
  }
}
.snow1 {
  width: 105px;
  height: 16px;
  transform: rotate(341deg);
  left: 147px;
  top: 57px;
  position: absolute;
  z-index: 3;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  border-right: 0;
}
.snow2 {
  position: absolute;
  width: 78px;
  height: 20px;
  left: 243px;
  top: 29px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  &:after {
    content: \"\";
    width: 80px;
    height: 16px;
    background: #ffffff;
    position: absolute;
    border-radius: 10px;
    top: 13px;
    left: -1px;
  }
}
.snow3 {
  position: absolute;
  width: 44px;
  height: 13px;
  left: 228px;
  top: 63px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  border-left: 0;
  border-right: 0;
}
.snow4 {
  position: absolute;
  width: 42px;
  height: 11px;
  left: 268px;
  top: 58px;
  z-index: 3;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(4deg);
  border-left: 0;
  border-right: 0;
}
.snow5 {
  position: absolute;
  width: 41px;
  height: 15px;
  left: 300px;
  top: 56px;
  z-index: 2;
  background: #fff;
  border: 6px solid #83b9e8;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
  transform: rotate(359deg);
  border-right: 0;
  border-left: 0;
}
.snow6 {
  background: none;
  border: 6px solid #83b9e8;
  position: absolute;
  left: 150px;
  top: 72px;
  width: 62px;
  height: 14px;
  border-radius: 24px;
  transform: rotate(340deg);
  z-index: 2;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
.snow7 {
  border: 6px solid #83b9e8;
  position: absolute;
  left: 362px;
  top: 69px;
  width: 58px;
  height: 13px;
  border-radius: 24px;
  transform: rotate(23deg);
  z-index: 3;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.snow8 {
  position: absolute;
  width: 32px;
  height: 6px;
  left: 203px;
  top: 69px;
  z-index: 4;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  border-right: 0;
  transform: rotate(357deg);
}
.snow9 {
  position: absolute;
  width: 40px;
  height: 4px;
  left: 332px;
  top: 65px;
  z-index: 4;
  background: none;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  transform: rotate(16deg);
  border-left: 0;
  border-right: 0;
}
.snow10 {
  width: 97px;
  height: 16px;
  transform: rotate(21deg);
  left: 320px;
  top: 54px;
  position: absolute;
  z-index: 3;
  border: 6px solid #83b9e8;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  border-bottom: none;
  background: #fff;
  border-left: 0;
}
\n
# 效果图
\n
\"\"
\n",
            "tags": [
                "前端",
                "html",
                "css"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/22579722/",
            "url": "https://blog.lavender816.top/posts/22579722/",
            "title": "Shoka主题：新增博客新年灯笼",
            "date_published": "2022-01-05T07:00:00.000Z",
            "content_html": "
\n
新增：博客页面右上角新年灯笼
\n
\n
# 前言
\n
\n
本文参考：知更鸟：过年啦，挂灯笼！ （原作者）
\n之前的 wordpress 主题也搞过这个灯笼，还是挺简单的，临近农历新年，在这个主题再搞一下
\n
\n
# 实现
\n
# 新增主题设置
\n
在主题的 yml  文件中，找到 footer ，下面新增 latern  选项，如下：
\n
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020
  # …………（省略）
  count: true
  powered: true
  # 新增 latern
  lantern:   
    enable: true  #是否开启
    word1: 春   #第一个字
    word2: 节   #第二个字
# 新增 div
\n
在 themes\\shoka\\layout\\_partials\\footer.njk  中新增（可以在 {%- if theme.footer.powered %}  这句代码前增加以下内容)
\n
{%- if theme.footer.lantern.enable %}
  <!-- 灯笼 1 -->
  <div class=\"deng-box\">
    <div class=\"deng\">
        <div class=\"xian\"></div>
        <div class=\"deng-a\">
            <div class=\"deng-b\"><div class=\"deng-t\">{{ theme.footer.lantern.word2 }}</div></div>
        </div>
        <div class=\"shui shui-a\"><div class=\"shui-c\"></div><div class=\"shui-b\"></div></div>
    </div>
  </div>
 
  <!-- 灯笼 2 -->
  <div class=\"deng-box1\">
    <div class=\"deng\">
        <div class=\"xian\"></div>
        <div class=\"deng-a\">
            <div class=\"deng-b\"><div class=\"deng-t\">{{ theme.footer.lantern.word1 }}</div></div>
        </div>
        <div class=\"shui shui-a\"><div class=\"shui-c\"></div><div class=\"shui-b\"></div></div>
    </div>
  </div>
{%- endif %}
# 添加样式表
\n
    \n
  1. \n
    在根目录的 source\\_data  新建文件命名为 custom.styl ；
    \n
    2. \n
  2. \n
    填入以下内容：
    \n
    .deng-box {
      position: fixed;
      top: -40px;
      right: -20px;
      z-index: -1;
    }
    .deng-box1 {
      position: fixed;
      top: -30px;
      right: 10px;
      z-index: -1;
      .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
      }
    }
    .deng {
      position: relative;
      width: 120px;
      height: 90px;
      margin: 50px;
      background: #d8000f;
      background: rgba(216, 0, 15, 0.8);
      border-radius: 50% 50%;
      -webkit-transform-origin: 50% -100px;
      -webkit-animation: swing 3s infinite ease-in-out;
      box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
      &:before {
        position: absolute;
        top: -7px;
        left: 29px;
        height: 12px;
        width: 60px;
        content: \" \";
        display: block;
        z-index: 999;
        border-radius: 5px 5px 0 0;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
      }
      &:after {
        position: absolute;
        bottom: -7px;
        left: 10px;
        height: 12px;
        width: 60px;
        content: \" \";
        display: block;
        margin-left: 20px;
        border-radius: 0 0 5px 5px;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
      }
    }
    .deng-a {
      width: 100px;
      height: 90px;
      background: #d8000f;
      background: rgba(216, 0, 15, 0.1);
      margin: 12px 8px 8px 10px;
      border-radius: 50% 50%;
      border: 2px solid #dc8f03;
    }
    .deng-b {
      width: 45px;
      height: 90px;
      background: #d8000f;
      background: rgba(216, 0, 15, 0.1);
      margin: -4px 8px 8px 26px;
      border-radius: 50% 50%;
      border: 2px solid #dc8f03;
    }
    .xian {
      position: absolute;
      top: -20px;
      left: 60px;
      width: 2px;
      height: 20px;
      background: #dc8f03;
    }
    .shui-a {
      position: relative;
      width: 5px;
      height: 20px;
      margin: -5px 0 0 59px;
      -webkit-animation: swing 4s infinite ease-in-out;
      -webkit-transform-origin: 50% -45px;
      background: #ffa500;
      border-radius: 0 0 5px 5px;
    }
    .shui-b {
      position: absolute;
      top: 14px;
      left: -2px;
      width: 10px;
      height: 10px;
      background: #dc8f03;
      border-radius: 50%;
    }
    .shui-c {
      position: absolute;
      top: 18px;
      left: -2px;
      width: 10px;
      height: 35px;
      background: #ffa500;
      border-radius: 0 0 0 5px;
    }
    .deng-t {
      font-size: 3.2rem;
      color: #dc8f03;
      font-weight: bold;
      line-height: 85px;
      text-align: center;
    }
    .night .deng-t,
    .night .deng-box,
    .night .deng-box1 {
      background: transparent !important;
    }
    @-moz-keyframes swing {
        0% {
            -moz-transform: rotate(-10deg)
        }
        50% {
            -moz-transform: rotate(10deg)
        }
        100% {
            -moz-transform: rotate(-10deg)
        }
    }
     
    @-webkit-keyframes swing {
        0% {
            -webkit-transform: rotate(-10deg)
        }
        50% {
            -webkit-transform: rotate(10deg)
        }
        100% {
            -webkit-transform: rotate(-10deg)
        }
    }
    3. \n
  3. \n
    重新生成，🆗
    \n
    4. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1409583388/",
            "url": "https://blog.lavender816.top/posts/1409583388/",
            "title": "Shoka主题：新增博客访问统计页面",
            "date_published": "2021-12-29T07:30:00.000Z",
            "content_html": "
\n
新增页面：新增博客访问统计页面
\n
\n
# 前言
\n
\n
参考文章：
\n
    \n
  1. Hexo 博客实时访问统计图
    2. \n
  2. 基于 Butterfly 主题的首页置顶 gitcalendar
    3. \n
\n
\n
本教程将会泄漏属于百度统计的 站点 ID  和百度统计  AccessToken ，请先前往 百度统计用户手册了解，介意者请谨慎部署。
\n
可能有时会出现跨域请求的问题
\n
开通前条件：链接：https://tongji.baidu.com/web/help/article?id=123
\n
需要自有网站昨日 PV 数大于 100
\n
\n
\n
# 实现
\n
# 加入百度统计
\n
    \n
  1. \n
    进入百度统计，注册或者登录，新增站点，填入信息；
    \n
    2. \n
  2. \n
    获取统计代码：在管理 -> 代码管理 -> 代码获取
    \n
    3. \n
  3. \n
    因为主题内置百度统计，只需要下图框内的代码：
    \n
    \"image-20211229135506339\"
    \n
    4. \n
  4. \n
    找到主题 yml  文件中 baidu_analytics ，后面填入上图框中的问号后面的代码；
    \n
    5. \n
\n
# 新建页面
\n
\n
hexo new page census
\n
\n
在根目录下的 source  下新建文件夹，命名为 census ，并在该目录下新建文件： index.md ，填入以下内容：
\n
---
title: 博客访问统计
date: 2021-12-29 15:30:00
---
\n
# 更改语言并添加到菜单
\n
    \n
  1. 刚才新建的 index.md  中，如果是用命令创建， title  一行是英文，改成对应的中文就可以了；
    2. \n
  2. 在 themes\\shoka\\languages\\zh-CN.yml  中，找到 menu  一行，新增 census: 博客访问统计 ；
    3. \n
  3. 在主题的 yml  文件里，在 menu  里添加到菜单中
    4. \n
\n
# 获取网站统计数据
\n
    \n
  1. \n
    进入百度统计 - 管理 - 数据导出服务；
    \n
    2. \n
  2. \n
    开通数据导出服务，获得 API Key  与 Secret Key ，之后直接打开数据导出服务页面或者登录开发者服务管理获取 API Key  与 Secret Key ;
    \n
    3. \n
  3. \n
    通过如下 URL  进入百度账号登录页，此处的登录账号就是您登录百度统计查看报告数据的账号，登录完成后将跳转至获取 code  的页面：
    \n
    http://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri=oob&scope=basic&display=popup
    其中：
    \n\n
    4. \n
  4. \n
    通过身份验证获取 ACCESS_TOKEN ；用户同意授权后，将跳转至一个获取 CODE 的页面。复制 CODE 值后可将其加入以下 URL 换取 ACCESS_TOKEN ：
    \n
    http://openapi.baidu.com/oauth/2.0/token?grant_type=authorization_code&code={CODE}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}&redirect_uri=oob
    其中：
    \n\n
    返回如下（举例）：
    \n
    {
        \"expires_in\": 2592000,
        \"refresh_token\":\"2.385d55f8615fdfd9edb7c4b5ebdc3e39.604800.1293440400-2346678-124328\",
        \"access_token\":\"1.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-2346678-124328\",
        \"session_secret\":\"ANXxSNjwQDugf8615OnqeikRMu2bKaXCdlLxn\",
        \"session_key\":\" 248APxvxjCZ0VEC43EYrvxqaK4oZExMB\",
        \"scope\":\"basic\"
    }
    5. \n
  5. \n
    （更新 Access Token 时使用，第一次跳过此步）从上述步骤得到的数据中包含 ACCESS_TOKEN  和 REFRESH_TOKEN  两个值，其中 ACCESS_TOKEN  的有效期为一个月， REFRESH_TOKEN  的有效期为十年。 REFRESH_TOKEN  的作用就是刷新获取新的 ACCESS_TOKEN  和 REFRESH_TOKEN ，如此反复操作来实现 ACCESS_TOKEN  有效期永久的机制。一旦 ACCESS_TOKEN  过期，可根据以下请求更换新的 ACCESS_TOKEN  和 REFRESH_TOKEN ：
    \n
    http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token={REFRESH_TOKEN}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}
    其中：
    \n\n
    返回如下（举例）：
    \n
    {
        \"expires_in\": 2592000,
        \"refresh_token\":\"2.385d55f8615fdfd9edb7c4b5ebdc3e39.604800.1293440400-2346678-124328\",
        \"access_token\":\"1.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-2346678-124328\",
        \"session_secret\":\"ANXxSNjwQDugf8615OnqeikRMu2bKaXCdlLxn\",
        \"session_key\":\" 248APxvxjCZ0VEC43EYrvxqaK4oZExMB\",
        \"scope\":\"basic\"
    }
    6. \n
  6. \n
    调用百度统计 API：
    \n
    \n
    第 5 步获取的  ACCESS_TOKEN  是所调用 API 的用户级参数，结合各 API 的应用级参数即可正常调用 API 获取数据，填写下面链接参数后打开链接获取网站 ID：
    \n
    https://openapi.baidu.com/rest/2.0/tongji/config/getSiteList?access_token={ACCESS_TOKEN}
    其中：
    \n
      \n
    • {ACCESS_TOKEN} 填写您的 Access Token
      • \n
    \n
    \n
    7. \n
  7. \n
    也可以在 Tongji API 调试工具 输入 ACCESS_TOKEN  获取网址 ID；
    \n
    8. \n
  8. \n
    在  Tongji API 调试工具 选择需要获取的报告数据，填写  ACCESS_TOKEN  、必填参数、选填参数获取百度统计数据。
    \n
    9. \n
\n
# 博客访问统计代码
\n
在新建的 census  下的 index.md  中添加以下内容（注意修改一些数据）：
\n
{% raw %}
<script src=\"https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js\"></script> <!-- 绘制地图需要另外添加 china.js -->
<!-- 访问地图 -->
<div id=\"map-chart\" style=\"border-radius: 8px; height: 600px; padding: 10px;\"></div>
<!-- 访问趋势 30 日 -->
<div id=\"trends-chartday\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 访问趋势月 -->
<div id=\"trends-chartmonth\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 访问来源 -->
<div id=\"sources-chart\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 外部来源 -->
<div id=\"links-chart\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<script>
var start_date = '20211020' // 开始日期
var date = new Date();
var end_date = '' + date.getFullYear() + (date.getMonth() > 8 ? (date.getMonth() + 1) : (\"0\" + (date.getMonth() + 1))) + (date.getDate() > 9 ? date.getDate() : (\"0\" + date.getDate())); // 结束日期
var access_token = 'xxxxxxxxx' // accessToken
var site_id = 'xxxxxxxx' // 网址 id
var dataUrl = '（后续自建的API网址）/api?access_token=' + access_token + '&site_id=' + site_id
var metrics = 'pv_count' // 统计访问次数 PV 填写 'pv_count'，统计访客数 UV 填写 'visitor_count'，二选一
var metricsName = (metrics === 'pv_count' ? '访问次数' : (metrics === 'visitor_count' ? '访客数' : ''))
// 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
// 访问地图
function mapChart () {
  let script = document.createElement(\"script\")
  let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=visit/district/a';
  fetch(dataUrl + paramUrl).then(data => data.json()).then(data => {
    let mapName = data.result.items[0]
    let mapValue = data.result.items[1]
    let mapArr = []
    let max = mapValue[0][0]
    for (let i = 0; i < mapName.length; i++) {
      mapArr.push({ name: mapName[i][0].name, value: mapValue[i][0] })
    }
    let mapArrJson = JSON.stringify(mapArr)
    script.innerHTML = `
      var mapChart = echarts.init(document.getElementById('map-chart'), 'light');
      var mapOption = {
        title: {
          text: '博客访问来源地图',
          x: 'center',
          textStyle: {
            color: '${color}'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: ${max},
          left: 'left',
          top: 'bottom',
          text: ['高','低'],
          color: ['#8a2be2', '#afeeee'],
          textStyle: {
            color: '${color}'
          },
          calculable: true
        },
        series: [{
          name: '${metricsName}',
          type: 'map',
          mapType: 'china',
          showLegendSymbol: false,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(255, 255, 255, 0.1)',
              borderColor: '#121212'
            },
            emphasis: {
              areaColor: 'gold'
            }
          },
          data: ${mapArrJson}
          }]
        };
      mapChart.setOption(mapOption);
      window.addEventListener(\"resize\", () => { 
        mapChart.resize();
      });`
    document.getElementById('map-chart').after(script);
  }).catch(function (error) {
    console.log(error);
  });
}
// 访问趋势日
function trendsChartDay () {
  let script = document.createElement(\"script\")
  let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=trend/time/a&gran=day'
  fetch(dataUrl + paramUrl)
    .then(data => data.json())
    .then(data => {
      let dayArr = []
      let dayValueArr = []
      let dayName = data.result.items[0]
      let dayValue = data.result.items[1]
      for (let i = Math.min(dayName.length, 30) - 1; i >= 0; i--) {
        dayArr.push(dayName[i][0].substring(0, 13))
        if (dayValue[i][0] !== '--') {
          dayValueArr.push(dayValue[i][0])
        } else {
          dayValueArr.push(null)
        }
      }
      let dayArrJson = JSON.stringify(dayArr)
      let dayValueArrJson = JSON.stringify(dayValueArr)
      script.innerHTML = `
        var trendsChartDay = echarts.init(document.getElementById('trends-chartday'), 'light');
        var trendsOptionDay = {
          textStyle: {
            color: '${color}'
          },
          title: {
            text: '博客访问统计图（30日）',
            x: 'center',
            textStyle: {
              color: '${color}'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            name: '日期',
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '${color}'
              }
            },
            data: ${dayArrJson}
          },
          yAxis: {
            name: '${metricsName}',
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '${color}'
              }
            }
          },
          series: [{
            name: '${metricsName}',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgba(1, 191, 236)'
              }])
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128, 255, 165)'
              }, {
                offset: 1,
                color: 'rgba(1, 191, 236)'
              }])
            },
            data: ${dayValueArrJson},
            markLine: {
              data: [{
                name: '平均值',
                type: 'average'
              }]
            }
          }]
        };
        trendsChartDay.setOption(trendsOptionDay);
        window.addEventListener(\"resize\", () => { 
          trendsChartDay.resize();
        });`
      document.getElementById('trends-chartday').after(script);
    }).catch(function (error) {
      console.log(error);
    });
}
// 访问趋势月
function trendsChartMonth () {
  let script = document.createElement(\"script\")
  let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=trend/time/a&gran=month'
  fetch(dataUrl + paramUrl)
    .then(data => data.json())
    .then(data => {
      let monthArr = []
      let monthValueArr = []
      let monthName = data.result.items[0]
      let monthValue = data.result.items[1]
      for (let i = Math.min(monthName.length, 12) - 1; i >= 0; i--) {
        monthArr.push(monthName[i][0].substring(0, 7).replace('/', '-'))
        if (monthValue[i][0] !== '--') {
          monthValueArr.push(monthValue[i][0])
        } else {
          monthValueArr.push(null)
        }
      }
      let monthArrJson = JSON.stringify(monthArr)
      let monthValueArrJson = JSON.stringify(monthValueArr)
      script.innerHTML = `
        var trendsChartMonth = echarts.init(document.getElementById('trends-chartmonth'), 'light');
        var trendsOptionMonth = {
          textStyle: {
            color: '${color}'
          },
          title: {
            text: '博客访问统计图（每月）',
            x: 'center',
            textStyle: {
              color: '${color}'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            name: '日期',
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '${color}'
              }
            },
            data: ${monthArrJson}
          },
          yAxis: {
            name: '${metricsName}',
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '${color}'
              }
            }
          },
          series: [{
            name: '${metricsName}',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgba(1, 191, 236)'
              }])
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128, 255, 165)'
              }, {
                offset: 1,
                color: 'rgba(1, 191, 236)'
              }])
            },
            data: ${monthValueArrJson},
            markLine: {
              data: [{
                name: '平均值',
                type: 'average'
              }]
            }
          }]
        };
        trendsChartMonth.setOption(trendsOptionMonth);
        window.addEventListener(\"resize\", () => { 
          trendsChartMonth.resize();
        });`
      document.getElementById('trends-chartmonth').after(script);
    }).catch(function (error) {
      console.log(error);
    });
}
// 访问来源
function sourcesChart () {
  let script = document.createElement(\"script\")
  let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/all/a';
  fetch(dataUrl + paramUrl)
    .then(data => data.json())
    .then(data => {
      monthArr = [];
      let sourcesName = data.result.items[0]
      let sourcesValue = data.result.items[1]
      let sourcesArr = []
      for (let i = 0; i < sourcesName.length; i++) {
        sourcesArr.push({ name: sourcesName[i][0].name, value: sourcesValue[i][0] })
      }
      let sourcesArrJson = JSON.stringify(sourcesArr)
      script.innerHTML = `
        var sourcesChart = echarts.init(document.getElementById('sources-chart'), 'light');
        var sourcesOption = {
          textStyle: {
            color: '${color}'
          },
          title: {
            text: '博客访问来源统计图',
            x: 'center',
            textStyle: {
              color: '${color}'
            }
          },
          legend: {
            top: 'bottom',
            textStyle: {
              color: '${color}'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: \"{a} <br/>{b} : {c} ({d}%)\"
          },
          series: [{
            name: '${metricsName}',
            type: 'pie',
            radius: [30, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
              formatter: \"{b} : {c} ({d}%)\"
            },
            data: ${sourcesArrJson},
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }]
        };
        sourcesChart.setOption(sourcesOption);
        window.addEventListener(\"resize\", () => { 
          sourcesChart.resize();
        });`
      document.getElementById('sources-chart').after(script);
    }).catch(function (error) {
      console.log(error);
    });
}
// 外部来源
function linksChart () {
  let script = document.createElement(\"script\")
  let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/link/a';
  fetch(dataUrl + paramUrl)
    .then(data => data.json())
    .then(data => {
      monthArr = [];
      let linksName = data.result.items[0]
      let linksValue = data.result.items[1]
      let linksArr = []
      for (let i = 0; i < 20; i++) {
        linksArr.push({ name: linksName[i][0].name, value: linksValue[i][0] })
      }
      let linksArrJson = JSON.stringify(linksArr)
      script.innerHTML = `
        var linksChart = echarts.init(document.getElementById('links-chart'), 'light');
        var linksOption = {
          textStyle: {
            color: '${color}'
          },
          title: {
            text: '外部链接访问TOP20',
            x: 'center',
            textStyle: {
              color: '${color}'
            }
          },
          legend: {
            top: 'bottom',
            type: 'scroll',
            textStyle: {
              color: '${color}'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: \"{a} <br/>{b} : {c} ({d}%)\"
          },
          series: [{
            name: '${metricsName}',
            type: 'pie',
            radius: [30, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
              formatter: \"{b} : {c} ({d}%)\"
            },
            data: ${linksArrJson},
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }]
        };
        linksChart.setOption(linksOption);
        window.addEventListener(\"resize\", () => { 
          linksChart.resize();
        });`
      document.getElementById('links-chart').after(script);
    }).catch(function (error) {
      console.log(error);
    });
}
function switchVisitChart () {
  // 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
  let color = document.documentElement.getAttribute('data-theme') === null ? '#fff' : '#000'
  try {
    let mapOptionNew = mapOption
    mapOptionNew.title.textStyle.color = color
    mapOptionNew.visualMap.textStyle.color = color
    mapChart.setOption(mapOptionNew)
  } catch (error) {
    console.log(error)
  }
  try {
    let trendsOptionDayNew = trendsOptionDay
    trendsOptionDayNew.title.textStyle.color = color
    trendsOptionDayNew.xAxis.axisLine.lineStyle.color = color
    trendsOptionDayNew.yAxis.axisLine.lineStyle.color = color
    trendsOptionDayNew.textStyle.color = color
    trendsChartDay.setOption(trendsOptionDayNew)
  } catch (error) {
    console.log(error)
  }
   try {
    let trendsOptionMonthNew = trendsOptionMonth
    trendsOptionMonthNew.title.textStyle.color = color
    trendsOptionMonthNew.xAxis.axisLine.lineStyle.color = color
    trendsOptionMonthNew.yAxis.axisLine.lineStyle.color = color
    trendsOptionMonthNew.textStyle.color = color
    trendsChartMonth.setOption(trendsOptionMonthNew)
  } catch (error) {
    console.log(error)
  }
  try {
    let sourcesOptionNew = sourcesOption
    sourcesOptionNew.title.textStyle.color = color
    sourcesOptionNew.legend.textStyle.color = color
    sourcesOptionNew.textStyle.color = color
    sourcesChart.setOption(sourcesOptionNew)
  } catch (error) {
    console.log(error)
  }
  try {
    let linksOptionNew = linksOption
    linksOptionNew.title.textStyle.color = color
    linksOptionNew.legend.textStyle.color = color
    linksOptionNew.textStyle.color = color
    linksChart.setOption(linksOptionNew)
  } catch (error) {
    console.log(error)
  }
}
if (document.getElementById('map-chart')) mapChart()
if (document.getElementById('trends-chartday')) trendsChartDay()
if (document.getElementById('trends-chartmonth')) trendsChartMonth()
if (document.getElementById('sources-chart')) sourcesChart()
if (document.getElementById('links-chart')) linksChart()
document.getElementsByClassName(\"theme\")[0].addEventListener(\"click\", function () { setTimeout(switchVisitChart, 100) })
</script>
{% endraw %}
\n
上面是博主自己统计图的代码，可以用以参考，根据自己的需求绘制百度分析统计图。
\n
\n
# 自建 API
\n
上面代码中的有一处需要自建 API，下面来介绍如何自建 API：
\n
    \n
  1. \n
    注册 Vercel，尽量用国外邮箱；
    \n
    2. \n
  2. \n
    进入 dashboard，新建项目
    \n
    \"image-20211229144508557\"
    \n
    3. \n
  3. \n
    导入 github  项目：
    \n
    \"image-20211229144616829\"
    \n
    \"image-20211229144711036\"
    \n
    4. \n
  4. \n
    填入 Erukon  的 GitHub api  项目：https://github.com/Eurkon/baidu-tongji-api
    \n 项目网址：
    \n
    5. \n
\n
https://github.com/Eurkon/baidu-tongji-api
    \n
  1. \n
    如果提示是否是你的仓库，选否， Vercel  会自动帮你  fork  这个仓库到你的  Github  账号里。
    \n
    2. \n
  2. \n
    导入静态页面仓库之前，需要为你的  Github  安装 Vercel ，此处建议选择  All repositories ，意为为所有仓库安装，当然，你也可以选择只为当前仓库安装，也就是  Only select repositories 。
    \n
    \n
    如果哪天反悔了，可以在 github-> 头像 (右上角)->settings->Applications（列表下数上第四个）->Installed Github Apps 里修改。
    \n
    \n
    \"\"
    \n
    3. \n
  3. \n
    之后会识别出项目文件，单击  Continue
    \n
    \"\"
    \n
    4. \n
  4. \n
    Vercel  的  PROJECT NAME  可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除  PROJECT  以后重建一个了。下方三个选项保持默认就好。
    \n
    \"\"
    \n
    5. \n
  5. \n
    等待一会，完成部署，会出现以下界面：
    \n
    \"image-20211229150141726\"
    \n
    6. \n
  6. \n
    记住 DOMAINS  后面的域名，修改上面代码中 dataUrl  的域名部分。
    \n
    7. \n
\n
# 解决 pjax 加载问题
\n
\n
和新增文章统计页面一样的方法，配置一次就可以了，如果第一次配置，参考新增文章统计页面的对应位置，或者看下面（水一次），如果已经配置过，请跳过！
\n
\n
\n
如果做到此步，就已经成功了，但是会发现，第一次会加载不出来，显示空白，只有再次点击或者刷新后才会显示，下面来解决此问题
\n
\n
    \n
  1. 在主题的 yml  配置文件中，找到最下面的 vendors ，在 js  一栏新增 echarts  引入：
    2. \n
\n
vendors:
\tjs:
\t\t……
\t\techarts: npm/echarts@5.2.2/dist/echarts.min.js
代码：
\n
echarts: npm/echarts@5.2.2/dist/echarts.min.js
    \n
  1. \n
    找到 themes\\shoka\\scripts\\generaters\\script.js ，大概 24 行，找到 js ，新增 echarts  内容，内容为下：
    \n
    auto_scroll: theme.auto_scroll,
        js: {
          valine: theme.vendors.js.valine,
          chart: theme.vendors.js.chart,
          copy_tex: theme.vendors.js.copy_tex,
          fancybox: theme.vendors.js.fancybox,
          echarts: theme.vendors.js.echarts, // 新增
        },
        css: {
    代码：
    \n
    echarts: theme.vendors.js.echarts,
    2. \n
  2. \n
    找到 themes\\shoka\\scripts\\helpers\\assets.js ，找到大概 50 行，新增 echarts  的 config ：
    \n
    if (!config) return '';
      //Get a font list from config
      let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => {   // 这里在 quicklink 后新增
        if (config[item]) {
          return config[item];
        }
        return '';
      });
    改后
    \n
    if (!config) return '';
      //Get a font list from config
      let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink', 'echarts'].map(item => {
        if (config[item]) {
          return config[item];
        }
        return '';
      });
    3. \n
\n
# 其他
\n
\n
本文中最长的 script  标签中的代码过于长，可以直接像本文一样加在 index.md  中，也可以单独保存这部分代码，上传到 cdn 中，通过外部引入；
\n如果想要修改图表的样式，请参考 echarts  官网：https://echarts.apache.org/zh/index.html，根据自行喜好对 ECharts 统计图进行修改。
\n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/3265173701/",
            "url": "https://blog.lavender816.top/posts/3265173701/",
            "title": "Shoka主题：新增文章统计页面",
            "date_published": "2021-12-28T12:30:00.000Z",
            "content_html": "
\n
新增页面：新增文章统计页面
\n
\n
# 前言
\n
\n
最开始参考的 matery 主题的统计页面，后来看到 Eurkon 大佬的文章，因此，本文章根据大佬的 Hexo 博客文章统计图适配本主题而成，改进了一些地方（pjax 问题、明暗模式问题），还留存一点 bug（黑暗模式刷新后字体会变成日间模式的颜色，未解决）
\n
\n
\n
参考文章：Hexo 博客文章统计图
\n
\n
# 实现
\n
# 新建页面
\n
\n
hexo new page statistics
\n
\n
在根目录下的 source  下新建文件夹，命名为 statistics ，并在该目录下新建文件： index.md ，填入以下内容：
\n
---
title: 文章统计
date: 2021-12-28 20:30:00
---
\n
# 安装 cheerio
\n
在博客根目录下打开 git bash ，安装 cheerio ：
\n
npm i cheerio --save
# 更改语言并添加到菜单
\n
    \n
  1. 刚才新建的 index.md  中，如果是用命令创建， title  一行是英文，改成对应的中文就可以了；
    2. \n
  2. 在 themes\\shoka\\languages\\zh-CN.yml  中，找到 menu  一行，新增 statistics: 文章统计 ；
    3. \n
  3. 在主题的 yml  文件里，在 menu  里添加到菜单中
    4. \n
\n
# 文章统计代码（已适配明暗模式）
\n
在 themes\\shoka\\scripts\\helpers\\  目录下新建文件命名为 charts.js ，填入以下内容（注意修改下面有注释的开始统计时间）：
\n
'use strict';
const cheerio = require('cheerio')
const moment = require('moment')
hexo.extend.filter.register('after_render:html', function (locals) {
  const $ = cheerio.load(locals)
  const calendar = $('#posts-calendar')
  const post = $('#posts-chart')
  const tag = $('#tags-chart')
  const category = $('#categories-chart')
  let htmlEncode = false
  if (calendar.length > 0 || post.length > 0 || tag.length > 0 || category.length > 0) {
    if (calendar.length > 0 && $('#postsCalendar').length === 0) {
      if (calendar.attr('data-encode') === 'true') htmlEncode = true
      calendar.after(postsCalendar())
    }
    if (post.length > 0 && $('#postsChart').length === 0) {
      if (post.attr('data-encode') === 'true') htmlEncode = true
      post.after(postsChart())
    }
    if (tag.length > 0 && $('#tagsChart').length === 0) {
      if (tag.attr('data-encode') === 'true') htmlEncode = true
      tag.after(tagsChart(tag.attr('data-length')))
    }
    if (category.length > 0 && $('#categoriesChart').length === 0) {
      if (category.attr('data-encode') === 'true') htmlEncode = true
      category.after(categoriesChart())
    }
    if (htmlEncode) {
      return $.root().html().replace(/&amp;#/g, '&#')
    } else {
      return $.root().html()
    }
  } else {
    return locals
  }
}, 15)
function postsCalendar () {
  // calculate range.
  const start_date = moment().subtract(1, 'years');
  const end_date = moment();
  const rangeArr = '[\"' + start_date.format('YYYY-MM-DD') + '\", \"' + end_date.format('YYYY-MM-DD') + '\"]';
  // post and count map.
  var dateMap = new Map();
  hexo.locals.get('posts').forEach(function (post) {
      var date = post.date.format('YYYY-MM-DD');
      var count = dateMap.get(date);
      dateMap.set(date, count == null || count == undefined ? 1 : count + 1);
  });
  // loop the data for the current year, generating the number of post per day
  var i = 0;
  var datePosts = '[';
  var day_time = 3600 * 24 * 1000;
  for (var time = start_date; time <= end_date; time += day_time) {
      var date = moment(time).format('YYYY-MM-DD');
      datePosts = (i === 0 ? datePosts + '[\"' : datePosts + ', [\"') + date + '\", '
              + (dateMap.has(date) ? dateMap.get(date) : 0) + ']';
      i++;
  }
  datePosts += ']';
  return `
  <script id=\"postsCalendar\">
    var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
    var postsCalendar = echarts.init(document.getElementById('posts-calendar'), 'light');
    var postsCalendarOption = {
      textStyle: {
        color: color
      },
      title: {
          top: 0,
          text: '文章发布日历',
          left: 'center',
          textStyle: {
              color: color
          }
      },
      tooltip: {
          formatter: function (obj) {
              var value = obj.value;
              return '<div style=\"font-size: 14px;\">' + value[0] + '：' + value[1] + '</div>';
          }
      },
      visualMap: {
          show: true,
          showLabel: true,
          categories: [0, 1, 2, 3, 4],
          calculable: true,
          textStyle:{
            color: color
          },
          inRange: {
              symbol: 'rect',
              color: ['#d7dbe2', '#fc9bd9', '#f838b2', '#c4067e', '#540336']
          },
          itemWidth: 12,
          itemHeight: 12,
          orient: 'horizontal',
          left: 'center',
          bottom: 80
      },
      calendar: {
          left: 'center',
          range: ${rangeArr},
          cellSize: [13, 13],
          splitLine: {
              show: true
          },
          itemStyle: {
              color: '#111',
              borderColor: '#fff',
              borderWidth: 2
          },
          yearLabel: {
              show: false,
              color: color
          },
          monthLabel: {
              nameMap: 'cn',
              fontSize: 11,
              color: color
          },
          dayLabel: {
              formatter: '{start}  1st',
              nameMap: 'cn',
              fontSize: 11,
              color: color
          }
      },
      series: [{
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 0,
          data: ${datePosts}
      }]
    };
    postsCalendar.setOption(postsCalendarOption);
    window.addEventListener(\"resize\", () => { 
      postsCalendar.resize();
    });
    </script>`
}
function postsChart () {
  const startDate = moment('2020-08')  // 开始统计的时间
  const endDate = moment()
  const monthMap = new Map()
  const dayTime = 3600 * 24 * 1000
  for (let time = startDate; time <= endDate; time += dayTime) {
    const month = moment(time).format('YYYY-MM')
    if (!monthMap.has(month)) {
      monthMap.set(month, 0)
    }
  }
  hexo.locals.get('posts').forEach(function (post) {
    const month = post.date.format('YYYY-MM')
    if (monthMap.has(month)) {
      monthMap.set(month, monthMap.get(month) + 1)
    }
  })
  const monthArr = JSON.stringify([...monthMap.keys()])
  const monthValueArr = JSON.stringify([...monthMap.values()])
  return `
  <script id=\"postsChart\">
    var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
    var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
    var postsOption = {
      textStyle: {
        color: color
      },
      title: {
        text: '文章发布统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        name: '日期',
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${monthArr}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'line',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        areaStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          }, {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        data: ${monthValueArr},
        markLine: {
          data: [{
            name: '平均值',
            type: 'average'
          }]
        }
      }]
    };
    postsChart.setOption(postsOption);
    window.addEventListener(\"resize\", () => { 
      postsChart.resize();
    });
    </script>`
}
function tagsChart (len) {
  const tagArr = []
  hexo.locals.get('tags').map(function (tag) {
    tagArr.push({ name: tag.name, value: tag.length })
  })
  tagArr.sort((a, b) => { return b.value - a.value })
  let dataLength = Math.min(tagArr.length, len) || tagArr.length
  const tagNameArr = []
  const tagCountArr = []
  for (let i = 0; i < dataLength; i++) {
    tagNameArr.push(tagArr[i].name)
    tagCountArr.push(tagArr[i].value)
  }
  const tagNameArrJson = JSON.stringify(tagNameArr)
  const tagCountArrJson = JSON.stringify(tagCountArr)
  return `
  <script id=\"tagsChart\">
    var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
    var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
    var tagsOption = {
      textStyle: {
        color: color
      },
      title: {
        text: 'Top ${dataLength} 标签统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {},
      xAxis: {
        name: '标签',
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${tagNameArrJson}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'bar',
        data: ${tagCountArrJson},
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 195)'
            },
            {
              offset: 1,
              color: 'rgba(1, 211, 255)'
            }])
          }
        },
        markLine: {
          data: [{
            name: '平均值',
            type: 'average'
          }]
        }
      }]
    };
    tagsChart.setOption(tagsOption);
    window.addEventListener(\"resize\", () => { 
      tagsChart.resize();
    });
    </script>`
}
function categoriesChart () {
  const categoryArr = []
  hexo.locals.get('categories').map(function (category) {
    categoryArr.push({ name: category.name, value: category.length })
  })
  categoryArr.sort((a, b) => { return b.value - a.value });
  const categoryArrJson = JSON.stringify(categoryArr)
  return `
  <script id=\"categoriesChart\">
    var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
    var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
    var categoriesOption = {
      textStyle: {
        color: color
      },
      title: {
        text: '文章分类统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      legend: {
        top: 'bottom',
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: \"{a} <br/>{b} : {c} ({d}%)\"
      },
      series: [{
        name: '文章篇数',
        type: 'pie',
        radius: [30, 80],
        center: ['50%', '50%'],
        roseType: 'area',
        label: {
          formatter: \"{b} : {c} ({d}%)\"
        },
        data: ${categoryArrJson},
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }]
    };
    categoriesChart.setOption(categoriesOption);
    window.addEventListener(\"resize\", () => { 
      categoriesChart.resize();
    });
    </script>`
}
# 使用统计图（已适配明暗模式）
\n
在刚刚新建的 statistics  下的 index.md  中新增内容：
\n
{% raw %}
<script src=\"https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js\"></script>
<script>
function switchPostChart () {
  // 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
  let color = document.documentElement.getAttribute('data-theme') === null ? '#fff' : '#000'
  
  if (document.getElementById('posts-calendar')) {
    let postsCalendarNew = postsCalendarOption
    postsCalendarNew.textStyle.color = color
    postsCalendarNew.title.textStyle.color = color
    postsCalendarNew.visualMap.textStyle.color = color
    postsCalendarNew.calendar.itemStyle.color = color
    postsCalendarNew.calendar.yearLabel.color = color
    postsCalendarNew.calendar.monthLabel.color = color
    postsCalendarNew.calendar.dayLabel.color = color
    postsCalendar.setOption(postsCalendarNew)
  }
  if (document.getElementById('posts-chart')) {
    let postsOptionNew = postsOption
    postsOptionNew.textStyle.color = color
    postsOptionNew.title.textStyle.color = color
    postsOptionNew.xAxis.axisLine.lineStyle.color = color
    postsOptionNew.yAxis.axisLine.lineStyle.color = color
    postsChart.setOption(postsOptionNew)
  }
  if (document.getElementById('tags-chart')) {
    let tagsOptionNew = tagsOption
    tagsOptionNew.textStyle.color = color
    tagsOptionNew.title.textStyle.color = color
    tagsOptionNew.xAxis.axisLine.lineStyle.color = color
    tagsOptionNew.yAxis.axisLine.lineStyle.color = color
    tagsChart.setOption(tagsOptionNew)
  }
  if (document.getElementById('categories-chart')) {
    let categoriesOptionNew = categoriesOption
    categoriesOptionNew.textStyle.color = color
    categoriesOptionNew.title.textStyle.color = color
    categoriesOptionNew.legend.textStyle.color = color
    categoriesChart.setOption(categoriesOptionNew)
  }
}
document.getElementsByClassName(\"theme\")[0].addEventListener(\"click\", function () { setTimeout(switchPostChart, 100) })
</script>
<!-- 文章发布日历 -->
<div id=\"posts-calendar\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 文章发布时间统计图 -->
<div id=\"posts-chart\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 文章标签统计图 -->
<div id=\"tags-chart\" data-length=\"10\" style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
<!-- 文章分类统计图 -->
<div id=\"categories-chart\"  style=\"border-radius: 8px; height: 300px; padding: 10px;\"></div>
{% endraw %}
\n
    \n
  1. 其中  tags-chart  的  data-length="10"  属性表示仅显示排名前 10 的标签。
    2. \n
  2. js  引入的顺序不要错，不然会出错
    3. \n
\n
\n
# 解决 pjax 加载问题
\n
\n
如果做到此步，就已经成功了，但是会发现，第一次会加载不出来，显示空白，只有再次点击或者刷新后才会显示，下面来解决此问题
\n
\n
    \n
  1. 在主题的 yml  配置文件中，找到最下面的 vendors ，在 js  一栏新增 echarts  引入：
    2. \n
\n
vendors:
\tjs:
\t\t……
\t\techarts: npm/echarts@5.2.2/dist/echarts.min.js
代码：
\n
echarts: npm/echarts@5.2.2/dist/echarts.min.js
    \n
  1. \n
    找到 themes\\shoka\\scripts\\generaters\\script.js ，大概 24 行，找到 js ，新增 echarts  内容，内容为下：
    \n
    auto_scroll: theme.auto_scroll,
        js: {
          valine: theme.vendors.js.valine,
          chart: theme.vendors.js.chart,
          copy_tex: theme.vendors.js.copy_tex,
          fancybox: theme.vendors.js.fancybox,
          echarts: theme.vendors.js.echarts, // 新增
        },
        css: {
    代码：
    \n
    echarts: theme.vendors.js.echarts,
    2. \n
  2. \n
    找到 themes\\shoka\\scripts\\helpers\\assets.js ，找到大概 50 行，新增 echarts  的 config ：
    \n
    if (!config) return '';
      //Get a font list from config
      let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => {   // 这里在 quicklink 后新增
        if (config[item]) {
          return config[item];
        }
        return '';
      });
    改后
    \n
    if (!config) return '';
      //Get a font list from config
      let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink', 'echarts'].map(item => {
        if (config[item]) {
          return config[item];
        }
        return '';
      });
    3. \n
\n
# 其他
\n
\n
如果想要修改图表的样式，请参考 echarts  官网：https://echarts.apache.org/zh/index.html
\n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/3334816243/",
            "url": "https://blog.lavender816.top/posts/3334816243/",
            "title": "Shoka主题：实现自定义网站字体",
            "date_published": "2021-12-25T06:30:00.000Z",
            "content_html": "
\n
实现网站自定义的字体
\n
\n
# 前言
\n
\n
可以看见，我的网站全局使用了鸿蒙字体；
\n网站的字体默认是从 google font 的 api 里加载的；
\n谷歌的字体库中文字体少的可怜，没有自己喜欢的；
\n如果想要修改自己喜欢的字体，那就继续看这篇文章吧！
\n
\n
# 实现
\n
# 寻找字体
\n
\n
网络上有很多字体网站，如 100font、字由或者其他渠道的字体；
\n
找到自己喜欢的，下载下来，格式一般为 ttf
\n
\n
# 转换字体格式
\n
\n
web 中字体可能会用 woff 、 woff2 、 eot  等其他格式，所以需要转换下
\n
\n\n
# 上传字体
\n\n
# 修改代码
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\scaffolding\\base.styl ;
    \n
    2. \n
  2. \n
    大概 130 行左右，仿照引入 iconfont 的方式，引入自己的字体
    \n
    3. \n
  3. \n
    新增代码，使用 css 的 @font-face ：
    \n
    @font-face {
      font-family: '字体名称';     // 这个名称后面会用
      src: url('字体.eot');       // 放入对应格式字体的链接，下面都是一样的
      src: url('字体.eot?#iefix') format('embedded-opentype'),
      url('字体.woff2') format('woff2'),
      url('字体.woff') format('woff'),
      url('字体.ttf') format('truetype'),
      url('字体.svg#ic') format('svg');
    }
    4. \n
  4. \n
    找到主题的 yml  文件，在 font  下修改字体的样式：
    \n
    font:
      enable: true
      # Font options:
      # `external: true` will load this font family from `host` above.
      # `family: Times New Roman`. Without any quotes.
      # `size: x.x`. Use `em` as unit. Default: 1 (16px)
      # Global font settings used for all elements inside <body>.
      global:
        external: true
        family: Mulish    #全局字体修改，改成刚才的字体名称
        size:
      # Font settings for alternate title.
      logo:
        external: true
        family: Fredericka the Great     
        size: 3.5
      # Font settings for site title.
      title:
        external: true
        family: Noto Serif JP
        size: 2.5
      # Font settings for headlines (<h1> to <h6>).
      headings:
        external: true
        family: Noto Serif SC
        size:
      # Font settings for posts.
      posts:
        external: true
        family:
      # Font settings for <code> and code blocks.
      codes:
        external: true
        family: Inconsolata
    \n
    根据不同位置的字体需要，改相应部分的字体的 family  为刚才引入的字体名称
    \n
    \n
    5. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/3928966287/",
            "url": "https://blog.lavender816.top/posts/3928966287/",
            "title": "Shoka主题：实现页面背景大图全屏效果",
            "date_published": "2021-12-25T06:00:00.000Z",
            "content_html": "
\n
实现页面背景大图全屏效果
\n
\n
# 前言
\n
\n
主题默认首页等其他页面大图是半屏，个人喜欢图片占据全屏的效果，因此修改源码
\n
\n
# 实现
\n
# 修改 Stylus
\n
    \n
  1. \n
    找到 themes\\shoka\\source\\css\\_common\\outline\\header\\  目录，以下修改都是在该目录下修改；
    \n
    2. \n
  2. \n
    找到 brand.styl , 在 #brand  中修改 height  值:
    \n
    #brand {
      position: fixed;
      padding: 3rem 5rem 0;
      text-align: center;
      width: 100%;
      height: 50vh;   // 修改为 80vh
      min-height: 10rem;
    修改为
    \n
    #brand {
      position: fixed;
      padding: 3rem 5rem 0;
      text-align: center;
      width: 100%;
      height: 80vh;
      min-height: 10rem;
    3. \n
  3. \n
    找到 header.styl , 在 #header  中修改 height  值:
    \n
    #header {
      margin: 0 auto;
      position: relative;
      width: 100%;
      height: 50vh;  // 修改为 100vh
      text-shadow: 0rem .2rem .3rem alpha(#000, .5);
      color: var(--header-text-color);
    修改为
    \n
    #header {
      margin: 0 auto;
      position: relative;
      width: 100%;
      height: 100vh;
      text-shadow: 0rem .2rem .3rem alpha(#000, .5);
      color: var(--header-text-color);
    4. \n
  4. \n
    找到 image.styl , 在 #imgs  中修改 height  值:
    \n
    #imgs {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;  // 修改为 100vh
      min-height: 25rem;
      z-index: -9;
      background-color: #363636;
    修改为
    \n
    #imgs {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      min-height: 25rem;
      z-index: -9;
      background-color: #363636;
    5. \n
  5. \n
    找到 tool.styl , 在 #tool  中修改 top  值:
    \n
    #tool {
      position: fixed;
      if (hexo-config('sidebar.position') == 'left') {
        right: 1rem;
      } else {
        left: 1rem;
      }
      top: 50vh;  // 修改为 90vh
      z-index: $zindex-2;
    修改为
    \n
    #tool {
      position: fixed;
      if (hexo-config('sidebar.position') == 'left') {
        right: 1rem;
      } else {
        left: 1rem;
      }
      top: 90vh;
      z-index: $zindex-2;
    6. \n
  6. \n
    找到 waves.styl , 在 #waves  中修改:
    \n
    .waves {
      width: 100%;
      height: 15vh;
      margin-bottom: -.6875rem;  // 删除此处
      min-height: 3.125rem;
      max-height: 9.375rem;
      position:relative;  // 修改为 absolute
      // 新增 z-index: 4;
      +mobile() {
        height: 10vh;
      }
    }
    修改为
    \n
    .waves {
      width: 100%;
      height: 15vh;
      bottom: 0;
      min-height: 3.125rem;
      max-height: 9.375rem;
      position: absolute;
      z-index: 4;
      +mobile() {
        height: 10vh;
      }
    }
    7. \n
\n
# 修改 nunjucks (layout)
\n
    \n
  1. \n
    找到 themes\\shoka\\layout\\_partials\\  目录；
    \n
    2. \n
  2. \n
    修改 layout.njk , 修改 </header>  的位置，大概 60 行左右:
    \n
    </header>
        <div id=\"waves\">
          <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">
            <defs>
              <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />
            </defs>
            <g class=\"parallax\">
              <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" />
              <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" />
              <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"5\" />
              <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" />
            </g>
          </svg>
        </div>
    <main>
    将 header  标签移动到 id  为 waves  的 div  下方，即:
    \n
    <div id=\"waves\">
            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">
              <defs>
                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />
              </defs>
              <g class=\"parallax\">
                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" />
                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" />
                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"5\" />
                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" />
              </g>
            </svg>
          </div>
          
        </header>
        <main>
    3. \n
\n
# 图片网格效果
\n
\n
2022.06.23 更新
\n
\n\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1013593897/",
            "url": "https://blog.lavender816.top/posts/1013593897/",
            "title": "Shoka主题：新增个人随笔页面",
            "date_published": "2021-12-23T10:38:00.000Z",
            "content_html": "
\n
新增页面：个人随笔页面（说说）
\n
\n
# 前言
\n
\n
在一个静态框架中，实现随笔页面随时发布状态
\n参考官方文档 Artitalk.js - 开始使用
\n
\n
# 实现
\n
# 新建页面
\n\n
# 关闭评论
\n\n
\n
以下部分内容直接复制的官方文档，复制过来保证完整性
\n参考官方文档 Artitalk.js - 开始使用
\n
\n
# LeanCloud 的相关准备
\n
\n
TIP
\n
🎃 与 Valine 在同一个页面使用
\n
如果迫切需要将 Artitalk 与 Valine 在同一个页面使用，可以通过 Artitalk 与 Valine 使用同一个 LeanCloud 的应用来解决。
\n
🌍 建议使用国际版的 LeanCloud
\n
因为国际版的 LeanCloud 不需要配置 serverurl，所以推荐使用国际版，速度没有区别，如果使用国内版的 LeanCloud 别忘了填写 serverurl 即可
\n
\n
\n
👀 与 valine 在同一页面使用
\n
如果有这个需要，可以将 artitalk 与 valine 存放在同一个应用中。可以有效避免同一个页面使用两个 leancloud 应用所产生的冲突。
\n
\n
    \n
  1. 前往 LeanCloud 国际版，注册账号。
    2. \n
  2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
    3. \n
  3. 绑定完成之后点击 创建应用 ，应用名称随意，接着在 结构化数据 中创建  class ，命名为  shuoshuo 。
    4. \n
  4. 在你新建的应用中找到 结构化数据 下的 用户 。点击 添加用户 ，输入想用的用户名及密码。
    5. \n
  5. 回到 结构化数据 中，点击  class  下的  shuoshuo 。找到权限，在  Class 访问权限 中将  add_fields  以及  create  权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将  delete  和  update  也设置为跟它们一样的权限。
    6. \n
  6. 然后新建一个名为 atComment  的 class，权限什么的使用默认的即可。
    7. \n
  7. 点击  class  下的  _User  添加列，列名称为  img ，默认值填上你这个账号想要用的发布说说的头像 url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
    8. \n
  8. 在最菜单栏中找到设置 -> 应用 keys，记下来  AppID  和  AppKey  ，一会会用。
    9. \n
  9. 最后将  _User  中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。
    10. \n
\n
\n
关于设置权限的这几步
\n这几步一定要设置好，才可以保证不被 “闲人” 破解发布说说的验证
\n
\n
\n
到此步是官方文档中的配置内容
\n
\n
# 开始使用
\n\n
{% raw %}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>
<div id="artitalk_main"></div>
<script>
      new Artitalk ({
            appId: '',  \t\t//appid
            appKey: '',  \t\t//appkey
            serverURL: '',\t\t// 国际版需要
            pageSize: 10,
            shuoPla: ' 发布一些东西吧～',  // 相当于 placehoder，发布时显示在输入框
            color1: 'url ("https://xxxxxxxx.png")',  // 背景为图片形式
            color2: 'linear-gradient (-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%',  // 背景为渐变形式
            color3: '#111'  // 字体颜色
      })
</script>
{% endraw %}
\n
# 问题的修复
\n\n
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"{{config.title}}\" href=\"{{ full_url_for('/rss.xml') }}\" />
<link rel=\"alternate\" type=\"application/atom+xml\" title=\"{{config.title}}\" href=\"{{ full_url_for('/atom.xml') }}\" />
<link rel=\"alternate\" type=\"application/json\" title=\"{{config.title}}\" href=\"{{ full_url_for('/feed.json') }}\" />
修改为（新增）
\n
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"{{config.title}}\" href=\"{{ full_url_for('/rss.xml') }}\" />
<link rel=\"alternate\" type=\"application/atom+xml\" title=\"{{config.title}}\" href=\"{{ full_url_for('/atom.xml') }}\" />
<link rel=\"alternate\" type=\"application/json\" title=\"{{config.title}}\" href=\"{{ full_url_for('/feed.json') }}\" />
<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/artitalk\"></script>
目前解决问题
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1419053408/",
            "url": "https://blog.lavender816.top/posts/1419053408/",
            "title": "CSS：CSSDiner学习选择器",
            "date_published": "2021-11-22T16:00:00.000Z",
            "content_html": "
\n
CSSDiner ：练习 CSS 选择器的游戏式网站，网站：CSSDiner: https://flukeout.github.io/
\n
\n
\n
有些关卡有多种方法，第一种标准方法按照右侧指定的格式，其他举一反三；很多其实复杂化了，看看就好
\n
\n
# CSS 选择器
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
选择器例子例子描述
.class.intro选择 class="intro" 的所有元素。
.class1.class2.name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2.name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。
#id#firstname选择 id="firstname" 的元素。
**选择所有元素。
elementp选择所有 <p> 元素。
element.classp.intro选择 class="intro" 的所有 <p> 元素。
element,elementdiv, p选择所有 <div> 元素和所有 < p> 元素。
element elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择父元素是 <div> 的所有 < p> 元素。
element+elementdiv + p选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]a[href^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[href$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]a[href*="w3schools"]选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:activea:active选择活动链接。
::afterp::after在每个 <p> 的内容之后插入内容。
::beforep::before在每个 <p> 的内容之前插入内容。
:checkedinput:checked选择每个被选中的 <input> 元素。
:defaultinput:default选择默认的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabledinput:enabled选择每个启用的 <input> 元素。
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:in-rangeinput:in-range选择其值在指定范围内的 input 元素。
:indeterminateinput:indeterminate选择处于不确定状态的 input 元素。
:invalidinput:invalid选择具有无效值的所有 input 元素。
:lang(language)p:lang(it)选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:linka:link选择所有未访问过的链接。
:not(selector):not(p)选择非 <p> 元素的每个元素。
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(odd)p:nth-child(odd)选择属于其父元素的奇数个子元素的每个 <p> 元素。
:nth-child(even):nth-child(even)选择属于其父元素的偶数个子元素的每个 <p> 元素。
:nth-child(2n+3):nth-child(2n+3)选择属于其父元素的 2n+3 个子元素的每个 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 input 元素。
:out-of-rangeinput:out-of-range选择值超出指定范围的 input 元素。
::placeholderinput::placeholder选择已规定 "placeholder" 属性的 input 元素。
:read-onlyinput:read-only选择已规定 "readonly" 属性的 input 元素。
:read-writeinput:read-write选择未规定 "readonly" 属性的 input 元素。
:requiredinput:required选择已规定 "required" 属性的 input 元素。
:root:root选择文档的根元素。
::selection::selection选择用户已选取的元素部分。
:target#news:target选择当前活动的 #news 元素。
:validinput:valid选择带有有效值的所有 input 元素。
:visiteda:visited选择所有已访问的链接。
\n
# CSS 选择器优先级
\n
\n
总结排序：!important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
\n
\n\n
# Level 1
\n
# 标准方法
\n
plate
# 其他方法
\n
*
# Level 2
\n
# 标准方法
\n
bento
# 其他方法
\n
*:nth-child(odd)
# Level 3
\n
# 标准方法
\n
#fancy
# 其他方法
\n
plate:first-child
plate:nth-child(1)
# Level 4
\n
# 标准方法
\n
plate apple
# 其他方法
\n
apple:first-child
plate>apple
# Level 5
\n
# 标准方法
\n
#fancy pickle
# 其他方法
\n
bento+plate pickle
# Level 6
\n
# 标准方法
\n
.small
# 其他方法
\n
apple.small
apple:nth-child(2),plate apple:first-child  /* 复杂化了 */
# Level 7
\n
# 标准方法
\n
orange.small
# Level 8
\n
# 标准方法
\n
bento orange.small
# Level 9
\n
# 标准方法
\n
plate,bento
# Level 10
\n
# 标准方法
\n
*
# Level 11
\n
# 标准方法
\n
plate *
# 其他方法
\n
plate>*
plate orange,pickle,plate apple
# Level 12
\n
# 标准方法
\n
plate+apple
# Level 13
\n
# 标准方法
\n
bento~pickle
# Level 14
\n
# 标准方法
\n
plate>apple
# Level 15
\n
# 标准方法
\n
orange:first-child
# 其他方法
\n
plate orange:first-child
# Level 16
\n
# 标准方法
\n
plate *:only-child
# 其他方法
\n
plate :only-child
apple,plate pickle
# Level 17
\n
# 标准方法
\n
.small:last-child
# 其他方法
\n
apple,pickle
apple.small,pickle.small
#fancy *:last-child , plate + pickle /* 逐渐复杂哈哈 */
# Level 18
\n
# 标准方法
\n
plate:nth-child(3)
# 其他方法
\n
plate:nth-last-child(2)
plate:nth-last-of-type(2)
# Level 19
\n
# 标准方法
\n
bento:nth-last-child(3)
# 其他方法
\n
bento:nth-child(2)
bento:nth-of-type(1)
bento:nth-last-of-type(2)
# Level 20
\n
# 标准方法
\n
apple:first-of-type
# 其他方法
\n
apple:nth-child(2)
orange+apple
# Level 21
\n
# 标准方法
\n
plate:nth-of-type(even)
# 其他方法
\n
plate:nth-of-type(2n)
# Level 22
\n
# 标准方法
\n
plate:nth-of-type(2n+3)
# 其他方法
\n
plate:has(apple)  /* 一般不建议用，是 jQuery 里的 */
# Level 23
\n
# 标准方法
\n
apple:only-of-type
# 其他方法
\n
plate apple.small:only-of-type
# Level 24
\n
# 标准方法
\n
.small:last-of-type
# 其他方法
\n
orange:last-of-type , apple:last-of-type
# Level 25
\n
# 标准方法
\n
bento:empty
# 其他方法
\n
bento:nth-child(1),bento:nth-child(4)
# Level 26
\n
# 标准方法
\n
apple:not(.small)
# Level 27
\n
# 标准方法
\n
[for]
# Level 28
\n
# 标准方法
\n
plate[for]
# Level 29
\n
# 标准方法
\n
[for=\"Vitaly\"]
# 其他方法
\n
bento:nth-child(3)
bento:nth-of-type(2)
bento:nth-last-child(2)
bento:nth-last-of-type(1)
# Level 30
\n
# 标准方法
\n
[for^=\"Sa\"]
# 其他方法
\n
[for^=\"S\"]
plate,plate+bento
plate,bento:first-of-type
# Level 31
\n
# 标准方法
\n
[for$=\"ato\"]
# 其他方法
\n
[for$=\"to\"]
[for$=\"o\"]
bento,plate
# Level 32
\n
# 标准方法
\n
[for*=\"obb\"]
# 其他方法
\n
[for*=\"o\"]
[for*=\"b\"]
bento:nth-child(odd)
",
            "tags": [
                "前端",
                "css"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/4169762869/",
            "url": "https://blog.lavender816.top/posts/4169762869/",
            "title": "Shoka主题：新增主题自动夜间模式",
            "date_published": "2021-11-14T04:30:00.000Z",
            "content_html": "
\n
新增功能：新增主题自动夜间模式，可以自由调整时间
\n
\n
# 前言
\n
\n
实现判断当前时间实现自动夜间模式
\n
\n
# 实现自动夜间模式
\n
    \n
  1. \n
    在主题的 yaml 配置文件中，自定义新增配置项（自定义命名）, 我在原本的 darkmode  项下面新增为
    \n
    darkmode: false
    # autodarkmode  新增主题自动夜间模式
    auto_dark:
      enable: true  #是否开启
      start: 21     #开始时间
      end: 6        #结束时间
    2. \n
  2. \n
    代码还是在找到 themes->shoka->source->js->_app，以下修改还是在这里修改。
    \n
    3. \n
  3. \n
    找到 global.js ，新增函数：
    \n
    4. \n
\n
const autoDarkmode = function(){
  if(CONFIG.auto_dark.enable){
    if(new Date().getHours() >= CONFIG.auto_dark.start || new Date().getHours() <= CONFIG.auto_dark.end){
      changeTheme('dark');
    }else{
      changeTheme();
    }
  }
}
    \n
  1. 找到 pjax.js ，新增：
    2. \n
\n
autoDarkmode()   // 新增
我个人的增加位置为大概 133 行
\n
autoDarkmode()  // 在这里
visibilityListener()
themeColorListener()
algoliaSearch(pjax)
    \n
  1. 在 themes->shoka->scripts->generaters，找到 script.js  大概 21 行左右，可以在
    2. \n
\n
favicon: {
  normal: theme.images + \"/favicon.ico\",
  hidden: theme.images + \"/failure.ico\"
},
darkmode: theme.darkmode,
auto_scroll: theme.auto_scroll,
中间修改为
\n
favicon: {
  normal: theme.images + \"/favicon.ico\",
  hidden: theme.images + \"/failure.ico\"
},
darkmode: theme.darkmode,
auto_dark: theme.auto_dark,   // 新增
auto_scroll: theme.auto_scroll,
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/4229572236/",
            "url": "https://blog.lavender816.top/posts/4229572236/",
            "title": "Shoka主题：新增页面下拉小箭头",
            "date_published": "2021-11-08T09:38:00.000Z",
            "content_html": "
\n
新增功能：页面下拉小箭头平滑跳转到内容部分
\n
\n
# 前言
\n
\n
实现一个下拉小箭头，在全屏界面直接跳转到内容的部分。（模仿 sakura 主题的下拉小箭头）
\n
\n
# 实现下拉小箭头
\n
    \n
  1. \n
    箭头图标使用的 ic i-angle-down  图标，使用动态效果 .up-down ，名字啥的还是自己起，这里我的命名比较随意。代码还是在找到 themes->shoka->source->js->_app，以下修改还是在这里修改。
    \n
    2. \n
  2. \n
    找到 global.js ，大概 17 行左右，新增：
    \n
    var angleBtn = $('#angle');
    3. \n
  3. \n
    找到 pjax.js ，大概 20 行左右，仿照 toolBtn，在下方新增：
    \n
    if(!angleBtn) {
        angleBtn = siteHeader.createChild('div', {
          id: 'angle',
          innerHTML: '<span><i class=\"ic i-angle-down\" aria-hidden=\"true\"></i></span>'
        });
     }
    在下方新增事件监听器：
    \n
    angleBtn.addEventListener('click',headertopdown);
    4. \n
  4. \n
    在 sidebar.js  大概 220 行左右，可以在
    \n
    const goToCommentHandle = function () {
      pageScroll($('#comments'));
    }
    下方，新增：
    \n
    const headertopdown = function () {
      pageScroll($('#main'));
    }
    这里直接调用的跳转评论区的函数 pageScroll
    \n
    5. \n
  5. \n
    修改下 css 问题，在 themes->shoka->source->css->_common->outline->header->header.styl 中最后 (@import... 之前) 新增：
    \n
    /* 首页下拉箭头 */
     
    #angle {
        position: absolute;
        bottom: 10vh;
        left: 50%;
        cursor: pointer;
        z-index: 5;
        transform: translateX(-50%);
    }
    @media (max-width: 860px) {
        #angle {
            bottom: 8vh;
        }
    }
    #angle i {
        font-size: 35px;
        color: #fff;
        @extend .up-down;
    }
    6. \n
\n
\n
完成！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1608655678/",
            "url": "https://blog.lavender816.top/posts/1608655678/",
            "title": "Shoka主题：新增按钮控制看板娘的显示隐藏",
            "date_published": "2021-11-08T09:16:00.000Z",
            "content_html": "
\n
在安装 hexo 插件 live2d 看板娘后，有时会出现看板娘挡住部分页面的问题，这时需要增加一个右下角的按钮，控制看板娘的显示与隐藏
\n
\n
# 安装 live2d 看板娘
\n
网上有很多教程，这里就不用细说了，直接
\n
npm install --save hexo-helper-live2d
然后再根目录的 yml 下新增 live2d 的各种设置即可
\n
# 开始修改
\n
# 前言
\n
    \n
  1. \n
    打开 F12，元素 (Elements) 可以看到，关于 live2d 在网页中在网页最下方
    \n
    <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. \n
  2. \n
    可以看出 id 为 live2d-widget，这就好说了，只要在 js 里找到这个 id，控制 css 属性的显示隐藏就行了；
    \n
    3. \n
  3. \n
    这里直接用的 css 属性时 visibility 的 hidden 和 visible 属性
    \n
    4. \n
\n
# 具体修改
\n
    \n
  1. \n
    找到 themes->shoka->source->js->_app，以下修改都是在这里修改。
    \n
    2. \n
  2. \n
    找到 global.js ，在大概 16 行位置新增按钮的名字（自己起一个），假如为 chooselive2d ，然后修改：
    \n
    var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents;
    修改为
    \n
    var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents, chooselive2d;
    3. \n
  3. \n
    在 pjax.js  文件里大概 16 行，新增那个按钮的 div 标签，用的图标随意，这里我用的是 ic i-thumbtack  图标，修改：
    \n
    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>'
        });
     }
    修改为：
    \n
    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 和监听事件
    \n
    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);
    修改为
    \n
    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  如下
    \n
    4. \n
  4. \n
    在 sidebar.js  里大概 220 行左右写实现代码 (和其他 handle 写一起)
    \n
    新增：
    \n
    const chooseLive2dHandle = function () {
      var live2d = document.getElementById(\"live2d-widget\");
      if(live2d.style.visibility == \"hidden\"){
        live2d.style.visibility = \"visible\";
      }else{
        live2d.style.visibility = \"hidden\";
      }
    }
    5. \n
  5. \n
    修改下 css 问题，在 themes->shoka->source->css->_common->outline->header->tool.styl 中大概 180 行左右，在 .back-to-top css 代码下，新增：
    \n
    .live2d {
          align-items: center;
          justify-content: center;
          height: auto;
          padding: .4125rem 0 .4125rem 0;
     }
    6. \n
\n
\n
成功解决！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/2221432915/",
            "url": "https://blog.lavender816.top/posts/2221432915/",
            "title": "Shoka主题：修复浏览器更新后分类卡片的bug",
            "date_published": "2021-11-08T08:40:00.000Z",
            "content_html": "
\n
在内核为 Chromium 浏览器更新到 94 后，出现了分类卡片左下角，"more..." 出现在正面的 bug。
\n
\n
# 解决方案
\n
# 作者更新
\n
主题作者更新了主题，修复了一些 bug，也解决这个问题，可以参考以下链接 fix・amehime/hexo-theme-shoka@ad3bb60・GitHub
\n
关于修改方案是找到 themes->shoka->source->css->_common->components->pages->home.styl，修改如下：
\n
$item {
  position: relative;
  color: inherit;
  width: calc(50% - 2rem);
  min-width: calc(50% - 2rem);
  height: 14rem;
  margin: 1rem;
  opacity: 0;
  &.show {
    @extend .slide-up-big-in;
    opacity: 1;
  }
  +mobile() {
    width: calc(100% - 1rem) !important;
    min-width: calc(100% - 1rem) !important;
    margin: 1rem .5rem !important;
  }
}
.index.wrap {
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    //transform-style: preserve-3d;
    //transform: translateZ(2rem);
    //backface-visibility: hidden;     //1 、注释这里
    padding: .3rem 1rem;
    border-radius: 1rem 0;
    color: var(--grey-0);
    background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);
    &::before {
      position: absolute;
      display: block;
      content: '';
      //transform-style: preserve-3d;
      //transform: translateZ(-2rem);
      //backface-visibility: hidden;   //2、注释这里
      height: calc(100% - 1rem);
      width: calc(100% - 1rem);
      border-radius: 5rem;
      left: .5rem;
      top: .8rem;
      box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
      background-color: var(--color-pink-a3);
    }
    &:hover {
      transform: translateZ(2.5rem);
    }
    &:hover::before {
      transform: translateZ(-2.5rem);
    }
  }
  //3、加上下面两部分 css 代码
   .active .btn {  
     transform-style: preserve-3d;
     transform: translateZ(2rem);
     backface-visibility: hidden;
     &::before {
       transform-style: preserve-3d;
       transform: translateZ(-2rem);
       backface-visibility: hidden;
     }
   }
\t// 到这里
  .meta {
    font-size: $font-size-smaller;
    color: var(--grey-5);
    .ic {
      margin-right: .0625rem;
    }
    .item + .item {
      margin-left: .625rem;
    }
    &.footer {
      position: absolute;
      bottom: .5rem;
      max-width: calc(100% - 7rem);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: flex-start;
      span {
        margin-right: .5rem;
      }
    }
  }
}
# 仍出现的问题
\n
\n
在更新后，虽然正面的 "more..." 消失了，仍存在以下问题：
\n
\n
    \n
  1. 鼠标在快速在分类卡片移动时，再 hover 结束后，"more..." 还是会突然闪一下再消失，强迫症不满意了 。
    2. \n
  2. 主页其他文章列表右下角或者左下角的 "more..." 会变暗很多。
    3. \n
\n
# 我的修改
\n
开始没有注意到作者的更新，自己 F12 作者大大的网站修改，最后发现其实很简单，修改上述文件部分代码如下
\n
$item {
  position: relative;
  color: inherit;
  width: calc(50% - 2rem);
  min-width: calc(50% - 2rem);
  height: 14rem;
  margin: 1rem;
  opacity: 0;
  &.show {
    @extend .slide-up-big-in;
    opacity: 1;
  }
  +mobile() {
    width: calc(100% - 1rem) !important;
    min-width: calc(100% - 1rem) !important;
    margin: 1rem .5rem !important;
  }
}
.index.wrap {
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    //transform-style: preserve-3d;
    //transform: translateZ(2rem);
    //backface-visibility: hidden;
    padding: .3rem 1rem;
    border-radius: 1rem 0;
    color: var(--grey-0);
    background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);
    &::before {
      position: absolute;
      display: block;
      content: '';
      //transform-style: preserve-3d;
      //transform: translateZ(-2rem);
      //backface-visibility: hidden;
      height: calc(100% - 1rem);
      width: calc(100% - 1rem);
      border-radius: 5rem;
      left: .5rem;
      top: .8rem;
      box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
      background-color: var(--color-pink-a3);
      z-index: -1;
    }
    &:hover {
      transform: translateZ(2.5rem);
    }
    &:hover::before {
      transform: translateZ(-2.5rem);
    }
  }
  // .active .btn {  
  //   transform-style: preserve-3d;
  //   transform: translateZ(2rem);
  //   backface-visibility: hidden;
  //   &::before {
  //     transform-style: preserve-3d;
  //     transform: translateZ(-2rem);
  //     backface-visibility: hidden;
  //   }
  // }
  .meta {
    font-size: $font-size-smaller;
    color: var(--grey-5);
    .ic {
      margin-right: .0625rem;
    }
    .item + .item {
      margin-left: .625rem;
    }
    &.footer {
      position: absolute;
      bottom: .5rem;
      max-width: calc(100% - 7rem);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: flex-start;
      span {
        margin-right: .5rem;
      }
    }
  }
}
其实就是将作者大大的新加代码删除掉，在 &::before 属性后加了个 z-index: -1
\n
\n
应该没有什么问题了，解决！
\n
\n",
            "tags": [
                "SHOKA",
                "shoka"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/1139700195/",
            "url": "https://blog.lavender816.top/posts/1139700195/",
            "title": "公告",
            "date_published": "2021-07-29T11:09:14.000Z",
            "content_html": "
# 公告
\n
\n
2022 年 6 月 23 日，shoka 主题首页大图文章更新，关于网格效果的实现
\n
\n
# 1. 发生什么了？
\n
\n
本博客全面从 wordpress 转到 hexo 静态页面，网址不变，博客内容不变，友链不变，但是评论从 wordpress 转太过麻烦，目前暂时不搞了……
\n
\n
# 2. 为什么？
\n
    \n
  1. 博客将近一年了，原来的博客是搭建在云服务器上，服务器也快到期了，不续费了，没钱了
    2. \n
  2. 其实博客这些内容托管在 github pages 完全够用，相比较服务器成本太高了。
    3. \n
  3. wordpress 太臃肿了，hexo 相比较轻一些，而且文件都在本地，主题也很多。
    4. \n
\n
# 3. 接下来
\n
接下来就一直用这个博客啦
\n
# 4. 悄悄增加个 github 提交日历
\n
\"\"
\n
\n
\"Alt\"
\n
# 5. 新增个有趣的计数
\n
\n
（从 2021 年 11 月 30 日 15:50 开始计数）
\n
\n
\":lavenderGongGao\"
\n",
            "tags": [
                "公告"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/490463724/",
            "url": "https://blog.lavender816.top/posts/490463724/",
            "title": "OpenGL 导入模型",
            "date_published": "2021-04-10T15:50:00.000Z",
            "content_html": "
# 准备工作
\n
# 学习网站
\n
\n
LearnOpenGL CN:   https://learnopengl-cn.github.io/
\n
\n
# 依赖开源项目
\n
\n
    \n
  1. Assimp:https://github.com/assimp/assimp  (注：这个需要编译，后续会说，直接下载源文件不管用)
    2. \n
\n
下载 Assimp:    http://assimp.org/index.php/downloads
\n
    \n
  1. GLFW:    https://github.com/glfw/glfw  (注：这个因为需要 lib 文件，所以需要官网下载相应的库文件等)
    2. \n
\n
下载 GLFW:    https://www.glfw.org/download.html
\n
    \n
  1. \n
    GLM:    https://github.com/g-truc/glm
    \n
    2. \n
  2. \n
    STB:    https://github.com/nothings/stb   (注：其实只用到一个关键文件 stb_image.h ，直接手动添加头文件也可)
    \n
    3. \n
  3. \n
    GLAD 下载:    https://glad.dav1d.de/
    \n
    4. \n
\n
\n
# IDE
\n
\n
Visual Studio 16 2019 (VS 2019)
\n
(注：一定要选定好统一的调试模式，例如 Debug 模式 /x64，后续的 Assimp 编译模式也要与此统一：Debug 模式 /x64，以及 GLFW 的相应文件下载也是 x64 的)
\n
另外，本人习惯：所有后续的 include 文件 (.h 包含目录)、lib 文件 (.lib 库目录) 都是使用的 VS 2019 默认的目录，应该是 Microsoft Visual Studio（VS2019安装目录）\\2019\\Community\\VC\\Tools\\MSVC\\14.28.29910  里面的 include  文件夹和 lib  文件夹，查看方法：打开菜单 -> 项目 ->（项目）属性 ->VC ++ 目录 -> 包含目录 -> 编辑，在下方计算的值即可看到目录位置；也可以自定义相应的目录，在上述位置中修改添加等。
\n
\n
# 软件
\n
\n
Cmake:     https://cmake.org/download/
\n
需要 cmake 对 assimp 进行编译
\n
当快捷键 win + R  输入 cmd ，输入 cmake --help  显示
\n
Usage
  cmake [options] <path-to-source>
  cmake [options] <path-to-existing-build>
  cmake [options] -S <path-to-source> -B <path-to-build>
Specify a source directory to (re-)generate a build system for it in the
current working directory.  Specify an existing build directory to
re-generate its build system.
                                   · · · · · ·
类似如上，即成功
\n
\n
# 正式开始
\n
# 1、新建项目
\n
打开 VS 2019，新建一个普通的控制台项目即可；
\n
以下以 LearnOpenGL CN 上项目为例：
\n
打开 https://learnopengl.com/code_viewer_gh.php?code=src/3.model_loading/1.model_loading/model_loading.cpp
\n
将源码复制到对应工程的源文件中，此时会有很多报错，不要急，因为缺少相应的头文件等
\n
# 2、配置导入头文件（重要）
\n
# (1) GLAD
\n
打开网站：https://glad.dav1d.de/，在 API 里选择对应的 opengl 版本下载即可，本项目以 opengl 版本为 4.1 为例，最后点击下方的 Generate  下载；
\n
下载 glad.zip ，解压后找到 glad/src  下的 glad.c ，添加到项目 -> 源文件中，找到 glad/include/glad  文件夹，将其复制到 VS 2019 对应的包含目录中（开头已经说明）。
\n
# (2) GLFW
\n
打开网站：https://www.glfw.org/download.html，我是 Windows 平台，64 位，所以点击 64-bit Windows binaries  下载，解压后打开 lib-vc2019 ，将里面的 lib 文件复制到 VS 2019 对应的库目录 x64 文件夹中；
\n
接下来，打开菜单 -> 项目 -> 属性，找见链接器 -> 输入 -> 附加依赖项 -> 编辑，输入 glfw3.lib ，确定；
\n
下载 https://github.com/glfw/glfw/tree/master/include 里的 GLFW 文件夹，解压后复制 GLFW 文件夹至 VS 2019 对应的包含目录中。
\n
# (3) GLM
\n
下载 https://github.com/g-truc/glm，复制里面的 glm 文件夹至 VS 2019 对应的包含目录中即可。
\n
# (4) LearnOpenGL 头文件问题
\n
打开 https://learnopengl.com/code_viewer_gh.php?code=src/3.model_loading/1.model_loading/model_loading.cpp
\n
鼠标移动至 #include <learnopengl/shader_m.h>  中，点击，即可跳转至 shader_m.h 文件，在项目中头文件右键，添加新建项，命名为 shader_m.h，复制代码至文件中；
\n
后续的 camera.h  和 model.h  添加方法相同，都是新建头文件，复制代码进去；对用网站地址：
\n
shader_m.h:     https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/shader.h
\n
camera.h:     https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/camera.h
\n
model.h:     https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/model.h
\n
然后，将头文件由（例） #include <learnopengl/shader_m.h>  改成 #include "shader_m.h" ，后面的 camera.h 和 model.h 相同
\n
# (5) model.h 头文件问题
\n
此时 shader_m.h 文件和 camera.h 文件都没有错误，但 model.h 文件还需要配置一些头文件，包括 stb_image.h 文件、assimp 库、mesh.h 和 shader.h，下面先说明 mesh.h 和 shader.h
\n
和 (4) 一样，都是新建头文件，复制对应的代码进去；对用网站地址：
\n
mesh.h:     https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/mesh.h
\n
shader.h:     https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/shader.h
\n
然后，将头文件由（例） #include <learnopengl/mesh.h>  改成 #include "mesh.h" ，后面的 shader.h 相同
\n
注：mesh.h 中也引入了 shader.h，也需要改一下
\n
# (6) stb_image.h 头文件问题
\n
项目头文件新建.h 文件命名为 stb_image.h
\n
LearnOpenGL 网站地址如下：https://learnopengl-cn.github.io/01 Getting started/06 Textures/#stb_imageh，可作为了解参考
\n
代码地址：https://github.com/nothings/stb/blob/master/stb_image.h，复制代码至新建的头文件中，即可，头文件改成 #include "stb_image.h"
\n
重要⭐⭐⭐：这时直接引用会报错，代码 stb_image.h 里有如下说明：
\n
Do this:
   #define STB_IMAGE_IMPLEMENTATION
before you include this file in *one* C or C++ file to create the implementation.
因此，要在 #include "stb_image.h"  引用前加一行，如下：
\n
#define STB_IMAGE_IMPLEMENTATION
#include \"stb_image.h\"
# (7) assimp 库（核心）
\n
下载 Assimp:    http://assimp.org/index.php/downloads，选择 Get the sourcecode  或者直接访问 https://github.com/assimp/assimp/releases/tag/v5.0.1 下载 Source code (zip)  （以这个 5.0.1 版本为例）
\n
解压 assimp-5.0.1，新建文件夹 build，按住 Shift  键，右键，选择 在此处打开Powershell窗口 ，输入以下命令：
\n
cmake .. -G \"Visual Studio 16 2019\"
回车键，如图生成以下文件即成功：
\n
\"image-20210410225638071\"
\n
打开.sln（Solution 文件）, 注意编译环境是 Debug /x64，选择 ALL_BUILD，生成
\n
\"image-20210410234255092\"
\n
等待生成成功，输出窗口出现以下即为成功：
\n
\"image-20210410230354912\"
\n
复制 assimp-5.0.1\\build\\include\\assimp  文件夹下的 config.h  到 assimp-5.0.1\\include\\assimp  文件夹里
\n
复制下载的 assimp-5.0.1\\include  文件夹里的 assimp  文件夹至 VS 2019 对应的包含目录中。
\n
复制 assimp-5.0.1\\build\\code\\Debug  里的除.dll 文件到 VS 2019 对应的库目录 x64 文件夹中。
\n
注意：此时运行可能会出现如下问题：
\n
\"image-20210410231413293\"
\n
解决方法：
\n
将 assimp-5.0.1\\build\\code\\Debug  里的 assimp-vc142-mtd.dll  复制到 项目文件夹/x64/Debug  文件夹下
\n
，或者复制到系统的 C:/Windows/System32  文件夹下（因为是 x64 下）
\n
接下来，打开菜单 -> 项目 -> 属性，找见链接器 -> 输入 -> 附加依赖项 -> 编辑，输入 assimp-vc142-mtd.dll ，确定；
\n
# (8) 模型问题
\n
打开主函数文件，大概在 80 行代码处有以下代码
\n
// build and compile shaders
    // -------------------------
    Shader ourShader(\"1.model_loading.vs\", \"1.model_loading.fs\");
    // load models
    // -----------
    Model ourModel(FileSystem::getPath(\"resources/objects/backpack/backpack.obj\"));
其中 1.model_loading.vs  和  1.model_loading.fs  都是 shader 文件， backpack.obj  是 OBJ 格式的模型文件
\n
接下来，先搞定 shader 文件，分别在项目源文件新建文件，分别命名为 1.model_loading.vs  和  1.model_loading.fs ，
\n
访问网站，粘贴代码，网站和代码如下：
\n
1.model_loading.vs
\n
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
out vec2 TexCoords;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
    TexCoords = aTexCoords;    
    gl_Position = projection * view * model * vec4(aPos, 1.0);
}
1.model_loading.fs
\n
#version 330 core
out vec4 FragColor;
in vec2 TexCoords;
uniform sampler2D texture_diffuse1;
void main()
{    
    FragColor = texture(texture_diffuse1, TexCoords);
}
接下来搞定 obj 模型文件，按照 resources/objects/backpack/backpack.obj  新建文件夹也可，自己定义路径也可，我放在与.sln 同一级文件夹下新建的 resources/objects/backpack 目录下，即 ../resources/objects/backpack/
\n
下载模型 nanosuit.rar:    https://learnopengl-cn.github.io/data/nanosuit.rar
\n
然后解压，复制所以文件至 ../resources/objects/backpack/  下，对于我这种代码改成
\n
// load models
    // -----------
    Model ourModel(FileSystem::getPath(\"../resources/objects/backpack/nanosuit.obj\"));
最后，上方代码会报错，是关于 FileSystem 相关的，改成如下就正确了
\n
// build and compile shaders
    // -------------------------
    Shader ourShader(\"1.model_loading.vs\", \"1.model_loading.fs\");
    // load models
    // -----------
    Model ourModel(\"../resources/objects/backpack/nanosuit.obj\");
# 最终成果
\n
运行如下：
\n
\"image-20210410233446712\"
\n
成功！
\n",
            "tags": [
                "学习",
                "OpenGL",
                "模型"
            ]
        },
        {
            "id": "https://blog.lavender816.top/posts/3033528140/",
            "url": "https://blog.lavender816.top/posts/3033528140/",
            "title": "Github提速/下载",
            "date_published": "2021-04-02T09:50:09.000Z",
            "content_html": "
# 一、提升 Github 访问速度
\n
# 1、Github 镜像网站访问
\n
\n
1、https://github.com.cnpmjs.org/
\n
2、https://git.sdut.me/
\n
3、https://hub.fastgit.org
\n
\n
# 2、 修改 Hosts 文件加速访问
\n
# (1) 获取 github 的 global.ssl.fastly
\n
\n
访问 https://fastly.net.ipaddress.com/github.global.ssl.fastly.net#ipinfo
\n
\n
\"\"
\n
获得 IP 为 199.232.69.194
\n
# (2) 获取 github.com 地址
\n
\n
访问 https://github.com.ipaddress.com/#ipinfo
\n
\n
\"\"
\n
获得 IP 为 140.82.112.4
\n
# (3) 修改 Hosts 文件
\n
\n
Hosts 文件位置： C:\\Windows\\System32\\drivers\\etc\\hosts
\n
右键属性，修改 Users 可写入
\n
如下图
\n
\"\"
\n
打开方式，选择记事本，输入以下
\n
199.232.69.194 github.global.ssl.fastly.net
140.82.112.4 github.com
以上两个 IP 地址都是刚才两个网页获得，不同电脑 IP 可能不同
\n
最后 Win + R ，打开运行，输入 cmd ，进入命令提示符，输入
\n
ipconfig /flushdns
刷新 DNS 缓存，最后应该能正常访问
\n
\n
# 3、Github520 (包含图片加载问题)
\n
\n
Github 大佬的加速 github 和解决图片加载问题的项目
\n
地址：https://github.com/521xueweihan/GitHub520
\n
（emmm，能解决访问慢的问题，如果访问不了 github，emmm，这个方法不适用于您）
\n
使用方法都在 Github 上完整给出
\n
\n
# 二、提高 Github 下载速度
\n
# 1、 代理网站加速
\n
\n
1、https://ghproxy.com/
\n
2、http://gh.api.99988866.xyz/
\n
3、http://toolwa.com/github/
\n
4、https://github.zhlh6.cn/   （使用 git clone  方式下载）
\n
5、Github raw 加速：将  raw.githubusercontent.com  替换成 raw.staticdn.net
\n
6、https://shrill-pond-3e81.hunsh.workers.dev/
\n
7、http://gitd.cc/
\n
8、https://gitclone.com/（部分需要会员，效果显著）
\n
9、https://pd.zwc365.com/
\n
10、https://d.serctl.com/
\n
11、http://tool.mkblog.cn/downgit/#/home
\n
\n
# 2、油猴插件配置脚本 (适用于基于 Chromium 的浏览器)
\n
# 安装油猴插件（支持 Chrome、Microsoft Edge、360 浏览器等）
\n
# ① 脚本一：github-accelerator
\n
# ② 脚本二：Github 增强 - 高速下载
\n
# 3 插件加速 (适用于基于 Chromium 的浏览器)
\n
\n
插件名称：Github 加速
\n
地址：Github 加速
\n
插件 ID：mfnkflidjnladnkldfonnaicljppahpg
\n
\n
(正常渠道方法：需要科学上网，不过既然能科学上网了，不就直接访问 Gihub 了吗？这个插件应该适用于只能通过谷歌访问助手下载插件的朋友)
\n
\n
\n
Chrome Extension 第三方下载：
\n
1、收藏猫插件下载
\n
2、chrome-extension-downloader: 根据插件 ID 下载 crx 文件
\n
\n
\n
# 4 Gitee 转入下载
\n
\n
1、申请一个 gitee 账户
\n
2、右上角 “+” 号 —> 从 Github/GitLab 导入
\n
3、导入成功后即可进行下载等各项操作
\n
\n
# 5、IDM 下载
\n
\n
其实就是利用 Internet Download Manager 的多线程下载的优势达到加速下载的目的
\n
\n
# 6、哔 ——————
\n
\n
代理、梯子（科学上网）YOU  KNOW
\n
\n",
            "tags": [
                "其他",
                "分享",
                "github"
            ]
        }
    ]
}