🏁 背景
博客園是一個面向開發者的知識分享社區, 各位注冊博客園之后就可以開通個人博客, 發布自己的博客
本人在使用過程中, 發現園子有以下特點
- 主題: 保留上十年的風格
- 摘要: 字數限制, 單圖, 無樣式文字, 默認會裁剪文章
針對於這些特點, 本人利用園子的 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