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


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

一、判斷當前用戶

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

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

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

 1 // 編輯
 2 var editUrl, checked = false;
 3 function doWidthEditBtn() {
 4     var profile = $("#profile_block");
 5     var cmtFrmContainer = $("#comment_form_container");
 6     if (!checked &&
 7             (!profile.length
 8             || !profile.children("a").length
 9             || !cmtFrmContainer.length
10             || !cmtFrmContainer.children().length)) {
11         setTimeout(doWidthEditBtn, 100);
12         return;
13     }
14     checked = true;
15 
16     // 評論者名
17     var cmtAuthorIpt = $("#tbCommentAuthor");    
18     if (!cmtAuthorIpt.length) {
19         // 登錄按鈕
20         if (!cmtFrmContainer.children(".login_tips").length) {
21             setTimeout(doWidthEditBtn, 100);
22             return;
23         }
24     } else {
25         // 作者名
26         var author = profile.children("a")[0].innerHTML;
27         var commentAuthor = cmtAuthorIpt.val();
28         if (author == commentAuthor) {
29             // 追加按鈕的代碼其實就這么一小塊。。。
30             var editBtn = $("<a href='" + editUrl + "'>");
31             editBtn.append("<div class='vd-menu-item'>編輯</div>");
32             $("#vd-right-menu").append(editBtn);
33         }
34     }
35 }
36 $("body").ready(function () {
37     var editLink = $("a[href^='http://i.cnblogs.com/EditPosts.aspx?postid=']");
38     // 非首頁
39     if (editLink.length == 1) {
40         editUrl = editLink.attr("href");
41         doWidthEditBtn();
42     }
43 });

相信肯定是有更好的解決辦法的,可惜我並不擅長前端開發與優化,要是有精於此道的高手看到還望不吝賜教: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這個腳本庫也非常多亮點,兩個站點的腳本都是完全開源的,特此安利一波,讓大家感受腳本大法😂


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM