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

shiramashiro發表於2022-05-31

宣告

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

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

image

安裝

在安裝部落格園皮膚之前,你必須要開啟 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'
		}
	]
}

相關文章