碎碎念
嗯，時隔多久也記不清了，我又回來了，總算是忙里偷閑把這篇文章寫出來，有人要過很多次我的博客園美化方案，但是實在是忙啊，也因為我的前台技術不好，代碼bug很多，所以也有點不想把這個美化發出來，但是因為個人博客搭建完成了，以后主要精力還是在那邊，所以就成全大家。本博客美化樣式風格來自於櫻花庄的白貓寫的Sakura美化方案，我按照他的風格在博客園寫了個幾乎是一樣的。這是我寫過的第三篇美化文章了，（也是愛折騰），每一篇都是不同地風格，隨愛好獲取吧，好了不念叨了進入正題。
功能簡介
- 首頁及隨筆頁頭圖隨機切換
- 其他網站鏈接
- 音樂播放器
- 看板娘
- 圖片燈箱
- 自動生成文章目錄
- 導航菜單子目錄
- 滾動進度條
主題預覽
以下圖片分別是，首頁，隨筆列表頁，隨筆頁，文章頁。
主題部署
一鍵部署
如果你想快速搭建出與本博客一樣的樣式， 請看下面這句說明，當然前提是得有js權限
如果將部署和本博客一樣的主題，直接下載整個主題，下載地址在文末。把css、側邊欄、頁腳，代碼粘貼的你的博客后台，然后對應的改下文件鏈接地址 就行。下面的內容是為了個性化定制而寫，如果你想個性化定制博客，請往下看。
基本部署
-
前提：已經開通
js權限 -
引入樣式
把page.css中的代碼粘貼到自定義css中 -
引入文件
放在側邊欄中<script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script> -
選擇模板
按照圖片內容設置模板
-
腳本設置
為了配置方便，我在側邊欄里設置了一些常用參數，可根據下表選擇需要開啟和配置
<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-20190808213853909-1772245301.jpg",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg"
],
notHomeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.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",
}
});
參數說明表：
| 模塊 | 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|---|
| 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 | |
| 微信收款二維碼 | 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 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 | “ ” | |
| 微博鏈接 | String | “ ” | ||
| telegram | telegram鏈接 | String | “ ” | |
| music | 網易雲音樂鏈接 | String | “ ” | |
| twitter鏈接 | String | “ ” | ||
| zhihu | 知乎鏈接 | String | “ ” | |
| 郵箱鏈接 | String | “ ” |
配置完成后，記得點擊「保存」按鈕，保存上述操作。
個性化定制
首頁及文章大圖
首頁和隨筆以及文章頁的頭圖都是隨機切換的，添加圖片在側邊欄配置中。這里類型為隨筆的時候頭部會顯示標題、頭像、作者、發布時間、閱讀數，而類型為文章的時候只會顯示標題，根據情況選擇類型發布。
隨筆預覽圖
在寫隨筆或者文章的時候添加摘要圖片和摘要文字，摘要文字一定要添加，如果不添加摘要圖片會給一張默認圖片。
發布隨筆的時候不要再同一天發布超過一篇文章，因為博客園同一天的文章會歸檔在一起導致我構建html的時候出現bug，這個bug到現在還沒有解決，所以只能一天發布一篇文章。
公告
公告內容修改在側邊欄基礎信息配置中，修改notice
看板娘
沒錯還是看板娘，出現在我三篇文章中的看板娘，因為有一段時間api失效導致看板娘都沒有，最近被我找到了新的api，我個人博客的看板娘api是搭建在我自己服務器上的，博客園的用的還是別人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郵箱里配置。
頂部菜單設置
將以下鏈接替換成自己的文章或者隨筆地址，以下代碼在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);
下載地址
- https://github.com/Zou-Wang/CNblogs-Theme-Sakura
- 國內鏡像（下載慢的使用這個）
- 給個Star呀❤
寫在最后
技術是無私的，非常不舍得把我這個美化分享了出去，畢竟以我的前端技術構建這么個樣式還是很費勁的，花了很多心血，這也是我在博客園的最后一篇美化文章了，畢竟太浪費時間，以后精力還是放在個人網站上，博客還有很多小功能在這里就不敘述了，比如我比較喜歡的小吊死鬼和首頁的波浪，希望采用這個樣式的你能夠多多支持關注博主（關注博主請移步），有什么問題都可以在下方留言，我也會及時為大家解決。
