米米的博客

做了一点微小的工作

0%

发表于 分类于 Disqus：

今天笔者在进行 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.php 和 revision-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 以某种方式触发～

下面附上整个解密过程中所用到的文件：WordPress-Easter-Egg。其中 revision.php 和 revisions-js.php 是原文件，decode.php 是部分解密后的文件，decode.js 是浏览器获取的匿名 js 文件，decoder.html 是根据原文件的加密算法编写的加密、解密脚本。

发表于 分类于 Disqus：

上帝说，要有

于是就有了光。
注：以上文字旨在测试兼容情况。
使用方法：在 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，该脚本将会渲染页面中的所有公式。尽情地按照语法插入公式就好啦！
如果要在 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 请求，就可以将表达式转换为公式的图片。

本文更新于 2020 年 3 月 19 日：
MathJax3 已经推出，本文内容可能过时。

发表于 分类于 Disqus：

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

阅读全文 »

发表于 分类于 Disqus：

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

use strict

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

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

JavaScript 传递参数

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

1
<script data-flag="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],
    flag = script.getAttribute("data-flag");

这样即可获取 data-flag 的值，可以说是非常的巧妙了。

如果不考虑 IE 的支持，也可以直接使用

1
var script = document.currentScript;

dataset

除了使用

1
var flag = script.getAttribute("data-flag");

还有另一种方法可以获得 HTML 标签中形如 data-* 的属性的值，那就是 dataset。与上面等价的写法是

1
var flag = script.dataset.flag;

<noscript> 标签

<noscript> 标签最初是为那些不支持 JavaScript 的上古浏览器而设计。如今，对于停用了 JavaScript 的用户，这个标签可能非常有用。

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。</p>
</div>
</noscript>

<a> 标签的 download 属性

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

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

支持该属性的浏览器会将其保存为 logo.jpg。

阅读全文 »