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項所規定的權利。

演繹作品的定義

演繹作品:指基於本作品,或基於本作品與其他已存在的作品而創作的作品,例如翻譯、改編、編曲或對文學、藝術和科學作品的其他變更,包括以攝製電影的方法對作品的改編,或其他任何對本作品進行改造、轉換、或改編後的形式,包含任何可確認為源自原始作品的修改形式。在本許可定義之下構成彙編作品的作品不視為演繹作品。為避免疑義,併為本許可之目的,當演繹對象為音樂作品時,將其依時間序列關係與動態影像配合一致而形成的結果,視為演繹作品。

因此,遵守這一協議的演繹作品及其非商業使用不涉及侵權 真的侵權請聯繫我(小聲)