From 937e766294b9e552221c8f914ae74b5b2d709af0 Mon Sep 17 00:00:00 2001
From: xing <fthvgb1@163.com>
Date: Mon, 12 Jun 2023 23:08:46 +0800
Subject: [PATCH] =?UTF-8?q?tweentysevent=20=E9=A1=B5=E7=9C=89=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E6=94=AF=E6=8C=81=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |   2 +-
 app/pkg/dao/posts.go                         |   1 +
 app/pkg/models/wp_postmeta.go                |  11 ++
 app/pkg/models/wp_posts.go                   |   1 +
 app/theme/twentyfifteen/customheader.go      |   6 +-
 app/theme/twentyseventeen/layout/base.gohtml |   4 +-
 app/theme/twentyseventeen/twentyseventeen.go |  29 ++++-
 app/theme/wp/customheader.go                 | 126 ++++++++++++++++++-
 app/theme/wp/ext.go                          | 121 ++++++++++++++++++
 helper/strings/strings.go                    |  12 ++
 readme_en.md                                 |  14 +--
 11 files changed, 310 insertions(+), 17 deletions(-)
 create mode 100644 app/theme/wp/ext.go

diff --git a/README.md b/README.md
index b6add44..a83f316 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@
 |---------------|-----------------|
 | 站点身份          | 站点身份            |
 | 颜色            | 颜色              |
-| 页眉图片          | 页眉媒体 （暂不支持视频）   |
+| 页眉图片          | 页眉媒体            |
 | 背景图片          | 额外css           |
 | 额外css         |                 |
 
diff --git a/app/pkg/dao/posts.go b/app/pkg/dao/posts.go
index 6846d9c..6338fef 100644
--- a/app/pkg/dao/posts.go
+++ b/app/pkg/dao/posts.go
@@ -66,6 +66,7 @@ func GetPostsByIds(a ...any) (m map[uint64]models.Posts, err error) {
 		}
 		mm, ok := meta[pp.Id]
 		if ok {
+			pp.Metas = mm
 			attMeta, ok := mm["_wp_attachment_metadata"]
 			if ok {
 				att, ok := attMeta.(models.WpAttachmentMetadata)
diff --git a/app/pkg/models/wp_postmeta.go b/app/pkg/models/wp_postmeta.go
index b31bb72..fc61b24 100644
--- a/app/pkg/models/wp_postmeta.go
+++ b/app/pkg/models/wp_postmeta.go
@@ -22,6 +22,7 @@ type WpAttachmentMetadata struct {
 	FileSize  int                         `json:"filesize,omitempty"`
 	Sizes     map[string]MetaDataFileSize `json:"sizes,omitempty"`
 	ImageMeta ImageMeta                   `json:"image_meta"`
+	VideoMeta
 }
 
 type ImageMeta struct {
@@ -39,6 +40,16 @@ type ImageMeta struct {
 	Keywords         []string `json:"keywords,omitempty"`
 }
 
+type VideoMeta struct {
+	Bitrate          int    `json:"bitrate,omitempty"`
+	MimeType         string `json:"mime_type,omitempty"`
+	Length           int    `json:"length,omitempty"`
+	LengthFormatted  string `json:"length_formatted,omitempty"`
+	FileFormat       string `json:"fileformat,omitempty"`
+	DataFormat       string `json:"dataformat,omitempty"`
+	CreatedTimestamp int64  `json:"created_timestamp"`
+}
+
 type MetaDataFileSize struct {
 	File     string `json:"file,omitempty"`
 	Width    int    `json:"width,omitempty"`
diff --git a/app/pkg/models/wp_posts.go b/app/pkg/models/wp_posts.go
index 34d6e41..fd9bbdc 100644
--- a/app/pkg/models/wp_posts.go
+++ b/app/pkg/models/wp_posts.go
@@ -40,6 +40,7 @@ type Posts struct {
 	IsSticky           bool
 	Thumbnail          PostThumbnail
 	AttachmentMetadata WpAttachmentMetadata
+	Metas              map[string]any
 	Author             *Users
 }
 
diff --git a/app/theme/twentyfifteen/customheader.go b/app/theme/twentyfifteen/customheader.go
index 35169b5..838623c 100644
--- a/app/theme/twentyfifteen/customheader.go
+++ b/app/theme/twentyfifteen/customheader.go
@@ -83,8 +83,8 @@ var imgStyle = `.site-header {
 
 var header = reload.Vars(constraints.Defaults)
 
-func calCustomHeader(h *wp.Handle) (r string, rand bool) {
-	img, rand := h.GetCustomHeader()
+func calCustomHeaderImg(h *wp.Handle) (r string, rand bool) {
+	img, rand := h.GetCustomHeaderImg()
 	if img.Path == "" && h.DisplayHeaderText() {
 		return
 	}
@@ -112,7 +112,7 @@ func customHeader(h *wp.Handle) func() string {
 	return func() string {
 		headers := header.Load()
 		if headers == constraints.Defaults {
-			headerss, rand := calCustomHeader(h)
+			headerss, rand := calCustomHeaderImg(h)
 			headers = headerss
 			if !rand {
 				header.Store(headers)
diff --git a/app/theme/twentyseventeen/layout/base.gohtml b/app/theme/twentyseventeen/layout/base.gohtml
index a6048ee..55d2410 100644
--- a/app/theme/twentyseventeen/layout/base.gohtml
+++ b/app/theme/twentyseventeen/layout/base.gohtml
@@ -11,7 +11,7 @@
 
         <header id="masthead" class="site-header">
 
-            <div class="custom-header" style="margin-bottom: 0px;">
+            <div class="custom-header" style="margin-bottom: 0;">
                 <div class="custom-header-media">
                     <div id="wp-custom-header" class="wp-custom-header">
                         <img src="{{.HeaderImage.Path}}" width="{{.HeaderImage.Width}}" height="{{.HeaderImage.Height}}" alt="" {{if .HeaderImage.Srcset}}srcset="{{.HeaderImage.Srcset}}" {{end}} {{if .HeaderImage.Sizes}}sizes="{{.HeaderImage.Sizes}}" {{end}}>
@@ -27,7 +27,7 @@
                             </h1>
                             <p class="site-description">{{"blogdescription"| getOption}}</p>
                         </div><!-- .site-branding-text -->
-                        {{if eq .scene "home"}}
+                        {{if eq .scene "Home"}}
                             <a href="#content" class="menu-scroll-down">
                                 <svg class="icon icon-arrow-right" aria-hidden="true" role="img">
                                     <use href="#icon-arrow-right" xlink:href="#icon-arrow-right"></use>
diff --git a/app/theme/twentyseventeen/twentyseventeen.go b/app/theme/twentyseventeen/twentyseventeen.go
index 3aad214..4ba4734 100644
--- a/app/theme/twentyseventeen/twentyseventeen.go
+++ b/app/theme/twentyseventeen/twentyseventeen.go
@@ -42,7 +42,7 @@ func configs(h *wp.Handle) {
 	h.PushCacheGroupHeadScript(constraints.AllScene, "colorScheme-customHeader", 10, colorScheme, customHeader)
 	components.WidgetArea(h)
 	pushScripts(h)
-	h.PushRender(constraints.AllStats, wp.NewHandleFn(headerImage, 10, "headerImage"))
+	h.PushRender(constraints.AllStats, wp.NewHandleFn(calCustomHeader, 10, "calCustomHeader"))
 	h.SetComponentsArgs(widgets.Widget, map[string]string{
 		"{$before_widget}": `<section id="%s" class="%s">`,
 		"{$after_widget}":  `</section>`,
@@ -51,6 +51,7 @@ func configs(h *wp.Handle) {
 		wp.NewHandleFn(wp.PreTemplate, 70, "wp.PreTemplate"),
 		wp.NewHandleFn(errorsHandle, 80, "errorsHandle"),
 	)
+	videoHeader(h)
 	h.Detail.CommentRender = commentFormat
 	h.CommonComponents()
 	h.Index.SetPageEle(paginate)
@@ -124,7 +125,7 @@ func postThumbnail(h *wp.Handle, posts *models.Posts) {
 
 var header = reload.Vars(models.PostThumbnail{})
 
-func headerImage(h *wp.Handle) {
+func calCustomHeader(h *wp.Handle) {
 	h.SetData("HeaderImage", getHeaderImage(h))
 }
 
@@ -133,7 +134,7 @@ func getHeaderImage(h *wp.Handle) (r models.PostThumbnail) {
 	if img.Path != "" {
 		return img
 	}
-	image, rand := h.GetCustomHeader()
+	image, rand := h.GetCustomHeaderImg()
 	if image.Path != "" {
 		r = image
 		r.Sizes = "100vw"
@@ -173,3 +174,25 @@ func calClass(h *wp.Handle, s string, _ ...any) string {
 	}
 	return strings.Join(class, " ")
 }
+
+func videoHeader(h *wp.Handle) {
+	h.PushComponentFilterFn("videoSetting", videoPlay)
+	wp.CustomVideo(h)
+}
+
+func videoPlay(h *wp.Handle, _ string, a ...any) string {
+	if len(a) < 1 {
+		return ""
+	}
+	v, ok := a[0].(*wp.VideoSetting)
+	if !ok {
+		return ""
+	}
+	img := getHeaderImage(h)
+	v.Width = img.Width
+	v.Height = img.Height
+	v.PosterUrl = img.Path
+	v.L10n.Play = `<span class="screen-reader-text">播放背景视频</span><svg class="icon icon-play" aria-hidden="true" role="img"> <use href="#icon-play" xlink:href="#icon-play"></use> </svg>`
+	v.L10n.Pause = `<span class="screen-reader-text">暂停背景视频</span><svg class="icon icon-pause" aria-hidden="true" role="img"> <use href="#icon-pause" xlink:href="#icon-pause"></use> </svg>`
+	return ""
+}
diff --git a/app/theme/wp/customheader.go b/app/theme/wp/customheader.go
index 613d0c9..f51eea7 100644
--- a/app/theme/wp/customheader.go
+++ b/app/theme/wp/customheader.go
@@ -1,22 +1,25 @@
 package wp
 
 import (
+	"encoding/json"
 	"fmt"
 	"github.com/fthvgb1/wp-go/app/cmd/reload"
 	"github.com/fthvgb1/wp-go/app/pkg/cache"
+	"github.com/fthvgb1/wp-go/app/pkg/constraints"
 	"github.com/fthvgb1/wp-go/app/pkg/logs"
 	"github.com/fthvgb1/wp-go/app/pkg/models"
 	"github.com/fthvgb1/wp-go/app/wpconfig"
 	"github.com/fthvgb1/wp-go/helper/slice"
 	str "github.com/fthvgb1/wp-go/helper/strings"
 	"github.com/fthvgb1/wp-go/model"
+	"regexp"
 )
 
 func (h *Handle) DisplayHeaderText() bool {
 	return h.themeMods.ThemeSupport.CustomHeader.HeaderText && "blank" != h.themeMods.HeaderTextcolor
 }
 
-func (h *Handle) GetCustomHeader() (r models.PostThumbnail, isRand bool) {
+func (h *Handle) GetCustomHeaderImg() (r models.PostThumbnail, isRand bool) {
 	var err error
 	img := reload.GetAnyValBys("headerImages", h.theme, func(theme string) []models.PostThumbnail {
 		hs, er := h.GetHeaderImages(h.theme)
@@ -42,6 +45,127 @@ func (h *Handle) GetCustomHeader() (r models.PostThumbnail, isRand bool) {
 	return
 }
 
+type VideoPlay struct {
+	Pause      string `json:"pause,omitempty"`
+	Play       string `json:"play,omitempty"`
+	PauseSpeak string `json:"pauseSpeak,omitempty"`
+	PlaySpeak  string `json:"playSpeak,omitempty"`
+}
+
+type VideoSetting struct {
+	MimeType  string    `json:"mimeType,omitempty"`
+	PosterUrl string    `json:"posterUrl,omitempty"`
+	VideoUrl  string    `json:"videoUrl,omitempty"`
+	Width     int       `json:"width,omitempty"`
+	Height    int       `json:"height,omitempty"`
+	MinWidth  int       `json:"minWidth,omitempty"`
+	MinHeight int       `json:"minHeight,omitempty"`
+	L10n      VideoPlay `json:"l10n"`
+}
+
+var videoReg = regexp.MustCompile(`^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)`)
+
+func GetVideoSetting(h *Handle, u string) (string, error) {
+
+	img, _ := h.GetCustomHeaderImg()
+	v := VideoSetting{
+		MimeType:  GetMimeType(u),
+		PosterUrl: img.Path,
+		VideoUrl:  u,
+		Width:     img.Width,
+		Height:    img.Height,
+		MinWidth:  900,
+		MinHeight: 500,
+		L10n: VideoPlay{
+			Pause:      "暂停",
+			Play:       "播放",
+			PauseSpeak: "视频已暂停",
+			PlaySpeak:  "视频正在播放",
+		},
+	}
+	if is := videoReg.FindString(u); is != "" {
+		v.MimeType = "video/x-youtube"
+	}
+	_ = h.ComponentFilterFnHook("videoSetting", "", &v)
+	s, err := json.Marshal(v)
+	if err != nil {
+		return "", err
+	}
+	setting := fmt.Sprintf(`var %s = %s`, "_wpCustomHeaderSettings", string(s))
+	script := str.Join(`<script id="wp-custom-header-js-extra">`, setting, "</script>\n")
+	return script, nil
+}
+
+func CustomVideo(h *Handle) (ok bool) {
+	mod, err := wpconfig.GetThemeMods(h.theme)
+	if err != nil {
+		logs.Error(err, "getThemeMods fail", h.theme)
+		return
+	}
+	if !mod.ThemeSupport.CustomHeader.Video || (mod.HeaderVideo < 1 && mod.ExternalHeaderVideo == "") {
+		return
+	}
+	u := ""
+	if mod.HeaderVideo > 0 {
+		post, err := cache.GetPostById(h.C, uint64(mod.HeaderVideo))
+		if err != nil {
+			logs.Error(err, "get headerVideo fail", mod.HeaderVideo)
+			return
+		}
+		u = post.Metas["_wp_attached_file"].(string)
+		u = str.Join("/wp-content/uploads/", u)
+	} else {
+		u = mod.ExternalHeaderVideo
+	}
+
+	hs, err := GetVideoSetting(h, u)
+	if err != nil {
+		logs.Error(err, "get headerVideo fail", mod.HeaderVideo)
+		return
+	}
+	scripts := []string{
+		"/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js",
+		"/wp-includes/js/dist/vendor/regenerator-runtime.min.js",
+		"/wp-includes/js/dist/vendor/wp-polyfill.min.js",
+		"/wp-includes/js/dist/dom-ready.min.js",
+		"/wp-includes/js/dist/hooks.min.js",
+		"/wp-includes/js/dist/i18n.min.js",
+		"/wp-includes/js/dist/a11y.min.js",
+		"/wp-includes/js/wp-custom-header.js",
+	}
+	scripts = slice.Map(scripts, func(t string) string {
+		return fmt.Sprintf(`<script src="%s" id="wp-%s-js"></script>
+`, t, str.Replaces(t, [][]string{
+			{"/wp-includes/js/dist/vendor/"},
+			{"/wp-includes/js/dist/"},
+			{"/wp-includes/js/"},
+			{".min.js"},
+			{".js"},
+			{"wp-", ""},
+		}))
+	})
+	h.PushGroupFooterScript(constraints.AllScene, "wp-custom-header", 10, scripts[0:len(scripts)-2]...)
+	var tr = `<script id="wp-i18n-js-after">
+wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
+</script>
+<script id='wp-a11y-js-translations'>
+( function( domain, translations ) {
+	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
+	localeData[""].domain = domain;
+	wp.i18n.setLocaleData( localeData, domain );
+} )( "default", {"translation-revision-date":"2023-04-23 22:48:55+0000","generator":"GlotPress/4.0.0-alpha.4","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"zh_CN"},"Notifications":["u901au77e5"]}},"comment":{"reference":"wp-includes/js/dist/a11y.js"}} );
+</script>
+<script src='/wp-includes/js/dist/a11y.min.js?ver=ecce20f002eda4c19664' id='wp-a11y-js'></script>
+`
+	h.PushFooterScript(constraints.AllScene,
+		NewComponent("wp-a11y-js-translations", tr, true, 10, nil),
+		NewComponent("VideoSetting", hs, true, 10, nil),
+		NewComponent("header-script", scripts[len(scripts)-1], true, 10, nil),
+	)
+	ok = true
+	return
+}
+
 func (h *Handle) GetHeaderImages(theme string) (r []models.PostThumbnail, err error) {
 	meta, err := wpconfig.GetThemeMods(theme)
 	if err != nil || meta.HeaderImage == "" {
diff --git a/app/theme/wp/ext.go b/app/theme/wp/ext.go
new file mode 100644
index 0000000..1d53e27
--- /dev/null
+++ b/app/theme/wp/ext.go
@@ -0,0 +1,121 @@
+package wp
+
+import (
+	"path/filepath"
+	"regexp"
+)
+
+var exts = map[string]string{
+	"jpg|jpeg|jpe":                 "image/jpeg",
+	"gif":                          "image/gif",
+	"png":                          "image/png",
+	"bmp":                          "image/bmp",
+	"tiff|tif":                     "image/tiff",
+	"webp":                         "image/webp",
+	"ico":                          "image/x-icon",
+	"heic":                         "image/heic",
+	"asf|asx":                      "video/x-ms-asf",
+	"wmv":                          "video/x-ms-wmv",
+	"wmx":                          "video/x-ms-wmx",
+	"wm":                           "video/x-ms-wm",
+	"avi":                          "video/avi",
+	"divx":                         "video/divx",
+	"flv":                          "video/x-flv",
+	"mov|qt":                       "video/quicktime",
+	"mpeg|mpg|mpe":                 "video/mpeg",
+	"mp4|m4v":                      "video/mp4",
+	"ogv":                          "video/ogg",
+	"webm":                         "video/webm",
+	"mkv":                          "video/x-matroska",
+	"3gp|3gpp":                     "video/3gpp",
+	"3g2|3gp2":                     "video/3gpp2",
+	"txt|asc|c|cc|h|srt":           "text/plain",
+	"csv":                          "text/csv",
+	"tsv":                          "text/tab-separated-values",
+	"ics":                          "text/calendar",
+	"rtx":                          "text/richtext",
+	"css":                          "text/css",
+	"htm|html":                     "text/html",
+	"vtt":                          "text/vtt",
+	"dfxp":                         "application/ttaf+xml",
+	"mp3|m4a|m4b":                  "audio/mpeg",
+	"aac":                          "audio/aac",
+	"ra|ram":                       "audio/x-realaudio",
+	"wav":                          "audio/wav",
+	"ogg|oga":                      "audio/ogg",
+	"flac":                         "audio/flac",
+	"mid|midi":                     "audio/midi",
+	"wma":                          "audio/x-ms-wma",
+	"wax":                          "audio/x-ms-wax",
+	"mka":                          "audio/x-matroska",
+	"rtf":                          "application/rtf",
+	"js":                           "application/javascript",
+	"pdf":                          "application/pdf",
+	"swf":                          "application/x-shockwave-flash",
+	"class":                        "application/java",
+	"tar":                          "application/x-tar",
+	"zip":                          "application/zip",
+	"gz|gzip":                      "application/x-gzip",
+	"rar":                          "application/rar",
+	"7z":                           "application/x-7z-compressed",
+	"exe":                          "application/x-msdownload",
+	"psd":                          "application/octet-stream",
+	"xcf":                          "application/octet-stream",
+	"doc":                          "application/msword",
+	"pot|pps|ppt":                  "application/vnd.ms-powerpoint",
+	"wri":                          "application/vnd.ms-write",
+	"xla|xls|xlt|xlw":              "application/vnd.ms-excel",
+	"mdb":                          "application/vnd.ms-access",
+	"mpp":                          "application/vnd.ms-project",
+	"docx":                         "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	"docm":                         "application/vnd.ms-word.document.macroEnabled.12",
+	"dotx":                         "application/vnd.openxmlformats-officedocument.wordprocessingml.template",
+	"dotm":                         "application/vnd.ms-word.template.macroEnabled.12",
+	"xlsx":                         "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	"xlsm":                         "application/vnd.ms-excel.sheet.macroEnabled.12",
+	"xlsb":                         "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+	"xltx":                         "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+	"xltm":                         "application/vnd.ms-excel.template.macroEnabled.12",
+	"xlam":                         "application/vnd.ms-excel.addin.macroEnabled.12",
+	"pptx":                         "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+	"pptm":                         "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+	"ppsx":                         "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+	"ppsm":                         "application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+	"potx":                         "application/vnd.openxmlformats-officedocument.presentationml.template",
+	"potm":                         "application/vnd.ms-powerpoint.template.macroEnabled.12",
+	"ppam":                         "application/vnd.ms-powerpoint.addin.macroEnabled.12",
+	"sldx":                         "application/vnd.openxmlformats-officedocument.presentationml.slide",
+	"sldm":                         "application/vnd.ms-powerpoint.slide.macroEnabled.12",
+	"onetoc|onetoc2|onetmp|onepkg": "application/onenote",
+	"oxps":                         "application/oxps",
+	"xps":                          "application/vnd.ms-xpsdocument",
+	"odt":                          "application/vnd.oasis.opendocument.text",
+	"odp":                          "application/vnd.oasis.opendocument.presentation",
+	"ods":                          "application/vnd.oasis.opendocument.spreadsheet",
+	"odg":                          "application/vnd.oasis.opendocument.graphics",
+	"odc":                          "application/vnd.oasis.opendocument.chart",
+	"odb":                          "application/vnd.oasis.opendocument.database",
+	"odf":                          "application/vnd.oasis.opendocument.formula",
+	"wp|wpd":                       "application/wordperfect",
+	"key":                          "application/vnd.apple.keynote",
+	"numbers":                      "application/vnd.apple.numbers",
+	"pages":                        "application/vnd.apple.pages",
+}
+
+var regs = func() map[string]*regexp.Regexp {
+	var r = make(map[string]*regexp.Regexp)
+	for k, v := range exts {
+		r[v] = regexp.MustCompile(`(?i:\.(` + k + `)$)`)
+	}
+	return r
+}()
+
+func GetMimeType(file string) string {
+	ext := filepath.Ext(file)
+	for mime, reg := range regs {
+		if reg.FindString(ext) != "" {
+			return mime
+		}
+	}
+	return ""
+}
diff --git a/helper/strings/strings.go b/helper/strings/strings.go
index 203fa01..b2219b9 100644
--- a/helper/strings/strings.go
+++ b/helper/strings/strings.go
@@ -93,6 +93,18 @@ func Replace(s string, replace map[string]string) string {
 	}
 	return s
 }
+func Replaces(s string, replace [][]string) string {
+	for _, v := range replace {
+		if len(v) < 1 {
+			continue
+		} else if len(v) == 1 {
+			s = strings.ReplaceAll(s, v[0], "")
+		} else {
+			s = strings.ReplaceAll(s, v[0], v[1])
+		}
+	}
+	return s
+}
 func (b *Builder) Sprintf(format string, a ...any) int {
 	i, _ := fmt.Fprintf(b, format, a...)
 	return i
diff --git a/readme_en.md b/readme_en.md
index f588d9d..b0746bc 100644
--- a/readme_en.md
+++ b/readme_en.md
@@ -53,13 +53,13 @@ A WordPress front-end written in Go, with relatively simple functions,  only the
 
 #### Theme support
 
-| twentyfifteen    | twentyseventeen                           |
-|------------------|-------------------------------------------|
-| site identity    | site identity                             |
-| colors           | color                                     |
-| header image     | Header Media (Video is not supported yet) |
-| Background image | additional css                            |
-| additional css   |                                           |
+| twentyfifteen    | twentyseventeen |
+|------------------|-----------------|
+| site identity    | site identity   |
+| colors           | color           |
+| header image     | Header Media    |
+| Background image | additional css  |
+| additional css   |                 |
 
 #### Plug-in mechanism