日志

博客园SimpleMemory主题美化

 来源    2020-08-01    0  

所有内容来自marsggbo'github页面效果

页面定制CSS代码

由于js文件太长,点击链接获取。

博客侧边栏公告

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.2', // 版本
        blogUser      : "WhaleFall541", // 用户名
        blogAvatar    : "https://images.cnblogs.com/cnblogs_com/whalefall541/1815978/t_200730122732u=251289958,1860898046&fm=26&gp=0.jpg?a=1596263261858", // 用户头像
        blogStartDate : "2020-04-28", // 入园时间

		// 标签聚焦 失焦显示字样
        webpageTitleOnblur: '(o゚v゚)ノ Hi',
        webpageTitleOnblurTimeOut: 500,
        webpageTitleFocus: '(*´∇`*) Welcome Back!',
        webpageTitleFocusTimeOut: 1000,
        // 设置网站图标图片
        webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp",

		// 日/夜间模式自动切换
		switchDayNight: {
        	enable: true,
        	auto: {
        	    enable: true
        	}
    	},

    	// 页面加载loading
    	loading: {
    	     rebound: {
    	         tension: 16,
    	     },
    	     spinner: {
    	         id: 'spinner',
    	         radius: 90,
    	     }
    	},

    	// 是否渲染主页banner动效 以及配置动态效果
    	homeTopAnimationRendered: true,
    	homeTopAnimation: {
        	color   : 'random',
    	},

    	// 是否渲染文章页banner动效 以及配置动态效果
    	essayTopAnimationRendered: true,
    	essayTopAnimation: {
        	triW : 14,
        	triH : 20,
    	},

    	// 是否渲染页面背景动效 以及配置动态效果
    	bgAnimationRendered: true,
    	backgroundAnimation: {
        	colorSaturation: "60%",
        	colorBrightness: "50%",
    	},

    	// 主页banner图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张。
    	homeTopImg: [
        	"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
        	"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
    	],

    	// 主页banner上的标语
    	homeBannerTextType: "one",

    	// 文章页banner图片Url,推荐尺寸>= 1920*600,支持多张,每次刷新随机设置一张。
    	essayTopImg: [
        	"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
        	"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
    	],

    	// 文章页后缀
    	essaySuffix: {
        	aboutHtml: "I am a good person",
    	},

    	// 限制代码框高度,开启行号
    	codeMaxHeight: true,
    	codeLineNumber: true,

    	// 设置代码框字体样式
    	essayCode: {
        	fontFamily: "'Ubuntu Mono',monospace", // 代码框字体
   			fontSize: "14px" // 代码框字体大小
   		},

		// 设置博客园代码块样式
		essayCodeHighlightingType: "highlightjs",
        essayCodeHighlighting: "monokai-sublime",

    	// 页脚样式
		footerStyle: 1,

		bottomBlogroll: [ // 友情链接,[[链接名,链接]....]
        	["申请坑位", 'https://msg.cnblogs.com/send/WhaleFall541'],
        	["申请坑位", 'https://msg.cnblogs.com/send/WhaleFall541'],
        	["申请坑位", 'https://msg.cnblogs.com/send/WhaleFall541'],
        	["申请坑位", 'https://msg.cnblogs.com/send/WhaleFall541'],
        	["申请坑位", 'https://msg.cnblogs.com/send/WhaleFall541'],
    	],
    	
    	// 页脚标语
    	bottomText: {
        	icon: "❤️",   // v1.3.0 已废弃该配置
    		iconFont: {  // v1.3.0 新增配置
        	icon:  "icon-xl", // iconfont 图标名称
        	color: "red",     // 图标颜色
        	fontSize: "16px"  // 图标大小
    	},
    	left : "年少有为",
    	right: "再喝一杯无所谓"
    	},

    	// 控制台输出
    	consoleList: [
        	['BNDong CNBlogs', 'https://www.cnblogs.com/whalefall541/'],
        	['BNDong GitHub', 'https://github.com/whalefall541'],
        	['BNDong Email', '905400899@qq.com'],
    	],
    	
    	// 关闭广告
    	advertising: false,
    	// 版本映射
    	//isVersionMapping: true,
    	
	}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.2/src/script/simpleMemory.min.js"></script>

