部落格園二次元主題——Sakura
阿新 • • 發佈：2019-09-18
碎碎念
嗯，時隔多久也記不清了，我又回來了，總算是忙裡偷閒把這篇文章寫出來，有人要過很多次我的部落格園美化方案，但是實在是忙啊，也因為我的前臺技術不好，程式碼bug很多，所以也有點不想把這個美化發出來，但是因為個人部落格搭建完成了，以後主要精力還是在那邊，所以就成全大家。本部落格美化樣式風格來自於櫻花莊的白貓寫的Sakura美化方案，我按照他的風格在部落格園寫了個幾乎是一樣的。這是我寫過的第三篇美化文章了，（也是愛折騰），每一篇都是不同地風格，隨愛好獲取吧，好了不念叨了進入正題。
功能簡介
- 首頁及隨筆頁頭圖隨機切換
- 其他網站連結
- 音樂播放器
- 看板娘
- 圖片燈箱
- 自動生成文章目錄
- 導航選單子目錄
- 滾動進度條
主題預覽
以下圖片分別是，首頁，隨筆列表頁，隨筆頁，文章頁。
主題部署
一鍵部署
如果你想快速搭建出與本部落格一樣的樣式， 請看下面這句說明，當然前提是得有js許可權
如果將部署和本部落格一樣的主題，直接下載整個主題，下載地址在文末。把css、側邊欄、頁尾，程式碼貼上的你的部落格後臺，然後對應的改下檔案連結地址 就行。下面的內容是為了個性化定製而寫，如果你想個性化定製部落格，請往下看。
基本部署
前提：已經開通
js許可權引入樣式
把page.css中的程式碼貼上到自定義css中引入檔案
放在側邊欄中<script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script>選擇模板
按照圖片內容設定模板
頂部選單設定
將以下連結替換成自己的文章或者隨筆地址，以下程式碼在
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
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 “ ”
配置完成後，記得點選「儲存」按鈕，儲存上述操作。
個性化定製
首頁及文章大圖
首頁和隨筆以及文章頁的頭圖都是隨機切換的，新增圖片在側邊欄配置中。這裡型別為隨筆的時候頭部會顯示標題、頭像、作者、釋出時間、閱讀數，而型別為文章的時候只會顯示標題，根據情況選擇型別釋出。
隨筆預覽圖
在寫隨筆或者文章的時候新增摘要圖片和摘要文字，摘要文字一定要新增，如果不新增摘要圖片會給一張預設圖片。
釋出隨筆的時候不要再同一天釋出超過一篇文章，因為部落格園同一天的文章會歸檔在一起導致我構建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/[email protected]/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/[email protected]/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裡找到以下程式碼，替換文字即可，如果不喜歡可以注掉（我費了很大勁竟然敢不喜歡