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

妖狐艹你老母 2022-03-07 10:54 791阅读 0赞

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

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

## 美化方法论简介 ##

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

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

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

[https://docs.qq.com/sheet/DZF...][https_docs.qq.com_sheet_DZF...]

宽屏模版：

SimpleMemory

Minyx2\_Lite

lessIsMore

BlueSky

博客园布局的组成及其对应关系(下方一图来自于**网络**):  
![common\_skin\_layout][common_skin_layout]

## 准备工作 ##

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

**附该美化过程的github项目:**  
[yanglr/Beautify-cnblogs: Beautify-cnblogs][yanglr_Beautify-cnblogs_ Beautify-cnblogs]

欢迎fork或star~

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

**源码使用步骤：**

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

### js权限申请 ###

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

![Apply\_js][Apply_js]

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

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

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

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

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

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

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

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

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

补充完整前缀：[http://www.cnblogs.com][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部分：

js部分:

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

html部分：

效果图:

![customSearch1][]

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

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

![163music\_palyer][163music_palyer]

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

或

参数说明：

> 播放器可修改参数：  
> width=100% \#自适应宽度, 本博客使用了固定宽度320  
> height=66 \#根据自己需要来改  
> sid=26237342 \# 此数字是歌曲的ID [http://music.163.com/\#/song?i...][http_music.163.com_song_i...]  
> auto=0 \# 0表示不自动播放，1表示自动播放

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

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

![playList][]

参数说明

> 播放器可修改参数：  
> width=100% \# 自适应宽度  
> height=450 \# 根据自己的需要修改  
> id=34238509 \# 此数字是歌曲列表页的ID, 例如： [http://music.163.com/\#/playli...][http_music.163.com_playli...]  
> auto=0 \# 0表示不自动播放，1表示自动播放

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

效果图:

![163music\_player][163music_player]

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

页首html需要添加

效果见[本页面][Link 2]右上角。

如果想对该图标进行更多颜色或位置的设置，请参考：[GitHub Ribbons - The GitHub Blog][].

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

/* 头部 */
    #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`标签即能实现文字的滚动

效果图:

![slide\_words][slide_words]

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

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

<div nowrap align=center>
            <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_gzh.png" width=150 height=150>
        </div>
    <br>
    <div align="center">
         <a href="http://stackoverflow.com/users/6075331/bravo-young" target="_blank" class="mr5 "><strong>StackOverflow</strong></a><font  style="color:#BF7158">(</font>
        <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_reputation-rp.png" class="mr5">
        <span style="color:#BF7158" class="mr10">406 <font size=4 color=black>⬆</font>)</span>
    </div>
    
    <br>
    
    <div class="c-social" align="center">
    <span>
        <a href="https://github.com/yanglr" target="_blank">
          <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_github.png" class="mr5" width = 40 height=40>
        </a>
        <a href="http://blog.csdn.net/lzuacm" target="_blank">
          <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 40 height=40>
        </a>
        <a href="https://www.zhihu.com/people/legege007" target="_blank">
          <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 40 height=40>
        </a>
        <a href="http://weibo.com/546671991" target="_blank">
          <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_weibo.png" class="mr5" width = 40 height=40>
        </a>
    
    </span>

效果图:

![socialLinks][]

对于知乎，可以这样写更详细些：

而对于stackoverflow，官方在StackExchange页面提供了flair，比如我的是: [User Bravo Yeung - Stack Exchange][] ，页面中提供了可嵌入的html代码:

将其用div包起来，放进公告.html即可见效。

## 在公告栏添加一个能旋转的rss图标 ##

先将相应的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);
    }

然后将如下代码贴进公告中~

效果图:

![rss\_roate][rss_roate]

## 在公共栏添加"人体时钟"(Flash) ##

此**人体时钟**的原作者: 日本flash达人 [Chabudai][]，初发表于2008年9月(2008-09-23)。

只需在公告中贴入如下代码:

效果图:

![clock\_result][clock_result]

**参考:**

[人体造型时钟hone clock设置、博客侧栏代码 - 曹杰峰的博客][hone clock_ -]

**ps:** iOS移动端用默认浏览器打开看不到效果很正常，这个是flash做的，苹果的产品基本上都不直接支持flash了，iOS上安装一个Chrome浏览器倒是可以正常打开的~

## 在公共栏添加"站点统计"功能 ##

