ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

一款好看的博客园主题皮肤-Rebuild From Silence Theme

2022-05-31 02:31:08  阅读:212  来源: 互联网

标签:选项 star title 博客园 Theme Silence rgba 代码 silence


声明

本博客园皮肤是改造自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: ''
		}
	]
}

title是链接标题、内容;href是链接的地址。

标签:选项,star,title,博客园,Theme,Silence,rgba,代码,silence
来源: https://www.cnblogs.com/shiramashiro/p/16329011.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有