博客園美化教程第二篇----極致個性化你的專屬博客（爲博客添加背景音樂插件，調整頁面佈局等）

時間 2019-11-06

標籤博客美化教程第二極致個性化專屬添加背景音樂插件調整頁面佈局简体版

原文原文鏈接

我的博客轉移至：https://sunhwee.com，第一時間會先發在前者，有時間再更新至博客園。javascript

閱讀目錄：

一 . 前言

　　咱們在上一美化教程篇中，已經介紹了很多的內容了，這是上一篇連接：博客園美化教程大集合——極致個性化你的專屬博客css

　　這一篇我們接着前面的繼續爲本身的博客主頁添加美化項、適用項和調整代碼。html

　　一樣的道理，開篇先說幾個點：java

　　首先，使用的模板仍然是：AnotherEon001，講道理，其餘皮膚模板，下面的定製代碼也是能夠用的，只不過你須要作一些修改，好比修改位置，大小，顏色，佈局搭配等參數。你要什麼樣子，就改爲什麼樣子。代碼不難，你須要看一看，而後改一改，一樣的博客皮膚應該是能夠直接複製粘貼就好了。git

　　再者，再次強調一下：每一個人喜歡的風格不必定相同，我用這個皮膚定製的主頁，我以爲簡單明瞭，方便管理，比較實用，因此若是你是文藝青年，也能夠選擇其餘皮膚或博客網站或者本身建我的主頁，來設計製做比較文藝美觀的界面。github

　　最後，能經過本身的手來優化定製一個本身比較喜歡的博客主頁，想必之後在上面寫博客、作筆記、記錄分享學習生活也會是一件心情愉悅的事情！　　web

　　好勒，廢話很少說了，我們開始吧！api

二. 定製本身的博客

0. 美化總體效果

　　定製以前仍然先來看看定製的總體效果。瀏覽器

1. 準備工做

　　一樣的道理，和我前一篇教程同樣的步驟，要讓定製代碼有效果，首先得要有網站JS權限，這個申請步驟能夠看我前一篇：博客園美化教程大集合——極致個性化你的專屬博客 的準備工做部分。
佈局

2. 添加博客背景音樂插件

　　完成上面的工做以後，就開始爲你的博客頁面的公告欄裏面添加音樂播放插件。這個音樂播放器插件是一款開源插件，有着友好的api，簡單配置好參數就可使用，github倉庫連接爲：https://github.com/MoePlayer/APlayer 固然，若是你對此還比較感興趣，也能夠去github 分支一個，針對不一樣網站或者應用，修改代碼提交你的PR，這樣也是極好的。

　　原本這個插件默認的尺寸參數這些是長下面這個樣子的，能夠用做網頁的頁首，頁面內嵌，或者按照吸底的方式停靠在頁面底部，尺寸仍是有些大的，因此咱們若是不修改他默認的元素參數，那麼放在公告欄裏面，原本公告欄是比較窄的，因此會有一些內容顯示錯位、或者不顯示。

　　固然若是你會用瀏覽器的開發者功能（按F12），就很簡單了，你能夠選中指定控件、元素，而後在F12調試框中的CSS樣式代碼中調數值，看控件變化，調到合適了，就把對應CSS代碼複試粘貼到，博客設置裏面的「頁面定製CSS代碼」框中，以下：

　　以上方法主要用於你能夠將這個音樂插件擺放在頁面的任何位置而後調節到須要的尺寸和樣式。

　　但，若是你不會，也不要緊，由於我已經修改好了，你若是是和我同樣的皮膚模板直接複製粘貼就能夠了，若是是其餘皮膚模板，你只要看看插件github上面的中文手冊，而後結合我上面的方法來調整就是了，只要你動手試了，會發現不難，光看着個人文字可能以爲很差操做。

　　下面是代碼，你須要把它複製粘貼到「博客側邊欄公告（支持HTML代碼）（支持JS代碼）」和「頁面定製CSS代碼」框中，若是顯示有些錯位，那麼你照上面的去調調參數

　　頁面定製CSS代碼：

