mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
333 lines
11 KiB
HTML
333 lines
11 KiB
HTML
{{ define "main" }}
|
|
|
|
{{ with .Params.section1 }}
|
|
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
|
|
<div class="common-layout">
|
|
<h1 class="title-h1">{{ .title }}</h1>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
{{ with .Params.section2 }}
|
|
<section class='section-2'>
|
|
<div class="common-layout">
|
|
<div class="live-2-left">
|
|
<a href="{{ .url }}">
|
|
<img src="{{ .image }}" alt="">
|
|
<button>{{ i18n "Wonderful review" }}</button>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="live-2-right">
|
|
{{ with .notice }}
|
|
<div class='notice shadow'>
|
|
<h2 title="{{ .title }}">{{ .title }}</h2>
|
|
<p><img src="{{ .timeIcon }}" alt="">{{ .time }}</p>
|
|
<p><img src="{{ .baseIcon }}" alt="">{{ .base }}</p>
|
|
<a class="btn-a" href="{{ .url }}">{{ i18n "View details" }}</a>
|
|
<div class="tag">{{ .tag }}</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ with .over }}
|
|
<div class='over shadow'>
|
|
<h2 title="{{ .title }}">
|
|
<a href="{{ .url }}">{{ .title }}</a>
|
|
</h2>
|
|
<div class="tag">{{ .tag }}</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
{{ $language := .Site.Language.Lang }}
|
|
{{ with .Params.section3 }}
|
|
<section class='section-3'>
|
|
<div class="common-layout">
|
|
<ul class='video-tab-ul'>
|
|
<li class='active'>{{ i18n "ALL" }}</li>
|
|
{{ $groups := slice }}
|
|
{{ range .videos }}
|
|
{{ $group := split .group ","}}
|
|
{{ $groups = $groups | append $group }}
|
|
{{ end }}
|
|
{{ range ($groups | uniq) }}
|
|
<li data-group='{{ . }}'>{{ . }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
<ul class='video-ul' data-language='{{ $language }}' data-origin='{{ .videos | jsonify }}'>
|
|
</ul>
|
|
<div id='pagination'></div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
|
|
{{ $overImg := .Params.section4.overImg}}
|
|
{{ $noticeImg := .Params.section4.noticeImg}}
|
|
{{ with .Params.section4 }}
|
|
<section class="common-layout-special">
|
|
<div class="meetup-box">
|
|
<div class="meetup-title">{{ .title }}</div>
|
|
<div class="innerBox">
|
|
<ul id="meetup-ul">
|
|
{{ range .list }}
|
|
{{ with . }}
|
|
<li> {{ .year }} </li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
<div class="yearBox" id="meetup-list">
|
|
{{ range $index,$data := .list }}
|
|
{{ with . }}
|
|
<ul class="hiddenUl" id="needClone_{{ $index }}">
|
|
{{ range .meetup }}
|
|
{{ with . }}
|
|
<li>
|
|
<div class="imgBox">
|
|
<p>{{ .place }}</p>
|
|
<img src="{{ .img }}">
|
|
<a class="button" href="{{ .meetupUrl | safeURL }}" target="_blank"
|
|
rel="noopener noreferrer">
|
|
{{ i18n "Wonderful review" }}
|
|
</a>
|
|
</div>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|
|
{{ end }}
|
|
<div class="swiper autoMeetUp">
|
|
<div id="swiper-wrapper" class="swiper-wrapper">
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<div class="prev-button"></div>
|
|
<div class="next-button"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ end }}
|
|
|
|
<div id="modal-for-video" class="modal">
|
|
<div class='video-div'>
|
|
<video src="" controls autoplay></video>
|
|
<iframe id='iframe-player' src="" width="750" height="420" frameborder="0"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
{{ with .Params.section5 }}
|
|
<section class='section-5'>
|
|
<div class="common-layout">
|
|
<div class="left-div">
|
|
<h2>{{ .title }}</h2>
|
|
<p>{{ .content }}</p>
|
|
<a class="btn-a" href="{{ .url }}" target="_blank">{{ .btn }}</a>
|
|
</div>
|
|
<img src="{{ .image }}" alt="">
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
<script src='{{ "js/pagination.min.js" | relURL }}'></script>
|
|
|
|
<script>
|
|
var bindClickVideoTabLi = function () {
|
|
var tabLi = $('.video-tab-ul > li')
|
|
tabLi.click(function () {
|
|
tabLi.removeClass('active')
|
|
var group = $(this).data('group')
|
|
$(this).addClass('active')
|
|
var videos = $('.video-ul').data('origin')
|
|
if (group) {
|
|
videos = videos.filter(function (video) {
|
|
return video.group === group
|
|
})
|
|
}
|
|
initPagination(videos)
|
|
})
|
|
}
|
|
|
|
var bindClickVideoLi = function () {
|
|
$('.video-ul').on('click', 'li', function (ev) {
|
|
var link = $(this).data('link')
|
|
window.open(link)
|
|
// var type = $(this).data('type')
|
|
// if (type === 'video') {
|
|
// showVideo(link)
|
|
// } else if (type === 'iframe') {
|
|
// showIframe(link)
|
|
// }
|
|
})
|
|
}
|
|
|
|
var initModal = function () {
|
|
$('#modal-for-video').on($.modal.BEFORE_CLOSE, function (event, modal) {
|
|
$('#modal-for-video video')[0].pause()
|
|
var src = $("#iframe-player").attr('src')
|
|
// 去掉自动播放
|
|
var iframe = $("#iframe-player").attr('src', src.slice(0, -11));
|
|
});
|
|
}
|
|
|
|
var showIframe = function (link) {
|
|
$('#modal-for-video video').hide()
|
|
$('#modal-for-video iframe').show().attr({ src: link })
|
|
$('#modal-for-video').modal()
|
|
}
|
|
|
|
var showVideo = function (link) {
|
|
$('#modal-for-video iframe').hide()
|
|
$('#modal-for-video video').show().attr({ src: link })
|
|
$('#modal-for-video').modal()
|
|
}
|
|
|
|
var createVideoList = function (videos) {
|
|
var result = ''
|
|
for (var i = 0; i < videos.length; i++) {
|
|
var video = videos[i]
|
|
var s = createVideoLi(video)
|
|
result += s
|
|
}
|
|
return result
|
|
}
|
|
|
|
var createVideoLi = function (video) {
|
|
var img = '<img src="' + video.snapshot + '" alt="background image">'
|
|
var button = '<img class="btn" src="/images/videos/play.svg" alt="play button">'
|
|
var title = '<h3>' + video.title + '</h3>'
|
|
var group = '<p>' + video.group + '</p>'
|
|
var time = '<p class="time">' + video.createTime + '</p>'
|
|
var div = '<div>' + button + '<div>' + title + group + time + '</div></div>'
|
|
var s = '<li data-link="' + video.link + '" data-type="' + video.type + '">' + img + div + '</li>'
|
|
return s
|
|
}
|
|
|
|
var initPagination = function (dataSource) {
|
|
$('#pagination').pagination({
|
|
dataSource: dataSource,
|
|
pageSize: 12,
|
|
prevText: '<<',
|
|
nextText: '>>',
|
|
callback: function (data, pagination) {
|
|
var videoList = createVideoList(data)
|
|
$('.video-ul').empty().append(videoList)
|
|
}
|
|
})
|
|
}
|
|
|
|
var initVideos = function () {
|
|
var videos = $('.video-ul').data('origin')
|
|
initPagination(videos)
|
|
}
|
|
|
|
var splitHtmlToNew = function (data) {
|
|
var newCollection = []
|
|
Array.prototype.forEach.call(data, function (item, index) {
|
|
data[index].className = 'swiper-slide'
|
|
newCollection.push(data[index])
|
|
})
|
|
return newCollection
|
|
}
|
|
|
|
var autoplayTime = 6000
|
|
|
|
var mySwiper = {
|
|
current: null,
|
|
create: function () {
|
|
const documentWidth = $(document).width()
|
|
const childNum = $('#swiper-wrapper').children().length
|
|
const option = {
|
|
autoplay: {
|
|
running: true,
|
|
pauseOnMouseEnter: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
delay: autoplayTime,
|
|
speed: 500,
|
|
loop: childNum > 3 ? true : false,
|
|
}
|
|
if (documentWidth > 800) {
|
|
option.slidesPerView = 3
|
|
option.spaceBetween = 20
|
|
hideSlideButton(childNum <= 3)
|
|
}
|
|
|
|
if (documentWidth < 800) {
|
|
option.pagination = {
|
|
el: '.swiper-pagination',
|
|
bulletActiveClass: 'my-bullet-active',
|
|
}
|
|
}
|
|
this.current = new Swiper('.swiper', option)
|
|
},
|
|
init: function () {
|
|
const elements = $('#needClone_0').children().filter('li').clone()
|
|
const newContent = splitHtmlToNew(elements)
|
|
if (newContent.length === 0) {
|
|
return
|
|
}
|
|
$('#swiper-wrapper').empty().append(newContent)
|
|
}
|
|
}
|
|
|
|
var MeetupInit = function () {
|
|
var ulHead = $('#meetup-ul');
|
|
var ulList = $('#meetup-list');
|
|
var tabActiveIndex = 0;
|
|
ulHead.children('li').filter(function (index) {
|
|
return index === 0
|
|
}).addClass('tab_active')
|
|
mySwiper.create()
|
|
$('#meetup-ul li').click(function (e) {
|
|
var clickIndex = $(this).index();
|
|
var preActiveINdex = $('#meetup-ul li.tab_active')
|
|
if (tabActiveIndex === clickIndex) {
|
|
return
|
|
} else {
|
|
tabActiveIndex = clickIndex
|
|
}
|
|
preActiveINdex.removeClass('tab_active')
|
|
ulHead.children('li').filter(function (index) {
|
|
return index === tabActiveIndex
|
|
}).addClass('tab_active')
|
|
var elements = $('#needClone_' + tabActiveIndex).children().filter('li').clone()
|
|
$('#swiper-wrapper').empty().append(splitHtmlToNew(elements))
|
|
mySwiper.current.destroy()
|
|
mySwiper.create()
|
|
})
|
|
}
|
|
|
|
var initSliderButton = function () {
|
|
$('.prev-button').click(function (e) {
|
|
var swiper = mySwiper.current.slidePrev()
|
|
})
|
|
$('.next-button').click(function (e) {
|
|
var swiper = mySwiper.current.slideNext()
|
|
})
|
|
}
|
|
|
|
var hideSlideButton = function (hide) {
|
|
if (hide) {
|
|
$('.prev-button').hide()
|
|
$('.next-button').hide()
|
|
} else {
|
|
$('.prev-button').show()
|
|
$('.next-button').show()
|
|
}
|
|
}
|
|
|
|
bindClickVideoTabLi()
|
|
bindClickVideoLi()
|
|
initVideos()
|
|
initModal()
|
|
mySwiper.init()
|
|
MeetupInit()
|
|
initSliderButton()
|
|
</script>
|
|
{{ end }} |