博客园细节美化,打磨

感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题,本蒟蒻是在原主题的基础上改的。
原主题地址:https://www.cnblogs.com/summertime-wu/p/9356736.html。
本人新手,如有可改进之处,欢迎指出

优化 添加 fork me on github 角标,节省菜单空间

在页首代码中添加了以下内容:

<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>

然后在 css 中把这个 div 的 width 和 height 调成了 149px,z-index 调成了 999。
又在页尾代码中注释 “通过滚动条控制导航条的展现隐藏” 的后面添加了 $(".forkme").fadeOut()/fadeIn();。完结撒花!

菜单移动端自适应

在移动端把菜单折叠成≡的样式,说来话长,可以直接见代码(模仿hexo的next主题)。

标题高度自适应(避免标题太长导致被正文挡住) #mypost_title { position: absolute; bottom: 0px; } 添加评论功能,美化文本框

去除原来评论区域的cssdisplay: none,然后在css中添加以下内容:

div.commentform input.author { background-color: #ffba4d; width: 150px; border-radius: 8px; } div.commentform textarea.comment_textarea { border-radius: 5px; } 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; } 修改不能识别主页的 bug(比如说把 BlogE 写成 bLoGe,或者点击回到顶端按钮之后刷新页面等等)

由于博客园博客主页可以由多种方式访问,http/https,甚至你的自定义域名都不用区分大小写!
举个栗子:https://www.cnblogs.com/BlogE 与 https://www.cnblogs.com/bLoGe 都可以访问我的博客主页。
那么这时你就需要一个一个的特判,在if的括号里写64个条件!
正难则反,其实我们只需确认网址不包括/p/即可!

var now_url = window.location.href.toLowerCase(); if (now_url.indexOf("bloge/p/")>=0) { blablabla... } 在主页隐藏收藏文章按钮

如题,闲的没事就在判断主页的if里面给收藏图标来了个hide()

在文章页面显示文章的 tags

原作者在文章页面把文章分类显示了两遍,我作为一名强迫症晚期患者,就改成了上面显示分类,下面显示文章tag。修改afterAjax()这个函数:

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)"); } 修复原文地址显示错误

有时在博文中点击完目录跳转之后再刷新页面,setCopyright()函数生成的版权信息会显示(以这篇文章为例)https://www.cnblogs.com/BlogE/p/beautifycnblogs.html#_caption4这样的东西。然而我却不想要他显示url后面的#_caption4这个玩意。何以解忧?唯有slice()!于是我改写了一下这个函数

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); }, 美化代码块

使用highlight.js换了个代码主题,重写了添加代码行号的函数(原理是给每行代码外边套一个<ol>和<li>标签,借鉴这篇文章),设置了代码不折行等等,同时模仿了的代码块颜色样式。

菜单添加 Font Awesome 图标

觉得菜单没有图标略显单调,于是引用了Font Awesome的css和js。如果你的博客因此加载过慢,你可以删掉掉页首html中形如<i></i>的东西,和注释<!-- ............Font Awesome............ -->后边的内容。

细节美化

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

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