一款好看的部落格園主題皮膚-Rebuild From Silence Theme

shiramashiro發表於2022-05-31
Rebuild

宣告

本部落格園皮膚是改造自Silence主題。本人花了時間和精力在原有的基礎之上新增了一些實用的功能；重新設計了介面佈局。如果你喜歡我改造的皮膚，歡迎你的使用！

目前還在繼續改造中，也在增加一些功能。移動端以及白天模式還沒有適配好，後期慢慢跟進。如果有問題請在Gitee 倉庫中提出問題，或者評論區下面提問。有興趣的小夥伴可以一起加入開發哦！

安裝

在安裝部落格園皮膚之前，你必須要開啟 JS 許可權、CSS 許可權。

修改預設部落格皮膚

你的部落格皮膚必須要設定Custom：

image

程式碼高亮

你的部落格圓程式碼高亮必須是 highlight.js，主題樣式選擇 atom-one-dark：

image

頁面定製 CSS 程式碼

在頁面定製 CSS 程式碼處新增以下程式碼：

@import url(https://shiramashiro.gitee.io/cnblogs-theme-silence/dist/silence.min.css);

image

部落格側邊欄公告

所有可配置選項都在部落格側邊欄公告進行：

<script>
window.$silence = {}
</script>
<script src="https://shiramashiro.gitee.io/cnblogs-theme-silence/dist/silence.min.js"></script>

注意，在最後一行有一個<script>標籤。

首頁 HTML 程式碼

在這裡你需要新增以下 HTML 程式碼：

<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 程式碼

因為部落格園預設的 JQuery 版本號太低，所以在這裡新增一個版本較高的：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

配置選項

有一些基本的選項在原皮膚文件中有說明，在這裡我就不過多贅述，我只說明一些增添的新配置選項或者修改的配置選項。

頭像狀態 statusKey

statusKey是頭像狀態的配置項，其可選引數有：

選項 說明 描述
activity 活躍中 顯示的顏色 rgba(66, 185, 131, 0.95)
busyness 忙碌中 顯示的顏色 rgba(255, 69, 0, 0.95)
growing 升級中 顯示的顏色 rgba(240,230,140, 0.95)
idle 摸魚中 顯示的顏色 rgba(112,128,144, 0.95)

比如：

window.$silence = {
  statusKey: 'idle'
}

雷達圖 radarMap

雷達圖可以直觀的看到自己目前掌握某種技術的程度。

window.$silence = {
	radarMap: {
		alpha: 0.85, // 資料區域透明度
		sides: 5, // 多邊形面數
		layer: 5, // 雷達層數
		step: 16, // 每一層多邊形距離多少
		lineWidth: 1, // 雷達圖線寬
		lineColor: "white", // 雷達圖線顏色
		textSize: 14, // 文字大小
		textColor: "white", // 文字顏色
		data: [ { // 資料
			title: "js", star: 4
		}, {
			title: "ts", star: 2
		}, {
			title: "html", star: 4
		}, {
			title: "css", star: 4
		}, {
			title: "vue", star: 4
		} ]
	}
}

myLinks是常用連結的配置項：

window.$silence = {
	myLinks: [
		{
			title: '嗶哩嗶哩',
			href: 'https://www.bilibili.com'
		}
	]
}

相關文章