typescript 使用TypoScript创建垂直时间轴（https://codyhouse.co/demo/vertical-timeline/index.html）

Posted 2021-05-21

[PIDinRootline = 6]
	# implement a vertical timeline via TypoScript
	# JS Demo: https://codyhouse.co/demo/vertical-timeline/index.html

	# add JavaScript and Styles
	page{
		includeJS {
			# {$screen.javascript} is just a constant for the javascript path
			verticalSliderJs = {$screen.javascript}/vertical-timeline/js/main.js
		}
		includeCSS {
			# {$screen.javascript} is just a constant for the javascript path
			verticalSliderStyle = {$screen.javascript}/vertical-timeline/style/style.css
		}
	}
	# select the folder with pages
	# - folder
	#  |
	#  |- page 1
	#  |    |
	#  |    |- page content
	#  |    |- page content
	#  |
	#  |- page 2
	#  |    |- page content
	#
	lib.highlights = COA
	lib.highlights {
		10 = CONTENT
		10 {
			table = pages
			select.pidInList = 15
			renderObj = COA
			renderObj {
				# register pageUid and pageTitle, the page's uid and title, for later reference via register:pageUid and register:pageTitle
				10 = LOAD_REGISTER
				10 {
					pageUid.cObject = TEXT
					pageUid.cObject {
						field = uid
					}
					pageTitle.cObject = TEXT
					pageTitle.cObject {
						field = title
					}
				}
				30 = COA
				30 {
					10 = CONTENT
					10 {
						# select page content from according page (see renderObj as a loop)
						table = tt_content
						select.pidInList.data = register:pageUid
						renderObj = COA
						renderObj {
							# the image
							10 = TEXT
							10.value = <div class="cd-timeline-img cd-picture bounce-in"><img src="{$screen.javascript}/vertical-timeline/img/cd-icon-picture.svg" alt=""></div>
							# content with header and bodytext, wrapped in a div
							30 = TEXT
							30.value = <div class="cd-timeline-content bounce-in">
							40 = COA
							40 {
								# use header, standard rendering
								20 = COA
								20 < lib.stdheader
								# parse bodytext, standard rendering
								30 = TEXT
								30.field = bodytext
								30.parseFunc < lib.parseFunc_RTE
								# wrap the folder's title
								40 = TEXT
								40.data = register:pageTitle
								40.wrap = <div class="cd-date">|</div>
							}
							50 = TEXT
							50.value = </div>
							# wrap a block around every element
							wrap = <div class="cd-timeline-block">|</div>
						}
					}
					20 = RESTORE_REGISTER
				}
			}
			stdWrap {
				wrap = <section id="cd-timeline" class="cd-container">|</section>
			}
		}
	}
[end]