Integrate TonTip to Hugo static sites

Hugo is a popular static site generator. Hugo can be used to easily generate static sites. For more information, please visit Hugo’s official website

Generate a simple blog site

For specific steps, refer to the official tutorial: https://gohugo.io/getting-started/quick-start/

After all the steps are completed, you can see the generated site in the quickstart directory, as shown below

Access TonTip

Here, a reward box will be added at the end of each article.

First, refer to the official tutorial to add a blog, click to enter the article details page, the interface is similar:

Next, edit the themes/ananke/layouts/_default/baseof.html file and add the following line of code before </body>

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

The purpose of this code is to introduce a global js in the page.

Then edit the article details page template themes/ananke/layouts/_default/single.html and add the following code after line 61:

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

Here, receiver is your payment wallet address, which can be obtained from your telegram wallet. Tips is the amount of reward you expect to configure. The currency unit is US dollars. In my example, the minimum payment amount is 0.1 US dollars and the maximum is 5 US dollars.

Finally, save the file tontip.iife.js to the js folder

Create a folder called js in the static directory, and then copy tontip.iife.js to the js folder

The final page is as follows:

Summary

This article introduces how to quickly create a blog site according to the Hugo official documentation, and then customize this website template and introduce a reward box.