Cnblogs关于嵌入js和css的有的黑科技(science and technology),中规中矩

N52就是,不用狡辩了。所以近期除外JL
Dark之外作者觉着唯有本作比较好玩了。是多少个契合逻辑的,符合设定的全部轶闻。

1是20年前出的,作者中学才看的,当时早已觉得很赞。这么多年过去,按理说,2的场地只会更炫酷,确实是,看得很过瘾,尤其是空战那段,比星球大战要好,小编觉着那才是该有的科幻战争。传说上和1相近,1出的时候好评如潮,2继承那种套路确实难免会被观者指责太套路无新意,确实有点,没有看1的时候的那种压迫危害感。有网友评论有些地点设定很bug,作者以为不算是,即使有认真看过1,会发现那个设定都是吻合前作设定逻辑。而且有许多向1致敬情怀的地点,即便喜欢过第二部的观众看会觉得满意。除了情节有点套路,小编觉着最心痛的是照旧威尔Smith没能回归出演,真的太可惜。QQ和安慕希的植入广告也太生硬了
忍不住吐槽。还有Angelababy的剧中人物真的不足挂齿,戏份不少只是没点角色刻画,看得本人好窘迫,不太喜片方这种投其所好中国市面的做法。2作为承上启下的创作毕竟那样了,希望末了作3能在创意上给咱们点惊喜从而结局。总的来说值得去影院观影,第3部没看其实也没涉及,当新轶闻看也行,卷土重来就是在此以前被战胜的外星人来算账

Pong!

Pong!

提议各位先去看《闪点悖论》之后再来看本片。

© 本文版权归我  One Peng.
 所有,任何款式转发请联系俺。

模仿了Steam论坛的 [spoiler]
标签之后选择这里的代码达成的一个小游戏,由CSS驱动。

模仿了Steam论坛的 [spoiler]
标签之后选拔这里的代码落成的2个小游戏,由CSS驱动。

本段落为fangirling+spoiler:老太爷出来了自家要哭了;自从万圣节过后小编就没见过Silver
Banshee了,还挺激动的;死射大爷真是太太太可爱了。

[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][Cnblogs关于嵌入js和css的有的黑科技(science and technology),中规中矩。spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]
[spoiler]▐[spoiler]
●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler][spoiler]●[/spoiler]
▌[/spoiler]

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

以下为多少不满+spoiler:说好的Dr
Fate很难选呢?zatara都比那货合适多了;沃尔er做了浑身整容吗?认不出来了;knockout好歹是新神,而且可以和kon打得不分上下来着,本作里有点弱;Bronze
Tiger就这么死了太可惜了,作者领会是故事情节须求,但真可惜了;概念挺好的,但自笔者回想pass是硬币来着并不是卡片啊,嘛;哈利存在感太弱了也没真派上怎么着用,角色刻画的般般吧;总体挺不错的,不过本人依然认为鬼世界相关难点要么问康Stan丁可能Lucifer可靠一些。



© 本文版权归小编  Cerberus-z
 全部,任何形式转发请联系小编。

从第两次发博客早先,作者就径直在研究界面美化,毕竟小编也是个网瘾和完美主义者,可以说在界面风格上保有近乎疯狂的执着,所以花了汪洋时日来想艺术把界面弄得 有逼格 美妙一些。

从第3遍发博客开端,小编就直接在探究界面美化,毕竟本身也是个性心理障碍和完美主义者,可以说在界面风格上存有类似疯狂的执着,所以花了多量日子来想办法把界面弄得 有逼格 姣好一些。

自个儿一起头用的模版是BlackLowKey,就是其一

自己一发轫用的模板是BlackLowKey,就是以此

新葡萄京娱乐场网址 1

新葡萄京娱乐场网址 2

当即看了感觉没错,低调而不失内涵啊,很符合我的性格,就控制是您了。
而是真的用起来才意识,如故挺丑的……但是也不能,作者看宗旨列表里都以满含时代感的大旨,也就那么些好些,看来只可以动点大手术了。
980px太窄了,改掉
标题样式不好看,换掉
简介里摘要三个字太刺眼了,去掉
开卷全文也是,一点用没有,去掉
……
……
还有不少就不现实说了,总之最后就成了明日你们见到的那些样子,嗯,还算知足。但是美化是不会终止的,未来还会改得更适合小编高兴的作风。

