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 "Receive the latest news, articles and updates from KubeSphere" }}</p>
                    <div>
                        <form
                            action="{{ .Site.Params.mailchimpSubscribeUrl }}"
                            method="post"
                            target="_blank"
                            novalidate
                        >
                            <input name="EMAIL" id="email-input" type="text" placeholder='{{ i18n "Please enter your email address" }}'>
                            <button type="submit" id="email-submit">{{ i18n "Subscribe" }}</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='wechat' href="javascript:void(0);">
                        {{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
                        <div class="hide-div">
                            <img src="/images/home/wechat.svg" alt="">
                        </div>
                    </a>
                    <a class='facebook-a' href="https://www.facebook.com/kubesphere" target="_blank"></a>
                    <a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
                    <a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank" rel="noopener noreferrer"></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> -->
                    {{ if .Site.Params.bilibiliLink }}
                    <a class='bilibili-a' href="{{ .Site.Params.bilibiliLink }}" target="_blank" rel="noopener noreferrer"></a>
                    {{ end }}
                    {{ if .Site.Params.youtubeLink }}
                    <a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank" rel="noopener noreferrer"></a>
                    {{ end }}
                    <a class='slack-a' href="{{ .Site.Params.slackLink }}" 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>
                </div>
                <p class='p1'>{{ i18n "KubeSphere®️ 2020 All Rights Reserved." }}</p>
                {{ if .Site.Params.showCaseNumber }}
                <p class="case">
                    <a
                    href="http://www.beian.miit.gov.cn/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <span>京ICP备13019086号</span>
                  </a>
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502041003"
                  >
                    <img src='/images/footer/case-icon.png' alt="备案图标"/>
                    <span>京公网安备 11010502041003号</span>
                  </a>
                </p>
                {{ end }}
            </div>
        </div>
    </div>

    <div class="cookie">
        <div class="common-layout">
            <p>
                {{ i18n "Cookie Statement" ("/privacy" | relLangURL) | safeHTML }}
              </p>
              <button>
                {{ i18n "Accept and continue" }}
              </button>
        </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)
        });
    }

    var bindAddPadding = function() {
        var close = $('#close-join')
        if (close.length > 0) {
            $('.main-section').addClass('padding')
        }
    }

    var bindHideCookie = function() {
        var hasAuth = localStorage.getItem("hasAuth")
        var cookieElement = $('.cookie')
        if (hasAuth) {
            cookieElement.hide()
        } else {
            cookieElement.show()
        }
        cookieElement.find('button').on('click', function() {
            localStorage.setItem("hasAuth", '1')
            cookieElement.hide()
        })
    }

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