Cnblogs關於嵌入js和css的一些黑科技

Pong!

模仿了Steam論壇的 [spoiler] 標簽之后利用 這里 的代碼實現的一個小游戲，由CSS驅動。

[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]

---

從第一次發博客開始，我就一直在研究界面美化，畢竟我也是個強迫症和完美主義者，可以說在界面風格上有着近乎瘋狂的執着，所以花了大量時間來想辦法把界面弄得 有逼格 美觀一些。

我一開始用的模板是BlackLowKey，就是這個

當時看了感覺不錯，低調而不失內涵啊，很符合我的性格，就決定是你了。
不過真正用起來才發現，還是挺丑的……不過也沒辦法，我看主題列表里都是滿含年代感的主題，也就這個好些，看來只能動點大手術了。
980px太窄了，改掉
標題樣式不好看，換掉
簡介里摘要兩個字太礙眼了，去掉
閱讀全文也是，一點用沒有，去掉
……
……
還有很多就不具體說了，總之最后就成了現在你們看到的這個樣子，嗯，還算滿意。不過美化是不會停下的，以后還會改得更適合我喜歡的風格。

回到主題，在改造的過程中我也有意無意的研究了一些黑科技，這里就分享一下。不過說是黑科技，其實也不是很高深的東西，只是我沒見別人的博客用過，而且感覺用在這里會很有意思。

這里所有代碼都只在Chrome測試過，並沒有做瀏覽器適配……

---

目錄^?

• Markdown
  • 選擇器
  • 優先級
  • 整合
  • 代碼高亮
• ImgBox（查看大圖）
  • 上傳
  • 使用
  • 效果
• [spoiler] 標簽
  • 實現
  • Pong!

Markdown

Markdown是整個改造中最費事的地方，原來的Markdown樣式簡直不忍直視，所以我打算完全照用GitHub的樣式。

使用的Markdown編輯器：Editor.md
CSS樣式：github-markdown.css （不過這個好像還是和Github的樣式有點出入，打算以后直接提取GitHub的CSS）

把整個CSS復制到博客后台的頁面定制CSS代碼里。當然在這之前要做一些改動。

這里先把原理寫上，過一段時間我會寫個JS嵌入來處理這些改動。

選擇器

• GitHub的Markdown根節點的class是markdown-body，而博客園的是cnblogs-markdown，所以要把CSS里所有的 .markdown-body 都替換為 .cnblogs-markdown 。
• 這還不算完，博客園里的這個根節點還有一個id屬性，叫cnblogs_post_body，而CSS里id選擇器的優先級是高於class選擇器的，所以剛才的很多樣式都被博客園默認CSS里的 #cnblogs_post_body 選擇器里的樣式給覆蓋了。解決辦法就是在每個Markdown的選擇器前面加上 #cnblogs_post_body 選擇器，強行覆蓋過去。

不過也正因為id選擇器的優先級高於class選擇器，所以第一步可以不用做，直接做第二步就可以了。[spoiler]那為什么還寫出來呢[/spoiler]
理論上來說.markdown-body選擇器是不用保留的，但我這么做會出問題，有待研究。

.markdown-body a {
  background-color: transparent;
}

#cnblogs_post_body a,       /* 加上這一行*/
.markdown-body a {
  background-color: transparent;
}

因為每添加一個選擇器都要包含后面的選擇器（比如上面的a），所以最好寫個小程序或者腳本來處理。

優先級

有那么一會我在調一個樣式，但是發現，明明已經位於最頂級的選擇器了，還是無論怎么改都會被覆蓋掉，就像這樣

折騰了很久，最后仔細看才發現，在博客園默認CSS里，這個樣式后面加上了 !important ，查了一下是代表了最高優先級，坑啊！！

后來看了一下，默認CSS里 .code 類的樣式基本都有 !important，所以把自定義CSS里 .code 下的所有行都加上 !important 就行了。

整合

雖然現在Markdown的CSS可以正確地覆蓋默認CSS了，但還有一個問題需要解決，就是默認CSS里會多出一些樣式。

比如默認CSS里有一個

.xxx {
  margin: 10px;
  padding: 10px;
}

而我的自定義CSS里原先沒有定義 padding 這個樣式，所以就加上一個取消該樣式的語句，就像這樣

.xxx {
  margin: 5px;
  padding: 0; /* 或者 inherit */
}

雖然需要一個一個比對，還要考慮優先級，很麻煩，但也沒有比較好的解決辦法。

不過倒是有個可以不用考慮優先級的辦法：

1. 把主題的CSS文件提取出來
   右鍵審查元素，就可以在樣式欄里找到鏈接打開，比如我的主題是BlackLowKey，鏈接就像這樣
   
2. 在博客后台選中禁用模板默認CSS
3. 把默認CSS和自定義CSS整合到一起
   整合的時候，先把所有主題代碼插入到自定義CSS的前面，然后就可以把不需要的樣式語句直接刪掉了。比如上面的例子，不用再加 padding: 0; 了，而是直接刪掉 padding: 10px; 。

代碼高亮

博客園和GitHub的Markdown解析器不一樣，生成出來高亮部分的划分和類名都不一樣，所以還需要做一些替換，下面是我目前已經找到的類名對應表。

