前言
本博客的二次元風格主題，來自於すのはら荘の雪的文章
以及さくら荘の白貓寫的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失效導致看板娘沒有，偶爾發生。
<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郵箱里配置。