Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yanglr/beautify-cnblogs

Beautify-cnblogs博客园样式美化
https://github.com/yanglr/beautify-cnblogs

cnblogs cnblogs-theme front-end geekplayers geekzl markdown tech-blog

Last synced: about 17 hours ago
JSON representation

Beautify-cnblogs博客园样式美化

Awesome Lists containing this project

README 

        
- [前端小白也能快速学会的博客园博客美化全攻略](#前端小白也能快速学会的博客园博客美化全攻略)

  * [美化方法论简介](#美化方法论简介)

  * [准备工作](#准备工作)

    + [js权限申请](#js权限申请)

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

  * [markdown样式自定义](#markdown样式自定义)

  * [在页面顶部添加"自定义搜索"功能](#在页面顶部添加自定义搜索功能)

  * [在页面顶部添加"音乐播放器"(Flash)播放背景音乐](#在页面顶部添加音乐播放器Flash播放背景音乐)

  * [在页面顶部添加"Fork me on Github"图标](#在页面顶部添加fork-me-on-github图标)

  * [为导航栏设置渐变背景色](#为导航栏设置渐变背景色)

  * [在公告栏添加滚动文字](#在公告栏添加滚动文字)

  * [在公告栏加入自己的社交网络账号 - 图片链接](#在公告栏加入自己的社交网络账号---图片链接)

  * [在公告栏添加一个能旋转的rss图标](#在公告栏添加一个能旋转的rss图标)

  * [在公共栏添加"小人时钟"(Flash)](#在公共栏添加小人时钟(Flash))

  * [在公共栏添加"站点统计"功能](#在公共栏添加站点统计功能)

  * [在公告栏中加入"自定义搜索"(PopUp弹窗)](#在公告栏中加入自定义搜索PopUp弹窗)

  * [页面底部添加"回到顶部" + "收藏" + "快速评论"功能](#页面底部添加回到顶部--收藏--快速评论功能)

  * ["自动移动的目录"功能](#自动移动的目录功能)

  * [改进评论的显示样式](#改进评论的显示样式)

  * [在公告栏添加"友情链接"](#在公告栏添加友情链接)

  * ["博客签名"功能](#博客签名功能)

  * [禁用页面的"选中复制"功能](#禁用页面的选中复制功能)

  * [不显示底部广告](#不显示底部广告)

  * [修改导航栏(修改部分链接的文字 + 增加下拉菜单)](#修改导航栏修改部分链接的文字--增加下拉菜单)

  * [微博秀的嵌入(支持http/https访问)](#微博秀的嵌入支持httphttps访问)

  * [分享组件的嵌入(支持http/https访问)](#分享组件的嵌入支持httphttps访问)

  * [打赏功能](#打赏功能)

  * [复制文字时自动加版权](#复制文字时自动加版权)

  * [隐藏博文右下角的"反对"](#隐藏博文右下角的反对)







欢迎访问作者的个人网站: [极客中心](https://yanglr.github.io/)



# 前端小白也能快速学会的博客园博客美化全攻略



**A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点支持或关注本人喔~ **



## 美化方法论简介



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



官方介绍：

博客皮肤模板 



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



宽屏模版：



SimpleMemory



Minyx2_Lite



lessIsMore



BlueSky





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

![common_skin_layout](https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_common-skin-layout.png)



## 准备工作



1. 首先你得有个cnblogs博客

2. 申请js权限



**附该美化过程的github项目:**

[yanglr/Beautify-cnblogs: Beautify-cnblogs](https://github.com/yanglr/Beautify-cnblogs)



欢迎fork或star~



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



**源码使用步骤：**



1. 打开 博客后台管理 → “设置”

2. 在博客皮肤选项卡中将博客皮肤设置为： `LessIsMore`

3. 将`src`文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内

4. 将同一文件夹下的 页首.html 复制到 页首Html代码 代码框内

5. 将同一文件夹下的 页尾.html 复制到 页脚Html代码 代码框内

6. 保存，即可见效。



### js权限申请



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



![Apply_js](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/Apply-js-with-Content.jpg)



或者也可进博客园园子页面()，发状态@博客园团队，申请开通js权限。



也可发个邮件到[[email protected]](mailto:[email protected])申请js权限。



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



> 尊敬的博客园管理员：

>

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



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



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



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



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



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



```css



```



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



## markdown样式自定义



默认markdown状态下，代码中的字比较小。



```css

/* 文章标题样式(这个不是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;

}

```



## 在页面顶部添加"自定义搜索"功能



css部分：

```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;

    }



```



js部分:

```html



    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 = $("<div>").attr("id", i);    //设置每个节点的id值

                newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

 

                newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框



                //鼠标移入高亮，移开不高亮

                newDivNode.mouseover(function () {

                    if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）

                        autoNode.children("div").eq(highlightindex).css("background-color", "white");

                    }

                    //记录新的高亮节点索引

                    highlightindex = $(this).attr("id");

                    $(this).css("background-color", "#ebebeb");

                });

                newDivNode.mouseout(function () {

                    $(this).css("background-color", "white");

                });

 

                //鼠标点击文字上屏

                newDivNode.click(function () {

                    //取出高亮节点的文本内容

                    var comText = autoNode.hide().children("div").eq(highlightindex).text();

                    highlightindex = -1;

                    //文本框中的内容变成高亮节点的内容

                    $("#" + search).val(comText);

                })

                if (carlist.length > 0) {    //如果返回值有内容就显示出来

                    autoNode.show();

                } else {               //服务器端无内容返回 那么隐藏弹出框

                    autoNode.hide();

                    //弹出框隐藏的同时，高亮节点索引值也变成-1

                    highlightindex = -1;

                }

            }

        }

 

        //点击页面隐藏自动补全提示框

        document.onclick = function (e) {

            var e = e ? e : window.event;

            var tar = e.srcElement || e.target;

            if (tar.id != search) {

                if ($("#" + auto).is(":visible")) {

                    $("#" + auto).css("display", "none")

                }

            }

        }

 

    }

 

    $(function () {

        old_value = $("#zzk_q").val();



        $("#zzk_q").keyup(function () {

            AutoComplete("auto_div", "zzk_q", availableTags);

        });

    });

 

    function quickdelete() {

        document.getElementById("zzk_q").value = "";

    }

 

    function zzk_go() {

        var n = encodeURIComponent(document.getElementById("zzk_q").value);

        window.location = "http://zzk.cnblogs.com/s?w=blog%3AEnjoy233+" + n + "&t="

    }

    function zzk_go2() {

        var n = encodeURIComponent(document.getElementById("zzk_q").value);

        window.location = "http://zzk.cnblogs.com/s?w=" + n

    }

    function zzk_go_enter(n) {

        if (n.keyCode == 13)

            return zzk_go(), !1

    }



```

如果需要修改自动完成的下拉选项，修改变量`availableTags`的值即可见效。



html部分：



```html

  




    

    


    
 

    

    

    



```



效果图:



![customSearch1](https://files.cnblogs.com/files/enjoy233/customSearch1.bmp)



## 在页面顶部添加"音乐播放器"(Flash)播放背景音乐



先登录网易云音乐网页版，搜索到想要的音乐，然后点击"生成外链播放器"即可得到相应的html代码。



![163music_palyer](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163music_player.bmp)



**表现形式一：单曲播放** (type = 1)



```html

 

```



或



```html



```



参数说明：



> 播放器可修改参数：

> width=100% #自适应宽度, 本博客使用了固定宽度320

> height=66 #根据自己需要来改

> sid=26237342 # 此数字是歌曲的ID http://music.163.com/#/song?id=26237342

> auto=0 # 0表示不自动播放，1表示自动播放



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



```html

 

```



当然该`url`中的`https:`也可删掉。



![playList](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163playList.bmp)



参数说明



> 播放器可修改参数：

> width=100% # 自适应宽度

> height=450 # 根据自己的需要修改

> id=34238509 # 此数字是歌曲列表页的ID, 例如：http://music.163.com/#/playlist?id=34238509

> auto=0  # 0表示不自动播放，1表示自动播放



将该代码贴进页首html即可见效(如果代码中含有`iframe`，需替换成`embed`)~



```html






```



效果图: 



![163music_player](https://files.cnblogs.com/files/enjoy233/163music_player.gif)



## 在页面顶部添加"Fork me on Github"图标



页首html需要添加

```html





    Fork me on github





```



效果见[本页面](https://www.cnblogs.com/enjoy233/p/10328361.html)右上角。



如果想对该图标进行更多颜色或位置的设置，请参考：[GitHub Ribbons - The GitHub Blog](https://github.blog/2008-12-19-github-ribbons/).



## 为导航栏设置渐变背景色



```css

/* 头部 */

#header {

	position: relative;

	height: 280px;

	margin: 0;

	background: #020031;

	background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);

	background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));

	background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);

	background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);

	background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);

	background: linear-gradient(45deg,#020031 0,#6d3353 100%);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);

	-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);

	-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);

	box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);

}

```



## 在公告栏添加滚动文字



使用`marquee`标签即能实现文字的滚动 



```html

You will make it!



```



效果图:



![slide_words](https://files.cnblogs.com/files/enjoy233/slide_words.gif)



## 在公告栏加入自己的社交网络账号 - 图片链接



可以将自己不同社交网络的账号放在同一个span中，然后嵌入到div里，代码如下：

```html

    


        

    







     StackOverflow(

    

    406 ⬆)