新sakura部落格園面板配置
阿新 • • 發佈：2020-08-12
CNblogs-Theme-NewSakura
- 基於Sakura美化方案改造的部落格園樣式：NewSakura
- 如使用了本樣式，請給個Star。
專案結構
CNblogs-Theme-NewSakura
|
├─ CNblogs-Theme-NewSakura
│ ├─ foot.html 頁尾程式碼
│ ├─ main.css 自定義css程式碼
│ ├─ main.js 引用js
│ └─ sidebar.html 側邊欄程式碼
├─ README.md
└─ img
├─ 效果1.JPG
└─ 效果2.JPG
有js許可權，期間將側邊欄、頁尾和css程式碼貼上進部落格園設定內即可！程式碼檔案內有相應註釋，根據它修改即可。
功能簡介
依次分重點：
- 新增暗黑白晝模式，白天暗黑刺激
- 首頁及隨筆頁頭圖隨機切換
- 音樂播放器，使用Aplayer外掛
- 看板娘，原先的主題已失效，現已修改
- 自動生成文章目錄，基本功能
- 導航選單子目錄，照葫蘆畫瓢新增
- 圖片燈箱、滾動進度條
- 文章打賞
- 其他網站連結，非必需
- 將首頁底部不必要的滾動條去掉
- 修改了文章評論區的框框大小，原先的過大變形
- 暗黑白晝切換不影響評論區，暗黑字白，白晝字黑
- 修改了分類頁面樣式，為了在暗黑後看的清楚美觀
注意：目前Sakura還不支援響應式，所以還需大家幫忙嘍！
主題預覽
主題部署
快速搭建出與本部落格一樣的樣式， 請看下面這句說明，當然前提是得有js許可權
部署和本部落格一樣的主題，請直接下載整個主題，對應的改下檔案連結地址 ，把css、側邊欄、頁尾程式碼貼上的你的部落格後臺就行。為了個性化定製，如果你想個性化定製部落格，請往下看基本部署。
基本部署
-
前提：已經開通
js許可權 -
設定面板選擇自定義custom
-
引入樣式
把main.css中的程式碼貼上到自定義css中，無需個性化操作 -
引入檔案
放在側邊欄html檔案中，本人已為你新增。建議下載該檔案並上傳部落格園，之後只需修改樣式引入即可！<script src="https://blog-static.cnblogs.com/files/coderma/main.js"></script> -
頂部選單設定
將以下連結替換成自己隨筆地址，以下程式碼在
main.js中,建議開啟該檔案檢視並修改$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/coderma/p/1117239.html">友鏈</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/coderma/p/1133477.html">讚賞</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">關於</a></li>'); -
選單icon設定
就是選單前的小圖示，感興趣的可以去了解一下Font awesome//部落格title //去掉rss替換成分類 $('#blog_nav_rss').replaceWith('<a id="blog_nav_fenlei" class="menu" href="https://www.cnblogs.com/coderma/p/13458241.html" target="_self">分類</a>'); //可替換以下連結 $("#navList").append('<li><a id="blog_nav_myyoulian" class="menu" href="https://www.cnblogs.com/coderma/p/13413494.html" target="_self">友鏈</a><i></i></li><li><a id="blog_nav_myarchive" class="menu" href="https://www.cnblogs.com/coderma/p/13414527.html" target="_self">歸檔</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" >關於</a></li>'); //新增標籤圖示 $('#blog_nav_sitehome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>'); //部落格園 $('#blog_nav_myhome').prepend('<i class="fa fa-home" aria-hidden="true"></i>'); //首頁 $('#blog_nav_newpost').prepend('<i class="fa fa-edit" aria-hidden="true"></i>'); //新隨筆 $('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>'); //聯絡 $('#blog_nav_fenlei').prepend('<i class="fa fa-filter" aria-hidden="true"></i>'); //分類 $('#blog_nav_admin').prepend('<i class="fa fa-cog" aria-hidden="true"></i>'); //管理 $('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>'); //友鏈 $('#blog_nav_myarchive').prepend('<i class="fa fa-archive" aria-hidden="true"></i>'); //讚賞 $('#blog_nav_myguanyu').prepend('<i class="fa fa-universal-access" aria-hidden="true"></i>');//關於 //新增li內嵌ui -
選單子目錄設定
選單子目錄，在關於選單下添加了子目錄,相應的樣式可自行修改新增
let guanyu = '<ul class="sub-menu">' + '<li><a href=" " target="_self"><i class="fa fa-user-o" aria-hidden="true"></i>博主</a></li>' + //新增關於文章連結 '<li><a id="blog_nav_theme" onclick="changeTheme();" ><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: 'https://images.cnblogs.com/cnblogs_com/coderma/1820127/o_200803093536logo.png', //頭像，可修改 favicon: '', notice: '個人部落格地址：https://index.maliaoblog.cn/ 歡迎大家來踩' //通知，可修改 }, catalog: { enable: true, move: true, index: true, level1: 'h2', level2: 'h3', level3: 'h4', }, signature: { enable: true, home: 'https://www.cnblogs.com/coderma/', //主頁連結，可修改 license: 'CC BY 4.0', link: 'https://creativecommons.org/licenses/by/4.0' }, sponsor: { enable: true, paypal: null, wechat: '', //贊助，可修改圖片連結 alipay: '' }, github: { enable: false, color: '#fff', fill: '#FF85B8', link: 'https://github.com/coderxm' //可修改 }, topImg: { homeTopImg: [ "https://img2020.cnblogs.com/blog/2027366/202008/2027366-20200807133710823-1221571975.jpg", //主頁頂部圖片，可修改 ], notHomeTopImg: [ "https://img2020.cnblogs.com/blog/2027366/202008/2027366-20200807132804040-1889645361.jpg", //可修改 ] }, topInfo: { title: 'Hi,流浪舟', //首頁標題（可替換） text: "No one choose this life for me But I don't mind it", //首頁橫幅語句 github: "https://github.com/coderxm/", //github(替換成相應連結) weibo: "", telegram: "", music: "", twitter: "", zhihu: "", mail: "", } }); </script>引數說明表：
模組 屬性 說明 型別 預設值 profile（基礎資訊） enable 是否啟用 Boolean true avatar 作者頭像 String favicon 網站標題圖示 String notice 公告 String 感謝使用該主題 authorName 作者姓名 String coderxm 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 notHomeTopImg 文章和隨筆頁頭圖 Array topInfo(首頁頭圖資訊) titile 頭部標題 String Hi, 流浪舟! text 橫幅標題 String No one choose this life for me But I don't mind it
配置完成後，記得點選「儲存」按鈕。
個性化定製
新增暗黑白晝模式
開始的時候是暗黑的，在關於下的子選單欄內，點選主題可切換成白晝模式。
選單新增分類、友鏈、博主、歸檔欄
原理簡單，只需先新建隨筆即可，並替換連結，點選便可跳轉到相應頁面。關於分類，去掉了過去的RSS，換成部落格園已有的分類，同樣的方法，將所有分類連結收錄到某一隨筆中即可，隨筆連結即是分類欄連結。博主一欄寫你的資訊，歸檔類似，我相信這樣的問題難不倒有大智慧的你！
首頁及文章大圖
首頁和隨筆以及文章頁的頭圖都是隨機切換的，新增圖片在側邊欄html配置中。這裡型別為隨筆的時候頭部會顯示標題、頭像、作者、釋出時間、閱讀數，而型別為文章的時候只會顯示標題，根據情況選擇型別釋出。
請儘量選擇畫素1920*1080px的高清大圖，這樣的話首頁圖片會更適合。
隨筆預覽圖
在寫隨筆或者文章的時候新增摘要圖片和摘要文字，摘要文字一定要新增，如果不新增摘要圖片會給一張預設圖片。
回頂部鉤子
//回到頂部特效
$('body').prepend(`<a href="#" class="cd-top faa-float animated cd-fade-out" target="_self"></a>`);
let $win = $(window);
let oldScrollY = 0;
$win.scroll(function () {
oldScrollY = this.scrollY;
let height = window.innerHeight;
let top = '-' + (900 - height + 80) + 'px';
if (oldScrollY > 0) {
$('.cd-top').css('top', top);
} else
$('.cd-top').css('top', '-900px');
}
});
公告
公告內容修改在側邊欄基礎資訊配置中，修改notice，程式碼中已有提示
看板娘
我個人部落格的看板娘是引用別人的，同一個，失效了會及時修復的！將以下程式碼新增到頁尾，當然本人又已經為你新增好了，所以過程非常輕鬆！
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.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="7660234225" data-server="tencent" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orangered"></div>
<!-- end -->
部落格logo
左上角的logo，修改文字需要到main.js裡找到以下程式碼，替換文字即可，如果不喜歡可以注掉,我也覺得沒啥好看，main.js裡我已經刪了！
var title = '<div class="site-branding">' +
'<span class="logolink moe-mashiro">' +
'<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 -
其他網站連結(已註釋，大都是推特等國外app，影響美觀)
在側邊欄配置中修改topInfo裡對應的連結地址
寫在最後
我把這個美化分享了出去，以我目前的前端技術改造這麼個樣式也很費勁的，畢竟不是專業做前端的！這是我在部落格園的一篇美化文章了，部落格還是有很多改進的，希望採用這個樣式的你能夠多多支援，有什麼問題都可以提交，我也會及時為大家解決。最後也歡迎大家光臨我的小站 https://www.maliaoblog.cn
微信公眾平臺
微信搜尋 “小碼之光” 關注，裡面有加群，可以一起交流！