部落格園主題美化！👻

2021 年 12 月 17 日
筆記
未分類

部落格園主題美化！👻

最近看到好幾個人問我部落格園皮膚的事情，我就發一下我的部落格美化程式碼把，大家可以參考參考：

1. 部落格園主題模板：SimpleMemory

2. css樣式程式碼：
//blog-static.cnblogs.com/files/blogs/675033/1.css

3. 部落格園側邊欄公告程式碼：

點擊查看程式碼

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.2', // 版本
        blogUser      : "胖三斤", // 用戶名
        blogAvatar    : "//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_210330014829aaa.jpeg", // 用戶頭像
        blogStartDate : "2020-10-01", // 入園時間

		// 標籤聚焦 失焦顯示字樣
        webpageTitleOnblur: '(oﾟvﾟ)ノ 404啦！',
        webpageTitleOnblurTimeOut: 500,
        webpageTitleFocus: '(*´∇｀*) Welcome Back！',
        webpageTitleFocusTimeOut: 1000,
        // 設置網站圖標圖片
        webpageIcon: "//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211025103336_12.png",

		// 日/夜間模式自動切換
		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 : 10,
        	triH : 20,
    	},

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

    	// 主頁banner圖片Url，推薦尺寸>= 1920*1080，支援多張，每次刷新隨機設置一張。
    	homeTopImg: [
        	"//blog-static.cnblogs.com/files/blogs/675033/wallhaven-yjk6ml.gif",
            "//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211016050223blog.jpg",
			"//blog-static.cnblogs.com/files/blogs/675033/wallhaven-6opevx.gif",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020152914_wallhaven-1kg989.jpg",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020153736_wallhaven-g7mpj7.jpg",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020153748_wallhaven-q2m797.jpg"

    	],

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

    	// 文章頁banner圖片Url，推薦尺寸>= 1920*600，支援多張，每次刷新隨機設置一張。
    	essayTopImg: [
        	"//blog-static.cnblogs.com/files/blogs/675033/wallhaven-yjk6ml.gif",
            "//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211016050223blog.jpg",
			"//blog-static.cnblogs.com/files/blogs/675033/wallhaven-6opevx.gif",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020152914_wallhaven-1kg989.jpg",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020153736_wallhaven-g7mpj7.jpg",
			"//images.cnblogs.com/cnblogs_com/blogs/675033/galleries/1954426/o_211020153748_wallhaven-q2m797.jpg",
        	"//cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
    	],

    	// 文章頁後綴
    	essaySuffix: {
        	aboutHtml: "既然選擇了遠方，那就沖沖沖！🎉",
    	},

		// 限制程式碼框高度，開啟行號
    	codeMaxHeight: true,
    	codeLineNumber: true,

		// 設置部落格園程式碼塊樣式
		essayCodeHighlightingType: "highlightjs",
        essayCodeHighlighting: "googlecode",

    	// 頁腳樣式
		footerStyle: 1,

		bottomBlogroll: [ // 友情鏈接，[[鏈接名,鏈接]....]
        	["申請坑位", '//msg.cnblogs.com/send/胖三斤1'],
        	["申請坑位", '//msg.cnblogs.com/send/胖三斤1'],
        	["申請坑位", '//msg.cnblogs.com/send/胖三斤1'],
        	["申請坑位", '//msg.cnblogs.com/send/胖三斤1'],
        	["申請坑位", '//msg.cnblogs.com/send/胖三斤1'],
    	],
    	
    	// 頁腳標語
    	bottomText: {
        	icon: "❤️",   // v1.3.0 已廢棄該配置
    		iconFont: {  // v1.3.0 新增配置
        	icon:  "icon-xl", // iconfont 圖標名稱
        	color: "red",     // 圖標顏色
        	fontSize: "16px"  // 圖標大小
    	},
    	left : "不要小看自己",
    	right: "人有無限可能！"
    	},

    	// 控制台輸出
    	consoleList: [
        	['BNDong CNBlogs', '//www.cnblogs.com/tzf1/'],
        	['BNDong Email', '[email protected]'],
    	],
    	
    	// 關閉廣告
    	advertising: true,
    	// 版本映射
    	isVersionMapping: true,
    	
	}
</script>
<script src="//cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>

4. 頁首程式碼：

點擊查看程式碼

<script type="text/javascript">
/* 滑鼠特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富強❤","❤民主❤","❤文明❤","❤和諧❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤愛國❤","❤敬業❤","❤誠信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<!-- 懸掛的喵 -->
<script type="text/javascript" src="//blog-static.cnblogs.com/files/fsh001/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="//blog-static.cnblogs.com/files/fsh001/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>

5. 頁腳程式碼：

點擊查看程式碼

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="//blog-static.cnblogs.com/files/blogs/675033/waifu.css"/>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

	<script>
		var _hmt = _hmt || [];
		(function() {
  		var hm = document.createElement("script");
  		hm.src = "//hm.baidu.com/hm.js?b8aad8ade616359cb831dffb1bb8854a";
  		var s = document.getElementsByTagName("script")[0]; 
  		s.parentNode.insertBefore(hm, s);
		})();
	</script>

</head>
<body>
    <link rel="stylesheet" type="text/css" href="//blog-static.cnblogs.com/files/blogs/675033/waifu.css">
    <link rel="stylesheet" type="text/css" href="//files.cnblogs.com/files/blogs/675033/flat-ui.min.css"/>
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="//files.cnblogs.com/files/blogs/675033/live2d.js"></script>
    <script src="//files.cnblogs.com/files/blogs/675033/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
     <script src="//blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>


<!--圖片放放大效果-->
<script type="text/javascript" src="//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="//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>



</body>
</html>

**至於如何修改成大家自己喜歡的樣式，大家可以看看側邊欄，頁首和頁腳的程式碼哈！不多，但是都有注釋，大家選擇性的修改哈！好啦，有什麼不會的可以私聊留言！👻
**

Tags: 未分類

部落格園主題美化！👻

部落格園主題美化！👻

VirMach 便宜 VPS

QNews

部落格園主題美化！👻

部落格園主題美化！👻

分享此文：

Related Posts

pf4j及pf4j-spring

HUST-電腦網路實驗-socket編程

HUST-電腦網路實驗-socket編程

清口解膩 怡寶0糖紅茶1.98元/瓶

VirMach 便宜 VPS

QNews

熱門文章

熱門搜尋

清口解膩怡寶0糖紅茶1.98元/瓶