世界信息:博客主题 Lite

2023-01-29 05:55:08 来源：博客园

主题说明

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

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

(资料图片)

部署说明

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

首页 HTML 代码：

<script>  $("head > link").remove();  $("#top_nav").remove();  $("#footer").remove();  $(".clear").remove();</script>      Loading

页脚 HTML 代码：

<script>  window.__LITE_CONFIG__ = {};</script><script type="module" src="https://blog-static.cnblogs.com/files/blogs/666252/index.js"></script><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: "CNBLOGS",    navs: [      // 可以插入图片、文本、svg      {        href: "https://i.cnblogs.com/posts/edit",        text: "新随笔"      },      {        href: "https://gitee.com/Enziandom",        svg: ``      }    ]  }};

技能栈

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 }    ]  }};

二次开发

npm installnpm run devnpm build

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

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

目录说明

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

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

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