/* 定製公告欄音樂插件的樣式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音樂插件字體*/
    margin: 0px;  /*音樂插件與公告欄左邊的邊距，0px就是直接抵到公告欄左邊的邊上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}

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

<!-- 爲博客底部添加音樂組件 -->
<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: 'Valentin',
            url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png'
        },
        {
            title: '音樂2',
            author: '林海',
            url: 'https://files.cnblogs.com/files/shwee/%E6%9E%97%E6%B5%B7-%E7%90%B5%E7%90%B6%E8%AF%AD.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
        },
        {
            title: '音樂3',
            author: '趙海洋',
            url: 'https://files.cnblogs.com/files/shwee/%E8%B5%B5%E6%B5%B7%E6%B4%8B-%E3%80%8A%E7%9E%AC%E9%97%B4%E7%9A%84%E6%B0%B8%E6%81%92%E3%80%8B%E5%A4%9C%E8%89%B2%E9%92%A2%E7%90%B4%E6%9B%B2.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic2.png'
        }
    ]
});
ap.init();
</script>

　　PS：可能你們會看到上面代碼裏歌曲裏面的連接中歌曲後綴名是pdf，會納悶，實際上是對的，那是由於我把歌曲上傳博客園文件裏面了，而博客園上傳文件格式後綴不支持mp3上傳，因此我就把歌曲的後綴名改爲了博客園後臺支持得文件後綴名，我就隨便改了個pdf，這樣上傳後臺就認這個文件了，固然你也能夠改爲其餘後綴名，這個問題不大，只要是歌曲文件，他的內部編碼不會變，你把這個文件的源地址給播放器，播放器插件讀到這個文件就能解碼播放。除此以外，你也能夠吧歌曲上傳其餘地方或者使用在線的歌曲連接，不過這樣官方把歌曲連接改了，你就播放不了了，因此仍是建議把歌曲文件和封面照片上傳博客園上，而後把連接丟給插件就行了。把歌曲連接改爲你的就好了哦，本身想怎麼改就怎麼改，隨時換上本身最新喜歡的曲目，有背景音樂寫隨筆讀文章心情都有節奏一點，你試試吧。

　　效果以下：

3. 爲博客文章內容主體定製漂亮的顯示樣式

　　咱們平時在看到別人的博客，看到那種內容層次清晰，排版漂亮的文章，老是心情大好，閱讀也是一件賞心悅目的事情。那麼，咱們平時寫出的文章怎麼也可以達到那種效果啦，那咱們就來試試吧。

　　嘿嘿，代碼不用你去寫了，直接用我下面的就好了，就能夠爲博客文章內容主體定製漂亮的顯示樣式，這個樣式仍是很是顯眼和漂亮的，設置合理的標題可讓文章思路更加清晰，還能夠爲後面的生成文章目錄作準備。目錄就是提取這些h2,h3組合而成的。固然，之後寫博客隨筆文章的時候，標題最好就按這個格式來，這裏的標題設置的h二、h3的格式，你也能夠修改一下，按你平時經常使用的標題格式，好比把下面h二、h3改成h一、h2，之後你就按h一、h2的格式寫就是了。好勒，把下面代碼粘貼到「頁面定製CSS代碼」框中：

　　頁面定製CSS代碼：

/*文章內容詳情頁面的標h二、h3的樣式*/
#cnblogs_post_body h2 {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 17px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3 {
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

　　效果以下：

4. 公告欄日曆樣式設置

　　這一項算是一個雜項，能夠調節公告欄的日曆樣式，你能夠調調參數值，讓日曆尺寸，顯示背景這些更美觀點，把下面代碼複製到「頁面定製CSS代碼」框中，而後去修改對應參數值，而後看你的博客日曆顯示效果

　　頁面定製CSS代碼：

/* 公告欄日曆樣式設置 */
.Cal {
    border: 1px solid #F5F5F5;
    width: 190px;   /*日曆寬度*/
    font-family: Arial;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 180px;
    background-color: #F5F5F5;   /*日曆背景顏色*/
    margin-left: 0;
}
/*日曆的第一行標題  年份/月份這一欄配置*/
.CalTitle {
    background-color: #F5F5F5;
    border-color: #adf;
    font-family: Arial;
    font-size: 14px;
    color: #000;
    margin-left: 0;
    padding: 0;
    height: 100%;
    font-weight: bold;
}
/*日曆的第二行  星期信息這一行配置*/
.CalDayHeader {
    background-color: #F5F5F5;
}