前端小白也能快速学会的博客园博客美化全攻略[附源码]

前端小白也能快速学会的博客园博客美化全攻略[附源码]

A呦V，优快云er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点"推荐"或关注本人喔~

美化方法论简介

一般而言，需要选一个默认的skin，然后在该基础上调整。

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

官方文档 - 【博客园skin开发文档 】:

直接⏬
https://pan.quark.cn/s/49723f86bc72

在线看：
https://docs.qq.com/sheet/DZFJDeGVuRW5QRmJa

宽屏模版：

SimpleMemory

Minyx2_Lite

lessIsMore

BlueSky

博客园布局的组成及其对应关系(下方一图来自于网络):

准备工作

1. 首先你得有个cnblogs博客
2. 申请js权限

附该美化过程的github项目:
yanglr/Beautify-cnblogs: Beautify-cnblogs

欢迎fork或star~

本博客的所有代码在此github项目的src文件夹中~

源码使用步骤：

1. 打开 博客后台管理 → “设置”
2. 在博客皮肤选项卡中将博客皮肤设置为： LessIsMore
3. 将src文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内
4. 将同一文件夹下的 页首.html 复制到 页首Html代码 代码框内
5. 将同一文件夹下的 页尾.html 复制到 页脚Html代码 代码框内
6. 保存，即可见效。

js权限申请

登陆后依次点击“我的博客” → “管理” → “设置”，在下拉后找到“博客侧边栏公告”，后方有一个“申请js权限”。

或者也可进博客园园子页面(https://home.cnblogs.com/feed/all/)，发状态@博客园团队，申请开通js权限。

也可发个邮件到contact@cnblogs.com申请js权限。

申请时内容模板已为你备好:

尊敬的博客园管理员：

本人请求申请开通js权限，希望能够把博客修饰的漂亮点，点缀自定义js插件效果，希望管理员可以批准，多谢~

提交完申请，会弹出提示:

JS权限申请已提交，待审核。

剩下的就是耐心等待了，一般来说挺快就会通过。如果设置页面上公告栏标题右侧不存在“申请js权限”，说明已成功开通js权限。

如何模仿一个博客园的自定义风格(样式css+动态效果js)?

模仿一个cnblogs的全局css，只需打开Chrome浏览器，按下F12，找里面的skin css和custom css，例如：

<link id="MainCss" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore.css?...">

<link type="text/css" rel="stylesheet" href="/blog/customcss/198996.css?v=...">

补充完整前缀：http://www.cnblogs.com，使用ref将该两个css引用到自己的博客中，即可进行大概样子的模仿，其他部分需要细调。

markdown样式自定义

默认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部分：

<style type="text/css"> 
    #auto_div {
   
   
        display: none;
        width: 257px;
        border: 1px #74c0f9 solid;
        background: #FFF;
        position: absolute;
        top: 24px;
        left: 0;
        margin-top: 15px;
        color: #323232;
        /*设置显示在当前页面的上一层*/
        z-index: 1;
    }
 
    .side_search {
   
   
        float: left;
        position: relative;
        height: 31px;
        margin-left: 25px;
        display: inline-block;
    }
 
        .side_search:hover {
   
   
            -webkit-box-shadow: 0 0 3px #999;
            -moz-box-shadow: 0 0 3px #999
        }
 
    .search_input {
   
   
        width: 210px;
        vertical-align: middle;
        height: 30px;
        line-height: 30px;
        border: 1px solid #999;
        border-radius: 2px 0 0 2px;
        padding: 4px 7px;
        background-color: #fbfbfb;
    }
 
    .delete_btn {
   
   
        background: #fbfbfb;
        margin-left: -6px;
        border: 1px solid #fbfbfb;
        border-radius: 0 3px 3px 0;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: red;
        font-weight: bold;
        width: 38px;
        font-size: 25px;
        height: 38px;
        padding-bottom: inherit;
    }
 
    .search_btn {
   
   
        border-radius: 3px 3px 3px 3px;
        background: #4d90fe;
        margin-left: -7px;
        border: 1px solid #4d90fe;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #f3f7fc;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 41px;
    }
 
        .search_btn:hover {
   
   
            background: #1874CD
        }
 
    .search_btn2 {
   
   
        border-radius: 3px 3px 3px 3px;
        background: #F0CB85;
        border: 1px solid #F0CB85;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #DC143C;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 41px;
    }
 
        .search_btn2:hover {
   
   
            background: #DEB887
        }
 
    input, button, textarea, select, optgroup, option {
   
   
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
    }
</style>

js部分:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var availableTags = [
        "C#", "C++", "算法",
        "ASP", "MySQL", "Oracle",
        "HTML", "CSS", "JavaScript",
        "jQuery", "AJAX", "微软系列技术",
        "Sublime", "Git",
        "Visual Studio Code",
        "Eclipse",
        "C#开发", "C++开发", "Java开发",
        "PHP开发",
        "Python开发",
        "Web前端开发",
        "Windows Forms",
        "WPF",
        "计算机数学",
        "浏览器插件",
        "软件推荐",
        "算法实践",
        "专业学习",
        "Leetcode",
        "知乎",
        "Bravo Yeung",
        "legege007",
        "enjoy233",
        "数学",
        "内容太长，显示其中的一部分"
    ];
    var old_value = "";
    var highlightindex = -1;   //高亮

    //自动完成
    function AutoComplete(auto, search, mylist) {
     
     
        if ($("#" + search).val() != old_value || old_value == "") {
     
     
            var autoNode = $("#" + auto);   //缓存对象（弹出框）
            var carlist = new Array();
            var n = 0;
            old_value = $("#" + search).val();
 
            for (i in mylist) {
     
     
                if (mylist[i].indexOf(old_value) >= 0) {
     
     
                    carlist[n++] = mylist[i];
                }
            }
            if (carlist.length == 0) {
     
     
                autoNode.hide();
                return;
            }
            autoNode.empty();  //清空上次的记录
            for (i in carlist) {
     
     
                var wordNode = carlist[i];   //弹出框里的每一条内容

                var newDivNode