页首HTML代码

<!--鼠标点击效果-->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

页脚HTML代码

歌曲外连接地址网址
站点统计添加教程地址

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    autoplay: false, //自动播放
    audio: [
     {
		name: '少年',
    	artist: '梦然',
    	url: 'https://sharefs.yun.kugou.com/202007312156/bca63d525a16a0616f627034dd952225/G170/M07/16/11/SocBAF3H3aqAUYOEADmpdloW3bU827.mp3',
    	cover: 'http://singerimg.kugou.com/uploadpic/pass/softhead/100/20200316/20200316100918253.jpg',
	},
	{
 		name: '尘埃',
    	artist: '林小柯',
    	url: 'https://sharefs.yun.kugou.com/202007312152/ce719e234408f2a051036e82fa2d3c66/G234/M01/01/17/iocBAF8VC52AVMU_AEUrEl4PAeg694.mp3',
    	cover: 'http://singerimg.kugou.com/uploadpic/pass/softhead/100/20200717/20200717092613611085.jpg',
	}, 
	{
		name: '飞鸟和禅',
    	artist: '任然',
    	url: 'https://sharefs.yun.kugou.com/202007312155/0a8845b6d04662ec100a2451d97e8feb/G229/M09/13/0F/xZQEAF79mTeAKaQYAEhIqW4SCKE706.mp3',
    	cover: 'http://singerimg.kugou.com/uploadpic/pass/softhead/100/20180511/20180511143205725.jpg',
	},
       {
		name: 'Dancing With Your Ghost',
    	artist: 'Sasha Sloan',
    	url: 'https://sharefs.yun.kugou.com/202007312149/7211cbed6b9f9aff2c882cdcb559fa6a/G164/M08/10/05/5A0DAF0Tb5KAba2GADBLeoi7JDs405.mp3',
    	cover: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000002G0MjC1C1DzQ.jpg',
	},
	{
		name: '烟火人间',
    	artist: '添儿呗',
    	url: 'https://sharefs.yun.kugou.com/202007312155/75225268703973b37f5032773d57ca3e/G229/M06/11/05/xZQEAF7XTwaAGgahAEDY_d8fN9A054.mp3',
    	cover: 'http://singerimg.kugou.com/uploadpic/pass/softhead/100/20200414/20200414235715772797.jpg',
	},
	{
		name: '摘仙',
    	artist: '伊格赛听、叶里',
    	url: 'https://sharefs.yun.kugou.com/202007312202/e6ce50923987a990b986d1b3af081d64/G201/M0A/03/05/qZQEAF47vMmAQQKJACuOCD-UTD4341.mp3',
    	cover: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000004VNyEb4JwvZc.jpg',
	}
	]
});
ap.init();
</script>

<!--添加站点统计-->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_你的id'></span>
    <script src='https://v1.cnzz.com/z_stat.php?id=你的id&online=1&show=line' type='text/javascript'></script>
</div>

<!--图片放放大效果-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/jajian/img.enlarge.js"></script>
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: auto;width: 65%;border: 5px solid #7e8c8d; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>

欢迎关注微信公众号哦~ ~

