前端小白也能快速学会的博客园博客美化全攻略
程序员文章站
2022-12-17 08:21:37
前端小白也能快速学会的博客园博客美化全攻略 [TOC] 美化方法论简介 一般而言，需要选一个默认的skin，然后在该基础上调整。 官方介绍： 博客皮肤模板 官方文档 【博客园skin开发文档 】: 宽屏模版： SimpleMemory Minyx2_Lite lessIsMore BlueSky 博 ......
目录
前端小白也能快速学会的博客园博客美化全攻略
美化方法论简介
一般而言，需要选一个默认的skin，然后在该基础上调整。
官方介绍：
博客皮肤模板
官方文档 - 【博客园skin开发文档 】:
https://docs.qq.com/sheet/dzfjdegvurw5qrmja
宽屏模版：
simplememory
minyx2_lite
lessismore
bluesky
博客园布局的组成及其对应关系:
准备工作
- 首先你得有个cnblogs博客
- 打开 博客后台管理
- 申请js权限
- 在博客皮肤选项卡中将博客皮肤设置为：
lessismore - 将 页面定制.css 复制到 页面定制css代码 代码框内
- 将 页首.html 复制到 页首html代码 代码框内
- 将 页尾.html 复制到 页脚html代码 代码框内
- 保存，即可用
附源码:
yanglr/beautify-cnblogs: beautify-cnblogs
https://github.com/yanglr/beautify-cnblogs
欢迎fork或star~
js权限申请
登陆后点击“我的博客”——“管理”——“设置”———在下拉后找到“博客侧边栏公告”，后方有一个“申请js权限”。
或者也可进博客园园子页面(https://home.cnblogs.com/feed/all/)，发状态@博客园团队，申请开通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;
}
在页面顶部添加"自定义搜索"功能
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部分:
html部分：
<h1 style="margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1e90ff;"> </h1>
<div class="side_search">
<input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="输入 回车搜索" tabindex="1" autofocus x-webkit-speech>
<div id="auto_div">
</div>
<input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空">
<input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索">
<input onclick="zzk_go2()" type="button" class="search_btn2" value="园内搜索">
</div>
效果图:
在页面顶部添加"音乐播放器"(flash)播放背景音乐
<div style="display: table; text-align: center; width: 40%; height: 100%;"> <embed src="https://music.163.com/style/swf/widget.swf?sid=26237342&type=2&auto=0&width=320&height=66" width="340" height="86" allownetworking="all" ></embed> </div>
效果图:
在页面顶部添加"fork me on github"图标
页首html需要添加
<div>
<a href="http://github.com/yanglr" target="_blank" style="position: absolute;right: 0; top: 0; z-index: 100;">
<img src="http://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_git-right-link.gif" alt="fork me on github">
</a>
</div>
效果图见本博客右上角。
为导航栏设置渐变背景色
/* 头部 */
#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标签即能实现文字的滚动
<marquee><a href="#"><font color="blue" size="4">you will make it! </marquee>
效果图:
在公告栏加入自己的社交网络账号 - 图片链接
<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://*.com/users/6075331/bravo-young" target="_blank" class="mr5 "><strong>*</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>
效果图:
在公告栏添加一个能旋转的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);
}
<div id="feed">
<a href="https://www.cnblogs.com/enjoy233/rss" title="订阅feed" target="_blank">
<img id="feed_icon" src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_rss.png" alt="" style="border: 0pt none;" width = 60 height=60>
</a>
</div>
效果图:
在公共栏添加"小人时钟"(flash)
<embed wmode="transparent" src="https://files.cnblogs.com/files/enjoy233/honehone_clock_tr.swf" quality="high" bgcolor="#fdf6e3" width="200" height="120" name="honehoneclock" align="middle" allowscriptaccess="always"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
效果图:
在公共栏添加"站点统计"功能
打开网站：http://www.flagcounter.com/ ，无需注册，点击黄色按钮"get your flag counter"，即可生成嵌入该插件的html代码。
生成的html代码如下：
<div> <a href="https://info.flagcounter.com/lcgi"><img src="https://s04.flagcounter.com/count2/lcgi/bg_ffffff/txt_000000/border_cccccc/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="flag counter" border="0"></a> <div>
最后将该代码加入到公告栏的html代码中即能生效。
在公告栏中加入"自定义搜索"(popup弹窗)
实现的基本原理:
onclick = "window.open()", target = newwindow
代码:
效果图:
页面底部添加"回到顶部" + "收藏" + "快速评论"功能
js部分:
<script language="javascript" type="text/javascript">
//生成目录索引列表
function generatecontentlist()
{
var jquery_h3_list = $('#cnblogs_post_body h4');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labeltop"></a>';
content += '<div id="navcategory">';
content += '<p style="font-size:18px"><b>阅读目录</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labeltop">回到顶部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
generatecontentlist();
</script>
html部分：
<div class="scrollbtn" id="scrollbtn">
<ul class="clearfix">
<li class="sb-home">
<a href="http://www.cnblogs.com/enjoy233" class="ff-t" title="首页"></a>
</li>
<li class="sb-comment">
<a href="#blog-comments-placeholder" onclick="$('#tbcommentbody').focus();" class="ff-t" title="添加评论"></a>
</li>
<li class="sb-share"><a onclick="if(cb_entryid !=undefined){addtowz(cb_entryid)}" href="javascript:void(0);" title="收藏"></a></li>
<li class="sb-gotop" id="gotop" style="display: list-item;">
<a href="#top" title="回顶部"></a>
</li>
</ul>
</div>
效果图:
"自动移动的目录"功能
代码:
ref
nav.my.css
javascript
generate contents
效果图:
改进评论的显示样式
改成了微信聊天的样式。
纯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;
}
在公告栏添加"友情链接"
cnblogs博客后台提供了"链接"功能，这个就是用来添加友情链接的。
设置方法:
效果图:
"博客签名"功能
虽然cnblogs博客后台提供了"博客签名"功能，测试发现ie下不能用，只好改为用jquery来实现了。
<script type="text/javascript">
$(document).ready(function(){
$("#cnblogs_post_body").append('<br/><hr/><div style="border: 2px dotted #4d90fe; padding: 2px; background-color: lightgray"> 作者：<a href="http://www.cnblogs.com/enjoy233/" target="_blank" title="enjoy233的博客" style="color: brown">bravo yeung</a><br> 出处：<a href="http://www.cnblogs.com/enjoy233/" target="_blank" title="http://www.cnblogs.com/enjoy233/" style="color: blue">http://www.cnblogs.com/enjoy233/</a> <br>如果您觉得阅读本文对您有帮助，请点击一下右下方的<b style="color: blue; font-size: 16px">推荐</b>按钮，您的<b style="color: blue; font-size: 16px">推荐</b>将是我写作的最大动力！ <br>版权声明：本文为博主原创或转载文章，欢迎转载，<b>但转载文章之后必须在文章页面明显位置注明出处</b>，否则保留追究法律责任的权利。</div>');
});
</script>
禁用页面的"选中复制"功能
在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中进行相应的设置即可。
#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="这里是你文章或随笔分类的链接地址，自己修改下面同理"> 这里更改下拉具体内容 </a> --> <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>
效果图:
微博秀的嵌入(支持http/https访问)
参看本人的另一篇文章 当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效) - enjoy233 即可。
效果图(见本博客左侧公告栏):
分享组件的嵌入(支持http/https访问)
在页脚.html中加入如下代码:
<!-- baidu share begin -->
<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>
<!-- baidu share end -->
效果图:
打赏功能
基于开源插件 tctip-v1.0.3 来实现~
在页脚.html中插入如下代码即可:
<!-- tctip 支付赞赏/打赏 -->
<script type="text/javascript" src="https://files.cnblogs.com/files/enjoy233/tctip-1.0.3.min.js"></script> <!-- js文件引入 -->
<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>
效果图:
复制文字 自动加版权
页首html中加入如下代码:
<script language="javascript" type="text/javascript">
jquery(document).on('copy', function(e)
{
var selected = window.getselection();
var copyfooter = '<br>---------------------<br>著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
+ '作者：bravo yeung<br> 源地址：' + document.location.href
+ '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！';
var copyholder = $('<div>', {html: selected + copyfooter, style: {position: 'absolute', left: '-99999px'}});
$('body').append(copyholder);
selected.selectallchildren( copyholder[0] );
window.settimeout(function() {
copyholder.remove();
},0);
});
</script>
效果图:
上一篇： 表弟开了家面馆
下一篇： scrapy爬取美女图片