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>