打开网站：[http://www.flagcounter.com/][http_www.flagcounter.com] ，无需注册，点击黄色按钮"Get Your Flag Counter"，即可生成嵌入该插件的html代码。  
![FlagCounter][]

生成的html代码如下：

最后将该代码加入到公告栏的html代码中即能生效。

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

**实现的基本原理:**

> onclick = "window.open()", target = popUpWindow

此功能的特色在于用户搜索之后，搜索结果页面并不会影响到原博客页面，而是在弹出的独立窗口显示，而且很容易扩展出很多其他站点的搜索功能。

在公告html中贴入如下代码:

<div id="sidebar_search_new" class="mySearch">
    <h3 class="catListTitle">自定义搜索(PopUp窗口)</h3>
        <input type="text" id="zzk_q1" class="input_my_zzk_new" placeholder="Bravo Yeung"> 
    <span>
        <input type="button" class="btn_my_zzk" value="本博搜索" onclick="window.open('https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
     
    <input type="button" class="btn_my_zzk" value="站内搜索" onclick="window.open('https://zzk.cnblogs.com/s/blogpost?w=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
    </div>
    <span>
    <span>
        <input type="button" class="btn_my_zzk" value="知乎搜索" onclick="window.open('https://www.zhihu.com/search?type=content&q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
     
    <input type="button" class="btn_my_zzk" value="CSDN搜索" onclick="window.open('https://so.csdn.net/so/search/s.do?t=blog&u=yanglr2010&q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
    </div>

**效果图:**

![customSearch2][]

**参考:**  
[Javascript - Open a given URL in a new tab by clicking a button - Stack Overflow][]

[JavaScript Popup Windows ][JavaScript Popup Windows]

[Javascript window.open, also fullscreen and centered popup window « JavaScript DHTML Tutorials][Javascript window.open_ also fullscreen and centered popup window _ JavaScript DHTML Tutorials]

## 页面底部添加"回到顶部" + "收藏" + "快速评论"功能 ##

html部分：

效果图:

![custom\_Tool\_Bar][custom_Tool_Bar]

## "自动移动的目录"功能 ##

页脚html引入css文件nav.my.css和nav.my.js。

然后将下方代码贴进页脚html.

JS部分:

效果图:

![autoMoveContents][]

## 改进评论的显示样式 ##

这里我索性改成了熟悉的`微信聊天`的样式。

纯css实现:

.blog_comment_body {
            background: #B2E866;
            float: left;
            border-radius: 5px;
            position: relative;
            overflow: visible;
            margin-left: 33px;
            max-width: 700px;
        }
    
        .feedbackListSubtitle a.layer {
            background: #B2E866;
            color: #414141 !important;
            padding: 2px 4px;
            border-radius: 2px;
        }

将上面的代码贴紧页面css文本框即可见效果。

**效果图:**

![custom\_comments][custom_comments]

## 在公告栏添加"友情链接" ##

cnblogs博客后台提供了"链接"功能，这个就是用来添加友情链接的。

**设置方法(见下图):**

编辑分类 -> 添加链接，设置好后公告栏上会显示相关内容，不过可能会有延时，需要等一会。

![friend\_links][friend_links]

效果图:

![friend\_link\_result][friend_link_result]

## "博客签名"功能 ##

虽然cnblogs博客后台提供了"博客签名"功能，测试发现该该方法实现的博客签名在IE中打开时不显示，只好改为用跨浏览器的JQuery来实现了。

## 禁用页面的"选中复制"功能 ##

在css中进行相应的设置，只需将下方代码贴入"页面css"文本框即可。

/* 禁止页面，选中 复制 */
    html,body {
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

综合考虑后，这种处理方式并不太友好，于是采用了后文中的"复制博客内容时自动加版权说明"。

## 不显示底部广告 ##

在css中进行相应的设置，只需将下方代码贴入"页面css"文本框即可。

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
        display:none; !important
    }

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

css部分:

/* 定制自己导航栏的样式 */
    #shwtop ul {
        margin: 0;
        padding: 0;
        list-style-type: none; /*去除li前的标注*/
        background-color: #333;
        overflow: hidden; /*隐藏溢出的部分，保持一行*/
    }
    #shwtop li {
        float: left; /*左浮动*/
    }
    #shwtop li a, .dropbtn {
        display: inline-block; /*设置成块*/
        color: white;
        text-align: center;
        text-decoration: none;
        padding: 14px 16px;
    }
    /*鼠标移上去，改变背景颜色*/
    #shwtop li a:hover, .dropdown:hover .dropbtn { 
        /* 当然颜色你可以自己改成自己喜欢的，我还是挺喜欢蓝色的 */
        background-color: blue;
    }
    #shwtop .dropdown {
        /*
        display:inline-block将对象呈递为内联对象，
        但是对象的内容作为块对象呈递。
        旁边的内联对象会被呈递在同一行内，允许空格。
        */
        display: inline-block;
    }
    #shwtop .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    #shwtop .dropdown-content a {
        display: block;
        color: black;
        padding: 8px 10px;
        text-decoration:none;
    }
    #shwtop .dropdown-content a:hover {
        background-color: #a1a1a1;
    }
    #shwtop .dropdown:hover .dropdown-content{
        display: block;
    }

