🏗️ Finish post content template split and the single page coding.

This commit is contained in:
凡梦星尘 2022-06-02 12:13:16 +08:00
parent 288ded9ddd
commit 5d1b38416e
17 changed files with 227 additions and 79 deletions

View File

@ -22,7 +22,7 @@ languages:
author: Theme NexT author: Theme NexT
subtitle: Theme for Hugo subtitle: Theme for Hugo
description: Stay easily & powerful. description: Stay easily & powerful.
keywords: Hugo,Theme,easily,powerful keywords: Hugo,NexT,Theme,easily,powerful
#-------------------------------------- #--------------------------------------
# Menus Settings # Menus Settings
@ -103,7 +103,7 @@ params:
author: NexT 主题 author: NexT 主题
subtitle: 为 Hugo 打造的主题 subtitle: 为 Hugo 打造的主题
description: 保持简单的易用性和强大的功能。 description: 保持简单的易用性和强大的功能。
keywords: Hugo,主题,简单,强大 keywords: Hugo,NexT,主题,简单,强大
favicon: favicon:
icon: /imgs/icons/favicon.ico icon: /imgs/icons/favicon.ico

View File

@ -0,0 +1,109 @@
---
title: 'Basic Elements'
description: 'The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.'
keywords: 'Basic,Element'
isCJKLanguage: false
lastmod: '2022-06-02T11:52:18+08:00'
publishDate: '2022-06-02T11:52:18+08:00'
categories:
- Example
tags:
- HTML
- Element
toc: false
draft: true
url: 'basic-elements.html'
---
The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.
<!--more-->
## Headings
Let's start with all possible headings. The HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
***
## Paragraph
According to the [HTML5 specification](https://www.w3.org/TR/html5/dom.html#elements) by [W3C](https://www.w3.org/), **HTML documents consist of a tree of elements and text**. Each element is denoted in the source by a [start tag](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags), such as `<body>`, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as `</body>`. (*Certain start tags and end tags can in certain cases be omitted and are implied by other tags.*)
Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the `a` element and its `href` attribute.
## List Types
### Ordered List
1. First item
2. Second item
3. Third item
### Unordered List
* List item
* Another item
* And another item
### Nested list
<ul>
<li>First item</li>
<li>Second item
<ul>
<li>Second item First subitem</li>
<li>Second item second subitem
<ul>
<li>Second item Second subitem First sub-subitem</li>
<li>Second item Second subitem Second sub-subitem</li>
<li>Second item Second subitem Third sub-subitem</li>
</ul>
</li>
<li>Second item Third subitem
<ol>
<li>Second item Third subitem First sub-subitem</li>
<li>Second item Third subitem Second sub-subitem</li>
<li>Second item Third subitem Third sub-subitem</li>
</ol>
</ul>
</li>
<li>Third item</li>
</ul>
### Definition List
HTML also supports definition lists.
<dl>
<dt>Blanco tequila</dt>
<dd>The purest form of the blue agave spirit...</dd>
<dt>Reposado tequila</dt>
<dd>Typically aged in wooden barrels for between two and eleven months...</dd>
</dl>
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
> Quoted text.
> This line is part of the same quote.
> Also you can *put* **Markdown** into a blockquote.
Blockquote with a citation.
<blockquote>
<p>My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.</p>
<footer><cite>Steve Wozniak</cite></footer>
</blockquote>
According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>

View File

@ -1,13 +1,10 @@
--- ---
title: Hello World title: 'Hello World'
description: 'Short description of the article.'
keywords: 'Key words'
isCJKLanguage: false isCJKLanguage: false
author: 'Author of the article' author: 'Author of the article'
lastmod: '2022-05-21T17:06:24+08:00' lastmod: '2022-06-02T11:52:03+08:00'
publishDate: '2022-05-21T16:06:24+08:00' publishDate: '2022-06-02T11:52:03+08:00'
weight: 1
categories: categories:
- Blog - Blog
@ -16,8 +13,8 @@ tags:
- Startup - Startup
toc: false toc: false
draft: false draft: true
expand: true url: 'hello-world.html'
--- ---
The worlds fastest framework for building websites. The worlds fastest framework for building websites.

View File

@ -1,12 +1,13 @@
{{- $P := .Site.Params -}}
{{- $lang := replaceRE "-([a-z]+)" (upper (substr .Site.Language -3)) .Site.Language -}} {{- $lang := replaceRE "-([a-z]+)" (upper (substr .Site.Language -3)) .Site.Language -}}
{{- .Scratch.Set "lang" $lang -}} {{- .Scratch.Set "lang" $lang -}}
{{- $vendors := .Site.Data.resources.vendors -}} {{- $vendors := .Site.Data.resources.vendors -}}
{{- $pluginVen := $P.vendors.plugins -}} {{- $pluginVen := .Site.Params.vendors.plugins -}}
{{- $pluginCDN := index $vendors $pluginVen -}} {{- $pluginCDN := index $vendors $pluginVen -}}
{{- .Scratch.Set "pluginCDN" $pluginCDN -}} {{- .Scratch.Set "pluginCDN" $pluginCDN -}}
{{ $posts := len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) }} {{ $posts := len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
{{- .Scratch.Set "posts" $posts -}} {{- .Scratch.Set "posts" $posts -}}
{{/* TODO IsHome */}}
{{- .Scratch.Set "IsHome" .IsHome }}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ $lang }}"> <html lang="{{ $lang }}">
@ -14,11 +15,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
{{ hugo.Generator }} {{ hugo.Generator }}
<link rel="shortcut icon" type="image/x-icon" href="{{ $P.favicon.icon }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
<link rel="icon" type="image/x-icon" href="{{ $P.favicon.icon }}"> <link rel="icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ $P.favicon.small }}"> <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon.small }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ $P.favicon.medium }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon.medium }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ $P.favicon.appleTouchIcon }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon.appleTouchIcon }}">
{{- partial "head.html" . }} {{- partial "head.html" . }}
<title>{{ .Title | default .Site.Title }}</title> <title>{{ .Title | default .Site.Title }}</title>
<noscript> <noscript>
@ -26,7 +27,7 @@
</noscript> </noscript>
</head> </head>
<body itemscope itemtype="http://schema.org/WebPage" {{ if $P.motion.enable }} class="use-motion" {{ end }}> <body itemscope itemtype="http://schema.org/WebPage" {{ if .Site.Params.motion.enable }} class="use-motion" {{ end }}>
<div class="headband"></div> <div class="headband"></div>
<main class="main"> <main class="main">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"> <header class="header" itemscope itemtype="http://schema.org/WPHeader">
@ -34,13 +35,13 @@
{{- partial "header.html" . }} {{- partial "header.html" . }}
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
{{- if ne $P.sidebar.display "remove" }} {{- if ne .Site.Params.sidebar.display "remove" }}
{{- partial "sidebar.html" . }} {{- partial "sidebar.html" . }}
{{- end }} {{- end }}
</header> </header>
<!-- Widgets --> <!-- Widgets -->
{{ partial "widgets.html" . }} {{ partial "widgets.html" . }}
<div class="main-inner {{ if .IsHome }}index{{ else }}page{{ end }} posts-expand"> <div class="main-inner {{ block "main_class" . }}{{ end }} posts-expand">
<!-- Submenu,Content,Comment --> <!-- Submenu,Content,Comment -->
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</div> </div>

