博客园细节美化,打磨 (2)

做了以下的移动端调整(下面代码不包含移动端折叠菜单的内容)

/*移动端*/ @media screen and (max-width: 1000px) { .forkme {display: none;} #searchblogpost {display: none !important;} #mypost_title {left: 0%;} #right_meun {display: none !important;} #main {width: 80%;} } 测试中功能 博文列表中显示文章插图

在文章的摘要中“插入右侧图片”时,如要显示该图片,只需为其加上一个“on”的class,比如:

<img src="http://github.com/liriliri/eruda/raw/master/doc/banner.jpg"> 开启站内搜索

目前版本的代码默认不会显示站内搜索(效果不稳定),如果您想要尝试这个功能,可以取消注释this.setSearch。欢迎在评论区中反馈使用中的出现的bug肯定不会出现bug。

最终代码及使用方法

主题选择bluesky,然后把以下代码中我的用户名和自定义域名等内容替换成你自己的,然后再把所有代码复制到博客设置中对应的位置即可。

自定义css .forkme { position: fixed; right: 0px; top: 0px; height: 149px; width: 149px; z-index: 999; } #sideBar{ display: none; } #mainContent{ width: 100%; box-shadow: 0 0 0; border-radius: 0px; opacity: 0; transition:0.5s; margin-top:40px; } #main{ width: 45%; background-color: white; /*max-width: 700px;*/ } body{ background-image: none; background-color: white; font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important; line-height: 1.8; } #cnblogs_post_body{ font-size: 16px; } .c_b_p_desc_readmore { display: -webkit-inline-box; } #taglist_title { font-size: 22px; } #posts { box-shadow: 0 0 5px #251a1a4f; border-radius: 15px; margin-bottom: 38px; padding-top: 32px; } .post-img { position: relative; display: inherit; min-height: 250px; background-position: 50% 50%; background-size: cover; } .dayTitle { border: 1px solid #f5e305; margin-top: 20px; margin-left: 32px; margin-right: 32px; } .postTitle { margin-left: 32px; margin-right: 32px; } #posts .postCon { margin-left: 32px; margin-right: 32px; } #green_channel{ display: none; } #post_next_prev{ display: none; } .post-img{ /*margin-top: 0;*/ border-top-left-radius: 15px; border-top-right-radius: 15px; } #EntryTag { display: none; } /** 去除广告 */ #cb_post_title_url{ display: none; } #cnblogs_c1{ display: none; } #cnblogs_c2{ display: none; } #ad_t2{ display: none; } #kb_block{ display:none } #under_post_news{ display:none } #header{ display:none } #BlogPostCategory{ display: none; } #comment_nav{ display: none; } .postDesc { border-bottom: none; margin-left: 32px; margin-right: 32px; } #author_profile_follow{ display: none; } /** 自定义样式 */ /* 加载条 */ #myProgressBar{ width: 15%; height: 2px; background-color: #eb5055; position: fixed; top: 0; left: 0; z-index: 999; } #nprogress { pointer-events: none; } #nprogress .bar { background: #eb5055; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #eb5055; border-left-color: #eb5055; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** 导航栏 */ #mynavbar{ width: 100%; height: 70px; position: fixed; display: block; top: 0px; z-index: 100; background-color: white; transition:0.5s ease-in-out; box-shadow: 0 1px 5px rgba(0,0,0,.1); } #mynavbar_menu{ display: inline-block; width: auto; position: fixed; right: 13%; /* float: right; */ text-align: right; line-height: 68px; } #mynavbar_menu a{ padding: 0 10px; font-size: 14px; outline: 0; color: #313131bd !important; font-weight: 900; text-decoration: none; } #mynavbar_menu a:hover{ color: #eb5055 !important; } #searchblogpost { display: inline-block; } /** 头部 */ #myheader{ background-color: #75b7ef!important; margin-top:70px; position: relative; width: 100%; height: 300px; } #myheader_bg{ width:100%; height:300px; background-position: center; background-size: cover; -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); position: absolute; } #myheader_cover{ position: relative; margin-top: 70px; width: 100%; height: 300px; background-color: rgba(0, 0, 0, 0.25); } #mypost_title{ position: absolute; bottom: 0px; left: 20%; padding: 30px 25px 20px; max-width: 700px; color: white; transition:0.5s; opacity: 0; } #mypost_title_e{ margin: 0; padding: 5px 0 15px; } #mypost_title_e a{ border: 1px solid #6fa3ef; border-radius: 15px; background: #6fa3ef; color: #fff;display: inline-block; margin: 4px 8px 0 0; padding: 0 15px; letter-spacing: 0; font-weight: 600; font-size: 13px;outline: 0;text-decoration: none; transition: 0.5s; } #mypost_title_e a:nth-child(1n) { color: #fff; border: 1px solid #6fa3ef; border-radius: 15px; background: #6fa3ef; } #mypost_title_e a:nth-child(2n) { color: #fff; border: 1px solid #ff9800; border-radius: 15px; background: #ff9800 } #mypost_title_e a:nth-child(3n) { color: #fff; border: 1px solid #46c47c; border-radius: 15px; background: #46c47c } #mypost_title_e a:nth-child(4n) { color: #fff; border: 1px solid #f9bb3c; border-radius: 15px; background: #f9bb3c } #mypost_title_e a:nth-child(5n) { color: #fff; border: 1px solid #bc99c4; border-radius: 15px; background: #bc99c4 } #mypost_title_e a:nth-child(6n) { color: #fff; border: 1px solid #e8583d; border-radius: 15px; background: #e8583d } #mypost_title_e a:before{ content: "# " } #mypost_title_e a:hover{ background-color: white; border: 1px solid white; color:black; } #mypost_title_f a{ color: white; } #mypost_title_f a:hover{ text-decoration:none; } /** 右侧导航 */ #right_meun{ position: fixed; z-index: 2; top: 100px; left: 70%; display: none; text-align: left; border-left: 1px solid #ddd; font-size: 12px; } #right_meun li{ list-style: none!important; } #right_meun a{ display: inline-table; margin-left: 5px; white-space: nowrap; text-decoration: none; color: #313131 !important; outline: 0; border-bottom: 0 !important; } #right_meun a:hover{ color: #eb5055; } #right_meun>li::before { position: relative; top: 0; left: -4px; display: inline-block; width: 7px; height: 7px; content: ''; border-radius: 50%; background-color: #eb5055; } /* 底部导航 */ #post-bottom-bar{ position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; height: 3pc; border-top: 1px solid #e0e0e0; background-color: #fff; margin: 0; padding: 0; transition: 0.5s ease-in-out; } #post-bottom-bar a{ text-decoration: none!important; } .post-bottom-bar .bottom-bar-inner{ margin: 0 auto; padding: 0 10px; max-width: 900px; } .bottom-bar-items{ margin: 0 0 0 10px; color: #313131; font-size: 14px !important; line-height: 3pc;float: left; } .post-bottom-bar{ margin: 0 0 0 10px; color: #313131; font-size: 14px; line-height: 3pc; } .post-bottom-bar .social-share .bottom-bar-item { padding: 4px; } .post-bottom-bar .bottom-bar-item.bottom-bar-facebook a { background-color: #4267b2; color: #fff; } .post-bottom-bar .social-share .bottom-bar-item a { padding: 2px 10px; border-radius: 15px; } .post-bottom-bar .bottom-bar-item a { margin: 0; padding: 9pt; border: 0; background: 0 0; color: #313131; font-size: 14px; line-height: 3pc; cursor: pointer; } .post-bottom-bar .bottom-bar-item.bottom-bar-twitter a { background-color: #1b95e0; color: #fff; } .post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a { background-color: #5f5f5f; color: #fff; } .bottom-bar-item a:hover{ color: #eb5055; } /** MarkDown样式调整 */ .cnblogs-markdown .hljs { font-size: 16px!important; padding: 15px!important; border: 0 solid #3d7e9a !important; border-left-width: 5px!important; white-space: pre; border-radius: 0px !important; } .cnblogs-markdown code { background: #eee !important; border: 0px !important; color: #333 !important; font-size: 16px!important; } code ol { padding-left: 20px !important; } .cnblogs-markdown h2{ font-weight: 500; margin: 20px 0; } .cnblogs-markdown h2:before{ content: "#"; color: #eb5055; position: relative; top: 0; left: -12px; } #cnblogs_post_body h3{ font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; } .cnblogs-markdown h3:before{ content: "##"; color: #2175bc; position: relative; top: 0; left: -8px; } .postBody blockquote, .postCon blockquote{ background-image: none; border-left: 5px solid #DDDFE4; background-color: #EEF0F4; width: 100%; padding: 6px 0 6px 25px; } blockquote{ border:0; } .postBody ul li, .postCon ul li { list-style: initial; } a:hover { text-decoration: none; } #cnblogs_post_body a { color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; } /* code加上行数 */ .cnblogs-markdown .syntaxhighlighter table td.code { width:95% !important; } .cnblogs-markdown .syntaxhighlighter code { font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; padding: 0 !important; border-radius: 0 !important; background-color: transparent !important; } .cnblogs-markdown .syntaxhighlighter code:before, .cnblogs-markdown .syntaxhighlighter code:before { letter-spacing: -0.5em; } /** 更改浏览器滚动条和选中字体背景颜色 */ ::selection { background-color: #FF5722; color: #fff; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { min-height: 28px; background-color: #c2c2c2; background-clip: padding-box; } ::-webkit-scrollbar-track-piece { background-color: #fff; } *, :after, :before { box-sizing: border-box; } #under_post_kb{ display: none; } /* 评论优化 */ input[type=button] { width: 80px; height: 30px; border-width: 0px; border-radius: 200px; background: #1E90FF; cursor: pointer; outline: none; font-family: Microsoft YaHei; color: white; } .commentbox_title_left { color: #3397ff; } div.commentform textarea.comment_textarea { border-radius: 5px; } div.commentform input.author { background-color: #ffba4d; width: 150px; border-radius: 8px; } #commentform_title { display: none; } .login_tips { display: none; } /*移动端*/ @media screen and (max-width: 1000px) { .forkme {display: none;} .post-img {min-height: 175px;} #mynavbar_menu { display: none; margin-top: 16px; padding-left: 0; text-align: left; width: 100px; box-shadow: 0 0 1px wheat; line-height: 49px; } #mynavbar_menu a { display: block; padding: 0 10px; background-color: #eee; } .site-nav-toggle {display: inline-block !important;} #searchblogpost {display: none !important;} #mypost_title {left: 0%;} #right_meun {display: none !important;} #main {width: 80%;} } /* 菜单三条杠 */ span.btn-bar { display: block; margin-top: 4px; width: 22px; height: 2px; background: #555; border-radius: 1px; } .site-nav-toggle button { margin: 0; padding: 1px 6px; background: transparent; border: none; } .site-nav-toggle { position: fixed; right: 7%; line-height: 73px; } 页首html <!-- ............自定义首部代码开始............ --> <!-- 自定义进度条 --> <div></div> <!-- github fork me --> <div> <a href="http://github.com/ethan-enhe"><img src="http://i.loli.net/2019/02/03/5c56804b26dd9.png" alt="Fork me on GitHub"></a> </div> <!-- 自定义导航条 --> <div> <div> <a href="http://www.cnblogs.com/BlogE"> <img src="http://i.loli.net/2019/01/31/5c52e907bfa56.png"> </a> <div> <a href="http://www.cnblogs.com/BlogE/"><i></i> Home</a> <a href="http://www.cnblogs.com/BlogE/tag/"><i></i> Tags</a> <a href="http://www.cnblogs.com/BlogE/rss"><i></i> Rss</a> <a href="http://www.cnblogs.com/BlogE/p/about.html"><i></i> About</a> </div> <div> <button aria-label="切换导航栏"> <span></span> <span></span> <span></span> </button> </div> </div> </div> <!-- 自定义头部锚点 --> <a></a> <!-- 自定义头部 --> <div> <!-- 背景图片 --> <div></div> <!-- 遮罩层 --> <div> <!-- 博客标题 --> <div> <div>Blog-E</div> <div></div> <div><a href="http://www.cnblogs.com/BlogE/">路漫漫其修远兮,吾将上下而求索。</a></div> </div> </div> </div> <link href="http://files.cnblogs.com/files/BlogE/tomorrow.css"> <script src="http://files.cnblogs.com/files/BlogE/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> <!-- ............Font Awesome............ --> <script defer src="http://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <script defer src="http://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> <link href="http://use.fontawesome.com/releases/v5.0.13/css/all.css"> <!-- ............自定义首部代码结束............ --> 页尾html <!-- ............自定义尾部代码开始............ --> <div> <div> <!-- 左边 --> <div> <span> <a href="javascript:void(0)" target="_blank">点赞</a> </span> <span> <a href="javascript:void(0)"" target="_blank">关注</a> </span> <span> <a href="javascript:void(0)" target="_blank">收藏</a> </span> </div> <!-- 右边 --> <div> <span><a href="javascript:void(0);">←</a></span> <span><a href="javascript:void(0);">→</a></span> <span><a href="#mfooter">↓</a></span> <span><a href="#mtop">↑</a></span> </div> </div> </div> <a></a> <!-- ............自定义尾部代码结束............ --> <script type="text/javascript" src="http://unpkg.com/nprogress@0.2.0/nprogress.js"></script> <script type="text/javascript"> //设置title var tt = document.title; tt = tt.replace("Ethan_Zhou - 博客园", "Blog-E"); document.title = tt; /** 用来设置初始时需要执行的js */ $(document).ready(function(){ //加载顶部进度条 NProgress.start(); NProgress.done(); $("#myProgressBar").hide(); //设置背景图片地址 if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") { $("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")"); }else{ $("#myheader_bg").css("background-image","url(https://i.loli.net/2019/01/31/5c52e73546215.jpg)"); } //标题 $("#mypost_title_h").html($("#cb_post_title_url").html()); //正文和标题淡入 $("#mainContent").css("opacity","1"); $("#mainContent").css("margin-top","0"); $("#mypost_title").css("opacity","1"); //更改iocn图标 var linkObject = document.createElement("link"); linkObject.rel = "shortcut icon"; linkObject.href = "http://i.loli.net/2019/01/31/5c52e907bfa56.png"; document.getElementsByTagName("head")[0].appendChild(linkObject); }) /** 设置ajax请求加载完所有数据时执行的js */ setTimeout(afterAjax,1000); function afterAjax(){ //假如不是首页 var now_url = window.location.href.toLowerCase(); if (now_url.indexOf("bloge/p/")>=0) { //获取文章标签 var tag = null; if ($("#EntryTag").html()!=null && $("#EntryTag").html()!= "") { tag = $("#EntryTag").html(); tag = tag.substring(3,tag.length); }else{ tag = "<a href='http://cnblogs.com/BlogE'>暂无标签</a>"; } //获取文章分类 var classification = null; if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") { classification = $("#BlogPostCategory").html(); classification = classification.substring(3,classification.length); }else{ classification = "<a href='http://cnblogs.com/BlogE'>暂未分类</a>"; } var ftitle = "Published on "+ $("#post-date").html() + " in " + classification + " with <a href='http://cnblogs.com/BlogE'>Blog-E</a>"; //设置副标题标题 $("#mypost_title_f").html(ftitle); //设置标题标签按钮 $("#mypost_title_e").html(tag.replace(",","")); //设置底部导航条上一篇下一篇文章 var pnp = $("#post_next_prev a"); $("#mbottom-left").attr("href",pnp[1].href); if (pnp.length>2) { $("#mbottom-right").attr("href",pnp[3].href); } } $("#myheader_bg").css("filter","blur(0px)"); } /** 自定义的js方法 */ //设置底部导航条点击事件 $("#bottom-g").click(function(){ follow('5dfde587-1816-e711-845c-ac853d9f53ac'); }) $("#bottom-s").click(function(){ AddToWz(cb_entryId);return false; }) var now_url = window.location.href.toLowerCase(); if (now_url.indexOf("bloge/p/")==-1 && now_url.indexOf("bloge/diary/")==-1){ $("#bottom-s").hide(); $("#bottom-d").html("友链"); $("#bottom-d").attr("href","https://www.cnblogs.com/BlogE/p/links.html"); //分离博文 var allday = $(".day"); allday.each(function() { var nowday = $(this); var post = $("<div></div>"); nowday.children().each(function() { if ($(this).attr("id") != "posts") { if($(this).attr("class") == "postCon"){ var pic=$(this).find("img"); if(pic.length==1 && pic.hasClass("on")){ var postimg=$("<div></div>"); postimg.css("background-image","url("+pic.attr("src")+")"); post.prepend(postimg); post.css("padding-top","0"); pic.hide(); } } post.append($(this)); } if ($(this).attr("class") == "postDesc") { $(".forFlow").append(post); post = $("<div></div>"); } }) }) allday.remove(); $(".forFlow").append($(".topicListFooter[id!=homepage_top_pager]")); }else{ var url = window.location.href; var lastUrl = url.substring(url.lastIndexOf("http://www.likecs.com/")+1); var mpageId = lastUrl.substring(0,lastUrl.indexOf(".")); $("#bottom-d").click(function(){ DiggIt(mpageId,cb_blogId,1); green_channel_success(this,'谢谢推荐!'); }) } //通过滚动条控制导航条的展现隐藏 var oldScrollNum = 0; window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; //下滑 if (t>oldScrollNum) { if (t>120) { $("#mynavbar").css("margin-top","-70px");//顶部导航 $("#post-bottom-bar").css("bottom","-3pc");//底部导航 $(".forkme").fadeOut(); if(document.body.clientWidth<1000){ $("#mynavbar_menu").slideUp(); var ON_CLASS_NAME = 'site-nav-on'; $(".site-nav-toggle").removeClass(ON_CLASS_NAME); } } if (t>300) { $("#right_meun").css("display","inline-block");//右侧导航 } //上拉 }else{ //防止用a链接跳转也触发效果 if (oldScrollNum-t<20) { $("#mynavbar").css("margin-top","0px");//顶部导航 $("#post-bottom-bar").css("bottom","0");//底部导航 if(document.body.clientWidth>=1000) $(".forkme").fadeIn(); } if (t<=300) { $("#right_meun").css("display","none");//右侧导航 } } oldScrollNum = t; } //移动端菜单收缩/展开 $(".site-nav-toggle").click(function() { var ON_CLASS_NAME = 'site-nav-on'; if ($(this).hasClass(ON_CLASS_NAME)) { $("#mynavbar_menu").slideUp(); $(this).removeClass(ON_CLASS_NAME); } else { $("#mynavbar_menu").slideDown(); $(this).addClass(ON_CLASS_NAME); } }) //背景大图点击模糊||清晰 $("#myheader_cover").click(function(){ if ($("#myheader_bg").css("filter") == "blur(3px)") { $("#myheader_bg").css("filter","blur(0px)"); }else{ $("#myheader_bg").css("filter","blur(3px)"); } }) </script> <script type="text/javascript"> var setMyBlog = { setCopyright: function() { //设置版权信息,转载出处自动根据页面url生成 var info_str = '<p>作者:<a target="_blank">@ethan_zhou</a><br>'+ '本文为作者原创,转载请注明出处:<a></a></p><hr></hr>'; info = $(info_str); info_a = info.find("a"); url = window.location.href; if (url.indexOf("#") >= 0) url = url.slice(0, url.indexOf("#")); $(info_a[0]).attr("href","http://github.com/ethan-enhe"); $(info_a[1]).attr("href",url).text(url); $("#cnblogs_post_body").prepend(info); }, setCodeRow: function(){ // 代码行号显示 $("pre code").each(function(){ $(this).html("<ol><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ol>"); }); }, setAtarget: function() { // 博客内的链接在新窗口打开 $("#cnblogs_post_body a").each(function(){ this.target = "_blank"; }) }, setContent: function() { // 根据h2、h3标签自动生成目录 var captions_ori = $("#cnblogs_post_body h2"), captions_ori2 = $("#cnblogs_post_body h3"), captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(), content = $("<ul></ul>"); $("#cnblogs_post_body").prepend(content.append(captions)); var index = -1,index2 = -1; captions.replaceWith(function(){ var self = this; if(self.tagName == "H2" || self.tagName == "h2"){ // 设置点击目录跳转 index += 1; $('<a></a>').insertBefore(captions_ori[index]); return '<li><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>'; } else { // add by BlogE 增加h3链接跳转 index2 += 1; $('<a></a>').insertBefore(captions_ori2[index2]); $("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "'>" +self.innerHTML+"</a></li>"); return ; } }); }, setSearch: function() { var search = document.createElement('div'); search.innerHTML="<input type=\"text\" id=\"q\" onkeydown=\"return zzk_go_enter(event);\" class=\"input_my_zzk\">&nbsp;<input onclick=\"zzk_go()\" type=\"button\" value=\"找找看\" id=\"btnZzk\" class=\"btn_my_zzk\">"; search.setAttribute('id','searchblogpost'); document.getElementById("mynavbar_menu").appendChild(search); }, runAll: function() { /* 运行所有方法 * setAtarget() 博客园内标签新窗口打开 * setContent() 设置目录(仅在窗口够大时) * setCopyright() 设置版权信息 * setSearch() 开启站内搜 * setCodeRow() 代码行号显示 */ this.setAtarget(); this.setContent(); this.setCopyright(); //this.setSearch(); this.setCodeRow(); } } setMyBlog.runAll(); </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywysw.html