博客主题 Lite
Posted Himmelbleu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客主题 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 style=\'color: red\'>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 再进行概念细分就有:
- adapters:views 要包含很多的列表循环,而列表循环内的东西太多,就导致 views 代码混乱,而 adapters 就是拆分 views
的列表循环的小整体。
adapters 可能与 components 并没有太大区别,但是 components 的目的是做到通用、灵活,这不是 adapters 该考虑的事情,而是尽可能地与该
views 绑定。adapters 不是一个专门解决视图耦合的对象。 - fragments:views 包含的逻辑和界面太多,而需要把 views 中一些可以是整体的拆分出去,有自己的逻辑(请求、函数等)和视图
那么就可以是 fragments。同样地,fragments 与该 views 有很大关系,所以,和 components 也有很大区别。 - modules:用户界面根据作用和视图承载意义不同,也有很多不同类别可做区分。
其他问题
如果有 Issues 请在仓库中提出,或者博客园私信本人。
以上是关于博客主题 Lite的主要内容,如果未能解决你的问题,请参考以下文章
Dijkstra算法A*算法D*算法LPA*算法和D* Lite算法详解汇总(原理matlab代码)格栅地图
Dijkstra算法A*算法D*算法LPA*算法和D* Lite算法详解汇总(原理matlab代码)格栅地图
Dijkstra算法A*算法D*算法LPA*算法和D* Lite算法详解汇总(原理matlab代码)格栅地图