博客園二次元主題——Sakura（來自さくら荘の白貓、以及すのはら荘の雪）

前言

本博客的二次元風格主題，來自於すのはら荘の雪的文章以及さくら荘の白貓寫的Sakura美化方案，時空穿梭門：すのはら荘の雪的我的博客，能夠去觀光一下好啦，下面開始進入正題。javascript

功能簡介

首頁及隨筆頁頭圖隨機切換
其餘網站連接
音樂播放器
看板娘
圖片燈箱
自動生成文章目錄
導航菜單子目錄
滾動進度條

主題預覽

如下圖片分別是，首頁，隨筆列表頁，隨筆頁，文章頁。css

主題部署

一鍵部署

<div class="info"><p>若是你想快速搭建出與本博客同樣的樣式，請看下面這句說明，固然前提是得有<span style="color: red">js權限</span></p></div>html

若是將部署和本博客同樣的主題，直接下載整個主題，下載地址在文末。把css、側邊欄、頁腳，代碼粘貼的你的博客後臺，而後對應的改下文件連接地址 就行。下面的內容是爲了個性化定製而寫，若是你想個性化定製博客，請往下看。java

基本部署

前提：已經開通js權限git
引入樣式把page.css中的代碼粘貼到自定義css中github

引入文件放在側邊欄中npm

<script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script>

選擇模板按照圖片內容設置模板 api

頂部菜單設置ruby

將如下連接替換成本身的文章或者隨筆地址，如下代碼在main.js中微信

$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/zouwangblog/articles/11177049.html">友鏈</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zouwangblog/articles/11340077.html">讚揚</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">關於</a><i></i></li>');

菜單icon設置就是菜單前的小圖標，感興趣的能夠去了解一下Font awesome

$('#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>');

菜單子目錄設置

菜單懸浮觸發的菜單子目錄，這裏我在關於菜單下添加了子目錄

let guanyu = '<ul class="sub-menu">' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11157339.html "><i class="fa fa-meetup" aria-hidden="true"></i> 我？</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11346906.html "><i class="fa fa-area-chart" aria-hidden="true"></i> 統計</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350777.html "><i class="fa fa-heartbeat" aria-hidden="true"></i> 監控</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350787.html"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主題</a></li>' +
					'</ul>';
			$('#blog_nav_myguanyu').after(guanyu);

腳本設置

爲了配置方便，我在側邊欄裏設置了一些經常使用參數，可根據下表選擇須要開啓和配置

<script type="text/javascript"> 
$.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/zouwangblog/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png',
            alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png'
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://github.com/Zou-Wang'
        },
	topImg: {
		homeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190828104950450-644943924.jpg",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
					],
              notHomeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151151330-1121103170.png",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg",
					]
		},
    topInfo: {
					title: 'Hi,Toretto',
                      text: 'You got to put the past behind you before you can move on.',
					github: "https://github.com/Zou-Wang",
					weibo: "https://weibo.com/5682002748/profile?topnav=1&wvr=6&is_all=1",
					telegram: "",
					music: "https://music.163.com/#/user/home?id=436757779",
					twitter: "",
					zhihu:"https://www.zhihu.com/people/zouwang/activities",
					mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=KlBFX11LRE0SGBlqW1sESUVH",
				}
    });
</script>

參數說明表：

模塊	屬性	說明	類型	默認值
profile（基礎信息）	enable	是否啓用	Boolean	true
	avatar	做者頭像	String
	favicon	網站標題圖標	String
	notice	公告	String	海上月是天上月，眼前人是心上人。
catalog（博文目錄）	enable	是否啓用	Boolean	false
	move	是否容許拖拽	Boolean	true
	index	是否顯示索引	Boolean	true
	level1	一級標題	String	h2
	level2	二級標題	String	h3
	level3	三級標題	String	h4
signature（博文簽名	enable	是否啓用	Boolean	true
	home	做者主頁	String	https://www.cnblogs.com
	license	許可證名稱	String	CC BY 4.0
	link	許可證連接	String	https://creativecommons.org/licenses/by/4.0
sponsor（博文讚揚）	enable	是否啓用	Boolean	false
	paypal	PayPal 收款地址	String	null
	alipay	支付寶收款二維碼	String	null
	wechat	微信收款二維碼	String	null
github（GitHub Corners）	enable	是否啓用	Boolean	false
	fill	背景填充色	String	[Silence Theme Color]
	color	章魚貓顏色	String	#fff
	link	Github 連接	String	null
topImg（頭圖）	homeTopImg	首頁頭圖	Array	[https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg<br />https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg]
	notHomeTopImg	文章和隨筆頁頭圖	Array	[https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg]
topInfo(首頁頭圖信息)	titile	頭部標題	String	Hi, Toretto!
	text	座右銘	String	You got to put the past behind you before you can move on.
	github	GitHub連接	String	「」
	weibo	微博連接	String	「」
	telegram	telegram連接	String	「」
	music	網易雲音樂連接	String	「」
	twitter	twitter連接	String	「」
	zhihu	知乎連接	String	「」
	mail	郵箱連接	String	「」

配置完成後，記得點擊「保存」按鈕，保存上述操做。

個性化定製

首頁及文章大圖

首頁和隨筆以及文章頁的頭圖都是隨機切換的，添加圖片在側邊欄配置中。這裏類型爲隨筆的時候頭部會顯示標題、頭像、做者、發佈時間、閱讀數，而類型爲文章的時候只會顯示標題，根據狀況選擇類型發佈。

隨筆預覽圖

在寫隨筆或者文章的時候添加摘要圖片和摘要文字，摘要文字必定要添加，若是不添加摘要圖片會給一張默認圖片。

<div class="info important"><p>發佈隨筆的時候不要再同一天發佈超過一篇文章，由於博客園同一天的文章會歸檔在一塊兒致使我構建html的時候出現bug，這個bug到如今尚未解決，因此只能一天發佈一篇文章。</p></div>

公告

公告內容修改在側邊欄基礎信息配置中，修改notice

看板娘

看板娘，將如下代碼添加到頁腳，可是api失效致使看板娘沒有，偶爾發生。

<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>

音樂播放器

相信看過我之前文章的同窗對這個必定不會陌生，怎麼獲取id我也不在這裏羅嗦了，能夠去找我之前的文章。獲取到id以後把下面的id替換掉就能夠了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

博客logo

左上角的logo，修改文字須要到main.js裏找到如下代碼，替換文字便可，若是不喜歡能夠注掉（我費了很大勁居然敢不喜歡🤕）。

var title = '<div class="site-branding">' +
					'<span class="logolink moe-mashiro">' +
					'<a href="https://www.cnblogs.com/zouwangblog/" 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);

頁面滾動進度條

頁面滾動的時候會在頂部出現一個橙色的進度條，修改顏色到頁面css裏，找到如下代碼修改background

.scrollCls {
    position: fixed;
    top: 0;
    height: 3px;
    background: orange;
    transiton-property: width,background;
    transition-duration: 1s,1s;
    z-index: 99999;
}

首頁我的信息

名稱在側邊欄配置中修改topInfo裏的title
座右銘在側邊欄配置中修改topInfo裏的text
其餘網站連接在側邊欄配置中修改topInfo裏對應的連接地址，這裏郵箱使用的是QQ郵箱的郵我，能夠在QQ郵箱裏配置。

下載地址

https://github.com/Zou-Wang/CNblogs-Theme-Sakura
給個Star呀❤