标签：box 主题博客 delay webkit animation https Lite com

主题说明

Hello，Everyone！这是一个博客园主题皮肤：Lite，基于上一个博客皮肤的又一次改造。目前基础功能和基础 API 开发完成。

说说我开发的意图：博客园每打开一个连接，比如随笔详细页、标签页等，都需要整页重新加载，非常影响体验，我就起意打造了一个基于 Vue3 + TS + Vite 的博客园皮肤。

你也可以完全不用我这个布局、颜色，我也尽可能地把基础 API 和框架展示出来，可以 forked 我的仓库，随意搭建属于你自己的皮肤。

基本上现有的博客园 API 已经满足需求。

部署主题

博客园侧边栏添加如下代码：

<script>
$("#hljs-script").remove();
$("#highlighter-theme-atom-one-dark").remove();
$("#home").remove();
$("#top_nav").remove();
$("head > link").remove();
</script>

页首 HTML 代码：

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/666252/index.css" />
<style>
@-webkit-keyframes loading{0%{opacity:0;}to{opacity:1;}}@keyframes loading{0%{opacity:0;}to{opacity:1;}}.dark-loading{background:#222;}.light-loading{background:#fff;}.dark-loading,.light-loading{font-size:14px !important;font-family:sans-serif !important;font-weight:400;position:fixed;top:0;left:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;z-index:99999;}.box h2{font-size:14px !important;font-family:sans-serif !important;font-weight:400;color:#777;margin:0;text-transform:uppercase;letter-spacing:0.1em;text-align:center;}.box span{font-size:14px !important;font-family:sans-serif !important;font-weight:400;display:inline-block;vertical-align:middle;width:0.6em;height:0.6em;margin:0.19em;background:#007db6;border-radius:0.6em;-webkit-animation:loading 1s infinite alternate;animation:loading 1s infinite alternate;}.box span:nth-of-type(2){background:#008fb2;-webkit-animation-delay:0.2s;animation-delay:0.2s;}.box span:nth-of-type(3){background:#009b9e;-webkit-animation-delay:0.4s;animation-delay:0.4s;}.box span:nth-of-type(4){background:#00a77d;-webkit-animation-delay:0.6s;animation-delay:0.6s;}.box span:nth-of-type(5){background:#00b247;-webkit-animation-delay:0.8s;animation-delay:0.8s;}.box span:nth-of-type(6){background:#5ab027;-webkit-animation-delay:1s;animation-delay:1s;}.box span:nth-of-type(7){background:#a0b61e;-webkit-animation-delay:1.2s;animation-delay:1.2s;}
</style>
<div class="dark-loading">
  <div class="box">
    <h2>Loading</h2>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>
<script>
window.MathJax = {
  tex: {
    inlineMath: [
      ["$", "$"],
      ["\\(", "\\)"]
    ],
    displayMath: [
      ["$$", "$$"],
      ["\\[", "\\]"]
    ]
  }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

页脚 HTML 代码：

<script>
window.__LITE_CONFIG__ = {
    currentBlogId,
    currentBlogApp,
    isLogined,
    isBlogOwner
}
</script>
<script type="module" src="https://blog-static.cnblogs.com/files/blogs/666252/index.js"></script>

配置项中必须填上以上四个字段，否则主题无法关闭 loading 屏。因为上面的标签引入地址是我的博客文件中的，如果有问题，建议你 forked 我的仓库然后 build 一下，上传得到 dist 中的文件，如果 config.ts 下是 dev 就不能正常部署，需要改成 pro。

配置主题

window.__LITE_CONFIG__ = {
    currentBlogId,
    currentBlogApp,
    isLogined,
    isBlogOwner,
    // 以上四个字段必填
    github: "https://github.com/Enziandom",
    gitee: "https://gitee.com/Enziandom",
    // 侧边栏配置项
    side: {
      avatar: "https://images.cnblogs.com/cnblogs_com/blogs/666252/galleries/1934022/o_221121082134_QQ图片20221121162116.jpg",
      signature: "Time tick away, dream faded away!",
    },
    // 导航栏配置项
    navor: {
      header: "<span style='font-size: 20px'>CNBLOGS</span>",
      search: true,
      navs: [ // 支持 img、svg、纯文本
        {
          href: "https://i.cnblogs.com/posts/edit",
          text: "新随笔"
        },
        {
          href: "https://i.cnblogs.com/posts",
          text: "管理"
        },
        {
          href: "https://gitee.com/Enziandom",
          svg: `<path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z""></path>`
        },
      ]
    },
    // 雷达图
    radar: {
      alpha: 0.85,
      sides: 5, // 多少个边
      layer: 5, // 多少层
      lineWidth: 1,
      textSize: 12,
      fillColor: "#409eff",
      strokeColor: "#A7A7A7",
      lineColor: "#A7A7A7",
      textColor: "#A7A7A7",
      data: [ // 数据，长度必须和 sides 保持一致
        { title: "Css", star: 4 },
        { title: "Vue", star: 4 },
        { title: "Java", star: 3 },
        { title: "JS/TS", star: 4 },
        { title: "Android", star: 3 }
      ]
    },
    // 链接，tip 可以不填
    links: [
      { tip: "TS 基础文档 - 1", href: "http://ts.xcatliu.com/index.html", text: "TypeScript 入门教程" },
      { tip: "JS 基础文档", href: "https://zh.javascript.info/", text: "现代 JavaScript 教程" },
      { tip: "TS 基础文档 - 2", href: "https://ts.yayujs.com/", text: "TypeScript 中文文档" }
    ],
    books: [
      {
        href: "https://baike.baidu.com/item/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript/19848692",
        text: "深入理解 JavaScript",
        img: "http://img3m1.ddimg.cn/85/1/11120396251-1_w_1.jpg",
        author: "[美]罗彻麦尔",
        rate: 4.5
      }
    ]
}