被迫营业

正打算看猫片的猫猫,收到了后宫的消息,lsp猫猫被迫营业。

要来点猫猫吗 (主人)

声明:进度条样式来源Cuteen主题,还有就是猫猫一点 Js都不懂 ,这里也是看了几眼别人怎么写的,然后整出来的。

在主题文件夹下找到 scripts 文件夹,没有就新建。
然后新建文件 progress.js ,内容如下。

'use strict';
function postprogress(args) {
  args = args.join(',').split(',')
  if (args.length > 1) {
    let cls = args[0].trim()
    let clsa = args[1].trim()
    let text = args[2].trim()
    return `<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-${clsa}"  style="width: ${cls}%" aria-valuenow="${cls}" aria-valuemin="0" aria-valuemax="100">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div></div>`;
  }
}
hexo.extend.tag.register('progress', postprogress);

CSS咋用你应该找到的,嗯肯定知道。

.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;margin:1rem 0}
.progress-bar-animated{background-color:#a7b5fd!important}
.progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}
.progress-bar-striped{background-image:linear-gradient(
45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
@keyframes progress-bar-stripes{0%{background-position-x:1rem}
}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}
.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0d6efd;transition:width .6s ease}
@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}
}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}
.progress p{font-size:10px!important;margin-bottom:9px}
.bg-success{background-color:#28a745!important}
.bg-warning{background-color:#ffc107!important}
.bg-danger{background-color:#dc3545!important}
.bg-info{background-color:#17a2b8!important}
.bg-primary{background-color:#0d6efd!important}

猫猫去掉实在是不知道咋让它不渲染

{猫% progress 70 danger 进度条测试 %猫}

进度条测试

{猫% progress 60 info 进度条测试 %猫}

进度条测试

{猫% progress 80 primary 进度条测试 %猫}

进度条测试

{猫% progress 50 warning 进度条测试 %猫}

进度条测试

{猫% progress 80 success 进度条测试 %猫}

进度条测试