博客園二次元主題

最近有人找我要這個主題的代碼。
我就來詳細解答一下這個要怎么弄吧。

材料

1、博客主題選Custom
2、禁用模板默認CSS不要勾選
文件在這里下載
文件目錄

CSS.txt
側邊欄.txt
頁腳.txt 
main.txt

哦差點搞忘了，側邊欄支持js代碼！！

側邊欄文件main

要注意的是側邊欄，側邊欄里的大部分都用文件代替，完全用它給我們的文件是無法達到自己想要的個性化的，導致很多鏈接（比如頁首導航欄的鏈接都無法更改）會是其他人的，怎么解決呢？我們需要將他給我們的這個js的文件再行更改。
如果要達到方便，建議在txt里面直接更改，但是保存時我們需要把編碼改為UTF-8，否則亂碼。

txt里面你需要改的地方。

<!--離開頁面改變title-->
var time;
var normar_title = document.title;
document.addEventListener('visibilitychange', function () {
	if (document.visibilityState == 'hidden') {
		clearTimeout(time);
		document.title = '離開時的字段';
	} else {
		document.title = '回來時的字段';
		time = setTimeout(function () {
			document.title = normar_title;
		}, 3000);
	}
});

---

$("#navList").append('<li><a id="blog_nav_myhome" class="menu" href="首頁地址">首頁</a><i></i></li><li><a id="blog_nav_myyoulian" class="menu" href="友鏈地址">友鏈</a><i></i></li><li><a id="blog_nav_contact" class="menu" href="留言板地址">留言板</a><i></i></li><li><a id="blog_nav_rss" class="menu" href="我的隨筆地址">歸檔</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">關於</a><i></i></li>');
			//添加標簽icon
			$('#blog_nav_myhome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>');
			$('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>');
			$('#blog_nav_rss').prepend('<i class="fa fa-rss faa-pulse" aria-hidden="true"></i>');
			$('#blog_nav_admin').prepend('<i class="fa fa-list" aria-hidden="true"></i>');
			$('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>');
			$('#blog_nav_myzanshang').prepend('<i class="fa fa-heart" aria-hidden="true"></i>');
			$('#blog_nav_myguanyu').prepend('<i class="fa fa-leaf" aria-hidden="true"></i>');

			//添加li內嵌ui
			let guanyu = '<ul class="sub-menu">' +
					'<li><a href="關於1地址"><i class="fa fa-meetup" aria-hidden="true"></i>關於1</a></li>' +
					'<li><a href="關於2地址"><i class="fa fa-area-chart" aria-hidden="true"></i>關於2</a></li>' +
					'<li><a href="關於3地址"><i class="fa fa-heartbeat" aria-hidden="true"></i>關於3</a></li>' +
					'<li><a href="關於4地址"><i class="iconfont icon-taohua" aria-hidden="true"></i>關於4</a></li>' +
					'</ul>';
			$('#blog_nav_myguanyu').after(guanyu);

		}

---

//博客logo
var title = '<div class="site-branding">' +
    '<span class="logolink moe-mashiro">' +
    '<a href="首頁地址" alt="隨便">' +
    '<ruby><span class="sakuraso">前面</span><span class="no">中間</span><span class="shironeko">后面</span>' +
    '<rt class="chinese-font">下面</rt></ruby></a></span>' +
    '</div>'
$('body').prepend(title);

這個可以研究一下。
main文件以后綴js的形式上傳網絡，放在側邊欄<script src=""></script>引號中間

側邊欄代碼

側邊欄有一段代碼，可以直接更改main文件里面的參數。

<script src=""></script>
<script type="text/javascript">
    $.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
            notice: ''
        },

我們看到這里第一行的src是空的，這里需要你上傳更改好的main文件上傳至網絡（博客園就可以）。找到main文件地址填入src。
除了第一行以外就是main文件里面的參數了，這里是你可能需要改的代碼。

avatar:頭像地址
notice:公告
home:首頁地址
wechat:微信支付圖片地址
alipay:支付寶支付圖片地址

---

homeTopImg: [
    "",
],
notHomeTopImg: [
    "",
]

homeTopImg是主頁的圖片，引號里面是圖片地址，可以放多個圖片地址，用引號括起來，逗號隔開；
notHomeTopImg是隨筆頂部圖片，引號里面是圖片地址，可以放多個圖片地址，用引號括起來，逗號隔開。

---

title: '首頁標題',
text: '座右銘',
github: "github地址",
weibo: "微博地址",
telegram: "",
music: "網易雲",
twitter: "",
zhihu:"知乎",
mail: "郵我",

這一段里面雙引號里面都是地址，注釋已經標注好(^▽)

CSS與頁腳

復制粘貼。