制作一个好看的博客园样式模版
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,就可以直接发布。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)