你要的部落格園主題都有！！！

迎風而來發表於2020-05-19

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

部落格園自定義主題的設定主要是在自己部落格園中的設定選項中進行設定的，主要包括：

  • 頁面定製 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、設定後的效果展示　

 

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

相關文章