及时看了感到不错,低调而不失内涵啊,很符合我的性格,就决定是您了。
只是实在用起来才察觉,依旧挺丑的……可是也不可以,作者看焦点列表里都以满含时期感的主旨,也就以此好些,看来只好动点大手术了。
980px太窄了,改掉
标题样式不好看,换掉
简介里摘要八个字太刺眼了,去掉
翻阅全文也是,一点用没有,去掉
……
……
再有不少就不现实说了,总而言之最终就成了后天你们看看的那一个样子,嗯,还算知足。可是美化是不会告一段落的,将来还会改得更适合小编欢娱的风格。

归来核心,在改造的经过中自小编也顺带的琢磨了有的黑科技(science and technology),那里就享受一下。不过就是黑科学和技术,其实也不是很深邃的东西,只是小编没见旁人的博客用过,而且感觉用在那边会很风趣。

归来核心,在改造的经过中自作者也顺手的钻研了一部分黑科学技术,这里就享受一下。不过就是黑科学和技术,其实也不是很深邃的东西,只是自我没见旁人的博客用过,而且觉得用在此地会很有意思。

那里拥有代码都只在Chrome测试过,并不曾做浏览器适配……

此处拥有代码都只在Chrome测试过,并不曾做浏览器适配……



目录?

目录?

  • Markdown
    • 选择器
    • 优先级
    • 整合
    • 代码高亮
  • ImgBox(查看大图)
    • 上传
    • 使用
    • 效果
  • [spoiler]
    标签

    • 实现
    • Pong!
  • Markdown
    • 选择器
    • 优先级
    • 整合
    • 代码高亮
  • ImgBox(查看大图)
    • 上传
    • 使用
    • 效果
  • [spoiler]
    标签

    • 实现
    • Pong!

Markdown

马克down是总体改造中最麻烦的地点,原来的马克down样式简直不忍直视,所以本身打算完全照用GitHub的体裁。

使用的Markdown编辑器:Editor.md
CSS样式:github-markdown.css
(不过那个近乎如故和Github的样式有点出入,打算今后直接领取GitHub的CSS)

把全部CSS复制到博客后台的页面定制CSS代码里。当然在那后边要做一些改动。

那里先把原理写上,过一段时间我会写个JS嵌入来处理那个改变。

Markdown

马克down是全数改造中最费力的地点,原来的马克down样式大致不忍直视,所以作者打算完全照用GitHub的体裁。

使用的Markdown编辑器:Editor.md
CSS样式:github-markdown.css
(可是那么些就如依旧和Github的样式有点出入,打算今后直接领取GitHub的CSS)

把整个CSS复制到博客后台的页面定制CSS代码里。当然在这在此以前要做一些改动。

那边先把原理写上,过一段时间小编会写个JS嵌入来拍卖这个改动。

选择器

  • GitHub的马克down根节点的class是markdown-body,而和讯的是cnblogs-markdown,所以要把CSS里装有的
    .markdown-body 都替换为 .cnblogs-markdown
  • 那还不算完,今日头条里的那么些根节点还有三个id属性,叫cnblogs_post_body,而CSS里id接纳器的预先级是高于class采取器的,所以刚刚的不少体裁都被微博暗中同意CSS里的
    #cnblogs_post_body
    拔取器里的体裁给覆盖了。解决办法就是在各种马克down的拔取器后面加上
    #cnblogs_post_body 接纳器,强行覆盖过去。

不过也正因为id采用器的先行级高于class采纳器,所以率先步可以绝不做,直接做第3步就可以了。[spoiler]这为何还写出来呢[/spoiler]
答辩上来说.markdown-body采用器是不用保留的,但本身那样做会出标题,有待讨论。

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

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

因为每添加3个选拔器都要含有前边的接纳器(比如上面的a),所以最好写个小程序依然脚本来处理。