页脚html部分：

<script>
        $(function(){
                $("#navigator").append('<div id="shwtop" >    <ul style="margin-left:5px;margin-right: 5px;">       <div class="dropdown">            <a href="#" class="dropbtn">后台管理</a>            <div class="dropdown-content">                                <a class="menu" href="http://i.cnblogs.com/Configure.aspx"  target="_blank">GUI配置</a>                <a class="menu" href="http://i.cnblogs.com/posts" target="_blank">博文列表</a>                <a class="menu" href="http://wz.cnblogs.com/" target="_blank">收藏</a>                               <a class="menu" href="http://i.cnblogs.com/Files.aspx" target="_blank">文件</a>   <a class="menu" href="https://i.cnblogs.com/EditGalleries.aspx" target="_blank">相册</a>          </div>        </div>    </ul></div>');
    
            $("#navList").append('<li id="nav_home"><a id="enjoy233" rel="nofollow" href="https://ing.cnblogs.com/" target="_blank" title="进入我的闪存">闪存</a></li>');
            $("#navList").append('<li id="nav_follow"><a id="enjoy233" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="进入我的关注">我关注</a></li>');          
    
            $('#navList')[0].children["nav_contact"].innerHTML='<a id="nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/Enjoy233">私信</a>';
            $('#navList')[0].children["nav_rss"].innerHTML='<a id="nav_rss" class="menu" rel="nofollow" href="https://www.cnblogs.com/enjoy233/rss">RSS订阅</a>';
    
                //加载图片
                var ponum1 = $(".postTitle").length;
                var ponum2 = $(".entrylistPosttitle").length;
                if(ponum1!=0)
                    articleimg(ponum1);
                if(ponum2!=0)
                    entrylistarticleimg(ponum2);
            });
    </script>

效果图:

![custom-nav][]

如需调整请自行修改~

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

参看本人的另一篇文章 [当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效) - Enjoy233][2019_2_ - Enjoy233] 即可。

效果图(见本博客左侧公告栏):

![weibo\_show][weibo_show]

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

由于官方的 Baidu Share 的ssl证书已过期，只好找到一个替代镜像 `//static.dmzj.com/baidushare/static/js/shell_v2.js`，使得通过https访问或http访问本博客都可以看到左下角的分享按钮~

在页脚.html中加入如下代码:

<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> 
    <span class="bds_more">分享到：</span> 
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
    <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
    <a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网"></a>
    <a href="#" class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a>
    </div> 
    <script type="text/javascript" id="bdshare_js" data="type=tools&uid=2883522" ></script> 
    <script type="text/javascript" id="bdshell_js"></script> 
    <script type="text/javascript"> 
    document.getElementById("bdshell_js").src = "//static.dmzj.com/baidushare/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) 
    </script>

官方demo:

[分享按钮-百度分享][-] (获取代码 -> 按向导操作，可查看网页侧边的动态使用效果，也可看到相应代码。)

效果图:

![baiduShare][]

## 打赏功能 ##

本博客基于开源插件 tctip v1.0.3 来实现~

在页脚.html中插入如下代码即可:

<script type="text/javascript" src="//files.cnblogs.com/files/enjoy233/tctip-1.0.3.min.js"></script> 
    <script>
        new tctip({
            top: '20%',
            button: {
                id: 1,
                type: 'zanzhu',
            },
            list: [
                {
                    type: 'alipay',
                    qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_Alipay_Charge.bmp' //替换成自己的支付宝付款码
                }, {
                    type: 'wechat',
                    qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_WX_Charge.bmp' //替换成自己的微信付款码
                }
            ]
        }).init()
    </script>

效果图:

![custom-nav][custom-nav 1]

还看到过一个不错的方法，亲测有效：[自制简易打赏功能 - EritPang][- EritPang] .

## 复制正文文字时自动加版权 ##

确保页面能成功引入JQuery.js后在页首html中加入如下代码:

当用户复制文中内容(ctrl+C或鼠标右击复制)时，会自动加上版权文字，csdn的代码复制功能以及知乎的内容复制都有此功能。

**效果图:**

![copy-With-Copyright][]

## 对正文中的图片设置悬停放大 ##

不少平台有个关于图片的功能：当鼠标悬停在图片上时，图片会被放大。本人直接使用css来做了这件事情~

读者只需将下方代码贴进页面css即可~

