如何在Jekyll中从文件创建可拖拽安装的Bookmarklet？

要实现单独维护JS代码、无需同步多版本的可拖拽Bookmarklet，关键是解决Jekyll包含文件后的特殊字符转义问题，你之前的写法错误在于直接给include加过滤器，正确的做法是先捕获文件内容到变量，再应用转义过滤器：

1. 单独存放JS代码
   将Bookmarklet的完整JavaScript代码放在_includes目录下，比如命名为bookmarklet.js，直接写原生JS即可，不需要提前转义。

2. 在页面中生成可拖拽链接
   使用Liquid的capture标签先捕获JS文件内容，再通过escape过滤器转义特殊字符，最后拼接成合法的javascript:协议链接：

   {% capture bookmarklet_content %}{% include bookmarklet.js %}{% endcapture %}
   <a href="javascript:{{ bookmarklet_content | escape }}">拖拽到书签栏安装</a>
   

3. 可选优化：压缩代码
   如果JS代码有多余的换行或空格，可以先去掉再转义，让Bookmarklet链接更紧凑：

   {% capture bookmarklet_content %}{% include bookmarklet.js %}{% endcapture %}
   <a href="javascript:{{ bookmarklet_content | strip_newlines | escape }}">拖拽到书签栏安装</a>
   

这样生成的链接既保留了单独维护JS文件的便利性，又能自动完成转义，不会破坏页面的HTML结构，用户直接拖拽到书签栏就能正常使用。

内容的提问来源于stack exchange，提问作者l0b0