一篇关于主题功能测试的文章

xxxx 收录于概要

2021-05-06 约 1496 字预计阅读 8 分钟

了解如何在 LoveIt 主题中快速, 直观地创建和组织内容。

此文章用于测试。

以下内容仅用于测试主题功能

LoveIt 的文章列表参考如下

hugoloveit

https://hugoloveit.com/zh-cn/posts/

1 内容组织

保持博客文章存放在 content/posts 目录, 例如: content/posts/我的第一篇文章.md
保持简单的静态页面存放在 content 目录, 例如: content/about.md
本地资源组织
1. 使用页面包中的页面资源. 你可以使用适用于 Resources.GetMatch 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源.
2. 将本地资源放在 assets 目录中, 默认路径是 /assets. 引用资源的文件路径是相对于 assets 目录的.
3. 将本地资源放在 static 目录中, 默认路径是 /static. 引用资源的文件路径是相对于 static 目录的

2 前置参数

---
title: "我的第一篇文章"
subtitle: "" # 文章副标题
date: 2020-03-04T15:58:26+08:00  # 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 date 字段获取的, 但是也可以在 网站配置 中设置.
lastmod: 2020-03-04T15:58:26+08:00 # 上次修改内容的日期时间.
draft: true # 如果设为 true, 除非 hugo 命令使用了 --buildDrafts/-D 参数, 这篇文章不会被渲染.
author: "" # 文章作者.
authorLink: "" # 文章作者的链接.
description: "" # 文章内容的描述.
license: "" # 这篇文章特殊的许可.
images: [] # 页面图片, 用于 Open Graph 和 Twitter Cards.

tags: [] # 文章的标签.
categories: [] # 文章所属的类别.
featuredImage: "" # 文章的特色图片.
featuredImagePreview: "" # 用在主页预览的文章特色图片.

hiddenFromHomePage: false # 如果设为 true, 这篇文章将不会显示在主页上.
hiddenFromSearch: false # 如果设为 true, 这篇文章将不会显示在搜索结果中.
twemoji: false # 如果设为 true, 这篇文章会使用 twemoji.
lightgallery: true # 如果设为 true, 文章中的图片将可以按照画廊形式呈现.
ruby: true # 如果设为 true, 这篇文章会使用 上标注释扩展语法.
fraction: true #  如果设为 true, 这篇文章会使用 分数扩展语法.
fontawesome: true # 如果设为 true, 这篇文章会使用 Font Awesome 扩展语法.
linkToMarkdown: true # 如果设为 true, 内容的页脚将显示指向原始 Markdown 文件的链接.
rssFullText: false # 如果设为 true, 在 RSS 中将会显示全文内容.

toc:
  enable: true
  auto: true
code:
  copy: true
  # ...
math:
  enable: true
  # ...
mapbox:
  accessToken: ""
  # ...
share:
  enable: true
  # ...
comment:
  enable: true
  # ...
library:
  css:
    # someCSS = "some.css"
    # 位于 "assets/"
    # 或者
    # someCSS = "https://cdn.example.com/some.css"
  js:
    # someJS = "some.js"
    # 位于 "assets/"
    # 或者
    # someJS = "https://cdn.example.com/some.js"
seo:
  images: []
  # ...

## featuredImage 和 featuredImagePreview 支持本地资源引用的完整用法.
resources:
- name: featured-image
  src: featured-image.jpg
- name: featured-image-preview
  src: featured-image-preview.jpg

---

3 内容摘要

/first-post/images/summary.zh-cn.png — 文章摘要预览

3.1 自动摘要拆分

网站设置 summaryLength

3.2 手动摘要拆分

添加 

3.3 前置参数摘要

前置参数 summary

3.4 使用文章描述作为摘要

前置参数 description

4 Markdown 基本语法

ignore

5 Markdown 扩展语法

5.1 Emoji 支持

https://hugoloveit.com/zh-cn/emoji-support/

😀,😄,😆,🤣,😅,😂

5.2 数学公式

$$ c = \pm\sqrt{a^2 + b^2} $$

$$ c = \pm\sqrt{a^2 + b^2} $$

5.3 行内公式

默认的行内公式分割符是 $/$ 和 \$/\$

$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)

$ c = \pm\sqrt{a^2 + b^2} $ 和 $ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi $

5.4 mhchem

$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$

$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$

5.5 字符注音或者注释

[Hugo]^(一个开源的静态网站生成工具)

Hugo一个开源的静态网站生成工具

5.6 分数

[99]/[100]

⁹⁹/₁₀₀

5.7 Font Awesome

真开心! :(far fa-grin-tears):

真开心!

5.8 转义字符

{?:}joy:

:joy:

6 内置 Shortcodes

https://hugoloveit.com/zh-cn/theme-documentation-built-in-shortcodes/

6.1 figure

{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}

6.2 gist

{{< gist spf13 7896402 >}}

6.3 highlight

{{< highlight html >}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{< /highlight >}}

6.4 instagram

