博客園二次元主題_進階版
- 2020 年 3 月 11 日
- 筆記
我是Mj,點擊右下方"+"一鍵關注我.如果你喜歡我的文章,那麼拒絕白嫖行為.然後..請多來做客鴨.
前言
沒什麼題材,把小號的文章搬過來.
最近有人找我要這個主題的代碼。
我就來詳細解答一下這個要怎麼弄吧。
這是具體如何配置版,有些細節靠你自己腦補或搜索其它文章(我心想這篇文章你都找到了,其他熱度更高的你還找不到?)
預覽:
教程
材料
1、博客主題選Custom
2、禁用模板默認CSS不要勾選
文件在這裡下載
文件目錄
CSS.txt 側邊欄.txt 頁腳.txt main.txt哦差點搞忘了，側邊欄支持js代碼！！
側邊欄文件main
要注意的是側邊欄，側邊欄里的大部分都用文件代替，完全用它給我們的文件是無法達到自己想要的個性化的，導致很多鏈接（比如頁首導航欄的鏈接都無法更改）會是其他人的，怎麼解決呢？我們需要將他給我們的這個js的文件再行更改。
如果要達到方便，建議在txt裏面直接更改，但是保存時我們需要把編碼改為UTF-8，否則亂碼。
txt裏面你需要改的地方。
<!--離開頁面改變title--> var time; var normar_title = document.title; document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'hidden') { clearTimeout(time); document.title = '離開時的字段'; } else { document.title = '回來時的字段'; time = setTimeout(function () { document.title = normar_title; }, 3000); } });$("#navList").append('<li><a id="blog_nav_myhome" class="menu" href="首頁地址">首頁</a><i></i></li><li><a id="blog_nav_myyoulian" class="menu" href="友鏈地址">友鏈</a><i></i></li><li><a id="blog_nav_contact" class="menu" href="留言板地址">留言板</a><i></i></li><li><a id="blog_nav_rss" class="menu" href="我的隨筆地址">歸檔</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">關於</a><i></i></li>'); //添加標籤icon $('#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>'); //添加li內嵌ui let guanyu = '<ul class="sub-menu">' + '<li><a href="關於1地址"><i class="fa fa-meetup" aria-hidden="true"></i>關於1</a></li>' + '<li><a href="關於2地址"><i class="fa fa-area-chart" aria-hidden="true"></i>關於2</a></li>' + '<li><a href="關於3地址"><i class="fa fa-heartbeat" aria-hidden="true"></i>關於3</a></li>' + '<li><a href="關於4地址"><i class="iconfont icon-taohua" aria-hidden="true"></i>關於4</a></li>' + '</ul>'; $('#blog_nav_myguanyu').after(guanyu); } //博客logo var title = '<div class="site-branding">' + '<span class="logolink moe-mashiro">' + '<a href="首頁地址" 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);這個可以研究一下。
main文件以後綴js的形式上傳網絡，放在側邊欄<script src=""></script>引號中間
側邊欄代碼
側邊欄有一段代碼，可以直接更改main文件裏面的參數。
<script src=""></script> <script type="text/javascript"> $.silence({ profile: { enable: true, avatar: '', favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif', notice: '' },我們看到這裡第一行的src是空的，這裡需要你上傳更改好的main文件上傳至網絡（博客園就可以）。找到main文件地址填入src。
除了第一行以外就是main文件裏面的參數了，這裡是你可能需要改的代碼。
avatar:頭像地址
notice:公告
home:首頁地址
wechat:微信支付圖片地址
alipay:支付寶支付圖片地址
homeTopImg: [ "", ], notHomeTopImg: [ "", ]homeTopImg是主頁的圖片，引號裏面是圖片地址，可以放多個圖片地址，用引號括起來，逗號隔開；
notHomeTopImg是隨筆頂部圖片，引號裏面是圖片地址，可以放多個圖片地址，用引號括起來，逗號隔開。
title: '首頁標題', text: '座右銘', github: "github地址", weibo: "微博地址", telegram: "", music: "網易雲", twitter: "", zhihu:"知乎", mail: "郵我",這一段裏面雙引號裏面都是地址，注釋已經標註好(^▽^)
CSS與頁腳
這裡照常copy就好，沒有其他的了。
