🏁 背景
博客园是一个面向开发者的知识分享社区, 各位注册博客园之后就可以开通个人博客, 发布自己的博客
本人在使用过程中, 发现园子有以下特点
- 主题: 保留上十年的风格
- 摘要: 字数限制, 单图, 无样式文字, 默认会裁剪文章
针对于这些特点, 本人利用园子的 JS 权限结合一些开发经验做了些优化
如果希望将本主题用在各位的园子中, 移步 快速开始
🎯 快速开始
确保各位博客园已经申请了 JS 权限
快速体验本主题
设置页面
进入设置页面
页面定制 CSS 代码
勾选 禁用模板默认 CSS ☑️
#top_nav, #home, #page_end_html {
display: none;
}
:root {
--theme-color: black;
--btn-color: #212121;
--mate-color: #9e9e9e;
}
页首 HTML 代码
<link rel="stylesheet" type="text/css" href="//blog-static.cnblogs.com/files/blogs/581220/theme.css" />
页脚 HTML 代码
<script src="//blog-static.cnblogs.com/files/blogs/581220/theme.js"></script>
🌈 定制化
主题颜色变量 --theme-color 中可以修改自己喜欢的颜色(默认为black ), 建议以下几种配色方案
官配 #f03838
民配 #999
盘绿 #377d22
盘红 #eb3223
腾讯 #034fd8
币站 #fb7299
💊 数据分离
体验过后, 回到正题
本主题围绕着分离数据这个思路来完成这个主题的制作, 这意味着使用者可以很方便的集成自己的已有主题
目前可以获取到的数据如下
文章
const post = {
categories: [{url: "//link", name: "name"}], // 分类
commentCnt: "8", // 评论数
content: "contentHTML", // 内容 HTML
date: 1583126040000, // 发布时间
desc: "<blockquote>\n<p>123</p>\n</blockquote>", // 描述 HTML
postID: "12395119", // 文章ID
readCnt: "1355", // 阅读数
tags: [{url: "//link", name: "name"}], // 标签
title: "主题使用指南 🧭", // 标题
url: "//link", // 文章 URL
}
文章列表
const posts = [{post}]
站点信息
const sites = {
subtitle: "", // 博客园 博客子标题
title: "", // 博客园 博客标题
url: "//link", // 博客园 链接
}
分页器
const pager = {
cur: 1, // 当前页
page: 1, // 总页数
}
更多数据可以在浏览器开发者工具中找到
🎹 二次开发
如果各位需要把数据无缝的集成自己的主题, 或者有意愿通过这些数据开发新的主题, 建议阅读本章节
PostsHandle
描述: PostsHandle 文章列表加载, 可以获得文章列表
使用:
const postEle = Array.from(document.querySelectorAll("body #main .postTitle .postTitle2"))
const editEle = Array.from(document.querySelectorAll("body #main .postDesc a"))
const posts = await PostsHandle(postEle, editEle)
return posts
PagerHandle
描述: PagerHandle 分页器加载, 可以获得当前页数和全部页数
使用:
const pagerEle = document.querySelector("body #main .Pager")
const pager = PagerHandle(pagerEle.innerHTML)
return pager
更多 Handle 可以在源码中找到
🗒 心愿单
- 评论数据获取
- 音乐播放插件
...
🙏 感谢
主题: Hacker