一次成功的白嫖经历_萌娘百科

当你看到这一行字，说明我白嫖成功啦！

额，上一次更新都到了过年前X天。其实不隐瞒诸君，本来想写一篇关于BT下载的文章，只不过太长了，迟迟没有写完。

呜呜呜,快2个月了.

又遭遇了php服务商摔锅、网课袭击我TM还是个学生啊啊啊啊，再加上实在太懒，也就没做了。

一眨眼2个月过去了，博客估计都荒废了，所以暂时移走BT文章，来讲讲最近成功白嫖的东西。

这次是真的白嫖

正文

经常上萌娘百科的同学都知道，萌娘百科自带一个及其搞笑的功能：将黑色方块覆盖在文字上，鼠标移动时反白（就像现在一样）

Wikipedia上是这么评价的：

萌娘百科使用多种方法来增加幽默感：在条目中使用流行动漫术语及恶搞内容来刻画形象；故意写一些文字然后使用删除线来划去；亦或者使用加黑背景来隐藏某些词语，被隐藏的字用鼠标进行选择（反白）就可以看到。这些字大多数是与主条目内容无关的吐槽；另外，部分条目还使用了特殊效果或neta，如“阿卡林”相关的内容通常会被淡化处理，“漫无止境的八月”条目内容被重复了八次，“标题党”条目的标题为随机生成的标题党风格题目，等等。

话说回来这个功能真的很有趣,毕竟我要吐槽的还不少嘛?,删除线已经无法满足我了

所以,我就试图把这个功能照办到我的博客上去.

解决：

当然，我刚开始有三种想法：

1.网上直接抄额,这个似乎是最简单的
2.自己抓包抓资源(结果最后就这么办了)
3.自己写(这个是我最不想做的,因为我最多只能做出画词反白,无法做到鼠标移上去反白)(幸好最终方法二成功白嫖)

搜索

实不相瞒,刚开始就发现了最终目标:

图片
图片

而且截图也是萌娘百科耶( •̀ ω •́ )y！

结果回答让我直接吐血：

图片

而且这还是唯一一个回答。 捂脸痛哭つ﹏⊂

结果在百度上除了上述回答一无所获。

图片

看起来“百度已死”这句话确实适合于程序员

实践

欸，没办法，只能动手实践了。

萌娘百科黑色方框最多的一篇：

图片

就按提乾涉经下手吧!

查看源代码:

图片

搜索提乾涉经

图片

摘下来这么一句:

<ruby><rb><span class="heimu" title="你知道的太多了">提前射精</span></rb><rp>（</rp><rt style="font-size:0.75em"><span class="heimu" title="你知道的太多了"><del>提乾涉经</del></span></rt><rp>）</rp></ruby>

<ruby>和<rb>是html自带的不管,最让我感兴趣的是<span class="heimu" title="你知道的太多了">,因为你知道的太多了这一句就是鼠标放在上面显示的话。

<span>是层,class是样式为heimu,那么,heimu就是我们要找的了!

全局搜索heimu,竟然有300多,大致翻了一下,并没有在裸css(全部是关于bilibili播放器样式的文件…)里找到,那么,开头应用的样式文件就很可疑了.

<link rel="stylesheet" href="/load.php?debug=false&amp;lang=zh-cn&amp;modules=ext.cite.styles%7Cmediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.sectionAnchor%7Cmediawiki.skinning.interface%7Cskins.vector.styles&amp;only=styles&amp;skin=vector" />
<script async="" src="/load.php?debug=false&amp;lang=zh-cn&amp;modules=startup&amp;only=scripts&amp;skin=vector"></script>
<meta name="ResourceLoaderDynamicStyles" content="" />
<link rel="stylesheet" href="/load.php?debug=false&amp;lang=zh-cn&amp;modules=site.styles&amp;only=styles&amp;skin=vector" />
<meta name="generator" content="MediaWiki 1.31.5" />
<meta property="og:image" content="https://img.moegirl.org/common/6/64/%E5%85%A8%E6%98%8E%E6%98%9F.gif" />
<link rel="alternate" media="only screen and (max-width: 720px)" href="https://mzh.moegirl.org/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="萌娘百科 (zh)" />
<link rel="EditURI" type="application/rsd+xml" href="https://zh.moegirl.org/api.php?action=rsd" />
<link rel="alternate" hreflang="zh" href="/zh/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="alternate" hreflang="zh-Hans" href="/zh-hans/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="alternate" hreflang="zh-Hant" href="/zh-hant/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="alternate" hreflang="zh-CN" href="/zh-cn/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="alternate" hreflang="zh-TW" href="/zh-tw/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="alternate" hreflang="x-default" href="/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<link rel="license" href="/%E8%90%8C%E5%A8%98%E7%99%BE%E7%A7%91:%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF" />
<link rel="canonical" href="https://zh.moegirl.org/%E9%AC%BC%E7%95%9C%E5%85%A8%E6%98%8E%E6%98%9F" />
<meta name="keywords" content="萌娘,百科,wiki,梗,娘化,萝莉,动画,漫画,动漫,游戏,音乐,宅腐,ACG,anime,comic,game,GalGame" />
<script src='https://dup.baidustatic.com/js/ds.js'></script>

baidujs和alternate、license、canonical、keywords显然就不是，实际上就只有三个资源：

<link rel="stylesheet" href="/load.php?debug=false&amp;lang=zh-cn&amp;modules=ext.cite.styles%7Cmediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.sectionAnchor%7Cmediawiki.skinning.interface%7Cskins.vector.styles&amp;only=styles&amp;skin=vector" />
<link rel="stylesheet" href="/load.php?debug=false&amp;lang=zh-cn&amp;modules=site.styles&amp;only=styles&amp;skin=vector" />
<script async="" src="/load.php?debug=false&amp;lang=zh-cn&amp;modules=startup&amp;only=scripts&amp;skin=vector"></script>

由于当时不知道是不是通过js实现,顺便把js带上了.

接下来的事情就有点幼稚了:

=>在桌面上新建html,粘贴,补上 “https://zh.moegirl.org” 域名前缀，再添一行<span class="heimu" title="你知道的太多了">提前射精</span>,打开
=>成功显示!
=>删去第一行
=>成功显示
=>删去第二行
=>不成功显示!
=>补回第二行,删去第三行
=>成功显示!

那么,剩下来位置就很清楚了,<link rel="stylesheet" href="/load.php?debug=false&amp;lang=zh-cn&amp;modules=site.styles&amp;only=styles&amp;skin=vector" />便是

直接点开来,结果找到拦截:

图片

emmmm…点开了文档:

按下了F12.

Chrome调试神器！

图片

点击load.php,成功显示:

图片

里面就是啦!

精简

不过这个css太长了,而且大多是废话,手动查找heimu,发现只有这短短几行:


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: #fff
}

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: #add8e6
}

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
}

复制,粘贴,添加<style type="text/css">和</style>,搞定！

当你成功看到这一行,说明我白嫖成功啦!

后记:

当然我没有忘记去协助我那个百度难兄一把.
这个功能真好用我一定会大大发扬的!!
由于最近网课频繁,可能更新很慢了.那么,下次再会!

 目录