blog 终于有些东西可写了,也算是慢慢地弄起来了。文章总归不能像写公众号推文一样正经,所以就想着稍微皮一下。但是习惯了正经一时找不到切入点,有种只能意会的神奇感觉。一方面怕皮过了头,一方面怕被正经地对号入座 正好想起了之前萌娘百科有种引用在文章中的东西叫做“黑幕”。于是就想自己整来玩一玩。

用JavaScript检测?

因为想实现的效果差不多就是萌娘百科上的那种效果,粗略地看了一下网页的源代码,发现构造很简单,只是加了个 class="heimu" ,于是理所当然地想着用 JS 检测一下鼠标移动的区域然后更改属性。但是仔细看了一下,萌娘百科上的黑幕显得比这么处理的更加灵动。一方面,它有一个渐变的效果,而不是一下子就“出现”,显得很奇怪。于是我抛弃了这个思路。

CSS的移植

在萌娘百科的网页源代码中,我发现了 https://zh.moegirl.org/load.php?debug=false&lang=zh-hans&modules=site.styles&only=styles&skin=vector 这样一个文件。打开之后发现是个压缩的源代码,正准备格式化来研究一下,发现了链接里的 debug 参数,于是顺手改成了 true ,于是得到了格式化的源代码,顺利找到了黑幕部分的实现代码,居然是一段css 果然我还是css菜鸟

黑幕的实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*文件节选自Common.css*/
/*
MediaWiki:Common.css
*/
/*
* 放置于这里的CSS将应用于所有皮肤
* 萌娘百科仅开放Vector皮肤
* 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css
* 版权协定:知识共享 署名-非商业性使用-相同方式共享 3.0
*/

/* 黑幕模板配合CSS */
/* 把这几行单独拎出来写,否则会被Firefox合并到“.heimu a”这条规则,然后又被上面的“点过外链不变色”规则override */
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited {
color: #252525;
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none;
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
transition: color .13s linear;
color: white;
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
transition: color .13s linear;
color: lightblue;
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off {
transition: color .13s linear;
color: #BA0000;
}

于是把这部分css保存成一个文件,在文章的顶部引用 直接将这一句放进 head.ejs 里和页面一起加载就可以全局一起用啦!效果也会好一些

或者直接部署到 jsDelivr 上,如下引用即可。

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LemonPrefect/sDelivr/css/moegirl.org.heimu.min.css" />

然后在文章中用html代码写标签就达成了移植的效果

Hello World!

1
<span class="heimu" title="a small test">Hello World!</span>

演绎作品的声明

从萌娘百科源代码文件的声明来看,其严格恪守知识共享 署名-非商业性使用-相同方式共享 3.0,在这个版权协定中,有以下原文:

授权

根据本许可的条款和条件,许可人在此授予您全球性、免版税、非独占并且在本作品的著作权存续期间内均有效的许可,就本作品行使以下权利: 1.复制本作品或将本作品收入一个或多个汇编作品中,以及复制汇编作品中收录的本作品; 2.创作和复制演绎作品,但是任何演绎作品,包括任何形式的翻译作品,均需以合理方式清楚地标示、区分或以其他方法表明原始作品已经被修改或变更。例如,翻译作品可以标明“原作品已由英文翻译为西班牙文”,改编作品可以标明“原作品已作修改”; 3.发行、公开传播本作品(包括汇编作品中收录的本作品); 4.发行、公开传播演绎作品。 以上权利可在任何现有的或者以后出现的并为可适用的法律认可的媒体和形式上行使。上述权利包括为在其他媒体和形式上行使权利而必须进行技术性修改的权利。许可人在此保留所有未明示授予的权利,包括但不限于第四条第5项所规定的权利。

演绎作品的定义

演绎作品:指基于本作品,或基于本作品与其他已存在的作品而创作的作品,例如翻译、改编、编曲或对文学、艺术和科学作品的其他变更,包括以摄制电影的方法对作品的改编,或其他任何对本作品进行改造、转换、或改编后的形式,包含任何可确认为源自原始作品的修改形式。在本许可定义之下构成汇编作品的作品不视为演绎作品。为避免疑义,并为本许可之目的,当演绎对象为音乐作品时,将其依时间序列关系与动态影像配合一致而形成的结果,视为演绎作品。

因此,遵守这一协议的演绎作品及其非商业使用不涉及侵权 真的侵权请联系我(小声)