你要的博客園主題都有！！！

基於最近很多小伙伴加我微信想要我的博客園主題，那我就把博客園主題整理一下，送給喜歡的小伙伴，園友們喜歡可以收藏，關注，博客園主題僅供參考，博主順便再多說一句，雖然我可以分享給你們，但是我更願意你們加我微信是來問問題的，畢竟再絢麗的外觀終歸不是我們在這條路上追求的最終歸宿，當你有一技之長完全可以自己寫一套自己喜歡的博客園主題，好了廢話不多說了。

博客園自定義主題的設置主要是在自己博客園中的設置選項中進行設置的，主要包括：

• 頁面定制 CSS 代碼
• 博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）
• 頁首 HTML 代碼
• 頁腳 HTML 代碼

一、定制博客園背景圖片

1、代碼存放位置

代碼存放在：頁面定制 CSS 代碼

紅色標注填寫自己上傳的背景圖片地址即可

/* 定制博客背景圖片，url里面是你的圖片位置信息 */
body { 
     background-color: #efefef;
     background-image:url(https://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxx.jpg); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
    padding-top:0px;
  }

2、設置后的效果展示　

二、側邊欄添加音樂

1、代碼存放位置

代碼存放在：博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）

關鍵字段介紹：

titile:音樂標題（也可以設置成音樂的名字）

author:音樂名（也可以設置為音樂演唱者的名字）

url:你喜歡的音樂存放的位置

pic:每首音樂對應的背景圖片

<!-- 為博客底部添加音樂組件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自動播放 -->
    showlrc: false,
    theme: '#F5F5F5',      <!-- 插件背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 -->
    music: [{
            title: '音樂1',
            author: '小星星',
            url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            pic: 'https://www.cnblogs.com/images/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'
        },
        { title: '音樂2',
            author: '琵琶行',
            url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            pic: 'https://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'
        },
        {
            title: '音樂3',
            author: '林海',
            url: 'https://files.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png'
        },
        {
            title: '音樂4',
            author: '趙海洋',
            url: 'https://files.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png'
        },
        {
            title: '音樂5',
            author: '枷鎖',
            url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'

        }
         
    ]
});
ap.init();
</script>

2、設置后的效果展示　

 

三、首頁頂部設置滾動字

1、代碼存放位置

代碼存放在：頁首 HTML 代碼

center中存放你想要放入的文字即可

<div id="i1" style="color:red;font-size:25px;padding:10px;">
     <center>哪有什么歲月靜好，不過是有人替你負重前行！</center></div>
    <script>
       function func(){
           var tag = document.getElementById('i1');
           var content = tag.innerText;
           var f = content.charAt(0);
           var l = content.substring(1,content.length);
           var new_content = l + f;
           tag.innerText = new_content;
           tag.style.cssText += 'text-align:center';
       }
       setInterval('func()',2000);
    </script>

2、設置后的效果展示　

四、二次元動畫設置

1、代碼存放位置

可以根據自己的喜歡放入自己喜歡的二次元主題動畫，也可更具自己的習慣來調節二次元的位置以及大小

<!--二次元動畫-->
    
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
　　　　　　　//jsonpath控制顯示那個小蘿莉模型，下面這個就是我覺得最可愛的小蘿莉模型
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //看板娘的表現位置
            "width": 100,  //小蘿莉的寬度
            "height": 200, //小蘿莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

2、設置后的效果展示　

 

參考以上小伙伴們稍稍掌握一些前端知識，可以根據自己的需要自己開發定制自己的博客園主題頁面，那如果你也掌握了一門后端編程語言，完全可以開發一套屬於自己的博客，擁有自己的博客網站，當然這些都是需要你有一定的前后端知識，能夠運用自如，就不用費勁加個微信來專程問博主要博客園主題了，好了可以滾去學習了，不要整天想整點花里胡哨的東西！