博客园可以申请js权限,给管理员发封邮件就可以了.
一旦控制了js,就控制了整个DOM树.CSS和JS都可以从外部引入(比如github).也可以把js和css放在博客园的文件中再引入.如果js和css代码较少,可以直接写在"管理"页中.
引入github上的js:链接为https://raw.githubusercontent.com/weidiao/myCode/master/cnblog.js,报错"strict MIME type checking is enabled",解决方法把链接改成https://rawgit.com/weidiao/myCode/master/cnblog.js
因为raw.githubusercontent.com在Response中设置了X-Content-Type-Options:nosniff ，告诉浏览器强制检查资源的MIME，进行加载。
MIME类型检查是一种安全机制.
经过试验,rawgit是有延迟的,也就是说github上变了之后,rawgit不会马上跟着变,有可能是rawgit服务器使用了缓存.这样就使得很难调试自己的DOM操作是否正确,最好的解决方法是,找一个服务器上放一个最简单的Servlet,get方法用来获取,post方法用来更改
@WebServlet("/Main")
public class Main extends HttpServlet {
String s = "";
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.getWriter().print(s);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
s = request.getParameter("data");
}
}
然后编一段java代码来向服务器提交cnblog.js文件
public class Main { static String url = "http://182.254.156.22:8080/cnblog/Main"; public static void main(String[] args) throws ClientProtocolException, IOException { Scanner cin = new Scanner(System.in); while (cin.hasNext()) { cin.nextLine(); String s = new String(Files.readAllBytes(Paths.get("cnblog.js"))); System.out.println(s); Request.Post(url).bodyForm(new BasicNameValuePair("data", s)) .execute(); } cin.close(); } }
需要在博客园的管理页面从CDN引入bootstrap和jquery,这两个引入都只能写在<body>中,而无法写在<head>中.其中引入jquery的原因是博客园自带的jquery有点老,可能有些函数无法使用,这样引入并不会报任何错误.
上面布置好之后,就可以一边编一边调试了,最后代码如下
function code(className) { $('.' + className).each(function() { var txt=$(this).text() if(txt.charCodeAt(0)==10)txt=txt.substr(1) var pre = $('<pre></pre>').text(txt) $(this).removeClass(className) $(this).empty() $(this).append(pre) $(pre).css({ 'font-family' : 'Consolas', 'font-size' : '16px' }) }) } $(document) .ready( function() { // 导航栏 var userName = $("#blogTitle h1").text(), remark = $( "#blogTitle h2").text() $("#blogTitle").remove() var navbarHeader = $("<div class='navbar-header'></div>") $(navbarHeader) .append( $("<a class='navbar-brand' href='http://www.cnblogs.com/weidiao'>" + userName + "</a>")).append( $("<span class='navbar-text'><small>" + remark + "<small></span>")) $("body").css({ "padding-top" : "50px", "font-size" : "16px", "font-family" : "serif" }) $("#home").attr("class", "container") $("#navigator").attr("class", "navbar navbar-inverse navbar-fixed-top").prepend( navbarHeader) $("#navigator #navList").attr("class", "nav navbar-nav") var blogStatsStr = $(".blogStats").children().text() $(".blogStats").remove() $("#navigator").append( $("<p></p>").text(blogStatsStr).attr("class", "navbar-text navbar-right").css("padding-right","20px")) // main $("#main").addClass("row") $("#mainContent").addClass("col-md-9") $("#sideBar").addClass("col-md-3") //sidebar,异步加载 //$("#sideBar ul").addClass("list-group") //$("#sideBar ul li").addClass("list-group-item") // 代码高亮 var first = 'cnblogs_code', second = 'cnblogs_Highlighter' code(first) code(second) })
上面代码包括,对导航栏的调整,对main块使用bootstrap的十二列布局(主要内容占9格,侧边栏占3格),对代码样式做了调整,使用了最简单的pre标签方式.