相关文章
博客园自定义主题样式
日志记录我在定制个人blog页面效果时遇到的技巧及方法等. 基本流程 设定博客皮肤为BluSky 定制首页代码:引入外部CSS 页顶博主名字及副标题 在首页html内输入以下代码可添加博主名到页面顶端,也 ...
1
博客园二次元主题——Sakura
日志碎碎念 嗯,时隔多久也记不清了,我又回来了,总算是忙里偷闲把这篇文章写出来,有人要过很多次我的博客园美化方案,但是实在是忙啊,也因为我的前台技术不好,代码bug很多,所以也有点不想把这个美化发出来,但 ...
博客园简约主题simple-color
日志写在前面 本款主题是基于 @esofar大佬的silence主题,稍加更改完成.喜欢主题的极简风,同时也适配了许多个性化的东西,所以,主题总体基本没有任何的优化,代码凌乱,本不想放出,毕竟代码混乱,毫 ...
1
博客园侧边栏皮肤美化
日志1.我的侧边栏皮肤代码格式 <!DOCTYPE html> <html> <body> <div class="head_img"> ...
基于CSS3的博客园原创主题
日志一直想把博客园的主题好好改改,也不枉自己想当前端工程师的心.终于花了两天时间好好收拾了一下博客园的样子,当!当!当!终于出炉了,得好好写一遍博客记录一下. 向大牛致敬 初心是看到一个非常酷的博客Qin ...
1
wd博客园自定义主题样式
日志1 打开后台设置界面,进入你的博客首页,打开调试器(chrome自带调试器或firebug),看到哪里不爽的,定位到页面dom结构的相关元素,开始调试,例如我想改变下body的背景: 其中http:/ ...
1
博客园新主题
日志注册了一个博客园帐号.看到能够修改CSS就自己修改了一下 如大家所见,目前就是这样了,还在修改, 本文不定期更新 特点: 1,目前能够自适应电脑和手机屏幕(最小宽度320): 2,菜单自动跟随: 3, ...
1
博客园自用主题前端样式:WQ
日志故事背景 本来在 GITHUB 上面新建了一个项目叫:WQ WIKI 的.然后突然发现不想写了,没错,原因只是因为懒.于是想着干脆就将之前的博客园主题样式重写了吧,换个 Style 换一种心情吧. W ...
博客园美化主题——只需一分钟
日志前言 下面的教程是之前使用的第一版博皮的样式,属于简洁清新的,你只需要根据博文选好模板然后复制粘贴即可,详细的请访问白色泪光,本人现用的这套博皮是根据bndong的进行修改的,且配置需要时间,有兴趣可 ...
博客园主题美化只需要这几步
日志博客园美化主题需要这几步 本人现用的这套博皮是根据bndong的博客进行修改的,且配置需要时间,有兴趣可以直接访问bndong博客,查看置顶博文进行配置.所有的修改都在博客园后台管理--->设置 ...
1
博客园 主题自定义美化
日志第一步,上传自定义的css 在浏览器中直接打开https://files.cnblogs.com/files/JetpropelledSnake/cnblogs.css,然后按ctrl + s,即可将 ...
1
博客园主题美化
日志1.主题美化,顾名思义,其实就是对主题进行自定义.由于我之前在博客园已经写了很多博文,用的是博客园官方提供的BOOK 主题,贸然更改其他已有主题,或者完全自定义一个新的主题,都有可能导致原有博文格式的 ...
可爱的博客园样式美化、自定义博客园主题样式
日志cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
1
博客园美化阅读模式
日志为了自己能更加好的查看自己的总结以及让关注我的小可爱们能更加好的学习我弄了阅读模式 一.直接上代码 放在页脚即可 <style> .read_book { background: url( ...
1
博客园美化博客随笔目录
日志博客园美化博客随笔目录 基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进 一.js代码 <!--目录--> <script type="text/javascri ...
2
自定义博客园皮肤 黑色主题
日志自定义博客园皮肤 黑色主题 我的css主要是参考这位博主的自定义博客园皮肤的博客.对他的代码做了一些简化,有一些我认为没有什么需要的就删去了.我选择的主题也是lessismore这个主题,记得在设置自 ...
1
博客园主题修改中用到的css属性
日志样式覆盖 id选择器大于class选择器. 对于原主题中想要覆盖的id选择器,使用!import覆盖. 对于原主题中想要取消的css属性,使用inherit. 响应式 当屏幕宽度不同时,隐藏部分元素. ...
1
关于博客园主题的说明
日志说明 关于当前博客园主题的代码我已经上传到个人的 GITHUB 仓库了,如果后期有更新,在那里也能看到: https://github.com/PythonTra1nee/CNBlog-Theme 目 ...
1
博客园样式美化
日志前言 博客园有着丰富的博客皮肤(目前有124个),博客样式按说应该足够丰富了,总有一款适合我们吧?但作为一名专业的程序员,有时候我们想要有自己的一些自定义操作 1.账号设置 -> 博客设置 2. ...
1
博客园美化首页随笔展示美化
日志博客园美化首页随笔展示美化 一.css .postDesc-img { position: absolute; padding-bottom: 0; float: right; right: 0; b ...
1