.post img {
        cursor: pointer;
        transition: all 0.5s;
    }
    .post img:hover {
        transform: scale(1.3);
    }

## 隐藏博文右下角的"反对"按钮 ##

只需在页面css的文本框中加入如下代码:

.buryit {
        display: none;
    }
    
    .comment_bury {
        display: none;
    }

效果请见[页面][Link 2]右下角。

本文首发于本人的博客园: [https://www.cnblogs.com/enjoy...][Link 2].

[http_skintemplate.cnblogs.com]: http://skintemplate.cnblogs.com/
[https_docs.qq.com_sheet_DZF...]: https://docs.qq.com/sheet/DZFJDeGVuRW5QRmJa
[common_skin_layout]: /images/20220307/82c8396830b94f819e3fd28974863d47.png
[yanglr_Beautify-cnblogs_ Beautify-cnblogs]: https://github.com/yanglr/Beautify-cnblogs
[Link 1]: https://www.cnblogs.com/enjoy233
[Apply_js]: /images/20220307/2a7a61bd37de4290865266ed78428777.png
[https_home.cnblogs.com_feed...]: https://home.cnblogs.com/feed/all/
[contact_cnblogs.com]: mailto:contact@cnblogs.com
[http_www.cnblogs.com]: http://www.cnblogs.com
[- _ -]: http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html
[customSearch1]: /images/20220307/085a8c1c9f5b4bab8e13c1f2ad31d448.png
[163music_palyer]: /images/20220307/1070759e383542318e3e5279ad64be57.png
[http_music.163.com_song_i...]: http://music.163.com/#/song?id=26237342
[playList]: /images/20220307/ea193c0df7a04c11b0064373d100d3f9.png
[http_music.163.com_playli...]: http://music.163.com/#/playlist?id=34238509
[163music_player]: /images/20220307/60e8779b097e411fb2d8f4a88a2e72d9.png
[Link 2]: https://www.cnblogs.com/enjoy233/p/10328361.html
[GitHub Ribbons - The GitHub Blog]: https://github.blog/2008-12-19-github-ribbons/
[slide_words]: /images/20220307/986f0a651a064f32a2513a57721a73b3.png
[socialLinks]: /images/20220307/126779f60f7747a39228745c6d8bc4e4.png
[User Bravo Yeung - Stack Exchange]: https://stackexchange.com/users/4637854/bravo-yeung?tab=flair
[rss_roate]: /images/20220307/2639288c0b2e4cbabd4e3192eabc2f35.png
[Chabudai]: http://chabudai.org/blog/?p=59
[clock_result]: /images/20220307/7fedf236c15948d296165c44c9a4c49f.png
[hone clock_ -]: https://www.caojiefeng.com/wzdm/62.html
[http_www.flagcounter.com]: http://www.flagcounter.com/
[FlagCounter]: /images/20220307/bb9be0f36e2c4e758fc162581b267219.png
[customSearch2]: /images/20220307/afd1c32920084948a3b450810b9f5ab5.png
[Javascript - Open a given URL in a new tab by clicking a button - Stack Overflow]: https://stackoverflow.com/questions/6303964/javascript-open-a-given-url-in-a-new-tab-by-clicking-a-button
[JavaScript Popup Windows]: https://www.quackit.com/javascript/popup_windows.cfm
[Javascript window.open_ also fullscreen and centered popup window _ JavaScript DHTML Tutorials]: http://javascript-array.com/scripts/window_open/
[custom_Tool_Bar]: /images/20220307/28a7e8d02c7f461dbc8464d8c27f26fb.png
[autoMoveContents]: /images/20220307/0066c00141da4e5a8ae11b36f74c8c01.png
[custom_comments]: /images/20220307/58bc7ff87363418a8dfbd38a9500f3b7.png
[friend_links]: /images/20220307/ecbc23d6cb9d4f96bc47ee1b3d8933de.png
[friend_link_result]: /images/20220307/7f3897efbfb542fabe2f32304c4620ed.png
[custom-nav]: /images/20220307/dcd89a21dbfa47a29c4e53e372b5b05d.png
[2019_2_ - Enjoy233]: https://www.cnblogs.com/enjoy233/p/10349500.html
[weibo_show]: /images/20220307/a5233035dfc94c60a037c8ec8a3f4558.png
[-]: http://share.baidu.com/code
[baiduShare]: /images/20220307/af8eb7a07dc04a2cbb3c63b29c918274.png
[custom-nav 1]: /images/20220307/7d2fdc42a0fe4424b94feaa04df9addb.png
[- EritPang]: https://www.cnblogs.com/eritpang/p/7465484.html
[copy-With-Copyright]: /images/20220307/b729c8f190464921a9c371235ddf4fdc.png