部落格園SimpleMemory主題美化

WhaleFall541 發表於 2020-08-01

所有內容來自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/[email protected]/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/[email protected]/img/webp/home_top_bg.webp",
        	"https://cdn.jsdelivr.net/gh/BNDong/[email protected]/img/webp/home_top_bg.webp"
    	],

    	// 主頁banner上的標語
    	homeBannerTextType: "one",

    	// 文章頁banner圖片Url,推薦尺寸>= 1920*600,支援多張,每次重新整理隨機設定一張。
    	essayTopImg: [
        	"https://cdn.jsdelivr.net/gh/BNDong/[email protected]/img/webp/nothome_top_bg.webp",
        	"https://cdn.jsdelivr.net/gh/BNDong/[email protected]/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', '[email protected]'],
    	],
    	
    	// 關閉廣告
    	advertising: false,
    	// 版本對映
    	//isVersionMapping: true,
    	
	}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/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>

<!--設定滑鼠吸附效果-->
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="240,230,140" opacity="1" count="75" zindex="-2">if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {}</script>

歡迎關注微信公眾號哦~ ~
部落格園SimpleMemory主題美化