博客主题 Lite

主题说明

打开博客园的随笔详细页、标签页等，都是整页重新加载，比较影响体验。SPA 应用可以减少整页加载，实现局部刷新，本皮肤通过 Vue3 + TS + Vite 开发的。有些细节待日后逐步完善，随笔的阅读和使用基本上没有问题，文章、日记、部分侧边栏内容还没有实现。

仓库地址：GitHub，请点个 ⭐star 哟~。

部署说明

部署非常简单，你只需要在：博客园管理-设置下的 “首页 HTML 代码”和“页脚 HTML 代码”配置即可：

首页 HTML 代码：

<!-- clear unused elems -->
<script>
  $("head > link").remove();
  $("#top_nav").remove();
  $("#footer").remove();
  $(".clear").remove();
</script>
<!-- lite style -->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/666252/index.css" />
<!-- lite loading style -->
<style>
  #home {
    display: none !important;
  }
  @-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: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
      "微软雅黑", Arial, 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: 999999;
  }
  .box h2 {
    font-size: 14px !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
      "微软雅黑", Arial, 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: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
      "微软雅黑", Arial, 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>
<!-- lite loading -->
<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>

页脚 HTML 代码：

<!-- lite config -->
<script>
  window.__LITE_CONFIG__ = {};
</script>
<script type="module" src="https://blog-static.cnblogs.com/files/blogs/666252/index.js"></script>
<!-- run lite -->
<script>
  window.onload = () => {
    window.__LITE_CONFIG__.onLoaded();
  };
</script>

配置说明

主题

window.__LITE_CONFIG__ = {
  theme: {
    mode: "dark"
  }
};

不设置使用默认黑夜模式，更多关于主题的配置项正在开发中...

GitHub

window.__LITE_CONFIG__ = {
  github: "your github address"
};

陈列柜

window.__LITE_CONFIG__ = {
  cabinet: {
    avatar: "url",
    signature: "your text"
  }
};
字段 描述
avatar 头像
signature 个性签名

导航栏

window.__LITE_CONFIG__ = {
  navor: {
    // 支持 html 插入
    header: "<span>CNBLOGS</span>",
    navs: [
      // 可以插入图片、文本、svg
      {
        href: "https://i.cnblogs.com/posts/edit",
        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>`
      }
    ]
  }
};

技能栈

window.__LITE_CONFIG__ = {
  graph: {
    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 }
    ]
  }
};

推荐链接

window.__LITE_CONFIG__ = {
  links: [
    {
      href: "http://ts.xcatliu.com/index.html",
      text: "TypeScript 入门教程"
    }
  ]
};

推荐书籍

window.__LITE_CONFIG__ = {
  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
    }
  ]
};

二次开发

npm install
npm run dev
npm build

二次开发需要把 build 之后的 index.css、index.js 上传到博客园后台“文件”。并获取这两个文件的链接，以替换部署说明中标签的引入链接。

建议多使用 UnoCSS，开发时请把 .env.development 中两个字段修改成你自己的，否则获取的数据是我本人博客上的，博客 ID 和博客 App 都可以 F12 查看你博客找到，搜索currentBlogId 和currentBlogApp。

目录说明

components 文件夹下全是组件，组件的目的是做到所有 views 都可以灵活运用，可以裁剪、可以增加。目的是解决代码耦合，减少代码里，提升代码质量以及可阅读性等。

views 文件夹下全都是视图，视图是用户可以直接看到的 UI。对 UI 再进行概念细分就有：

  1. adapters：views 要包含很多的列表循环，而列表循环内的东西太多，就导致 views 代码混乱，而 adapters 就是拆分 views
    的列表循环的小整体。
    adapters 可能与 components 并没有太大区别，但是 components 的目的是做到通用、灵活，这不是 adapters 该考虑的事情，而是尽可能地与该
    views 绑定。adapters 不是一个专门解决视图耦合的对象。
  2. fragments：views 包含的逻辑和界面太多，而需要把 views 中一些可以是整体的拆分出去，有自己的逻辑（请求、函数等）和视图
    那么就可以是 fragments。同样地，fragments 与该 views 有很大关系，所以，和 components 也有很大区别。
  3. modules：用户界面根据作用和视图承载意义不同，也有很多不同类别可做区分。

其他问题

如果有 Issues 请在仓库中提出，或者博客园私信本人。

标签 , , ,

发表回复