View File

@ -0,0 +1,4 @@
{{- define "main_class" }}page{{- end }}
{{- define "main" }}
{{ partial "post_content.html" . }}
{{- end }}

View File

@ -1,64 +1,10 @@
{{- define "main_class" }}index{{- end }}
{{- define "main" }} {{- define "main" }}
{{- $lang := .Scratch.Get "lang" }} {{/* TODO IsHome */}}
{{- print "Get IsHome value from scratch before paginate: " (.Scratch.Get "IsHome") }}
{{ $paginator := .Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) }} {{ $paginator := .Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
{{- range $paginator.Pages }} {{- range $paginator.Pages }}
<div class="post-block"> {{ partial "post_content.html" . }}
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="{{ $lang }}">
<link itemprop="mainEntityOfPage" href="{{ .Permalink }}">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="{{ .Site.Params.avatar.url }}">
<meta itemprop="name" content="{{ .Params.author | default .Site.Params.author }}">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="{{ .Site.Params.author }}">
<meta itemprop="description" content="{{ .Site.Params.description }}">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="{{ .Title }}">
<meta itemprop="description" content="{{ .Description | default .Summary }}">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
{{/*- with .Sticky }}
{{- if gt . 0 }}
<span class="post-sticky-flag" title="{{ T "PostStickyTitle" }}">
<i class="fa fa-thumbtack"></i>
</span>
{{- end }}
{{- end */}}
{{/*- if not (eq .Link "") }}
<a href="{{ .Link }}" rel="noopener external nofollow noreferrer" target="_blank" class="exturl post-title-link post-title-link-external">{{ .Title }}</a>
{{- else */}}
<a href="{{ .Permalink }}" itemprop="url" class="post-title-link">{{ .Title }}</a>
{{/*- end */}}
</h2>
<div class="post-meta-container">
{{ partial "post_meta/created_date.html" . }}
{{ partial "post_meta/update_date.html" . }}
{{ partial "post_meta/categories.html" . }}
{{ partial "post_meta/words.html" . }}
</div>
</header>
<!-- POST BODY -->
<div class="post-body" itemprop="articleBody">
{{- if .Params.Expand }}
{{ .Content }}
{{- else }}
{{ .Summary }}
{{- end }}
</div>
<footer class="post-footer">
{{- if and .Site.Params.readMoreBtn (not .Params.Expand) }}
<div class="post-button">
<a class="btn" href="{{ .Permalink }}#more" rel="contents">
{{ T "PostReadMore" }} &raquo;
</a>
</div>
{{- end }}
<div class="post-eof"></div>
</footer>
</article>
</div>
{{- end }} {{- end }}
{{- partial "partials/pagination.html" . }} {{- partial "partials/pagination.html" . }}
{{- end }} {{- end }}

View File

@ -14,7 +14,7 @@
{{- end }} {{- end }}
{{- .Scratch.Set "metaImg" $img }} {{- .Scratch.Set "metaImg" $img }}
<meta itemprop="image" content="{{ $img | absURL }}" /> <meta itemprop="image" content="{{ $img | absURL }}" />
<meta itemprop="keywords" content="{{ if .IsPage}}{{ delimit .Params.tags ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}" /> <meta itemprop="keywords" content="{{ if and .IsPage (isset .Params "tags")}}{{ delimit .Params.tags "," }}{{ else }}{{ .Site.Params.keywords }}{{ end }}" />
{{- if .Site.Params.darkmode }} {{- if .Site.Params.darkmode }}
<meta name="theme-color" content="{{ .Site.Params.themeColor.dark }}" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="{{ .Site.Params.themeColor.dark }}" media="(prefers-color-scheme: dark)" />
{{- else }} {{- else }}

View File

@ -0,0 +1,11 @@
<div class="post-body" itemprop="articleBody">
{{- if not .IsHome }}
{{- if .Params.Expand }}
{{ .Content }}
{{- else }}
{{ .Summary }}
{{- end }}
{{- else }}
{{ .Content }}
{{- end }}
</div>

View File

@ -0,0 +1,28 @@
{{- if .Scratch.Get "IsHome" }}
{{- if and .Site.Params.readMoreBtn (not .Params.Expand) }}
<div class="post-button">
<a class="btn" href="{{ .Permalink }}#more" rel="contents">
{{ T "PostReadMore" }} &raquo;
</a>
</div>
{{- end }}
<div class="post-eof"></div>
{{- else }}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
{{- with .NextInSection }}
<a href="{{ .Permalink}}" rel="next" title="{{.Title}}">
<i class="fa fa-chevron-left"></i> {{.Title}}
</a>
{{- end }}
</div>
<div class="post-nav-prev post-nav-item">
{{- with .PrevInSection }}
<a href="{{ .Permalink}}" rel="prev" title="{{.Title}}">
{{.Title}}
<i class="fa fa-chevron-right"></i>
</a>
{{- end }}
</div>
</div>
{{- end }}

View File

@ -0,0 +1,42 @@
<link itemprop="mainEntityOfPage" href="{{ .Permalink }}">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="{{ .Site.Params.avatar.url }}">
<meta itemprop="name" content="{{ .Params.author | default .Site.Params.author }}">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="{{ .Site.Params.author }}">
<meta itemprop="description" content="{{ .Site.Params.description }}">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="{{ .Title }}">
<meta itemprop="description" content="{{ .Description | default .Summary }}">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
{{- if and (isset .Params "sticky") (gt .Params.Sticky 0) }}
<span class="post-sticky-flag" title="{{ T "PostStickyTitle" }}">
<i class="fa fa-thumbtack"></i>
</span>
{{- end }}
{{- if and (isset .Params "link") (ne .Params.Link "") }}
<a href="{{ .Params.Link }}" rel="noopener external nofollow noreferrer" target="_blank" class="exturl post-title-link post-title-link-external">
{{ .Title }}
<i class="fa fa-external-link-alt"></i>
</a>
{{- else }}
<a href="{{ .Permalink }}" itemprop="url" class="post-title-link">{{ .Title }}</a>
{{- end }}
</h2>
{{/* TODO IsHome */}}
{{ print "Get IsHome value in pages loop: " ($.Scratch.Get "IsHome") }}
<div class="post-meta-container">
{{ partial "post/post_meta/created_date.html" . }}
{{ partial "post/post_meta/update_date.html" . }}
{{ partial "post/post_meta/categories.html" . }}
{{- if not (.Scratch.Get "IsHome") }}
{{ partial "post/post_meta/words.html" . }}
{{ partial "post/post_meta/readtime.html" . }}
{{ partial "post/post_meta/views.html" . }}
{{ end }}
</div>
</header>

View File

@ -0,0 +1,10 @@
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="{{ .Scratch.Get "lang" }}">
{{ partial "post/post_header.html" . }}
<!-- POST BODY -->
{{ partial "post/post_body.html" . }}
<footer class="post-footer">
{{ partial "post/post_footer.html" . }}
</footer>
</article>
</div>