├── LICENSE ├── README.md ├── board-Mac └── index.html ├── csdn.svg ├── files ├── README.md ├── github_blocks_Baidu_spider-how_to_solve.pdf └── screenshot-github_blocks_Baidu_spider-how_to_solve.png ├── git-right-link.gif ├── github.svg ├── images ├── 163music_player.bmp ├── 163playList.bmp ├── Apply-js-with-Content.jpg ├── README.md ├── avatar.jpg ├── copyWithCopyright.bmp ├── csdn.svg ├── custom-navigate.bmp ├── custom_comments.bmp ├── custom_search2.bmp ├── git-right-link.gif ├── github-Add.gif ├── github-link-yellow.png ├── github-pendant-rightCorner.svg ├── github.svg ├── iconfont-jianshu.svg ├── reputation-rp.svg ├── rss.svg ├── segmentFault-icon.svg ├── segmentFault-logo.png ├── weibo.svg └── zhihu.svg ├── reputation-rp.svg ├── rss.svg ├── src ├── Stackoverflow Query-ResultSets-Query-China Region_complete-2019-04-12..xlsx ├── Stackoverflow query results - China Region - by Bravo Yeung.xlsx ├── 公告.html ├── 博客签名.html ├── 页脚.html ├── 页面定制.css └── 页首.html ├── tools ├── Cnblogs Wz(博客园网摘).xpi ├── Cnblogs Wz(博客园网摘)_v2.4.0.0.crx └── readme.md ├── weibo.svg ├── weiboWidgets ├── blogwidget.html ├── bookmark.html ├── signature.html ├── toolbar.html ├── weiboshow.html └── widgetsHome.html ├── zhihu.svg └── 高端注释.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 极客学长Bravo Yeung 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | - [前端小白也能快速学会的博客园博客美化全攻略](#前端小白也能快速学会的博客园博客美化全攻略) 2 | * [美化方法论简介](#美化方法论简介) 3 | * [准备工作](#准备工作) 4 | + [js权限申请](#js权限申请) 5 | * [如何模仿一个博客园的自定义风格(样式css+动态效果js)?](#如何模仿一个博客园的自定义风格样式css动态效果js) 6 | * [markdown样式自定义](#markdown样式自定义) 7 | * [在页面顶部添加"自定义搜索"功能](#在页面顶部添加自定义搜索功能) 8 | * [在页面顶部添加"音乐播放器"(Flash)播放背景音乐](#在页面顶部添加音乐播放器Flash播放背景音乐) 9 | * [在页面顶部添加"Fork me on Github"图标](#在页面顶部添加fork-me-on-github图标) 10 | * [为导航栏设置渐变背景色](#为导航栏设置渐变背景色) 11 | * [在公告栏添加滚动文字](#在公告栏添加滚动文字) 12 | * [在公告栏加入自己的社交网络账号 - 图片链接](#在公告栏加入自己的社交网络账号---图片链接) 13 | * [在公告栏添加一个能旋转的rss图标](#在公告栏添加一个能旋转的rss图标) 14 | * [在公共栏添加"小人时钟"(Flash)](#在公共栏添加小人时钟(Flash)) 15 | * [在公共栏添加"站点统计"功能](#在公共栏添加站点统计功能) 16 | * [在公告栏中加入"自定义搜索"(PopUp弹窗)](#在公告栏中加入自定义搜索PopUp弹窗) 17 | * [页面底部添加"回到顶部" + "收藏" + "快速评论"功能](#页面底部添加回到顶部--收藏--快速评论功能) 18 | * ["自动移动的目录"功能](#自动移动的目录功能) 19 | * [改进评论的显示样式](#改进评论的显示样式) 20 | * [在公告栏添加"友情链接"](#在公告栏添加友情链接) 21 | * ["博客签名"功能](#博客签名功能) 22 | * [禁用页面的"选中复制"功能](#禁用页面的选中复制功能) 23 | * [不显示底部广告](#不显示底部广告) 24 | * [修改导航栏(修改部分链接的文字 + 增加下拉菜单)](#修改导航栏修改部分链接的文字--增加下拉菜单) 25 | * [微博秀的嵌入(支持http/https访问)](#微博秀的嵌入支持httphttps访问) 26 | * [分享组件的嵌入(支持http/https访问)](#分享组件的嵌入支持httphttps访问) 27 | * [打赏功能](#打赏功能) 28 | * [复制文字时自动加版权](#复制文字时自动加版权) 29 | * [隐藏博文右下角的"反对"](#隐藏博文右下角的反对) 30 | 31 |
32 | 33 | 欢迎访问作者的个人网站: [极客中心](https://yanglr.github.io/) 34 | 35 | # 前端小白也能快速学会的博客园博客美化全攻略 36 | 37 | **A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点支持或关注本人喔~ ** 38 | 39 | ## 美化方法论简介 40 | 41 | 一般而言,需要选一个默认的skin,然后在该基础上调整。 42 | 43 | 官方介绍: 44 | 博客皮肤模板 45 | 46 | 47 | 48 | 官方文档 - 【博客园skin开发文档 】: 49 | 50 | 51 | 52 | 53 | 54 | 宽屏模版: 55 | 56 | SimpleMemory 57 | 58 | Minyx2_Lite 59 | 60 | lessIsMore 61 | 62 | BlueSky 63 |
64 | 65 | 66 | 博客园布局的组成及其对应关系(下方一图来自于**网络**): 67 | ![common_skin_layout](https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_common-skin-layout.png) 68 | 69 | 70 | ## 准备工作 71 | 72 | 1. 首先你得有个cnblogs博客 73 | 2. 申请js权限 74 | 75 | **附该美化过程的github项目:** 76 | [yanglr/Beautify-cnblogs: Beautify-cnblogs](https://github.com/yanglr/Beautify-cnblogs) 77 | 78 | 欢迎fork或star~ 79 | 80 | 本博客的所有代码在此github项目的`src`文件夹中~ 81 | 82 | **源码使用步骤:** 83 | 84 | 1. 打开 博客后台管理 → “设置” 85 | 2. 在博客皮肤选项卡中将博客皮肤设置为: `LessIsMore` 86 | 3. 将`src`文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内 87 | 4. 将同一文件夹下的 页首.html 复制到 页首Html代码 代码框内 88 | 5. 将同一文件夹下的 页尾.html 复制到 页脚Html代码 代码框内 89 | 6. 保存,即可见效。 90 | 91 | 92 | ### js权限申请 93 | 94 | 登陆后依次点击“我的博客” → “管理” → “设置”,在下拉后找到“博客侧边栏公告”,后方有一个“申请js权限”。 95 | 96 | ![Apply_js](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/Apply-js-with-Content.jpg) 97 | 98 | 或者也可进博客园园子页面(),发状态@博客园团队,申请开通js权限。 99 | 100 | 也可发个邮件到[contact@cnblogs.com](mailto:contact@cnblogs.com)申请js权限。 101 | 102 | 103 | 104 | **申请时内容模板已为你备好:** 105 | 106 | > 尊敬的博客园管理员: 107 | > 108 | > 本人请求申请开通js权限,希望能够把博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,多谢~ 109 | 110 | 111 | 112 | 提交完申请,会弹出提示: 113 | 114 | `JS权限申请已提交,待审核。` 115 | 116 | 剩下的就是耐心等待了,一般来说挺快就会通过。如果设置页面上公告栏标题右侧不存在“申请js权限”,说明已成功开通js权限。 117 | 118 | 119 | 120 | ## 如何模仿一个博客园的自定义风格(样式css+动态效果js)? 121 | 122 | 模仿一个cnblogs的全局css,只需打开Chrome浏览器,按下F12,找里面的skin css和custom css,例如: 123 | 124 | ```css 125 | 126 | 127 | 128 | ``` 129 | 130 | 131 | 132 | 133 | 补充完整前缀:,使用ref将该两个css引用到自己的博客中,即可进行大概样子的模仿,其他部分需要细调。 134 | 135 | 136 | 137 | ## markdown样式自定义 138 | 139 | 默认markdown状态下,代码中的字比较小。 140 | 141 | ```css 142 | /* 文章标题样式(这个不是markdown里的标题) */ 143 | #topics .postTitle a { 144 | /* color: #169fe6; */ 145 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 146 | font-weight: bold; 147 | } 148 | 149 | /* 普通文字样式 */ 150 | #cnblogs_post_body p { 151 | margin: 18px auto; 152 | color: #000; 153 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 154 | font-size: 16px; 155 | text-indent: 0; 156 | } 157 | 158 | /* 标题样式 */ 159 | #cnblogs_post_body h1 { 160 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 161 | font-size: 32px; 162 | font-weight: bold; 163 | line-height: 1.5; 164 | margin: 10px 0; 165 | } 166 | 167 | #cnblogs_post_body h2 { 168 | font-family: Consolas, "Microsoft YaHei", monospace; 169 | font-size: 26px; 170 | font-weight: bold; 171 | line-height: 1.5; 172 | margin: 20px 0; 173 | } 174 | 175 | #cnblogs_post_body h3 { 176 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 177 | font-size: 20px; 178 | font-weight: bold; 179 | line-height: 1.5; 180 | margin: 10px 0; 181 | } 182 | 183 | #cnblogs_post_body h4 { 184 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 185 | font-size: 18px; 186 | font-weight: bold; 187 | margin: 10px 0; 188 | } 189 | /* 标题样式设置结束 */ 190 | 191 | /* 去除双下划线斜体样式 */ 192 | em { 193 | font-style: normal; 194 | color: #000; 195 | } 196 | 197 | /* 无序列表 */ 198 | #cnblogs_post_body ul li { 199 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 200 | color: #000; 201 | font-size: 16px; 202 | list-style-type: disc; 203 | } 204 | 205 | /* 有序列表 */ 206 | #cnblogs_post_body ol li { 207 | font-family: Georgia,Times New Roman,Times,sans-serif, monospace; 208 | color: #000; 209 | font-size: 16px; 210 | list-style-type: decimal; 211 | } 212 | 213 | /* 超链接 */ 214 | #cnblogs_post_body a:link { 215 | text-decoration: none; 216 | color: #002C99; 217 | } 218 | 219 | /* 引用背景 */ 220 | #topics .postBody blockquote { 221 | background: #fff3d4; 222 | border: none; 223 | border-left: 5px solid #f6b73c; 224 | margin: 0; 225 | padding-left: 10px; 226 | } 227 | 228 | /* 单行代码 */ 229 | .cnblogs-markdown code { 230 | font-family: Consolas, "Microsoft YaHei", monospace !important; 231 | font-size: 16px !important; 232 | line-height: 20px; 233 | background-color: #f5f5f5 !important; 234 | border: 1px solid #ccc !important; 235 | padding: 0 5px !important; 236 | border-radius: 3px !important; 237 | line-height: 1.8; 238 | margin: 1px 5px; 239 | vertical-align: middle; 240 | display: inline-block; 241 | } 242 | 243 | /* 多行代码, 引用 */ 244 | .cnblogs-markdown .hljs { 245 | font-family: Consolas, "Microsoft YaHei", monospace !important; 246 | font-size: 16px !important; 247 | line-height: 1.5 !important; 248 | padding: 5px !important; 249 | } 250 | ``` 251 | 252 | 253 | 254 | ## 在页面顶部添加"自定义搜索"功能 255 | 256 | css部分: 257 | ```css 258 | 357 | ``` 358 | 359 | js部分: 360 | ```html 361 | 362 | 488 | ``` 489 | 如果需要修改自动完成的下拉选项,修改变量`availableTags`的值即可见效。 490 | 491 | 492 | html部分: 493 | 494 | ```html 495 |

496 | 504 | ``` 505 | 506 | 507 | 508 | 效果图: 509 | 510 | ![customSearch1](https://files.cnblogs.com/files/enjoy233/customSearch1.bmp) 511 | 512 | 513 | 514 | ## 在页面顶部添加"音乐播放器"(Flash)播放背景音乐 515 | 516 | 先登录网易云音乐网页版,搜索到想要的音乐,然后点击"生成外链播放器"即可得到相应的html代码。 517 | 518 | ![163music_palyer](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163music_player.bmp) 519 | 520 | 521 | 522 | **表现形式一:单曲播放** (type = 1) 523 | 524 | ```html 525 | 526 | ``` 527 | 528 | 或 529 | 530 | ```html 531 | 532 | ``` 533 | 534 | 参数说明: 535 | 536 | > 播放器可修改参数: 537 | > width=100% #自适应宽度, 本博客使用了固定宽度320 538 | > height=66 #根据自己需要来改 539 | > sid=26237342 # 此数字是歌曲的ID http://music.163.com/#/song?id=26237342 540 | > auto=0 # 0表示不自动播放,1表示自动播放 541 | 542 | 543 | 544 | **表现形式二:列表播放** (type = 0) 545 | 546 | ```html 547 | 548 | ``` 549 | 550 | 当然该`url`中的`https:`也可删掉。 551 | 552 | ![playList](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163playList.bmp) 553 | 554 | 555 | 556 | 参数说明 557 | 558 | > 播放器可修改参数: 559 | > width=100% # 自适应宽度 560 | > height=450 # 根据自己的需要修改 561 | > id=34238509 # 此数字是歌曲列表页的ID, 例如:http://music.163.com/#/playlist?id=34238509 562 | > auto=0 # 0表示不自动播放,1表示自动播放 563 | 564 | 565 | 566 | 567 | 将该代码贴进页首html即可见效(如果代码中含有`iframe`,需替换成`embed`)~ 568 | 569 | ```html 570 |
571 | 572 |
573 | ``` 574 | 575 | 576 | 577 | 效果图: 578 | 579 | ![163music_player](https://files.cnblogs.com/files/enjoy233/163music_player.gif) 580 | 581 | 582 | 583 | 584 | 585 | ## 在页面顶部添加"Fork me on Github"图标 586 | 587 | 页首html需要添加 588 | ```html 589 |
590 | 591 | Fork me on github 592 | 593 |
594 | ``` 595 | 596 | 效果见[本页面](https://www.cnblogs.com/enjoy233/p/10328361.html)右上角。 597 | 598 | 599 | 600 | 如果想对该图标进行更多颜色或位置的设置,请参考:[GitHub Ribbons - The GitHub Blog](https://github.blog/2008-12-19-github-ribbons/). 601 | 602 | 603 | 604 | ## 为导航栏设置渐变背景色 605 | 606 | ```css 607 | /* 头部 */ 608 | #header { 609 | position: relative; 610 | height: 280px; 611 | margin: 0; 612 | background: #020031; 613 | background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%); 614 | background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); 615 | background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); 616 | background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%); 617 | background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%); 618 | background: linear-gradient(45deg,#020031 0,#6d3353 100%); 619 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1); 620 | -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 621 | -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 622 | box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 623 | } 624 | ``` 625 | 626 | 627 | 628 | ## 在公告栏添加滚动文字 629 | 630 | 使用`marquee`标签即能实现文字的滚动 631 | 632 | ```html 633 | You will make it! 634 | 635 | ``` 636 | 637 | 效果图: 638 | 639 | ![slide_words](https://files.cnblogs.com/files/enjoy233/slide_words.gif) 640 | 641 | 642 | 643 | 644 | ## 在公告栏加入自己的社交网络账号 - 图片链接 645 | 646 | 可以将自己不同社交网络的账号放在同一个span中,然后嵌入到div里,代码如下: 647 | ```html 648 |
649 | 650 |
651 |
652 |
653 | StackOverflow( 654 | 655 | 406 ) 656 |
657 | 658 |
659 | 660 |