制作一个好看的博客园样式模版
1-向博客园申请js权限
我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 ，博客园也会在用户邮箱给你发送是否开通js权限的邮件。
2-添加css样式
我们在【管理】-->【设置】-->【博客设置】
3-粘贴代码到"博客园侧边栏公告"
<!-- 添加公告栏时钟 -->
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;">
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
<script type="text/javascript">
//以下是锚点JS，自动生成目录
var a = $(document);
a.ready(function() {
var commentDiv = $("#blog-comments-placeholder");
if (commentDiv.length <= 0) {
return;
}
var b = $('body'),
d = 'sideToolbar',
e = 'sideCatalog',
f = 'sideCatalog-catalog',
g = 'sideCatalogBtn',
h = 'sideToolbar-up',
i = '<div id="sideToolbar"style="display:none;bottom:150px;"><div class="sideCatalogBg"id="sideCatalog"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-catalog"><ul class="nav"style="width:225px;zoom:1;list-style: none;"></ul></div></div><a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable" style="position:absolute;bottom:10px;"></a></div>',
j = '',
k = 500,
l = 0,
m = 0,
n = 0,
//限制存在个数，如数量过多，则只显示h2，不显示h3
//o, p = 13,
o, p = 100,
q = true,
r = true,
s = b;
if(s.length === 0) {
return
};
b.append(i);
//指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
//o = s.find(':header');
o = $('#cnblogs_post_body').find(':header');
if(o.length > p) {
r = false;
var t = s.find('h3');
var u = s.find('h4');
if(t.length + u.length > p) {
q = false
}
};
o.each(function(t) {
var u = $(this),
v = u[0];
var title = u.text();
var text = u.text();
u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
//if (!u.attr('id')) {
// u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
//};
if(text.length > 12) text = text.substr(0, 12) + "...";
if(v.localName === 'h3') {
l++;
m = 0;
//if(text.length > 12) text = text.substr(0, 12) + "...";
j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot" style="top:8px;"></span></li>';
} else if(v.localName === 'h4') {
m++;
n = 0;
if(q) {
//if(text.length > 12) text = text.substr(0, 12) + "...";
j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
}
} else if(v.localName === 'h5') {
n++;
if(r) {
j += '<li class="h3Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';
}
}
});
$('#' + f + '>ul').html(j);
b.data('spy', 'scroll');
b.data('target', '.sideCatalogBg');
$('body').scrollspy({
target: '.sideCatalogBg'
});
$sideCatelog = $('#' + e);
$sideToolbar = $('#' + d);
$('#sideCatalogBtn').hover(function () {
$sideCatelog.css('display', 'block');
});
$sideToolbar.hover(function(){}, function(){
$sideCatelog.css('display', 'none');
});
$('#' + h).on('click', function() {
$("html,body").animate({
scrollTop: 0
}, 500)
});
a.on('scroll', function() {
var t = a.scrollTop();
if(t > k) {
$sideToolbar.css('display', 'block');
$('#gotop').show()
} else {
$sideToolbar.css('display', 'none')
$('#gotop').hide()
}
})
});
//以上是锚点JS
</script>
4-粘贴代码到"页面定制css代码"
/*标题h1 h2 h3样式*/
#cnblogs_post_body {color: black;font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;font-size: 16px;
}
#cnblogs_post_body h1 {background: #2B6695;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 !important;padding: 8px 0 5px 5px;text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {background: #ddbb26;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 15px;font-weight: bold;height: 24px;line-height: 23px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3 {background: #5B9600;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 13px;font-weight: bold;height: 24px;line-height: 20px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4 {background: #910096;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 13px;font-weight: bold;height: 24px;line-height: 20px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;
}
/* 文章title自定义带动画样式 */
.postTitle {
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
clear: both;
background-color: #FBF9F9;
margin-bottom: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 20px;
border-left: 3px solid #21759b;
padding-left: 20px;
font-size: 20px;
border-radius:0px;
}
.postTitle a:hover {
text-decoration: none;
margin-left: 20px;
color: #E00000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
transition: all 0.4s linear 0s;
}
/*scroll to top*/
#scrollTop div{
left:0;
overflow:hidden;
position:absolute;
top:0;
width:149px;
margin:0;
padding:0
}
#scrollTop .level-2{
background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
display:none;
height:250px;
opacity:0;
z-index:1
}
#scrollTop .level-3{
background:none repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
height:150px;
z-index:2
}
#scrollTop{
background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
cursor:default;
display:block;
height:180px;
overflow:hidden;
position:fixed;
right:0;
top:90%;
width:149px;
z-index:11;
margin:-125px 0 0;
padding:0
}
/*目录样式*/
#sideCatalog a{
font-size:12px;
font-weight:normal !important;
}
/*好看的滚动条*/
::-webkit-scrollbar{
width:10px!important;
height:10px!important;
-webkit-appearance:none;
}
::-webkit-scrollbar-thumb{
height:5px;border:1px solid transparent;
border-top:none;border-bottom:none;
-webkit-border-radius:6px;
background-color:rgba(0,0,0,.3);
background-clip:padding-box;
}
#div_digg{
padding: 5px;
border-radius: 5px;
position: fixed;
left: 0;
bottom: 80px;
width:80px;
z-index:100;
}
.diggit{
background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
width: 60px;
height: 60px;
}
#div_digg .diggnum{
position: absolute;
bottom: -20px;
left: 6px;
background: #D0D0D0;
padding: 2px 0;
display: block;
color: #555;
font-size: 12px;
text-align: center;
width: 60px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-weight: bold;
}
/* 删除反对按钮,有点邪恶了 */
.buryit{
display: none;
}
5-粘贴代码到"页首HTML代码"
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">
<link href="http://files.cnblogs.com/files/jiangxuling/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="http://files.cnblogs.com/files/jiangxuling/scrollspy.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/jiangxuling/stickUp.min.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/jiangxuling/cnblog-scroller.js" type="text/javascript"></script>
6-粘贴代码到"页脚HTML代码"
<script type="text/javascript">
$(function(){
$('#blogTitle h1').addClass('bounceInLeft animated');
$('#blogTitle h2').addClass('bounceInRight animated');
// 删除反对按钮
$('.buryit').remove();
initCommentData();
});
function initCommentData() {
$('.feedbackItem').each(function() {
var text = $(this).find('.feedbackListSubtitle .layer').text();
// 将楼层信息放到data里面
// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
$(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
});
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 监听获取评论ajax事件
if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
initCommentData();
}
});
</script>
7-上传以下文件到文件里,如下图
四个js文件下载地址:
链接：https://pan.baidu.com/s/1rkQB6LiKDoxLjdEndW7W9g
提取码：y4d0
--来自百度网盘超级会员V2的分享
`
小技巧1:
生成md文件的可上传图片方法(不需要再为图片的本地上传担心了)
参考网址:https://www.cnblogs.com/world-explorer/p/16857287.html
安装dotnet-cnblogs.v1.4.2.win-x86.zip 下载地址:https://github.com/stulzq/dotnet-cnblogs-tool/releases
第一次运行dotnet-cnblog.exe需要配置以下信息，博客ID即为博客文章首页的后缀部分，用户名为自己的博客用户名，密码需要输入MetaWeblog访问令牌，可在设置的其他设置选项查看。
如果绑定过程中输入错误，可以使用以下命令重置配置： dotnet-cnblog reset
配置右键快捷菜单
打开「我的电脑」，在地址栏中输入%AppData%\Microsoft\Windows\SendTo并按下回车键，进入以后创建一个bat文件，命名为上传至博客园.bat，内容如下
配置环境变量:
配置右键快捷菜单
打开「我的电脑」，在地址栏中输入%AppData%\Microsoft\Windows\SendTo并按下回车键，进入以后创建一个bat文件，命名为上传至博客园.bat，内容如下,如我的安装路径为E:\Cnblogs\dotnet-cnblogs.v1.4.2.win-x86
<dotnet-cnblog刚才的安装位置路径>\dotnet-cnblog.exe proc -f %1
pause
保存后可在右键 发送到的快捷菜单中看到上传至博客园.bat选项，
保存后可在右键 发送到的快捷菜单中看到上传至博客园.bat选项，
插件使用
选择一个编写好的md文档，右键点击选择发送到上传至博客园，就会看到生成一个原文件基础上新增后缀“-cnblog”的md文件，打开直接复制到博客园文档编辑栏就可发布，图片已自动替换为网络URL，就可以直接发布。
