Hugo接入TonTip的方法

Hugo是一个流行的静态站点生成器，通过hugo可以方便的生成静态站点，想了解更多请访问Hugo的官网

生成一个简单的博客站点

具体步骤参考官方的教程，见：https://gohugo.io/getting-started/quick-start/

所有步骤做完，在 quickstart 目录下能看到生成的站点，大致如下图

接入TonTip

这里将在每篇文章末尾加上一个打赏框。

先参照官方教程添加一篇博客，点击进入文章详情页，界面类似：

接下来先编辑 themes/ananke/layouts/_default/baseof.html 这个文件，在 </body> 之前添加下面这行代码

<script src="{{ "/js/tontip.iife.js" }}"></script>

这段代码的作用是在页面引入一段全局的js。

然后编辑文章详情页模板 themes/ananke/layouts/_default/single.html 在 61 行后面添加如下代码：

<ton-tip tips="0.1,2,3,4,5" receiver="UQDMiUFV3oqR8ZUKG6KtE_SJjSe7B2_usm3O4KlzzPZwAkaH">
  <div id="ton-connect-tip-btn"></div>
</ton-tip>

这里的receiver是你的收款钱包地址，这个地址可以从你的telegram钱包中获得，tips是你期望的打赏金额配置，货币单位是美元，在我的这个例子中， 最小付款金额是 0.1 美元，最大是5美元。

最后将 tontip.iife.js 这个文件保存到js文件夹

在 static 这个目录下创建一个文件夹叫作 js，然后将 tontip.iife.js 复制到 js 文件夹下

最后的页面如下：

小结

本文介绍了如何按照Hugo官方文档快速创建一个博客站点，然后自定义这个网站模板，引入打赏框。