instagram 的文档

{{< instagram BWNjjyYFxVx hidecaption >}}

6.5 param

param 的文档

{{< param description >}}

6.6 ref 和 relref

ref 和 relref 的文档

6.7 tweet

tweet 的文档

{{< tweet 877500564405444608 >}}

6.8 vimeo

vimeo 的文档

{{< vimeo 146022717 >}}

6.9 youtube

youtube 的文档

{{< youtube w7Ft2ymGmfc >}}

7 扩展shortcodes

7.1 style

{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

This is a right-aligned paragraph.

7.2 link

href [必需]
content [可选]
title [可选]
rel [可选]
class [可选]

{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
或者
{{< link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" >}}

Upstage

7.3 image

src [必需] 图片的 URL.
alt [可选] 图片无法显示时的替代文本, 默认值是 src 参数的值.
caption [可选] 图片标题.
title [可选] 当悬停在图片上会显示的提示.
class [可选] HTML figure 标签的 class 属性.
src_s [可选] 图片缩略图的 URL, 用在画廊模式中, 默认值是 src 参数的值.
src_l [可选] 高清图片的 URL, 用在画廊模式中, 默认值是 src 参数的值.
height [可选] 图片的 height 属性.
width [可选] 图片的 width 属性.
linked [可选] 图片是否需要被链接, 默认值是 true.
rel [可选] HTML a 标签的 rel 补充属性, 仅在 linked 属性设置成 true 时有效.

{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}

/images/lighthouse.jpg — lighthouse (`image`)

7.4 admonition

注意

一个注意横幅

摘要

一个摘要横幅

信息

一个信息横幅

技巧

一个技巧横幅

成功

一个成功横幅

问题

一个问题横幅

警告

一个警告横幅

失败

一个失败横幅

危险

一个危险横幅

Bug

一个 Bug 横幅

示例

一个示例横幅

引用

一个引用横幅

admonition shortcode 有以下命名参数:

type [必需] admonition 横幅的类型, 默认值是 note.
title [可选] admonition 横幅的标题, 默认值是 type 参数的值.
open [可选] 横幅内容是否默认展开, 默认值是 true.

一个 admonition 示例:

{{< admonition type=tip title="This is a tip" open=false >}}
一个 **技巧** 横幅
{{< /admonition >}}
或者
{{< admonition tip "This is a tip" false >}}
一个 **技巧** 横幅
{{< /admonition >}}

呈现的输出效果如下:

This is a tip

一个技巧横幅

7.5 mermaid

mermaid 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.

7.5.1 流程图

一个 流程图 mermaid 示例:

{{< mermaid >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

呈现的输出效果如下:

7.5.2 时序图

一个 时序图 mermaid 示例:

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{< /mermaid >}}

呈现的输出效果如下:

7.5.3 甘特图

一个 甘特图 mermaid 示例:

{{< mermaid >}}
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
{{< /mermaid >}}

呈现的输出效果如下:

7.5.4 类图

一个类图 mermaid 示例:

{{< mermaid >}}
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{{< /mermaid >}}

呈现的输出效果如下:

7.5.5 状态图

一个 状态图 mermaid 示例:

{{< mermaid >}}
stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
{{< /mermaid >}}

呈现的输出效果如下:

7.5.6 Git 图

一个 Git 图 mermaid 示例:

{{< mermaid >}}
gitGraph:
options
{
    "nodeSpacing": 100,
    "nodeRadius": 10
}
end
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
{{< /mermaid >}}

呈现的输出效果如下:

7.5.7 饼图

一个饼图 mermaid 示例:

{{< mermaid >}}
pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
{{< /mermaid >}}

呈现的输出效果如下:

7.5.8 echarts

ECharts 是一个帮助你生成交互式数据可视化的库. ECharts 提供了常规的折线图, 柱状图, 散点图, 饼图, K线图, 用于统计的盒形图, 用于地理数据可视化的地图, 热力图, 线图, 用于关系数据可视化的关系图, treemap, 旭日图, 多维数据可视化的平行坐标, 还有用于 BI 的漏斗图, 仪表盘, 并且支持图与图之间的混搭.

只需在 echarts shortcode 中以 JSON/YAML/TOML格式插入 ECharts 选项即可.

7.6 mapbox

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL, 以 vector tiles 和 Mapbox styles 为来源, 将它们渲染成互动式地图.

lng [必需] (第一个位置参数) 地图初始中心点的经度, 以度为单位.
lat [必需] (第二个位置参数) 地图初始中心点的纬度, 以度为单位.
zoom [可选] (第三个位置参数) 地图的初始缩放级别, 默认值是 10.
marked [可选] (第四个位置参数) 是否在地图的初始中心点添加图钉, 默认值是 true.
light-style [可选] (第五个位置参数) 浅色主题的地图样式, 默认值是前置参数或者网站配置中设置的值.
dark-style [可选] (第六个位置参数) 深色主题的地图样式, 默认值是前置参数或者网站配置中设置的值.
navigation [可选] 是否添加 NavigationControl, 默认值是前置参数或者网站配置中设置的值.
geolocate [可选] 是否添加 GeolocateControl, 默认值是前置参数或者网站配置中设置的值.
scale [可选] 是否添加 ScaleControl, 默认值是前置参数或者网站配置中设置的值.
fullscreen [可选] 是否添加 FullscreenControl, 默认值是前置参数或者网站配置中设置的值.
width [可选] 地图的宽度, 默认值是 100%.
height [可选] 地图的高度, 默认值是 20rem.

{{< mapbox 121.485 31.233 12 >}}
或者
{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

7.7 music

music shortcode 基于 APlayer 和 MetingJS 提供了一个内嵌的响应式音乐播放器.

有三种方式使用 music shortcode.

7.7.1 自定义音乐 URL

支持本地资源引用的完整用法.

music shortcode 有以下命名参数来使用自定义音乐 URL:

server [必需] 音乐的链接.
type [可选] 音乐的名称.
artist [可选] 音乐的创作者.
cover [可选] 音乐的封面链接.

一个使用自定义音乐 URL 的 music 示例:

{{< music url="music/wind.mp3" name=起风了 artist=买辣椒也用券 cover="images/wind.png" >}}

呈现的输出效果如下:

7.7.2 音乐平台 URL 的自动识别

music shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:

auto [必需]] (第一个位置参数) 用来自动识别的音乐平台 URL, 支持 netease, tencent 和 xiami 平台.

一个使用音乐平台 URL 的自动识别的 music 示例:

{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
或者
{{< music "https://music.163.com/#/playlist?id=60198" >}}

呈现的输出效果如下:

7.7.3 自定义音乐平台, 类型和 ID

music shortcode 有以下命名参数来使用自定义音乐平台:

server [必需] [netease, tencent, kugou, xiami, baidu]音乐平台.
type [必需] [song, playlist, album, search, artist]音乐类型.
id [必需] 歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.

一个使用自定义音乐平台的 music 示例:

{{< music server="netease" type="song" id="1868553" >}}
或者
{{< music netease song 1868553 >}}

呈现的输出效果如下:

7.7.4 其它参数

music shortcode 有一些可以应用于以上三种方式的其它命名参数:

theme *[可选]*音乐播放器的主题色, 默认值是 #448aff.
fixed *[可选]*是否开启固定模式, 默认值是 false.
mini *[可选]*是否开启迷你模式, 默认值是 false.
autoplay *[可选]*是否自动播放音乐, 默认值是 false.
volume *[可选]*第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 0.7.
mutex *[可选]*是否自动暂停其它播放器, 默认值是 true.

music shortcode 还有一些只适用于音乐列表方式的其它命名参数:

loop [可选][all, one, none]音乐列表的循环模式, 默认值是 none.
order [可选][list, random]音乐列表的播放顺序, 默认值是 list.
list-folded *[可选]*初次打开的时候音乐列表是否折叠, 默认值是 false.
list-max-height *[可选]*音乐列表的最大高度, 默认值是 340px.

7.8 bilibili

{{< bilibili BV1Sx411T7QQ >}}
或者
{{< bilibili id=BV1Sx411T7QQ >}}

{{< bilibili BV1TJ411C7An 3 >}}
或者
{{< bilibili id=BV1TJ411C7An p=3 >}}

呈现的输出效果如下:

7.9 typeit

typeit shortcode 基于 TypeIt 提供了打字动画.

{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}

{{< typeit tag=h4 >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}

{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

7.10 script

{{< script >}}
console.log('Hello LoveIt!');
{{< /script >}}

目录

一篇关于主题功能测试的文章

LoveIt 的文章列表参考如下

1 内容组织

2 前置参数

3 内容摘要

3.1 自动摘要拆分

3.2 手动摘要拆分

3.3 前置参数摘要

3.4 使用文章描述作为摘要

4 Markdown 基本语法

5 Markdown 扩展语法

5.1 Emoji 支持

5.2 数学公式

5.3 行内公式

5.4 mhchem

5.5 字符注音或者注释

5.6 分数

5.7 Font Awesome

5.8 转义字符

6 内置 Shortcodes

6.1 figure

6.2 gist

6.3 highlight

6.4 instagram

6.5 param

6.6 ref 和 relref

6.7 tweet

6.8 vimeo

6.9 youtube

7 扩展shortcodes

7.1 style

7.2 link

7.3 image

7.4 admonition

7.5 mermaid

7.5.1 流程图

7.5.2 时序图

7.5.3 甘特图

7.5.4 类图

7.5.5 状态图

7.5.6 Git 图

7.5.7 饼图

7.5.8 echarts

7.6 mapbox

7.7 music

7.7.1 自定义音乐 URL

7.7.2 音乐平台 URL 的自动识别

7.7.3 自定义音乐平台, 类型和 ID

7.7.4 其它参数

7.8 bilibili

7.9 typeit

7.10 script