website/layouts/partner/list.html

{{ define "main" }}

{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
    <div class="title-div common-layout">
        <h1 class="title-center-h1">{{ .title }}</h1>
        <p class="common-p">{{ .content }}</p>
    </div>
</section>
{{ end }}

<section class="section-2">
    {{ with .Params.section2 }}
    <div class="common-layout">
        <div class="left-div">
            <div class="common-content">{{ .title }}</div>
            <p class="common-p">{{ .content }}</p>
            <img class='img-1' src="{{ .bg2 | relURL }}" alt="{{ i18n "icon" }}">
            <img class='img-2' src="{{ .bg3 | relURL }}" alt="{{ i18n "icon" }}">
        </div>
        <div class="right-div">
            <img src="{{ .mapImage | relURL }}" alt="{{ .title }}">
            <div class='btn-div div-1'>
                <p>{{ .name1 }}</p>
                <div>
                    <img src="{{ .icon1 | relURL }}" alt="{{ .name1 }}">
                </div>
            </div>
            <div class='btn-div div-2'>
                <p>{{ .name2 }}</p>
                <div>
                    <img src="{{ .icon2 | relURL }}" alt="{{ .name2 }}">
                </div>
            </div>
            <div class='btn-div div-3'>
                <p>{{ .name3 }}</p>
                <div>
                    <img src="{{ .icon3 | relURL }}" alt="{{ .name3 }}">
                </div>
            </div>
        </div>
    </div>
    <img src="{{ .bg1 | relURL }}" alt="{{ i18n "icon" }}">
    {{ end }}
</section>

<section class="section-3">
    {{ $applyZh := .Site.Params.applyAllInOne }}
    {{ with .Params.section3 }}
    {{ $tip := .tip }}
    {{ $linkText := .linkText }}
    <div class="common-layout">
        <h2 class="title-black-h2">{{ .title }}</h2>
        <ul class="partner-ul common-flex-layout">
            {{ range .partnerType }}
                <li>
                    <h3 class="common-content">{{ .title }}</h3>
                    <p class="common-p">{{ .content }}</p>
                    {{ if not $applyZh }}
                    <div>
                        <a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
                    </div>
                    {{ end }}
                </li>
            {{ end }}
        </ul>
        {{if $applyZh}}
        <div>
            <a class="apply common-green-a" href="{{ .link }}" target="_blank">{{ $tip }}</a>
        </div>
        {{ end }}
    </div>
    {{ end }}
</section>

<section class="section-4">
    {{ with .Params.section4 }}
    <div class="common-layout">
        <h2 class="title-black-h2">{{ .title }}</h2>
        {{ $allType := slice }}
        {{ range .featuredPartnerList }}
            {{ $exist := in $allType .partnerType }}
            {{ if not $exist }}
                {{ $allType = $allType | append .partnerType }}
            {{ end }}
        {{ end }}
        <div id="partner-group">
            <div class="li active">{{ i18n "ALL" }}</div>
            {{ range $allType }}
            <div class="li" data-name="{{ . }}">{{ . }}</div>
            {{ end }}
        </div>

        <ul class="partner-ul" id="partner-children">
            {{ range .featuredPartnerList }}
                <li data-name="{{ .partnerType }}">
                    <img src="{{ .icon | relURL }}" alt="{{ .content }}">
                    <div class='content'>{{ .content }}</div>
                </li>
            {{ end }}
        </ul>
    </div>
    {{ end }}
</section>
<script>
    $('#partner-group div').click(function() {
        $("#partner-group div").removeClass("active");
        $(this).addClass("active");
        var name = $(this).data("name")
        if (name) {
            $("#partner-children li").each(function(item) {
                if ($(this).data("name") !== name) {
                    $(this).hide()
                } else {
                    $(this).show()
                }
            })
        } else {
            $("#partner-children li").show()
        }
	})
</script>
{{ end }}