主题说明
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
}
]
}
二次开发
如果你是二次开发,至少在我的实践中,放置 github 或 gitee 的 pages 上引入代码的方式不可行,存在跨域问题,所以只能通过把 build 之后的 dist 目录下的index.js
和index.css
上传到你自己的博客园文件中:
上面的标签引入地址是我的博客文件中的,如果有问题,你可以 forked 我的仓库然后 build 一下,得到 dist 中的文件上传即可。
- forke 该项目到你自己的仓库中;
- clone 到本地仓库;
npm install
npm run dev
npm build
如下图所示,红色框画中的地方可以删除掉,其余的地方不要直接删除:
且把你的博客名称、博客ID 改成自己的,这些字段通过 f12 的头部 script 标签可以找到: