[JS]玩轉博客園的幾個“奇技淫巧”

混跡博客園快一個月了，非常喜歡這塊技術氛圍濃厚的園地，不過在玩轉園子的過程中也發現了幾個小缺陷，不過好在申請了JS權限之后可以解決大部分的不方便，而在不能植入自定義JS的頁面也可以用比較hack的方式來緩解問題。本文就來說一說我這一個月來碰到的幾個問題以及解決之道：D

一、判斷當前用戶

寫隨筆的過程中可能經常需要對頁面進行一下預覽，然而編輯器的預覽功能沒辦法帶上自定義的CSS和JS，所以通常都得保存草稿然后查看隨筆。預覽完之后想要繼續編輯的話就得一直拉到隨筆的結尾，這個實在是不太方便，於是自然就會想到自己加一個位置不那么尷尬的編輯按鈕。
這個時候問題就來了，編輯按鈕顯然是只有我自己用得着，如果隨意地在頁面上加按鈕對看客們的體驗會造成不好的影響，所以就得判斷一下當前登錄的用戶是不是我自己啦。

在這個問題上我一開始饒了很大的彎，不管是AJAX博客園首頁還是“http://passport.cnblogs.com/user/LoginInfo”都宣告失敗，前者右上角的用戶名是異步請求了后者再加載上的，而直接AJAX請求后者會遇到跨域權限的問題。后來又試着用iframe套首頁來取用戶名，但是又嫌棄這個方法太影響頁面加載速度。最后才想起來，評論框的最上面就有用戶名。。。囧

找到這個地方有用戶名之后又遇到了一堆問題，因為這些數據都是異步加載的，想直接在JS里取值還不一定取得到。
結果最終就寫了一大堆的JS來解決這個問題：

// 編輯
var editUrl, checked = false;
function doWidthEditBtn() {
    var profile = $("#profile_block");
    var cmtFrmContainer = $("#comment_form_container");
    if (!checked &&
            (!profile.length
            || !profile.children("a").length
            || !cmtFrmContainer.length
            || !cmtFrmContainer.children().length)) {
        setTimeout(doWidthEditBtn, 100);
        return;
    }
    checked = true;

    // 評論者名
    var cmtAuthorIpt = $("#tbCommentAuthor");    
    if (!cmtAuthorIpt.length) {
        // 登錄按鈕
        if (!cmtFrmContainer.children(".login_tips").length) {
            setTimeout(doWidthEditBtn, 100);
            return;
        }
    } else {
        // 作者名
        var author = profile.children("a")[0].innerHTML;
        var commentAuthor = cmtAuthorIpt.val();
        if (author == commentAuthor) {
            // 追加按鈕的代碼其實就這么一小塊。。。
            var editBtn = $("<a href='" + editUrl + "'>");
            editBtn.append("<div class='vd-menu-item'>編輯</div>");
            $("#vd-right-menu").append(editBtn);
        }
    }
}
$("body").ready(function () {
    var editLink = $("a[href^='http://i.cnblogs.com/EditPosts.aspx?postid=']");
    // 非首頁
    if (editLink.length == 1) {
        editUrl = editLink.attr("href");
        doWidthEditBtn();
    }
});

相信肯定是有更好的解決辦法的，可惜我並不擅長前端開發與優化，要是有精於此道的高手看到還望不吝賜教：D

 

二、自定義樣式切換

博客園給了博主非常高的自由度，其中一塊權限就是自定義CSS樣式。然而並非每一個博主都擅長於頁面設計與美化(比如我。。。)，而且園友們的審美也不盡相同。
從這一篇隨筆的評論中就能看出來，不少讀者不太喜歡我用來護眼的背景色，估計他們當時就在想怎么把我這自定義的背景給去掉。。。既然博客園沒有提供這個切換的功能，那就只能自己來做一個啦：D

最終效果也就是現在頁面頂端的“BG”按鈕，每點一次這個鈕就會讓定義了背景色的CSS在失效和生效間切換。
我是這么寫的：

// background-color
var isNormalBg = getCookie("vd-bg-normal") == "1";
var link = $("<link id='bgColorStyle' type='text/css' rel='hacked'>")
    .attr("href", "http://files.cnblogs.com/files/vd630/background-color.css")
    .appendTo("head");
var normalBg = "rgba(255, 255, 255, 0.5)";
var customBg = "rgba(100, 150, 40, 0.5)";

if (!isNormalBg)
    link.attr("rel", "stylesheet");