Cnblogs	GitHub	說明
.hljs-keyword	.pl-k	關鍵字
.hljs-title	.pl-en	函數聲明
.hljs-params	.pl-v	參數（博客園里包括參數的類型）
.hljs-string	.pl-s	字符串
.hljs-number	.pl-c1	數字
.hljs-comment	.pl-c	注釋
.hljs-built_in	.pl-c1	內置（對象？）例如document
.hljs-name	.pl-ent	HTML標簽名
.hljs-attr	.pl-e	HTML標簽的屬性
.hljs-selector-class	.pl-e	CSS的類選擇器
.hljs-selector-tag	.pl-ent	CSS的標簽選擇器
.hljs-attribute .dt	.pl-c1	CSS的屬性和值
.at	.pl-en	JS函數調用
.fu	無	Java函數調用

ImgBox（查看大圖）

查看大圖是個很實用的功能，有時候文章里的圖太大了，顯示出來就會被縮小，想查看大圖的話就得右鍵打開，比較麻煩，這時候查看大圖就派上用場了，點一下圖片直接在當前頁面顯示完整圖片，無需跳轉。

使用的庫：jQuery Plugin - imgBox (博客園自帶jQuery)

可能由於年代太久遠了，這個庫還有點小問題，需要做一個改動

// jquery.imgbox.js #51
nr = jQuery.data(elem[0]); // 這里改為 nr = jQuery.data(elem[0]).nr;

上傳

首先要在博客后台申請JS權限，如果沒有權限的話在后台HTML代碼那里嵌入js是無效的。
[spoiler]我申請理由寫的是想在公告欄顯示一個時鍾- -[/spoiler]

把imgBox下載下來，里面只有 imgbox.css 和 jquery.imgbox.js 是我們需要的。

imgbox.css里引用了一些圖片文件，通常情況下要把這些圖片都上傳，然后修改里面的url，但是比較麻煩，而且博客園的文件不能分層，不好管理。
而還好這些圖片都很小，所以我把它們轉成base64嵌入到CSS里面了，你可以直接下載使用我的文件，鏈接在下面。

將這兩個文件上傳到博客文件里，然后就可以在博客后台的頁首或頁腳HTML代碼里嵌入它們了。

<link rel="stylesheet" href="https://files.cnblogs.com/files/plab/imgbox.css"/>
<script src="https://files.cnblogs.com/files/plab/jquery.imgbox3.js"></script>

使用

按照作者頁面的使用方法，需要在 <img> 外邊包圍一個 <a> 標簽，彈出時 <a> 的 title 屬性會顯示在圖片下方

<a title="Title" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

而Markdown生成的圖片會帶有 alt 屬性

![Title](img.jpg)       ----->       <img src="img.jpg" alt="Title">

所以可以用JS來為每個圖片添加 <a> 標簽，並在其 href 填入圖片的 src ， title 填入圖片的 alt

$('#cnblogs_post_body img').each(function() {
    var thiz = $(this);
    var a = $('<a title="' + (thiz.attr('alt') || '') + '" href="' + thiz.attr('src') + '"></a>');
    thiz.wrap(a).parent().imgbox();
});

還可以給加上放大鏡的光標

thiz.css('cursor', 'zoom-in');

再加上一些設置，最后的完整代碼

function setupImgbox() {
    if ($.imgbox) {
        $.extend($.fn.imgbox.defaults, {
            allowMultiple: false,
            speedIn: 0,
            speedOut: 0,
            overlayShow: true
        });

        $('#cnblogs_post_body img').each(function() {
            var thiz = $(this);
            var a = $('<a title="' + (thiz.attr('alt') || '') + '" href="' + thiz.attr('src') + '"></a>');
            thiz.wrap(a).parent().imgbox().css('cursor', 'zoom-in');
        });
    }
}

效果

圖片標題有時候會莫名其妙地消失掉，這個問題還在研究中。

[spoiler] 標簽

前段時間混跡於Steam論壇，里面經常會用這個標簽來表示一些劇透信息或者不想讓別人一眼就看到的話，就像[spoiler]這樣[/spoiler]。
還有萌娘百科也在用，不過把這個叫做“黑幕”。

這個標簽對於豐富文本風格很有用，還可以表達一些通常情況下無法表達的意思，所以我就決定把這個功能搬到這邊來了。

實現

其實特別簡單，只要加上CSS樣式就行了

.spoiler {
  color: #000;
  background-color: #000;
}

.spoiler:hover {
  color: #FFF;
}

然后在需要的地方寫上

<span class="spoiler">yoooooooooo</spoiler>

不過，為了方便使用，我寫了一點JS來支持Steam上的寫法： [spoiler]刪除文本[/spoiler]

function setupSpoiler() {
    var postBody = $('#cnblogs_post_body');
    if(postBody.length !== 0)
        postBody.html(postBody.html().replace(/\[spoiler\]/g, '<span class="spoiler">').replace(/\[\/spoiler\]/g, '</span>'));
}

Pong!

這里附上上面小游戲的代碼，設置好JS代碼后直接放到文章里就可以了，如果有空隙的話可以調整一下 line-height 。Markdown代碼塊沒有復制功能還是比較難受的，回頭研究一個。

<style>
#pong .spoiler {
    cursor: none;
    display: inline-block;
    line-height: 1.5;
}
</style>

<p id="pong">[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]<br>
[spoiler]▐[spoiler] ●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler] ▌[/spoiler]</p>