选择器

  • GitHub的马克down根节点的class是markdown-body,而和讯的是cnblogs-markdown,所以要把CSS里装有的
    .markdown-body 都替换为 .cnblogs-markdown
  • 那还不算完,微博里的那么些根节点还有壹个id属性,叫cnblogs_post_body,而CSS里id拔取器的先期级是高于class采用器的,所以刚刚的不在少数样式都被搜狐默许CSS里的
    #cnblogs_post_body
    采用器里的样式给覆盖了。解决办法就是在各个马克down的接纳器前边加上
    #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;
}

因为每添加2个采用器都要包括前面的拔取器(比如下面的a),所以最好写个小程序依旧脚本来处理。

优先级

有那么一会本身在调1个样式,不过发现,明明已经身处最拔尖的采取器了,照旧无论怎么改都会被遮盖掉,就像那样

新葡萄京娱乐场网址 3

煎熬了很久,最终仔细看才察觉,在博客园暗中认同CSS里,这几个样式前边加上了
!important ,查了一下是代表了参天优先级,坑啊!!

后来看了瞬间,暗中认同CSS里 .code 类的样式基本都有
!important,所以把自定义CSS里 .code 下的有所行都加上 !important
就行了。

优先级

有那么一会自身在调七个体裁,但是发现,明明已经放在最超级的选用器了,还是无论怎么改都会被覆盖掉,就如这么

新葡萄京娱乐场网址 4

折腾了很久,最终仔细看才意识,在博客园默许CSS里,那个样式前边加上了
!important ,查了须臾间是意味了高高的优先级,坑啊!!

新兴看了须臾间,暗中同意CSS里 .code 类的体裁基本都有
!important,所以把自定义CSS里 .code 下的持有行都加上 !important
就行了。

整合

就算以后马克down的CSS可以正确地覆盖默许CSS了,但还有三个题材亟需缓解,就是暗许CSS里会多出一部分体制。

比如说默许CSS里有三个

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

而本人的自定义CSS里原本没有定义 padding
那么些样式,所以就拉长2个收回该样式的言辞,似乎这么

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

虽说须要一个二个比对,还要考虑优先级,很麻烦,但也绝非相比好的化解办法。

只是倒是有个可以毫无考虑优先级的格局:

  1. 把宗旨的CSS文件提取出来
    右键审查成分,就足以在体制栏里找到链接打开,比如自身的大旨是BlackLowKey,链接如同这么
    新葡萄京娱乐场网址 5
  2. 在博客后台选中剥夺模板默许CSS
  3. 把暗许CSS和自定义CSS整合到一块儿
    结缘的时候,先把具备核心代码插入到自定义CSS的面前,然后就可以把不须求的体裁语句直接删掉了。比如上边的例子,不用再加
    padding: 0; 了,而是径直删掉 padding: 10px;

整合

尽管如此将来马克down的CSS可以正确地覆盖默认CSS了,但还有二个题材须求缓解,就是默认CSS里会多出一部分样式。

比如默许CSS里有1个

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

而本人的自定义CSS里原本没有定义 padding
那几个样式,所以就增加2个废除该样式的话语,就好像这么

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

虽说须要三个二个比对,还要考虑优先级,很劳累,但也不曾相比好的化解办法。

不过倒是有个可以毫无考虑优先级的方法:

  1. 把大旨的CSS文件提取出来
    右键审查成分,就足以在体制栏里找到链接打开,比如自身的核心是BlackLowKey,链接就像是这么
    新葡萄京娱乐场网址 6
  2. 在博客后台选中剥夺模板默许CSS
  3. 把暗中同意CSS和自定义CSS整合到一块儿
    结合的时候,先把全体宗旨代码插入到自定义CSS的先头,然后就足以把不须求的样式语句直接删掉了。比如上边的例证,不用再加
    padding: 0; 了,而是平昔删掉 padding: 10px;

代码高亮

网易和GitHub的马克down解析器不平等,生成出来高亮部分的划分和类名都不同,所以还亟需做一些替换,上面是自家当下早已找到的类名对应表。

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函数调用

