混跡博客園快一個月了,非常喜歡這塊技術氛圍濃厚的園地,不過在玩轉園子的過程中也發現了幾個小缺陷,不過好在申請了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這個腳本庫也非常多亮點,兩個站點的腳本都是完全開源的,特此安利一波,讓大家感受腳本大法😂