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>
                    {{ partial "subscribe.html" .}}
                    <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 class="nowrap-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);" aria-label="wechat">
                        {{ "/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" aria-label="facebook"></a>
                    <a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank" aria-label="twitter" rel="noopener noreferrer"></a>
                    <a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank" aria-label="linkedin" 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" aria-label="bilibili" rel="noopener noreferrer"></a>
                    {{ end }}
                    {{ if .Site.Params.youtubeLink }}
                    <a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank" aria-label="youtube" rel="noopener noreferrer"></a>
                    {{ end }}
                    <a class='slack-a' href="{{ .Site.Params.slackLink }}" target="_blank" aria-label="slack" rel="noopener noreferrer"></a>
                    <a class='github-a' href="{{ .Site.Params.githubLink }}" target="_blank" aria-label="github" rel="noopener noreferrer"></a>
                    <a class='medium-a' href="{{ .Site.Params.mediumLink }}" target="_blank" aria-label="medium" rel="noopener noreferrer"></a>
                </div>
                <p class='p1'>{{ i18n "KubeSphere®️ 2023 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 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 docCookies = {
        getItem: function (sKey) {
            return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
        },
        setItem: function (sKey, sValue) {
            if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
            document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue)
            return true;
        },
    };

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

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