🏗️ Finish post copy right widget coding.

This commit is contained in:
凡梦星尘 2022-06-03 22:37:33 +08:00
parent 5d1b38416e
commit fa5195c8a2
19 changed files with 408 additions and 171 deletions

View File

@ -19,11 +19,31 @@
}
@if $creative_commons_post {
.post-copyright ul {
list-style: none;
padding: .5em 1em;
@include post-card();
.post-copyright {
border-left: 3px solid #ff2a2a;
background: var(--card-bg-color);
img {
margin: 8px;
opacity: .8;
filter: blur(.08em);
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-ms-transform: rotate(320deg);
-o-transform: rotate(320deg);
transform: rotate(320deg);
}
ul {
list-style: none;
padding: .5em 1em;
@include post-card();
border: none;
background: none;
}
}
}
.post-tags {

View File

@ -299,7 +299,7 @@ $b2t-bg-color : $black-deep;
$post-eof-margin-top : 80px; // or 160px for more white space;
$post-eof-margin-bottom : 60px; // or 120px for less white space;
$post-card-margin : 1em 0 0;
$post-card-margin : 1em 0;
// Note colors

View File

@ -8,6 +8,11 @@ baseURL: /
theme: hugo-theme-next
markup:
goldmark:
renderer:
unsafe: true
defaultContentLanguage: zh-cn
languages:
zh-cn:
@ -123,7 +128,7 @@ params:
# Available values: big | small
size: big
sidebar: true
post: false
post: true
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
# language:
@ -173,7 +178,7 @@ params:
sidebar:
# Sidebar Position.
position: left
position: right
#position: right
# Manual define the sidebar width. If commented, will be default for:

View File

@ -0,0 +1,60 @@
---
title: "'Hello World'"
isCJKLanguage: true
author: elkan1788
lastmod: '2022-06-02T11:52:03+08:00'
publishDate: '2022-06-02T11:52:03+08:00'
categories:
- 博客
tags:
- Hugo
- 开始
toc: false
draft: true
url: hello-world2.html
---
The worlds fastest framework for building websites.
[Hugo](https://gohugo.io/) is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
<!--more-->
## Quick Start
### Create a new post
```shell
$ hugo new hello-world.md
```
More info: [Content's Formats](https://gohugo.io/content-management/formats/)
### Run server
```shell
$ hugo server
```
More info: [Hugo Server CLI](https://gohugo.io/commands/hugo_server/)
### Generate static files
```shell
$ hugo
```
More info: [Hugo Build Site](https://gohugo.io/commands/hugo/)
### Deploy to remote sites
```language
$ hugo deploy
```
More info: [Hugo Deployment](https://gohugo.io/commands/hugo_deploy/)
See you will enjoy the Hugo journey and good luck for you!

View File

@ -1,109 +0,0 @@
---
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,60 +1,62 @@
---
title: 'Hello World'
isCJKLanguage: false
title: "世界,你好!"
description: "快速的描述下有关于 Hugo 建站的基本用法。"
isCJKLanguage: true
author: 'Author of the article'
lastmod: '2022-06-02T11:52:03+08:00'
publishDate: '2022-06-02T11:52:03+08:00'
lastmod: 2022-06-03T16:43:23+08:00
publishDate: 2022-06-02T11:52:03+08:00
categories:
- Blog
- 博客
tags:
- Hugo
- Startup
- 开始
toc: false
draft: true
url: 'hello-world.html'
draft: false
expand: true
url: hello-world.html
weight: 1
---
The worlds fastest framework for building websites.
“Hugo 是现今世界上最快的网站建设框架。”
[Hugo](https://gohugo.io/) is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
[Hugo](https://gohugo.io/) 也是最流行的开源静态站点生成器之一。 凭借其惊人的速度和灵活性Hugo 让建设网站再次变得有趣起来。
<!--more-->
## Quick Start
## 快速开始
### Create a new post
### 发表新文章
```shell
$ hugo new hello-world.md
```
More info: [Content's Formats](https://gohugo.io/content-management/formats/)
更多信息:[内容格式](https://gohugo.io/content-management/formats/)
### Run server
### 启动服务
```shell
$ hugo server
```
More info: [Hugo Server CLI](https://gohugo.io/commands/hugo_server/)
更多信息:[Hugo 服务命令行](https://gohugo.io/commands/hugo_server/)
### Generate static files
### 生成静态文件
```shell
$ hugo
```
More info: [Hugo Build Site](https://gohugo.io/commands/hugo/)
更多信息:[Hugo 建站](https://gohugo.io/commands/hugo/)
### Deploy to remote sites
### 部署到服务器
```language
$ hugo deploy
```
More info: [Hugo Deployment](https://gohugo.io/commands/hugo_deploy/)
更多信息:[Hugo 发布](https://gohugo.io/commands/hugo_deploy/)
See you will enjoy the Hugo journey and good luck for you!
祝你好运,相信你会喜欢上 Hugo 建站的旅程!

View File

@ -0,0 +1,193 @@
---
title: "Markdown 语法支持"
description: "描述下 NexT 主题所支持的各种 markdown 语法及效果展示。"
isCJKLanguage: false
lastmod: 2022-06-01T11:52:18+08:00
publishDate: 2022-06-01T11:52:18+08:00
author: Mainroad
originLink: https://mainroad-demo.netlify.app/post/basic-elements/
categories:
- 示例
tags:
- Markdown
- 语法
toc: false
draft: false
url: markdown-syntax.html
---
仅以此篇文章来测试下在 `NexT` 主题中在通过 `Hugo` 引擎来建站时,是否支持 `Markdown` 文件内容中所写的各种语法,并展示下实际的效果。
<!--more-->
## 标题样式
让我们从所有可能的标题开始,在 HTML 中 `<h1>`-`<h6>`元素分别表示六个不同级别的标题样式,其中 `<h1>` 为最大标题,`<h6>`为最小标题,效果如下:
# 标题 1
## 标题 2
### 标题 3
#### 标题 4
##### 标题 5
###### 标题 6
## 段落格式
根据[ W3C ](https://www.w3.org/)定义的[ HTML5 规范](https://www.w3.org/TR/html5/dom.html#elements)**HTML 文档由元素和文本组成**。每个元素的组成都由一个[开始标记](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags)表示,例如: `<body>` ,和[结束标记](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags)表示,例如: `</body>` 。(*某些开始标记和结束标记在某些情况下可以省略,并由其他标记暗示。*
元素可以具有属性,这些属性控制元素的工作方式。例如:超链接是使用 `a` 元素及其 `href` 属性形成的。
## 图像
![hugo-next-primary](//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png)
<img src="//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-secondary.png" width="150"/>
## 列表类型
### 有序列表
1. 第一个元素
2. 第二个元素
3. 第三个元素
### 无序列表
* 列表元素
* 另一个元素
* 和其它元素
### 嵌套列表
借助 HTML 的 `ul` 元素来实现。
<ul>
<li>第一项</li>
<li>第二项
<ul>
<li>第二项第一个子项目</li>
<li>第二项第二个子项目
<ul>
<li>第二项第二分项第一分项</li>
<li>第二项第二分项第二分项</li>
<li>第二项第二分项第三分项</li>
</ul>
</li>
<li>第二项第三个子项目
<ol>
<li>第二项第三分项第一分项</li>
<li>第二项第三分项第二分项</li>
<li>第二项第三分项第三分项</li>
</ol>
</ul>
</li>
<li>第三项</li>
</ul>
### 自定义列表
通过 HTML 的 `dl` 元素还支持自定义列表(表格列表)。
<dl>
<dt>Hugo 目录结构</dt>
<dd>assets</dd>
<dd>config.toml</dd>
<dd>content</dd>
<dd>data</dd>
<dd>theme</dd>
<dd>static</dd>
<dt>Hugo 模板</dt>
<dd>基础模板</dd>
<dd>列表模板</dd>
<dd>单页模板</dd>
</dl>
## 块引用
`blockquote` 元素表示从另一个源引用的内容,可以选择引用必须在 `footer``cite` 元素中,也可以选择使用注释和缩写等行内更改。
> 引用文本
> 这一行也是同样的引用
> 同样你也在 `blockquote` 中使用 **Markdown** 语法书写
带有引文的 `Blockquote` 元素效果。
<blockquote>
<p>我的目标不是赚大钱,是为了制造好的电脑。当我意识到我可以永远当工程师时,我才创办了这家公司。</p>
<footer><cite>史蒂夫·沃兹尼亚克</cite></footer>
</blockquote>
根据 Mozilla 的网站记录,<q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 于 2004 年发布,并取得了巨大成功。</q>
## 表格
表格并不算是 `Markdown` 的核心要素,但 `Hugo` 同样支持它。
| ID | 创建者 | 模型 | 年份 |
| --- | --------- | ------- | ---- |
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
可以使用 : (英文格式冒号)来对表格内容进行对齐。
| 表格 | 可以是 | 很酷 |
|:----- |:-----:| ----:|
| 左对齐 | 居中 | 右对齐 |
| 左对齐 | 居中 | 右对齐 |
| 左对齐 | 居中 | 右对齐 |
同样也可以在表格中使用 `Markdown` 语法。
| 表格 | 中 | 使用 | Markdown 语法 |
| ------ | --------- | ---------- | ------------- |
| *斜体* | **粗体** | ~~中划线~~ | `代码块` |
## Code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
{{< highlight html >}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /highlight >}}
## 其它元素: abbr、sub、sup、kbd等等
<abbr title="Graphics Interchange Format">GIF</abbr> 是位图图像格式。
H<sub>2</sub>O
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
<kbd>X</kbd>获胜。或按<kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>F</kbd></kbd>显示 FPS 计数器。
<mark>比特作为信息论中的信息单位,也被称为 shannon <mark>,以信息论领域的创始人 Claude shannon 的名字命名。
参考:
- 来自 **Mainroad** 主题的 [Basic Elements](https://mainroad-demo.netlify.app/post/basic-elements/) 内容

View File

@ -19,4 +19,4 @@ EOT
next V0.0.1
hugo server -D -t ../.. --port 1414
hugo server -D -t ../.. --port 1414 --panicOnWarning

View File

@ -53,6 +53,19 @@ PostTag:
PostReadMore:
other: "Read More"
PostCRAuthor:
other: Post Author
PostCRLink:
other: Post Link
PostCROriginAuthor:
other: Written By
PostCROriginLink:
other: Originally From
PostCRLicenseTitle:
other: Copyright Notice
PostCRLicenseContent:
other: "All articles in this blog are licensed under <i class=\"fab fa-fw fa-creative-commons\"></i>%s unless stating additionally."
VisitorsLabel:
other: Total Visitors
PageViewsLabel:

View File

@ -9,7 +9,7 @@ MSearchLabel:
other: 搜索
SymbolColon:
other: ":"
other: ""
SbPostsLable:
other: 日志
@ -55,6 +55,19 @@ PostTags:
PostReadMore:
other: 阅读全文
PostCRAuthor:
other: 本文作者
PostCRLink:
other: 本文链接
PostCROriginAuthor:
other: 原文作者
PostCROriginLink:
other: 原文链接
PostCRLicenseTitle:
other: 版权声明
PostCRLicenseContent:
other: "本博客所有文章除特别声明外,均采用 <i class=\"fab fa-fw fa-creative-commons\"></i>%s 许可协议。转载请注明出处!"
UserVistorsLabel:
other: 总访客量
PageViewsLabel:

View File

@ -6,8 +6,6 @@
{{- .Scratch.Set "pluginCDN" $pluginCDN -}}
{{ $posts := len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
{{- .Scratch.Set "posts" $posts -}}
{{/* TODO IsHome */}}
{{- .Scratch.Set "IsHome" .IsHome }}
<!DOCTYPE html>
<html lang="{{ $lang }}">

View File

@ -1,4 +1,4 @@
{{- define "main_class" }}page{{- end }}
{{- define "main" }}
{{ partial "post_content.html" . }}
{{ partial "post_content.html" (dict "ctx" . "IsHome" false) }}
{{- end }}

View File

@ -1,10 +1,8 @@
{{- define "main_class" }}index{{- end }}
{{- define "main" }}
{{/* TODO IsHome */}}
{{- print "Get IsHome value from scratch before paginate: " (.Scratch.Get "IsHome") }}
{{ $paginator := .Paginate (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
{{- range $paginator.Pages }}
{{ partial "post_content.html" . }}
{{ partial "post_content.html" (dict "ctx" . "IsHome" true) }}
{{- end }}
{{- partial "partials/pagination.html" . }}
{{- end }}

View File

@ -9,7 +9,7 @@
<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:author" content="{{ .Params.Author | default .Site.Params.Author }}" />
<meta property="article:published_time" content="{{ .PublishDate }}" />
<meta property="article:modified_time" content="{{ .Lastmod }}" />
{{- end }}

View File

@ -1,5 +1,6 @@
{{ with .ctx }}
<div class="post-body" itemprop="articleBody">
{{- if not .IsHome }}
{{- if $.IsHome }}
{{- if .Params.Expand }}
{{ .Content }}
{{- else }}
@ -8,4 +9,5 @@
{{- else }}
{{ .Content }}
{{- end }}
</div>
</div>
{{ end }}

View File

@ -0,0 +1,32 @@
{{- if .Site.Params.creativeCommons.post }}
<div class="post-copyright">
<img src="/imgs/cc/cc.svg" width="75" height="75" align="right" />
<ul>
<li class="post-copyright-author">
{{- if isset .Params "author" }}
<strong>{{ print (T "PostCROriginAuthor") (T "SymbolColon") }} </strong>
{{ .Params.Author }}
{{- else }}
<strong>{{ print (T "PostCRAuthor") (T "SymbolColon") }} </strong>
{{ .Site.Params.author }}
{{- end }}
</li>
<li class="post-copyright-link">
{{- if isset .Params "originlink" }}
<strong>{{ print (T "PostCROriginLink") (T "SymbolColon") }} </strong>
<a target="_blank" href="{{ .Params.OriginLink }}" title="{{ .Title }}">{{ .Params.OriginLink }}</a>
{{- else }}
<strong>{{ print (T "PostCRLink") (T "SymbolColon") }}</strong>
<a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Permalink }}</a>
{{- end }}
</li>
<li class="post-copyright-license">
<strong>{{ print (T "PostCRLink") (T "SymbolColon") }} </strong>
{{- $ccText := .Site.Params.creativeCommons.license | upper }}
{{- $lang := .Scratch.Get "lang" }}
{{- $ccLink := printf "<a target='_blank' href='https://creativecommons.org/licenses/by-nc-sa/4.0/deed.%s'>%s</a>" (substr $lang 0 2) $ccText }}
{{ printf (T "PostCRLicenseContent") $ccLink | safeHTML }}
</li>
</ul>
</div>
{{- end }}

View File

@ -1,4 +1,5 @@
{{- if .Scratch.Get "IsHome" }}
{{ with .ctx }}
{{- if $.IsHome }}
{{- if and .Site.Params.readMoreBtn (not .Params.Expand) }}
<div class="post-button">
<a class="btn" href="{{ .Permalink }}#more" rel="contents">
@ -8,6 +9,7 @@
{{- end }}
<div class="post-eof"></div>
{{- else }}
{{ partial "post/post_copyright.html" . }}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
{{- with .NextInSection }}
@ -25,4 +27,5 @@
{{- end }}
</div>
</div>
{{- end }}
{{- end }}
{{ end }}

View File

@ -1,3 +1,4 @@
{{ with .ctx }}
<link itemprop="mainEntityOfPage" href="{{ .Permalink }}">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="{{ .Site.Params.avatar.url }}">
@ -13,30 +14,33 @@
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
{{- if and (isset .Params "sticky") (gt .Params.Sticky 0) }}
{{- if and .Weight (gt .Weight 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>
{{- if $.IsHome }}
{{- 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 }}
{{- else }}
<a href="{{ .Permalink }}" itemprop="url" class="post-title-link">{{ .Title }}</a>
{{ .Title }}
{{- 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") }}
{{- if not $.IsHome }}
{{ partial "post/post_meta/words.html" . }}
{{ partial "post/post_meta/readtime.html" . }}
{{ partial "post/post_meta/views.html" . }}
{{ end }}
</div>
</header>
</header>
{{ end }}

View File

@ -1,10 +1,13 @@
<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>
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="{{ .Scratch.Get "lang" }}">
{{ partial "post/post_header.html" (dict "ctx" .ctx "IsHome" .IsHome) }}
<!-- POST BODY -->
{{ partial "post/post_body.html" (dict "ctx" .ctx "IsHome" .IsHome) }}
<footer class="post-footer">
{{ partial "post/post_footer.html" (dict "ctx" .ctx "IsHome" .IsHome) }}
</footer>
</article>
</div>