0%

今天博主在进行WordPress博客考古活动时,得知了一个彩蛋。来源见:WordPress的彩蛋
在WordPress文章中使用Compare Revisions功能,如果两个相比较的文章ID一致,就会触发彩蛋。其效果是显示文字:

Wake up XXX… The matrix has you. Follow the white rabbit. Don’t let this happen again.

这是一个致敬《黑客帝国》的彩蛋。经过对WordPress历史版本的分析,发现该彩蛋已在4.x版本移除。通过分析3.0.2版本的文件,找到了该版本的revision.phprevision-js.php文件,并大致研究出了其实现方法。在revision.php中有这样一串代码:

1
2
3
4
5
6
// If we're comparing a revision to itself, redirect to the 'view' page for that revision or the edit page for that post
if ( $left_revision->ID == $right_revision->ID ) {
$redirect = get_edit_post_link( $left_revision->ID );
include( './js/revisions-js.php' );
break;
}

而在revision-js.php中,有一串经过了eval混淆的代码,用于向用户输出彩蛋内容。 目前博主正在尝试反混淆代码,并复现这个彩蛋。如果你有兴趣,也可以下载revision-js.php进行研究。

本文更新于2017年11月11日:
由于博主并不准备搭建旧版本WordPress的运行环境,于是决定从代码入手,分析这个彩蛋。
revisions-js.php中定义的函数dvortr()作用是使用一对一的替换来加密字符串,该文件中有两次调用此函数:

1
dvortr( "Erb-y n.y ydco dall.b aiacbv Wa ce]-irxajt- dp.u]-$-VIr XajtWzaVv" )

1
dvortr( 'Eabi.p!' )

经过解密,其输出分别为

1
Don't let this happen again. <a id='goback' href='$'>Go Back</a>

Danger!
而定义的变量$j作用是包含jQuery库,$n是获取的当前用户名,$d是noscript时的输出。通过替换掉一些WordPress中定义的函数,博主成功地使部分解码后的PHP文件在本地Apache服务器成功运行。并且,博主还重新制作了这个彩蛋,现在它已经可以在ZSQ.IM以某种方式触发~
下面附上整个解密过程中所用到的文件。其中revision.phprevisions-js.php是原文件,decode.php是部分解密后的文件,decode.js是浏览器获取的匿名js文件,decoder.html是根据原文件的加密算法编写的加密、解密脚本。
WordPressEasterEgg

上帝说,要有
\begin{eqnarray*} \nabla\cdot\vec{E}&=&\frac{\rho}{\epsilon_0}\\ \nabla\cdot\vec{B}&=&0\\ \nabla\times\vec{E}&=&-\frac{\partial B}{\partial t}\\ \nabla\times\vec{B}&=&\mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t}\right)\\ \end{eqnarray*}
于是就有了光。
注:以上文字旨在测试 \LaTeX 兼容情况。
使用方法:在HTML页面中,通过

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!--config后的参数可以根据需求自定义,默认为?config=default-->

即可加载MathJax,该脚本将会渲染页面中的所有 \LaTeX 公式。尽情地按照 \LaTeX 语法插入公式就好啦!
如果要在WordPress中使用,可以通过在编辑文章界面,选择「文本」(如果使用「可视化」,字符将被转义,导致脚本无法加载),输入以上内容达到相同效果。

使用时还需要注意的是,根据官方文档,标记行内公式的$符号默认不会被识别。你可以在HTML页面中加入以下配置以启用之:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
TeX: {equationNumbers: { autoNumber: "AMS" }},
"HTML-CSS": { linebreaks: { automatic: true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
SVG: { linebreaks: { automatic: true }}
});
</script>

其中inlineMath项启用了$符号标记的行内公式,而linebreaks项则会在屏幕宽度较小时自动使公式换行。

更多信息可以访问官方网站:MathJax


本文更新于2018年5月20日:
在Hexo中,如果使用了NexT主题,可以通过配置主题目录下的_config.yml简单地使用MathJax。在_config.yml中找到mathjax选项,将其子选项设置为enable: true,并在需要加载MathJax的文章的Front-matter中添加mathjax: true即可。

