Finish head attribute settings.

- Add open graph meta attribute (also with twitter card, google puls, facebook)
- Split the modules with css, icon, open graph etc.
This commit is contained in:
凡梦星尘 2022-05-07 12:23:19 +08:00
parent a24830d8e3
commit 4755b77427
9 changed files with 85 additions and 31 deletions

View File

@ -47,6 +47,11 @@ params:
author: NexT 主题 author: NexT 主题
subtitle: 为 Hugo 打造的主题 subtitle: 为 Hugo 打造的主题
description: 保持简单的易用性和强大的功能。 description: 保持简单的易用性和强大的功能。
# Custom logo will use in open graph image's URL
# Use the "show" variable to control whether it is displayed in the sidebar
customLogo:
show: true
url: /imgs/hugo-next-logo.png
favicon: favicon:
icon: /imgs/icons/favicon.ico icon: /imgs/icons/favicon.ico
@ -54,6 +59,28 @@ params:
medium: /imgs/icons/favicon-32x32-next.png medium: /imgs/icons/favicon-32x32-next.png
appleTouchIcon: /imgs/icons/apple-touch-icon-next.png appleTouchIcon: /imgs/icons/apple-touch-icon-next.png
# Open graph settings
openGraph:
enable: true
#twitter:
# card: <twitter:card>
# creator: <twitter:creator>
# image: <twitter:image>
# site: <twitter:site>
#googlePlus: <g+:profile_link>
#facebook:
# admins: <fb:admin_id>
# app_id: <fb:app_id>
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /imgs/hugo-next-avatar.png
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true
# Creative Commons 4.0 International License. # Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/ # See: https://creativecommons.org/about/cclicenses/
creativeCommons: creativeCommons:
@ -68,12 +95,4 @@ params:
# No setting is required here and can be done by multilanguage # No setting is required here and can be done by multilanguage
# language: deed.zh # language: deed.zh
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /imgs/hugo-next-avatar.png
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

View File

@ -1,5 +1,5 @@
{{ $langCode := replaceRE "-([a-z]+)" (upper (substr .Site.Language -3)) .Site.Language }} {{- $langCode := replaceRE "-([a-z]+)" (upper (substr .Site.Language -3)) .Site.Language -}}
{{ $P := .Site.Params }} {{- $P := .Site.Params -}}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ $langCode }}"> <html lang="{{ $langCode }}">
<head> <head>
@ -7,18 +7,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="generator" content="Hugo v{{ hugo.Version }}"> <meta name="generator" content="Hugo v{{ hugo.Version }}">
{{ partial "partials/head.html" . }} {{- partial "partials/head.html" . }}
<link rel="canonical" href="{{ .Site.BaseURL }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ $P.favicon.icon }}">
<link rel="icon" type="image/x-icon" href="{{ $P.favicon.icon }}">
<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 }}">
<link rel="stylesheet" href="/css/main.css">
{{- $style := resources.Get "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<title>{{ .Site.Title }}</title> <title>{{ .Site.Title }}</title>
</head> </head>

View File

@ -1,9 +1,4 @@
<meta property="og:type" content="website"> {{- partial "head/favicon.html" . }}
<meta property="og:title" content="Hugo"> {{- partial "head/open_graph.html" . }}
<meta property="og:url" content="{{ .Site.BaseURL }}"> {{ partial "head/css.html" . }}
<meta property="og:site_name" content="Hugo"> {{- partial "head/analytics.html" . }}
{{/*<meta property="og:locale" content="{{ .langCode }}">*/}}
<meta property="article:author" content="{{ .Site.Params.author }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

View File

View File

@ -0,0 +1,6 @@
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
<!-- NexT theme css style -->
<link rel="stylesheet" href="/css/main.css">
{{- $style := resources.Get "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

View File

@ -0,0 +1,7 @@
<!-- Website icons -->
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
<link rel="icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon.small }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon.medium }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon.appleTouchIcon }}">
<!-- Website icons -->

View File

@ -0,0 +1,33 @@
{{- $Site := .Site -}}
{{- $Params := .Site.Params -}}
{{- $Page := .Page -}}
{{- with .Site.Params.openGraph -}}
{{- if .enable -}}
{{- $langCode := replaceRE "-([a-z]+)" (upper (substr $Site.Language -3)) $Site.Language }}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ $Page.Title }}">
<meta property="og:description" content="{{ default $Params.description $Page.Description }}">
<meta property="og:image" content="{{ default $Params.customLogo.url }}">
<meta property="og:url" content="{{ $Page.Permalink }}">
<meta property="og:site_name" content="{{ $Site.Title }}">
<meta property="og:locale" content="{{ $langCode }}">
<meta property="article:author" content="{{ default $Params.author $Page.Params.Author }}">
{{- 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 -}}
{{- end -}}

View File

@ -14,6 +14,11 @@
<i class="logo-line"></i> <i class="logo-line"></i>
</a> </a>
<p class="site-subtitle" itemprop="description">{{ .Site.Params.subtitle }}</p> <p class="site-subtitle" itemprop="description">{{ .Site.Params.subtitle }}</p>
{{ with .Site.Params.customLogo }}
{{ if .show }}
<img class="custom-logo-image" src="{{ .url }}" alt="Custom Logo">
{{ end }}
{{ end }}
</div> </div>
<div class="site-nav-right"> <div class="site-nav-right">
<div class="toggle popup-trigger"> <div class="toggle popup-trigger">

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB