🏗️ Finish the head attributes redesign.

This commit is contained in:
凡梦星尘 2022-05-31 21:50:35 +08:00
parent eab0ea3bb1
commit f2ff0a5299
11 changed files with 167 additions and 143 deletions

View File

@ -1,39 +1,39 @@
// CSS Style Guide: https://codeguide.co/#css
// All variables from site's config content.
{{- $P := .Site.Params }}
// Base
$scheme: {{ .P.scheme }};
$darkmode: {{ .P.darkmode }};
$scheme: {{ $P.scheme }};
$darkmode: {{ $P.darkmode }};
$body_scrollbar_overlay: {{ .P.bodyScrollbar.overlay }};
$body_scrollbar_stable: {{ .P.bodyScrollbar.stable }};
$mermaid_enable: {{ .P.mermaid.enable }};
$mobile_layout_economy: {{ .P.mobileLayoutEconomy }};
$theme_color_dark: {{ .P.themeColor.dark }};
$theme_color_light: {{ .P.themeColor.light }};
$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }};
$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }};
$mermaid_enable: {{ $P.mermaid.enable }};
$mobile_layout_economy: {{ $P.mobileLayoutEconomy }};
$theme_color_dark: {{ $P.themeColor.dark }};
$theme_color_light: {{ $P.themeColor.light }};
// Header
$bookmark_color: {{ .P.bookmark.color }};
$bookmark_enable: {{ .P.bookmark.enable }};
$github_banner_enable: {{ .P.githubBanner.enable }};
$menu_settings_badges: {{ .P.menuSets.badges }};
$bookmark_color: {{ $P.bookmark.color }};
$bookmark_enable: {{ $P.bookmark.enable }};
$github_banner_enable: {{ $P.githubBanner.enable }};
$menu_settings_badges: {{ $P.menuSets.badges }};
// Footer
$footer_icon_color: {{ .P.footer.icon.color }};
$footer_icon_animated: {{ .P.footer.icon.animated }};
$footer_beian_enable: {{ .P.footer.beian.enable }};
$footer_icon_color: {{ $P.footer.icon.color }};
$footer_icon_animated: {{ $P.footer.icon.animated }};
$footer_beian_enable: {{ $P.footer.beian.enable }};
// Counter
$busuanzi_enable: {{ .P.busuanzi.enable }};
$busuanzi_visitors: {{ .P.busuanzi.visitors }};
$busuanzi_views: {{ .P.busuanzi.views }};
$busuanzi_post_views: {{ .P.busuanzi.postViews }};
$busuanzi_enable: {{ $P.busuanzi.enable }};
$busuanzi_visitors: {{ $P.busuanzi.visitors }};
$busuanzi_views: {{ $P.busuanzi.views }};
$busuanzi_post_views: {{ $P.busuanzi.postViews }};
// Font
$font_enable: {{ .P.font.enable }};
$font_global_size: {{ default .P.font.global.size 1 }};
$font_headings_size: {{ default .P.font.headings.size 1.625 }};
$font_title_size: {{ default .P.font.title.size 1.375 }};
$font_enable: {{ $P.font.enable }};
$font_global_size: {{ default $P.font.global.size 1 }};
$font_headings_size: {{ default $P.font.headings.size 1.625 }};
$font_title_size: {{ default $P.font.title.size 1.375 }};
// Code & Code blocks
// TODO find the configure variable
@ -42,88 +42,88 @@ $highlight_dark_foreground: #222;
$highlight_light_background: #000;
$highlight_light_foreground: #222;
$codeblock_copy_btn_style: {{ .P.codeblock.copyBtn.style }};
$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }};
// Sidebar
$sidebar_offset: {{ .P.sidebar.offset }};
$sidebar_padding: {{ .P.sidebar.padding }};
$sidebar_position: {{ .P.sidebar.position }};
$sidebar_width: {{ .P.sidebar.width }};
$sidebar_offset: {{ $P.sidebar.offset }};
$sidebar_padding: {{ $P.sidebar.padding }};
$sidebar_position: {{ $P.sidebar.position }};
$sidebar_width: {{ $P.sidebar.width }};
$motion_enable: {{ .P.motion.enable }};
$motion_transition_sidebar: {{ .P.motion.transition.sidebar }};
$motion_enable: {{ $P.motion.enable }};
$motion_transition_sidebar: {{ $P.motion.transition.sidebar }};
$back2top_enable: {{ .P.backTop.enable }};
$back2top_scrollpercent: {{ .P.backTop.scrollpercent }};
$back2top_sidebar: {{ .P.backTop.sidebar }};
$back2top_enable: {{ $P.backTop.enable }};
$back2top_scrollpercent: {{ $P.backTop.scrollpercent }};
$back2top_sidebar: {{ $P.backTop.sidebar }};
$avatar_rotated: {{ .P.avatar.rotated }};
$avatar_rounded: {{ .P.avatar.rounded }};
$avatar_rounded: {{ .P.avatar.rounded }};
$site_state: {{ .P.siteState }};
$social_icons_only: {{ .P.socialIcons.iconsOnly }};
$social_icons_transition: {{ .P.socialIcons.transition }};
$links_settings_layout: {{ .P.linksSets.layout }};
$toc_enable: {{ .P.toc.enable }};
$toc_expand_all: {{ .P.toc.expandAll }};
$toc_wrap: {{ .P.toc.wrap }};
$avatar_rotated: {{ $P.avatar.rotated }};
$avatar_rounded: {{ $P.avatar.rounded }};
$avatar_rounded: {{ $P.avatar.rounded }};
$site_state: {{ $P.siteState }};
$social_icons_only: {{ $P.socialIcons.iconsOnly }};
$social_icons_transition: {{ $P.socialIcons.transition }};
$links_settings_layout: {{ $P.linksSets.layout }};
$toc_enable: {{ $P.toc.enable }};
$toc_expand_all: {{ $P.toc.expandAll }};
$toc_wrap: {{ $P.toc.wrap }};
// Posts
$creative_commons_post: {{ .P.creativeCommons.post }};
$follow_me: {{ isset .P "followMe" }};
$motion_trans_coll_header: {{ .P.motion.transition.collHeader }};
$motion_trans_post_block: {{ .P.motion.transition.postBlock }};
$motion_trans_post_body: {{ .P.motion.transition.postBody }};
$motion_trans_post_header: {{ .P.motion.transition.postHeader }};
$post_edit_enable: {{ .P.postEdit.enable }};
$post_meta_item_text: {{ .P.postMeta.itemText }};
$reward_settings_animation: {{ .P.rewardSets.animation }};
$creative_commons_post: {{ $P.creativeCommons.post }};
$follow_me: {{ isset $P "followMe" }};
$motion_trans_coll_header: {{ $P.motion.transition.collHeader }};
$motion_trans_post_block: {{ $P.motion.transition.postBlock }};
$motion_trans_post_body: {{ $P.motion.transition.postBody }};
$motion_trans_post_header: {{ $P.motion.transition.postHeader }};
$post_edit_enable: {{ $P.postEdit.enable }};
$post_meta_item_text: {{ $P.postMeta.itemText }};
$reward_settings_animation: {{ $P.rewardSets.animation }};
// TODO find the paramters
$text_align_desktop: center;
$text_align_mobile: center;
// Note
$note_icons: {{ .P.note.icons }};
$note_light_bg_offset: {{ .P.note.lightBgOffset }};
$note_style: {{ .P.note.style }};
$note_icons: {{ $P.note.icons }};
$note_light_bg_offset: {{ $P.note.lightBgOffset }};
$note_style: {{ $P.note.style }};
// Tabs
$tabs_transition_labels: {{ .P.tabs.transition.labels }};
$tabs_transition_tabs: {{ .P.tabs.transition.tabs }};
$tabs_transition_labels: {{ $P.tabs.transition.labels }};
$tabs_transition_tabs: {{ $P.tabs.transition.tabs }};
// Reading progress bar
$reading_progress_start: {{ .P.readingProgress.start }};
$reading_progress_color: {{ .P.readingProgress.color }};
$reading_progress_enable: {{ .P.readingProgress.enable }};
$reading_progress_height: {{ .P.readingProgress.height }};
$reading_progress_position: {{ .P.readingProgress.position }};
$reading_progress_reversed: {{ .P.readingProgress.reversed }};
$reading_progress_start: {{ $P.readingProgress.start }};
$reading_progress_color: {{ $P.readingProgress.color }};
$reading_progress_enable: {{ $P.readingProgress.enable }};
$reading_progress_height: {{ $P.readingProgress.height }};
$reading_progress_position: {{ $P.readingProgress.position }};
$reading_progress_reversed: {{ $P.readingProgress.reversed }};
// Thirdparty
$math_mathjax_enable: {{ .P.math.mathjax.enable }};
$related_posts_enable: {{ .P.relatedPosts.enable }};
$pdf_enable: {{ .P.pdf.enable }};
$pdf_height: {{ .P.pdf.height }};
$math_mathjax_enable: {{ $P.math.mathjax.enable }};
$related_posts_enable: {{ $P.relatedPosts.enable }};
$pdf_enable: {{ $P.pdf.enable }};
$pdf_height: {{ $P.pdf.height }};
// Search engine
$algolia_search_enable: {{ .P.algoliaSearch.enable }};
$local_search_enable: {{ .P.localSearch.enable }};
$algolia_search_enable: {{ $P.algoliaSearch.enable }};
$local_search_enable: {{ $P.localSearch.enable }};
// Online IM
$gitalk_enable: {{ .P.gitalk.enable }};
$gitter_enable: {{ .P.gitter.enable }};
$gitalk_enable: {{ $P.gitalk.enable }};
$gitter_enable: {{ $P.gitter.enable }};
// Comment
$disqusjs_enable: {{ .P.disqusjs.enable }};
$utterances_enable: {{ .P.utterances.enable }};
$disqusjs_enable: {{ $P.disqusjs.enable }};
$utterances_enable: {{ $P.utterances.enable }};
//
// Variables Layer
// --------------------------------------------------
@import '_variables/base';
{{ printf "/* %s Scheme Style */" .P.scheme }}
{{ printf "@import '_variables/%s';" .P.scheme }}
{{ printf "/* %s Scheme Style */" $P.scheme }}
{{ printf "@import '_variables/%s';" $P.scheme }}
// TODO
//@import 'theme.injects.variable';
@ -151,7 +151,7 @@ $utterances_enable: {{ .P.utterances.enable }};
// Schemes Layer
// --------------------------------------------------
{{ printf "@import '_schemes/%s/';" .P.scheme }}
{{ printf "@import '_schemes/%s/';" $P.scheme }}
// Custom Layer
// TODO

View File

@ -24,6 +24,7 @@ languages:
author: Theme NexT
subtitle: Theme for Hugo
description: Stay easily & powerful.
keywords: Hugo,Theme,easily,powerful
#--------------------------------------
# Menus Settings
@ -101,6 +102,7 @@ params:
author: NexT 主题
subtitle: 为 Hugo 打造的主题
description: 保持简单的易用性和强大的功能。
keywords: Hugo,主题,简单,强大
favicon:
icon: /imgs/icons/favicon.ico
@ -129,13 +131,12 @@ params:
# See: https://hexo.io/docs/helpers#open-graph
openGraph:
enable: true
# twitter:
# card: <twitter:card>
# creator: <twitter:creator>
# image: <twitter:image>
# site: <twitter:site>
# googlePlus: <g+:profile_link>
# facebook:
#twitter:
#creator: <twitter:creator>
#image: <twitter:image>
#site: <twitter:site>
#googlePlus: <g+:profile_link>
#facebook:
# admins: <fb:admin_id>
# app_id: <fb:app_id>

View File

@ -19,7 +19,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="{{ $P.favicon.small }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ $P.favicon.medium }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ $P.favicon.appleTouchIcon }}">
{{- partial "head.html" (dict "P" $P "Page" .Page "Scratch" .Scratch) }}
{{- partial "head.html" . }}
<title>{{ .Title | default .Site.Title }}</title>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">

View File

@ -1,2 +1,15 @@
{{- partial "head/meta" . }}
{{- if .Site.Params.openGraph.enable }}
{{- partial "head/opengraph" . }}
{{- end }}
{{ if isset .Site.Params.openGraph "twitter" }}
{{- partial "head/twitter" . }}
{{- end }}
{{- if isset .Site.Params.openGraph "googleplus" }}
{{- partial "head/googleplus" . }}
{{- end }}
{{- if isset .Site.Params.openGraph "facebook" }}
{{- partial "head/facebook" . }}
{{- end }}
{{ partial "head/verify" . }}
{{- partial "head/style" . }}

View File

@ -0,0 +1,5 @@
{{- with .Site.Params.openGraph.facebook }}
{{- range $attr, $val := . }}
<meta property="fb:{{ $attr }}" content="{{ $val }}">
{{- end }}
{{- end }}

View File

@ -0,0 +1,3 @@
{{- with .Site.Params.openGraph.googlePlus }}
<link rel="publisher" href=" {{ . }}">
{{- end }}

View File

@ -1,56 +1,22 @@
{{- if .P.darkmode }}
<meta name="theme-color" content="{{ .P.themeColor.dark }}" media="(prefers-color-scheme: dark)">
<meta itemprop="name" content="{{ .Title }}" />
<meta itemprop="description" content="{{ .Description | default .Site.Params.description }}" />
{{- if .IsPage }}
{{- with .PublishDate }}
<meta itemprop="datePublished" {{ . }} />
{{- end }}
{{- with .Lastmod }}
<meta itemprop="dateModified" {{ . }} />
{{- end }}
{{- end }}
{{- $img := .Site.Params.customLogo | default .Site.Params.avatar.url }}
{{- if and .IsPage (isset .Params "images") }}
{{- $img := index .Params.images 0 }}
{{- end }}
{{- .Scratch.Set "metaImg" $img }}
<meta itemprop="image" content="{{ $img | absURL }}" />
<meta itemprop="keywords" content="{{ if .IsPage}}{{ delimit .Params.tags ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}" />
{{- if .Site.Params.darkmode }}
<meta name="theme-color" content="{{ .Site.Params.themeColor.dark }}" media="(prefers-color-scheme: dark)" />
{{- else }}
<meta name="theme-color" content="{{ .P.themeColor.light }}" media="(prefers-color-scheme: light)">
{{- end }}
{{- with .P.googleSiteVerification }}
<meta name="google-site-verification" content="{{ . }}">
{{- end }}
{{- with .P.bingSiteVerification }}
<meta name="msvalidate.01" content="{{ . }}">
{{- end }}
{{- with .P.yandexSiteVerification }}
<meta name="yandex-verification" content="{{ . }}">
{{- end }}
{{- with .P.baiduSiteVerification }}
<meta name="baidu-site-verification" content="{{ . }}">
{{- end }}
{{- $lang := .Scratch.Get "lang" }}
{{- $P := .P }}
{{- $Page := .Page }}
{{- with $P.openGraph }}
{{- if .enable }}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ $Page.Title }}">
<meta property="og:description" content="{{ default $P.description $Page.Description }}">
<meta property="og:image" content="TODO" />
<meta property="og:image:width" content="TODO" />
<meta property="og:image:height" content="TODO" />
<meta property="og:image:type" content="TODO" />
<meta property="og:image" content="{{ $P.customLogo }}">
<meta property="og:url" content="{{ $Page.Permalink }}">
<meta property="og:site_name" content="{{ default $Page.Title $Page.Site.Title }}">
<meta property="og:locale" content="{{ $lang }}">
{{- if not $Page.IsHome }}
<meta property="article:author" content="{{ default $P.author $Page.Params.Author }}">
<meta property="article:published_time" content="{{ $Page.PublishDate }}" />
<meta property="article:modified_time" content="{{ $Page.Lastmod }}" />
{{- end }}
{{- with .twitter }}
{{- range $attr, $val := . }}
<meta name="twitter:{{ $attr }}" content="{{ $val }}">
{{- end }}
{{- end }}
{{- with .googlePlus }}
<link rel="publisher" href=" {{ . }}">
{{- end }}
{{- with .facebook }}
{{- range $attr, $val := . }}
<meta property="fb:{{ $attr }}" content="{{ $val }}">
{{- end }}
{{- end }}
{{- end }}
<meta name="theme-color" content="{{ .Site.Params.themeColor.light }}" media="(prefers-color-scheme: light)" />
{{- end }}

View File

@ -0,0 +1,15 @@
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:title" content="{{ .Title | default .Site.Title }}" />
<meta property="og:description" content="{{ .Description | default .Site.Params.Description }}" />
<meta property="og:image" content="{{ .Scratch.Get "metaImg" }}" />
<meta property="og:image:width" content="312" />
<meta property="og:image:height" content="312" />
<meta property="og:image:type" content="image/jpeg/png/svg/jpg" />
<meta property="og:url" content="{{ .Permalink }}"/>
<meta property="og:site_name" content="{{ .Title | default .Site.Title }}" />
<meta property="og:locale" content="{{ .Scratch.Get "lang" }}"/>
{{- if .IsHome }}
<meta property="article:author" content="{{ (delimit .Authors ",") | default .Site.Params.Author }}" />
<meta property="article:published_time" content="{{ .PublishDate }}" />
<meta property="article:modified_time" content="{{ .Lastmod }}" />
{{- end }}

View File

@ -1,6 +1,6 @@
<!-- Plugin style files -->
{{- $cssRes := .Page.Site.Data.resources.css }}
{{- $vendor := .P.vendors.plugins }}
{{- $cssRes := .Site.Data.resources.css }}
{{- $vendor := .Site.Params.vendors.plugins }}
{{- $vendorCDN := .Scratch.Get "pluginCDN" }}
{{- range $css := $cssRes }}
{{- $pluginCSS := $vendorCDN }}

View File

@ -0,0 +1,7 @@
{{- $img := .Site.Params.openGraph.twitter.image | default (.Scratch.Get "metaImg") }}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:creator" content="{{ .Site.Params.openGraph.twitter.creator }}"/>
<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}{{ end }}"/>
<meta name="twitter:image" content="{{ $img | absURL }}"/>
<meta name="twitter:title" content="{{ .Title }}"/>
<meta name="twitter:site" content="@{{ .Site.Params.openGraph.twitter.site }}"/>

View File

@ -0,0 +1,14 @@
{{ if .IsHome }}
{{- with .Site.Params.googleSiteVerification }}
<meta name="google-site-verification" content="{{ . }}">
{{- end }}
{{- with .Site.Params.bingSiteVerification }}
<meta name="msvalidate.01" content="{{ . }}">
{{- end }}
{{- with .Site.Params.yandexSiteVerification }}
<meta name="yandex-verification" content="{{ . }}">
{{- end }}
{{- with .Site.Params.baiduSiteVerification }}
<meta name="baidu-site-verification" content="{{ . }}">
{{- end }}
{{ end }}