摘要：前端小白也能快速學(xué)會(huì)的博客園博客美化全攻略呦，博客園的自我修養(yǎng)是什么第一條，別只顧收藏和偷師呀，記得點(diǎn)推薦或關(guān)注本人喔美化方法論簡介一般而言，需要選一個(gè)默認(rèn)的，然后在該基礎(chǔ)上調(diào)整。或者也可進(jìn)博客園園子頁面，發(fā)狀態(tài)博客園團(tuán)隊(duì)，申請開通權(quán)限。

A呦V，博客園er的自我修養(yǎng)是什么？第一條，別只顧收藏和偷師呀，記得點(diǎn)"推薦"或關(guān)注本人喔~

一般而言，需要選一個(gè)默認(rèn)的skin，然后在該基礎(chǔ)上調(diào)整。

官方介紹：
博客皮膚模板 http://skintemplate.cnblogs.com/

官方文檔 - 【博客園skin開發(fā)文檔 】:

https://docs.qq.com/sheet/DZF...

寬屏模版：

SimpleMemory

Minyx2_Lite

lessIsMore

BlueSky

博客園布局的組成及其對應(yīng)關(guān)系(下方一圖來自于網(wǎng)絡(luò)):

首先你得有個(gè)cnblogs博客

申請js權(quán)限

附該美化過程的github項(xiàng)目:
yanglr/Beautify-cnblogs: Beautify-cnblogs

歡迎fork或star~

本博客的所有代碼在此github項(xiàng)目的src文件夾中~

源碼使用步驟：

打開 博客后臺(tái)管理 → “設(shè)置”

在博客皮膚選項(xiàng)卡中將博客皮膚設(shè)置為： LessIsMore

將src文件夾下的頁面定制.css 復(fù)制到 頁面定制CSS代碼 代碼框內(nèi)

將同一文件夾下的 頁首.html 復(fù)制到 頁首Html代碼 代碼框內(nèi)

將同一文件夾下的 頁尾.html 復(fù)制到 頁腳Html代碼 代碼框內(nèi)

保存，即可見效。

登陸后依次點(diǎn)擊“我的博客” → “管理” → “設(shè)置”，在下拉后找到“博客側(cè)邊欄公告”，后方有一個(gè)“申請js權(quán)限”。

或者也可進(jìn)博客園園子頁面(https://home.cnblogs.com/feed...)，發(fā)狀態(tài)@博客園團(tuán)隊(duì)，申請開通js權(quán)限。

也可發(fā)個(gè)郵件到contact@cnblogs.com申請js權(quán)限。

申請時(shí)內(nèi)容模板已為你備好:

尊敬的博客園管理員：
本人請求申請開通js權(quán)限，希望能夠把博客修飾的漂亮點(diǎn)，點(diǎn)綴自定義js插件效果，希望管理員可以批準(zhǔn)，多謝~

提交完申請，會(huì)彈出提示:

JS權(quán)限申請已提交，待審核。

剩下的就是耐心等待了，一般來說挺快就會(huì)通過。如果設(shè)置頁面上公告欄標(biāo)題右側(cè)不存在“申請js權(quán)限”，說明已成功開通js權(quán)限。

模仿一個(gè)cnblogs的全局css，只需打開Chrome瀏覽器，按下F12，找里面的skin css和custom css，例如：

補(bǔ)充完整前綴：http://www.cnblogs.com，使用ref將該兩個(gè)css引用到自己的博客中，即可進(jìn)行大概樣子的模仿，其他部分需要細(xì)調(diào)。

默認(rèn)markdown狀態(tài)下，代碼中的字比較小。

/* 文章標(biāo)題樣式(這個(gè)不是markdown里的標(biāo)題) */
#topics .postTitle a {
    /* color: #169fe6; */
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-weight: bold;
}
 
/* 普通文字樣式 */
#cnblogs_post_body p {
    margin: 18px auto;
    color: #000;
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 16px;
    text-indent: 0;
}
 
/* 標(biāo)題樣式 */
#cnblogs_post_body h1 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h2 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 20px 0;
}

#cnblogs_post_body h3 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h4 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}
/* 標(biāo)題樣式設(shè)置結(jié)束 */
 
/* 去除雙下劃線斜體樣式 */
em {
    font-style: normal;
    color: #000;
}
 
/* 無序列表 */
#cnblogs_post_body ul li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: disc;
}
 
/* 有序列表 */
#cnblogs_post_body ol li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: decimal;
}
 
/* 超鏈接 */
#cnblogs_post_body a:link {
    text-decoration: none;
    color: #002C99;
}
 
/* 引用背景 */
#topics .postBody blockquote {
    background: #fff3d4;
    border: none;
    border-left: 5px solid #f6b73c;
    margin: 0;
    padding-left: 10px;
}
 
/* 單行代碼 */
.cnblogs-markdown code {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
}
 
/* 多行代碼, 引用 */
.cnblogs-markdown .hljs {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 5px !important;
}

如果希望使用Sublime那樣的主題，可參考：
如何自定義博客園代碼高亮主題，同時(shí)分享自己使用的黑色主題 - 我是小茗同學(xué) - 博客園 .

css部分：

js部分:

如果需要修改自動(dòng)完成的下拉選項(xiàng)，修改變量availableTags的值即可見效。

html部分：

效果圖:

先登錄網(wǎng)易云音樂網(wǎng)頁版，搜索到想要的音樂，然后點(diǎn)擊"生成外鏈播放器"即可得到相應(yīng)的html代碼。

表現(xiàn)形式一：單曲播放 (type = 1)

或

參數(shù)說明：

播放器可修改參數(shù)：
width=100% #自適應(yīng)寬度, 本博客使用了固定寬度320
height=66 #根據(jù)自己需要來改
sid=26237342 # 此數(shù)字是歌曲的ID http://music.163.com/#/song?i...
auto=0 # 0表示不自動(dòng)播放，1表示自動(dòng)播放

表現(xiàn)形式二：列表播放 (type = 0)

當(dāng)然該url中的https:也可刪掉。

參數(shù)說明

播放器可修改參數(shù)：
width=100% # 自適應(yīng)寬度
height=450 # 根據(jù)自己的需要修改
id=34238509 # 此數(shù)字是歌曲列表頁的ID, 例如：http://music.163.com/#/playli...
auto=0  # 0表示不自動(dòng)播放，1表示自動(dòng)播放

將該代碼貼進(jìn)頁首html即可見效(如果代碼中含有iframe，需替換成embed)~

效果圖:

頁首html需要添加

將其用div包起來，放進(jìn)公告.html即可見效。

先將相應(yīng)的css放入頁面定制css或公告欄的css中，然后在后面使用。

#feed_icon {
    border: #000 solid 2px;
    display: block;
    margin: 50px auto;
    border-radius: 50%;
    transition: all 2.0s;
}

#feed_icon:hover {
    transform: rotate(360deg);
}

然后將如下代碼貼進(jìn)公告中~