$("<div>BG</div>").css({
    "background-color": isNormalBg ? normalBg : customBg,
    "width": "20px",
    "height": "20px",
    "line-height": "20px",
    "text-align": "center",
    "position": "fixed",
    "left": "50%",
    "top": "10px",
    "cursor": "pointer",
    "border": "2px solid black",
    "border-radius": "10px"
}).click(function () {
    isNormalBg = !isNormalBg;
    if (isNormalBg) {
        link.attr("rel", "hacked");
        this.style.backgroundColor = normalBg;
        setCookie("vd-bg-normal", "1");
    } else {
        link.attr("rel", "stylesheet");
        this.style.backgroundColor = customBg;
        setCookie("vd-bg-normal", "0");
    }
}).appendTo("body");

想要失效就把link的rel設置成一個瀏覽器不認識的值，想要生效就設置回"stylesheet"。
為了切換一部分而不是所有的自定義樣式，我把定義背景色的這塊單獨放到了一個CSS文件里，同樣的做法也可以實現在多個不同的樣式之間切換哦：D

三、切換別人的樣式

基於上一個問題的需求，對別人的頁面樣式看不順眼，但是博主又不像我這么善解人意怎么辦？：D
當然，我不想也不會黑掉別人的頁面，博客園又不可能讓我在別人的頁面定義JS，又要方便地切換默認樣式和自定義樣式，我就只能想到一條路可走了：

地址欄腳本注入 + 收藏夾書簽

具體的JS如下：

javascript:
var style = $("link[rel='hacked']");
var pattern = new RegExp("/blog/customcss/|files.cnblogs.com");
if (style.length)
    style.attr("rel", "stylesheet");
else {
    var links = $("link");
    for (var i = 0; i < links.length; i++) {
        if (pattern.test(links[i].href))
            links[i].rel = "hacked";
    }
}
void(0);

通過識別自定義CSS樣式的路徑和來自files目錄的CSS文件，對這些元素做了同樣的hack。
需要注意，最后一行的void(0)是必須的，不然任何有返回值的語句都將導致頁面跳轉。

把上面的這段JS放到瀏覽器的書簽里，就像這樣：

保存以后在別人的頁面里也可以通過這個書簽來切換樣式啦~
不過需要注意的是，雖然可以去掉自定義的樣式，但是那些自定義的元素可是去不掉的，最終導致什么樣的效果就說不好了：D

四、鎖定隨筆編輯頁面

寫隨筆的時候有一件事比較鬧心，文章拖到最后滾輪再往下走的時候，整個頁面就會往下翻了，就像這樣：

全屏模式又經常在編輯HTML和插入代碼后出bug，所以要是能把普通模式下的滾動條去掉就好了。
當然沒法在編輯頁面自定義JS，所以還是得靠書簽：D

javascript:
var bodyStyle = document.body.style;
if (bodyStyle.overflow == "hidden")
    bodyStyle.overflow = "visible";
else
    bodyStyle.overflow = "hidden";
void(0);

保存好這個書簽以后只要調整到自己喜歡的位置，然后只需click這個書簽就可以鎖住文本框不讓它亂滾了：D
解鎖也只需再點一次就行了~

五、轉載文章

博客園雖然有“文章”用於轉載別人寫的內容，卻沒有提供方便的轉載手段，而手動復制頁面里的內容又實在太不方便。
沒關系，我們可以通過書簽來幫忙：D

javascript:
if ($("textarea#copy-essay").length)
    $("textarea#copy-essay").remove();
else
    $("<textarea id='copy-essay'>")
        .appendTo("body")
        .val("<p>原文地址: <a href='" + location + "'>" + location + "</a></p><br/>" + $("#cnblogs_post_body").html())
        .css({
            "position": "fixed",
            "left": "5%",
            "top": "5%",
            "width": "90%",
            "height": "90%"
        })
        .select();
void(0);

當點擊這個書簽之后，只需要按下Ctrl+C就可以輕松復制下文章的HTML啦，再接下來貼到“HTML源碼編輯器”里就行了~
再次點擊就能把文本域給移除了~

用上這些小技巧之后感覺博客園更順手了：D
最后希望博客園能越做越好，讓這些尷尬的問題不再出現就好~

 

2019-5-23更新：

最近才知道tampermonkey這種瀏覽器插件是不是有點晚？😂讓我想起了曾經做過的收藏夾腳本，用腳本管理器的話簡直是提升易用性千百倍。

遂將上文的幾個地址注入腳本整理了一下，加入了跳到評論區的新功能，上傳到了greasyfork。

還有openuserjs這個腳本庫也非常多亮點，兩個站點的腳本都是完全開源的，特此安利一波，讓大家感受腳本大法😂