博客園二次元主題

最近有人找我要這個主題的代碼。
我就來詳細解答一下這個要怎麼弄吧。

寫在前面

配置這些東西，還真的懂一些前端語法，像我這種語法都沒有徹底搞懂的垃圾……哎。

教程

材料

一、博客主題選Custom
二、禁用模板默認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就好，沒有其餘的了。