website/layouts/partials/footer.html

<footer>
    {{ $data := index .Site.Data .Site.Language.Lang }}
    <div class="footer">
        <div class="footer-main common-layout">
            <div class="up-main">
                <div class="left-div">
                    <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
                    <p>{{ i18n "introduction7" }}</p>
                    <div>
                        <form 
                            action="{{ .Site.Params.mailchimpSubscribeUrl }}" 
                            method="post" 
                            target="_blank" 
                            novalidate
                        >
                            <input name="EMAIL" id="email-input" type="text" placeholder='{{ i18n "introduction6" }}'>
                            <button type="submit" id="email-submit">{{ i18n "introduction5" }}</button>
                        </form>
                    </div>
                    <span id="message" data-message1='{{ i18n "email is required" }}' data-message2='{{ i18n "Please enter a valid email address." }}'></span>
                </div>
                <div class="right-div">
                    <ul class="common-flex-layout">
                        {{ with $data.footer.footer }}
                        {{ range .list }}
                            <li>
                                <div class="h3">{{ .title }}</div>
                                {{ range .list }}
                                {{ if hasPrefix .link "http" }}
                                <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .content }}</a>
                                {{ else }}
                                <a href="{{ .link | relLangURL }}">{{ .content }}</a>
                                {{ end }}
                                {{ end }}
                            </li>
                        {{ end }}
                        {{ end }}
                    </ul>
                </div>
            </div>
            <div class="down-main">
                <div class='img-div'>
                    <!-- <a class='facebook-a' href="" target="_blank"></a> -->
                    <a class='wechat' href="javascript:void(0);">
                        {{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
                        <div class="hide-div">
                            <p>Follow the official account</p>
                            <img src="/images/footer/wechat_code.svg" alt="">
                        </div>
                    </a>
                    <!-- <a class='wechat' href="javascript:void(0);">
                        {{ "/static/images/footer/group.svg" | readFile | safeHTML }}
                        <div class="hide-div">
                            <p>Join the WeChat group</p>
                            <img src="/images/footer/group_code.svg" alt="">
                            <p>进群请备注 “公司 - 姓名”</p>
                        </div>
                    </a> -->
                    <a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='slack-a' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='github-a' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='medium-a' href="{{ .Site.Params.mediumLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank" rel="noopener noreferrer"></a>
                </div>
                <p class='p1'>{{ i18n "introduction2" }}</p>
            </div>
        </div>
    </div>
    
</footer>

<script>
    var bindSubmit = function() {
        var input = $('#email-input')
        $('#email-submit').click(function(event) {
            event.stopPropagation()
            var email = input.val()
            var message1 = $('#message').data('message1')
            var message2 = $('#message').data('message2')
            if (!email) {
                event.preventDefault()
                showMessage(message1)
            } else if (!validateEmail(email)) {
                event.preventDefault()
                showMessage(message2)
            }
        })
    }

    var bindHideMessage = function() {
        $(window).click(function() {
            $('#message').hide()
        })
    }

    var showMessage = function(message) {
        $('#message').html(message).show()
    }

    var validateEmail = function(email) {
        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
        return reg.test(email)
    }

    var lazyLoad = function(allImg, imgNum) {
        for (var i = 0; i < imgNum; i++) {
            var img = allImg.eq(i)
            var loaded = img.attr("data-loaded");
            if (loaded) {
                continue
            }
            if (img.offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                var src = img.attr("src")
                img.attr("src", src)
                img.attr("data-loaded", true)
            }
        }
    }

    var bindLayLoad = function() {
        var allImg = $('img')
        var imgNum = allImg.length
        lazyLoad(allImg, imgNum)
        $(window).scroll(function() {
            lazyLoad(allImg, imgNum)
        });
    }

    // bindLayLoad()
    bindSubmit()
    bindHideMessage()
</script>