代码高亮

新浪和GitHub的马克down解析器不均等,生成出来高亮部分的剪切和类名都不一样,所以还亟需做一些替换,上边是本身日前曾经找到的类名对应表。

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)

兴许出于时期太久远了,这几个库还有点不成难题,必要做3个变动

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

ImgBox(查看大图)

查看大图是个很实用的法力,有时候小说里的图太大了,突显出来就会被减弱,想查看大图的话就得右键打开,相比较费劲,那时候查看大图就派上用场了,点一下图纸直接在当前页面显示完整图片,无需跳转。

动用的库:jQuery Plugin –
imgBox

(知乎自带jQuery)

兴许出于时代太久远了,那个库还有点小意思,需求做1个变动

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

上传

先是要在博客后台申请JS权限,如若没有权力的话在后台HTML代码那里停放js是无效的。
[spoiler]自己申请理由写的是想在布告栏突显二个时钟- -[/spoiler]

把imgBox下载下来,里面唯有 imgbox.cssjquery.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>

上传

先是要在博客后台申请JS权限,如若没有权力的话在后台HTML代码那里停放js是无效的。
[spoiler]作者申请理由写的是想在公告栏突显三个时钟- -[/spoiler]

把imgBox下载下来,里面只有 imgbox.cssjquery.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="新葡萄京娱乐场网址 7" /></a>

而马克down生成的图纸会蕴藏 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');
        });
    }
}

使用

依据小编页面的使用方法,需求在 <img> 外边包围1个 <a> 标签,弹出时
<a>title 属性会显示在图片下方

<a title="Title" href="big_image.jpg"><img src="thumb.jpg" alt="新葡萄京娱乐场网址 8" /></a>

而马克down生成的图片会包罗 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');
        });
    }
}

效果

图表标题有时候会莫明其妙地消失掉,那么些题材还在研商中。

新葡萄京娱乐场网址 9

效果

图表标题有时候会莫名其妙地消失掉,这一个题材还在钻探中。

新葡萄京娱乐场网址 10

[spoiler] 标签

前段时间混迹于Steam论坛,里面平时会用那么些标签来代表一些剧透新闻如故不想让旁人一眼就观察的话,就像是[spoiler]这样[/spoiler]。
还有萌娘百科也在用,可是把这么些号称“黑幕”。

其一标签对于增进文本风格很有用,还足以表达一些惯常状态下不能表明的意味,所以自个儿就控制把那几个功效搬到那边来了。

[spoiler] 标签

前段时间混迹于Steam论坛,里面日常会用那几个标签来表示一些剧透新闻照旧不想令人家一眼就看看的话,就像是[spoiler]这样[/spoiler]。
还有新葡萄京娱乐场网址 ,萌娘百科也在用,可是把那一个名叫“黑幕”。

本条标签对于增进文本风格很有用,还能发挥一些惯常状态下不只怕发挥的意趣,所以自身就决定把这一个效果搬到那边来了。

实现

实质上尤其不难,只要加上CSS样式就行了

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

.spoiler:hover {
  color: #FFF;
}

接下来在必要的地点写上

yoooooooooo</spoiler>

而是,为了方便使用,小编写了一点JS来支持Steam上的写法:
[spoiler]去除文本[/spoiler]

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

实现

其实尤其简单,只要添加CSS样式就行了

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

.spoiler:hover {
  color: #FFF;
}

然后在急需的地点写上

yoooooooooo</spoiler>

但是,为了方便使用,作者写了少数JS来协助Steam上的写法:
[spoiler]去除文本[/spoiler]

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

Pong!

那里附上上边小游戏的代码,设置好JS代码后直接放到小说里就可以了,如果有空子的话可以调整一下
line-height 。马克down代码块没有复制功效依旧比较痛楚的,回头研商二个。

<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>

Pong!

这里附上上边小游戏的代码,设置好JS代码后直接放到小说里就可以了,倘诺有空当的话可以调整一下
line-height 。马克down代码块没有复制作用如故相比难熬的,回头研商一个。

<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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图