“博客园”（高自定义的博客园主题 Lite v1.4.7）

时间2025-05-04 20:15:08分类IT科技浏览4731

导读：主题说明这是一款高自定义的博客园主题 Lite，快速预览 Himmelbleu 的 Lite 主题博客。...

主题说明

这是一款高自定义的博客园主题 Lite ，快速预览 Himmelbleu 的 Lite 主题博客。

支持博主：GitHub 或 Gitee ，点个 ⭐star 哟~ 。Lite 基于 Vue3 + Vite 建立在博客园之上的一款博客主题。

版本说明

目前已经更新到 v1.4.7，本次版本主要完成了最大化配置主题：

主题几乎所有地方都可以配置：背景设置、卡片样式、盒子模型、字体相关等。右键随便任何一个区域都可以呼出设置面板，每个区域的设置面板都不一样，设置好了之后可以导出设置以作备份。进入页面时做了一个淡入淡出以及顶部进度条的效果，比之前的版本体验更顺滑。

特别注意

有以下几个博客园的地方没有做：

日记页面；文章页面；公告栏：评论排行榜、文章档案等

部署说明

首页 HTML 代码

<script> $("head > link").remove(); $("#top_nav").remove(); $("#footer").remove(); $(".clear").remove(); </script>  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/666252/index.css" />  <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: 1rem !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: 1rem !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: 1rem !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>  <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>

loading 借用了SILENCE 主题的 loading ，你也可以自定义，但注意最外层盒子要保留一个 class 名：dark-loading或light-loading ，这样 Lite 才可以关闭。

页脚 HTML 代码

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

在你的博客园后台“选项 ”中，勾选“启用数学公式支持 ”和“数学公式渲染引擎”（选择 MathJax3），否则数学公式不生效。

部署问题

速度很慢

博客园会带有一个国外的请求，所以会比较慢，这不是主题的问题。如果遇到长时间停止在 loading 屏幕请清除缓存，多刷新几次。

控制台报错

如果遇到控制台报错，因为一些配置存储在 localStorage 中，可能是因为博主更新了，需要你手动清除 localStorage 。

loading 不关闭

有可能是你不小心关闭了“博客数据从远程加载 ” ，在页脚 HTML 代码最底部加一个 script 标签。也可以清除 localStorage，多刷新几次。

<script> // 如果访问外网速度本身就很快，建议使用下面的代码。访问速度慢建议删除该 script 标签。 window.onload = () => { window.__LITE_CONFIG__.onLoaded(); }; </script>

配置说明

GitHub

window.__LITE_CONFIG__ = { github: "your github address" }; 字段描述可选值 github github 角标，在浏览器左上角，PC 端可见

陈列柜

window.__LITE_CONFIG__ = { cabinet: { avatar: "url", signature: "your text", 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>` } ] } };

cabinet 是陈列柜，点击浏览器左右中间的透明条可以呼出。

字段描述 avatar 头像 signature 个性签名 navs 左陈列柜导航项

鼠标悬浮在陈列柜项上时，比如“博客信息 ” ，右边会有一个小的箭头出现，点击之后可以对该项内容进行收起或展开。

技能栈

window.__LITE_CONFIG__ = { graph: { alpha: 0.85, sides: 5, // 多少个边 layer: 5, // 多少层 lineWidth: 1, textSize: 12, // 以下四个字段可以不填 fillColor: "#409eff", strokeColor: "#A7A7A7", lineColor: "#A7A7A7", textColor: "#A7A7A7", comment: [ // 数据，长度必须和 sides 保持一致 { title: "CSS", star: 4 }, { title: "Vue", star: 4 }, { title: "Java", star: 3 }, { title: "JS/TS", star: 4 }, { title: "Android", star: 3 } ] } };

二次开发

npm install npm run dev npm build

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

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

目录说明

components 下面的是组件，目前数量很少，组件在本项目的定义是：通用、可配置。重新思考 Vue 组件的定义：

adapters：views 下渲染列表，其内容在其他视图中也重复使用。adapters 与 components 的区别是 adapters 不需要考虑“通用、可配置 ” 。 fragments：views 下有许多业务要处理，但业务与业务之间并不是相关的，所以需要把 views 中一块业务拆分成一个组件，fragments 有自己的逻辑（请求、函数等）和视图。fragments 与该 views 有很大关系。 modules：路由组件，即注册到 vue-router 项里面的组件。

其他问题

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