十五分钟加一个超链接

国内有个友友上星期开了个线上课程，是一个在 HelloTalk 软件上的小课室，给歪果仁上初级中文课。

大概八年级假期的时候，曾经想过做一个语言学习的软件。众所周知新加坡华人母语是英语，但毕竟祖先都是曾经从中国来的，中文和中国传统都不能丢。于是乎他们一直在坚持学中文，但因日常不怎么用所以中文水平只是勉勉强强。当初设计这个软件的初衷便是想助狮城华人提高中文水平，但可惜后来事情一多，这个软件就被搁置了。

所以这个友友让我在新加坡给她推广下她的课我满腔热血地答应了，算是弥补之前没做出软件的遗憾吧。

由于疫情原因，线下推广显然不行，于是只能考虑网络平台推广。新加坡有几个出名的线上社区，选了几个有“家教”板块的，狮城论坛、狮城 BBS 等等。这么一个免费又方便的课程，说不定就有华人家长给自家孩子报上了。

在论坛里（广告板块）登广告这种事我也是第一次干。既要突出重要内容，又不想给用户带来视觉干扰，登个广告弄了将近半个小时。花花绿绿的字体？万万不可，看着太廉价（虽然本来就是免费课程）。加大字体？弄得像是在赚中老年流量（？第一次发觉登广告还挺花心思的…

怎样绕过论坛过滤系统在帖子里加超链接？

狮城 BBS 挺特别的，写帖子的页面没有编辑器，只有一个最基本的纯文本输入框。尝试了一下，框里能写基本的 html，不过一些标签提交时会被过滤掉，例如 <blockquote>，<style>，<script> 等等。离谱的是，<a> 也被过滤了，且所有链接格式的文字都会被自动过滤删除。

这就导致了一个致命的问题 —— 没法加超链接了。广告里本有个指向 HelloTalk APP 的 APP Store 超链接，重要性不言而喻。用不了超链接，确实可以用文字告诉用户去应用中心搜索 “HelloTalk”，但无疑增加了步骤的复杂性，减少用户积极性。

于是乎就开始琢磨，怎样能按原方案加超链接并不被论坛审核系统过滤。

原版本

<a href="https://apps.apple.com/cn/app/hellotalk-language-learning/id557130558?l=en">
https://apps.apple.com/cn/app/hellotalk-language-learning/id557130558?l=en</a>

版本二

多次尝试后，发现行内 JS 和 CSS 不会被过滤，于是把 a 改成 JS 跳转：

<span onclick="window.open('https://apps.apple.com/cn/app/hellotalk-language-learning/id557130558?l=en')">
https://apps.apple.com/cn/app/hellotalk-language-learning/id557130558?l=en</span>

版本三

上个版本仍然被过滤了，尝试后得知链接会被过滤。行内 JS 中的链接可以切成字符再加起来，例如 "https" 可变为 "h"+"t"+"t"+"p"+"s"。 标签内的链接也要改掉。这里的链接实际上并没有什么功能性作用，主要是给看的。受 Instagram 字体转换器启发，想到可以将文字替换为其他字符。

你看这两个字符：“ѕ”和“s”，看起来完全一致，但前者的 unicode 是 \u0455，后者的是 \u0073。后者是键盘能打出来的 & 通用的，过滤系统里也是后者，所以若用的是前者而非后者，就不会被过滤。

为了转换这链接做了个字体转换器，输入正常字符（指 ASCII 表里的）输出相对应的“抗过滤字符”：

Celia Normal Font ​ instafonts.io

<!--为了方便看分成三行--->
<!--用 onclick 替换 a 标签，将链接分割，在新标签页打开--->
<span onclick="window.open('h'+'t'+'t'+'p'+'s'+':'+'/'+'/'+'a'+'p'+'p'+'s'+'.'+'a'+'p'+'p'+'l'+'e'+'.'+'c'+'o'+'m'+'/'+'c'+'n'+'/'+'a'+'p'+'p'+'/'+'h'+'e'+'l'+'l'+'o'+'t'+'a'+'l'+'k'+'-'+'l'+'a'+'n'+'g'+'u'+'a'+'g'+'e'+'-'+'l'+'e'+'a'+'r'+'n'+'i'+'n'+'g'+'/'+'i'+'d'+'5'+'5'+'7'+'1'+'3'+'0'+'5'+'5'+'8'+'?'+'l'+'='+'e'+'n', '_blank');">
<!--非常奇怪的字符--->
h𝗍𝗍pѕ://appѕ.appΙe.сom/сn/app/heΙΙo𝗍aΙ𝗄-Ιanɡuaɡe-Ιearnіnɡ/іd557130558?Ι=en
</span>

版本四

和上个版本区别不大，不过用行内 css 把链接变成了蓝色，加入了下划线，更方便用户辨认。

<!--后面省略了--->
<span style="color: blue; cursor: pointer; text-decoration: underline;"

最终效果如下：

页面链接：

在 GirlUp 免费学习华文！-新加坡家教补习- 狮城BBS​ www.shichengbbs.com

小插曲

大多数论坛编辑器用的是 bb code 而不是 html，仅能用来加入简单的文字图片和最基础的样式，在防黑客这方面上效果立竿见影。狮城论坛也是如此。不同的是，在编辑器底部有一些可设置的选项，例如是否使用纯文本、是否回车自动换行等等，在点击提交后生效。“是否启用 html” 也是一个选项，只不过默认是“否”，而且是灰的，用户无法修改。

这个灰色选项看着挺不爽，于是点开了检查元素 F12，将元素修改为“可修改”后把“是否启用 html”勾上了。万万没想到，提交后，bb code 编辑器居然真的变成了 html 编辑器，js、css 都能写了。这论坛没被加入干扰用户的脚本也真是幸运了。

标签： 编程 其他

赞

微信

打赏