宣告

本人非常喜歡Silence主題，這個面板也是改造自它。花了一些時間和精力在原有的基礎之上，添加了我喜歡的元素和風格，並添加了一些實用的功能。如果你喜歡我改造的面板，歡迎使用！

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

安裝

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

修改預設部落格面板

程式碼高亮

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

頁面定製 CSS 程式碼

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

部落格側邊欄公告

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

首頁 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>
 

配置選項

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

頭像狀態

statusKey是頭像狀態的配置項。在你的首頁頭像處的右下角可以展示你當前的狀態，類似於微信的個人狀態。

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

雷達圖

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

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

常用連結

myLinks是常用連結的配置項。主要目的是收藏自己常用的網址，更多的是新增一些開發手冊等等。

window.$silence = {
	myLinks: [
		{
			title: 'Vue3',
			href: 'https://v3.cn.vuejs.org/'
		}
	]
}

推薦書籍

niceBooks是推薦書籍的配置項。主要目的是收藏自己所讀的書籍，推薦給大家。

window.$silence = {
	niceBooks: [
		{
			title: "《JavaScript權威指南》",
			cover: "https://img0.baidu.com/it/u=3565672953,1063732653&fm=253&fmt=auto&app=138&f=JPEG?w=381&h=499",
			author: "(美)弗拉納根"
		}
	]
}