摘要：前端小白也能快速學會的博客園博客美化全攻略呦，博客園的自我修養是什么第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔美化方法論簡介一般而言，需要選一個默認的，然后在該基礎上調整。或者也可進博客園園子頁面，發狀態博客園團隊，申請開通權限。

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

一般而言，需要選一個默認的skin，然后在該基礎上調整。

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

官方文檔 - 【博客園skin開發文檔 】:

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

寬屏模版：

SimpleMemory

Minyx2_Lite

lessIsMore

BlueSky

博客園布局的組成及其對應關系(下方一圖來自于網絡):

首先你得有個cnblogs博客

申請js權限

附該美化過程的github項目:
yanglr/Beautify-cnblogs: Beautify-cnblogs

歡迎fork或star~

本博客的所有代碼在此github項目的src文件夾中~

源碼使用步驟：

打開 博客后臺管理 → “設置”

在博客皮膚選項卡中將博客皮膚設置為： LessIsMore

將src文件夾下的頁面定制.css 復制到 頁面定制CSS代碼 代碼框內

將同一文件夾下的 頁首.html 復制到 頁首Html代碼 代碼框內

將同一文件夾下的 頁尾.html 復制到 頁腳Html代碼 代碼框內

保存，即可見效。

登陸后依次點擊“我的博客” → “管理” → “設置”，在下拉后找到“博客側邊欄公告”，后方有一個“申請js權限”。

或者也可進博客園園子頁面(https://home.cnblogs.com/feed...)，發狀態@博客園團隊，申請開通js權限。

也可發個郵件到contact@cnblogs.com申請js權限。

申請時內容模板已為你備好:

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

提交完申請，會彈出提示:

JS權限申請已提交，待審核。

剩下的就是耐心等待了，一般來說挺快就會通過。如果設置頁面上公告欄標題右側不存在“申請js權限”，說明已成功開通js權限。

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

補充完整前綴：http://www.cnblogs.com，使用ref將該兩個css引用到自己的博客中，即可進行大概樣子的模仿，其他部分需要細調。

默認markdown狀態下，代碼中的字比較小。

/* 文章標題樣式(這個不是markdown里的標題) */
#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;
}
 
/* 標題樣式 */
#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;
}
/* 標題樣式設置結束 */
 
/* 去除雙下劃線斜體樣式 */
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那樣的主題，可參考：
如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題 - 我是小茗同學 - 博客園 .

css部分：

js部分:

如果需要修改自動完成的下拉選項，修改變量availableTags的值即可見效。

html部分：

效果圖:

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

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

或

參數說明：

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

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

當然該url中的https:也可刪掉。

參數說明

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

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

效果圖:

頁首html需要添加

將其用div包起來，放進公告.html即可見效。

先將相應的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);
}

然后將如下代碼貼進公告中~