在公众号上发布过文章的朋友应该知道，公众号文章是不允许外链。为了书写严谨，给读者提供完整信息脚注格式怎么设置[1]，大家想了很多种方法，其中最常用的方法是将外链转换为脚注，即有链接的地方编辑一个数字序号，在文章最末放置参考文献区域，将对应序号的链接展示出来。
显然手工编写脚注是费时费力容易出错且不易维护的，于是出现了很多类似 Mdnice[1] 的转换工具，将 格式的内容，转换为可以直接粘贴到公众号里的样式。
但是这样还是需要将写好的文章内容搬迁好几遍，如果出现问题就必须重来。而且大部分流行的编辑器，比如VSCode[2]、Typora[3] 都没有这个功能。
笔者被困扰了很久之后，终于在 的帮助下很好的解决了这个问题。现在仅通过 Typora 就可以直接生成适应公众号的文章了。
解决方案
先上干货。
这个方法不仅可以用在 Typora 中，也可以用在其他 html 文件中。
首先从 wechat-footnote[4] 仓库中下载代码文件，下面分别说明：
Typora
![脚注格式怎么设置[1]_格式设置脚注1怎么设置_脚注格式不一致怎么调整](https://www.thumbxm.com/wp-content/uploads/2023/12/776126-202007140657065f0ce6c2d2f8c.jpg "脚注格式怎么设置[1]_格式设置脚注1怎么设置_脚注格式不一致怎么调整")
![格式设置脚注1怎么设置_脚注格式不一致怎么调整_脚注格式怎么设置[1]](https://www.thumbxm.com/wp-content/uploads/2023/12/4ffce04d92a4d6cb21c1494cdfcd6dc1-559.png "格式设置脚注1怎么设置_脚注格式不一致怎么调整_脚注格式怎么设置[1]")
打开 Typora，点击菜单栏 文件⇒偏好设置，打开 偏好设置 页面；
在左侧列表菜单中点击 导出，右侧会显示 Export 配置栏；
选择配置栏左侧的 HTML；
复制 reference.html 文件中的内容，粘贴到 在 中添加 的输入框中；
点击右上角 X 关闭设置页面，完成配置；
编辑完文章后，点击 文件⇒导出，选择 HTML，导出 html 文件。
打开导出的文件，就会看到类似效果：
![脚注格式不一致怎么调整_脚注格式怎么设置[1]_格式设置脚注1怎么设置](https://www.thumbxm.com/wp-content/uploads/2023/12/def3c219ce2c5b1b00f69c6a2b39131fcfec0e82.jpg "脚注格式不一致怎么调整_脚注格式怎么设置[1]_格式设置脚注1怎么设置")
Html
只要编辑一下 html 文件就可以了，即复制仓库代码中 reference.html 文件的内容，粘贴到 html 文件的 head 标签中就行。
保存后，用浏览器打开 html 文件，即可查看效果。
虽然简单，但需注意：
脚本中，插入脚注的元素为 #write，即 Typora 中的内容块，请根据目标 html 文件内容块标记修改插入目标元素选择方式脚注格式怎么设置[1]，如用 .content 等。
实现原理
如果只是应用，读到此就可以结束了。
下面聊一下此功能是如何实现的，有兴趣的或者有个性话需求的读者可以继续。
思路
最初想从 markdown 文件本身解决，Typora 确实支持脚注，但写起来比较麻烦，不仅要在链接的地方明确标记，还需要在文章末尾明确地写注脚。最主要的是，这种方式消除不了链接属性，即不符合公众号文章要求。
然后就是写个 Python 脚本，将 markdown 中的链接替换成脚注，但 markdown 语法并不支持脚注，即使替换掉，为了渲染的效果也常常会不尽人意。
比起生写 Python，更好的选择是 Pandoc[5]，它是专为文档格式转换而生的，能很好地定制的将 markdown 转换为 html 格式的，那么实现脚注应该不在话下。但是需要学习 Lua[6] 脚本，感觉还是挺陡峭的，研究了一下就放弃了。
最后又想到是否可以通过 CSS 来解决，就问了下 ，还真给出了一个解决方案：
总体来说，是通过元素的数据属性，以及伪类将链接的 url 显示出来，例子中的效果是鼠标放在链接上会显示出链接的 url，显然是不合适的。
不过当我说出我想要的脚注样式后，ChatGPT 说，需要借助脚本来实现：
这个简单的提示，突然让我意识到，可以对转换成 html 的内容用 js 进行修改，扩展成我想要的效果！
![格式设置脚注1怎么设置_脚注格式怎么设置[1]_脚注格式不一致怎么调整](https://www.thumbxm.com/wp-content/uploads/2023/12/201802040855246.jpg "格式设置脚注1怎么设置_脚注格式怎么设置[1]_脚注格式不一致怎么调整")
因为并没有改变内容本身，所以不影响文章在其他平台的发布，简直是太棒了。
于是开始做可行性研究。
可行性分析
首先需要确认 Typora 如何嵌入 js 脚本，发现在导出设置中可以往目标 html 代码中插入代码，于是做了几次尝试，发现没有问题。
然后，需要确认 js 真的可以将 html 改成我想要的样子吗？于是不断的向 提问，比如 JS 如何查找页面中的所有链接，如何读取链接结点的属性，以及能不能将链接元素换成 span 等等。不断的探索中，我确认了这个方法是可行的。
最后就是如何设置脚注的样式，这个相对好办，因为我见过我想要的脚注样式，一个是阮一峰老师的网络日志，另一个是 mdnice 的，浏览页面，提取样式即可。
到此就可以确认方案可行了。
研发与调试
研发阶段相对简单，就是将可行阶段的成果进行分类，融合，集成。
![脚注格式不一致怎么调整_格式设置脚注1怎么设置_脚注格式怎么设置[1]](https://www.thumbxm.com/wp-content/uploads/2023/12/2317751-20210303121018261-1382535707.jpg "脚注格式不一致怎么调整_格式设置脚注1怎么设置_脚注格式怎么设置[1]")
最后得到了三个主要功能，分别是：
创建脚注元素：CreateFootnoteItem
替换链接：replaceLink
创建脚注块：CreateFootnote
主要方法是，创建元素，设置属性，加入到 DOM树中。
元素的类型和设置，参考 Mdnice 的方式，比如脚注元素是：
