部落格園二次元主題——Sakura
- 2019 年 10 月 3 日
- 筆記
碎碎念
嗯，時隔多久也記不清了，我又回來了，總算是忙裡偷閒把這篇文章寫出來，有人要過很多次我的部落格園美化方案，但是實在是忙啊，也因為我的前台技術不好，程式碼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", } }); </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里找到以下程式碼，替換文字即可，如果不喜歡可以注掉（我費了很大勁竟然敢不喜歡?）。
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呀❤
寫在最後
技術是無私的，非常不捨得把我這個美化分享了出去，畢竟以我的前端技術構建這麼個樣式還是很費勁的，花了很多心血，這也是我在部落格園的最後一篇美化文章了，畢竟太浪費時間，以後精力還是放在個人網站上，部落格還有很多小功能在這裡就不敘述了，比如我比較喜歡的小弔死鬼和首頁的波浪，希望採用這個樣式的你能夠多多支援關注部落客（關注部落客請移步），有什麼問題都可以在下方留言，我也會及時為大家解決。
