博客园js

博客园可以申请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,这两个引入都只能写在中,而无法写在中.其中引入jquery的原因是博客园自带的jquery有点老,可能有些函数无法使用,这样引入并不会报任何错误.

上面布置好之后,就可以一边编一边调试了,最后代码如下

function code(className) {
    $('.' + className).each(function() {
        var txt=$(this).text()
        if(txt.charCodeAt(0)==10)txt=txt.substr(1)
        var 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 = $("
")
                    $(navbarHeader)
                            .append(
                                    $(""
                                            + userName + "")).append(
                                    $(""
                                            + remark + ""))
                    $("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(
                            $("
").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标签方式.

转载于:https://www.cnblogs.com/weiyinfu/p/5583935.html