本文更新于2018年10月3日:
还有一种解决方案是调用知乎的API:https://www.zhihu.com/equation?tex=,通过GET请求,就可以将你的 \LaTeX 表达式转换为公式的图片。

Sublime Text是一款非常优秀的编辑器:速度快,界面简洁,插件众多;并且能够跨平台使用,在Mac和Windows上都发挥完美。虽然是一款付费软件,但作者很厚道地给了无限期的试用期限。这一切正如其官网广告词说的那样:The text editor you'll fall in love with.
Skim是一款免费轻量的PDF阅读、标注工具,布局贴心友好,与OS X自带的Previewer相比,Skim能更好的注释PDF文件。
\LaTeX 是一款权威的科技论文排版系统,不仅可以写论文,也可以处理日常的各种文档工作,甚至是做幻灯片。相比于Microsoft Word, \LaTeX 最大的优势是对于复杂公式的编辑与排版非常漂亮,并且用简单的命令就可以生成脚注、索引、目录和参考文献等复杂的结构。这一切优点都使得世界上众多的科学家们不再需要身兼作者与排版工两职,从而将更多的精力集中于文章内容本身。
本文的目的是将上述三种软件综合部署在Mac上。完成之后,你将可以在Sublime Text里面进行 \LaTeX 代码编辑,用Skim预览生成的PDF文件。更重要的是,让你觉得,写论文也可以是一件很优美的事。

阅读全文 »

最近博主在学习前端设计的时候,知道了很多实用的小技巧,于是决定写一篇文章总结一下。

use strict

在一些脚本中,你或许会在最前面看到单独的一行"use strict",这是严格模式的声明。
严格模式对正常的JavaScript语义做了一些更改:

  • 严格模式通过抛出错误来消除了一些原有静默错误。
  • 严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷:有时候,相同的代码,严格模式可以比非严格模式下运行得更快。
  • 严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。

JavaScript传递参数

这是一种向外部JS文件传入参数的方法。在HTML中写入

1
<script tag1="1" src="example.js"></script>

example.js中写入

1
2
3
4
var scripts = document.getElementsByTagName("script"),
script_len = scripts.length,
script = scripts[script_len - 1],
tag1 = script.getAttribute("tag1");

这样即可获取tag1的值,可以说是非常的巧妙了。

document.write

这个函数可以直接向HTML文档写入任何内容。比如,你需要根据屏幕宽度来加载不同js时,如果希望写入的内容是<script src="main.js"></script>,那么只要这样就可以了:

1
<script> if (screen.width >= 1200) document.write('<script src="main.js"><\/script>'); </script>

JavaScript的字符串可以使用单引号或双引号表示,但是由于要写入的内容里有双引号,使用document.write时应该用单引号括起来,否则需要将双引号转义为\",避免造成错误。如果有多层引号,应将最内层的引号改为HTML转义字符&quot;。而对于这里出现的/,将其改写为了\/,原因是浏览器会认为</script>是闭合标签,造成代码解析错误。
通过document.write可以实现根据不同的条件向HTML写入不同的内容,但是要注意,如果这个时候页面已经加载完毕,document.write会导致页面的内容被清空、覆盖。因此,这个方法不被推荐使用,应该通过其它方式代替。

<noscript>标签

对于某些不支持JavaScript的上古浏览器,以及对于停用了JavaScript的用户,<noscript>标签可能非常有用。

1
2
3
4
5
<noscript>
<div style="background-color: #5C5C5C; position: fixed; bottom: 50px; left: 80px; opacity: 0.95; border-radius: 15px; color: #FFFFFF;">
<p style="margin: 15px; max-width: 400px;">系统检测到您的浏览器禁用了或不支持JavaScript。为了保障您的浏览体验,请启用JavaScript或<a target="_blank" href="http://browsehappy.com" class="a" style="color: rgba(239,178,75,1)">升级浏览器</a></p>
</div>
</noscript>

<a>标签的download属性

设置<a>标签的download属性,可以在点击该链接时下载目标,即href属性指向的超链接。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件。例如:

1
<a href="https://www.example.com//images/2017-10/example.jpg" download="logo">

正常情况下,浏览器会将其保存为logo.jpg。

阅读全文 »