目录

网页模板

misaraty 更新 | 2022-01-21

拆分摘要

自动拆分,

1
hasCJKLanguage = true

手动拆分,添加

1
 </*!--more--*/> 

摘要分割符来拆分文章生成摘要。

标签

misaraty 更新 | 2022-01-01 misaraty 更新 | 2022-01-01 misaraty 更新 | 2022-01-01 misaraty 更新 | 2022-01-01

字体颜色

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

1
2
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>

我是红色

我是绿色

超链接

1
[超链接](../2019-01-02_建站#标题C)

超链接


1
[超链接](https://www.misaraty.cc)

超链接


1
<https://www.misaraty.cc>

https://www.misaraty.cc


1
[misaraty.cc](https://www.misaraty.cc "欢迎来到misaraty.cc站点~")

misaraty.cc


https://www.misaraty.cc

高亮

1
`word`

word


Markdown代码高亮支持的语言

名称 关键词
AppleScript applescript
ActionScript 3.0 actionscript3, as3
Shell bash, shell
ColdFusion coldfusion, cf
C cpp, c
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal, pas
diff&patch diff patch
Erlang erl, erlang
Groovy groovy
Java java
JavaFX jfx, javafx
JavaScript js, jscript, javascript
Perl perl, pl, Perl
PHP php
text text, plain
Python py, python
Ruby ruby, rails, ror, rb
SASS&SCSS sass, scss
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html
Objective C objc, obj-c
F# f#, f-sharp, fsharp
R r, s, splus
matlab matlab
swift swift
GO go, golang

插入图片

1
{{/*< image src="/android-chrome-512x512.png" caption="misaraty (`image`)" >*/}}
/android-chrome-512x512.png
misaraty (image)

1
![misaraty](/android-chrome-512x512.png)

/android-chrome-512x512.png


1
![misaraty](/android-chrome-512x512.png "misaraty")

/android-chrome-512x512.png
misaraty

横幅

1
2
3
{{< admonition abstract "引用&参考" >}}
一个 **引用&参考** 横幅
{{< /admonition >}}
前言
一个 前言 横幅
1
2
3
{{< admonition success "注意" >}}
一个 **注意** 横幅
{{< /admonition >}}
注意
一个 注意 横幅
1
2
3
{{< admonition danger "警告" >}}
一个 **警告** 横幅
{{< /admonition >}}
警告
一个 警告 横幅

绘图

饼图-mermaid

1
2
3
4
5
{{< mermaid title 宠物数量 >}}
pie
    "狗" : 386
    "猫" : 85
{{< /mermaid >}}

曲线图-echarts

柱状图-纵-echarts

柱状图-横-echarts

饼状图-echarts

环形图-echarts

散点图-echarts

地图

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

1
2
3
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" >}}
或者
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" >}}

音乐

1
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}

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

1
2
3
{{< music server="netease" type="song" id="330107" >}}
或者
{{< music netease song 330107 >}}

B站

1
2
3
{{< bilibili BV12341117rG >}}
或者
{{< bilibili id=BV12341117rG >}}

若视频包含多个部分,则,

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

Typeit打字机效果

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

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


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

分组内容,

1
2
3
4
5
6
7
{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

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

注释

1
2
3
<!--
这是一段注释
-->

水平线

  • ___: 三个连续的下划线
  • ---: 三个连续的破折号
  • ***: 三个连续的星号



强调

加粗

1
2
**渲染为粗体**
__渲染为粗体__

渲染为粗体

斜体

1
2
*渲染为斜体*
_渲染为斜体_

渲染为斜体

删除线

1
~~这段文本带有删除线.~~

这段文本带有删除线.

组合

1
2
3
4
***加粗和斜体***
~~**删除线和加粗**~~
~~*删除线和斜体*~~
~~***加粗, 斜体和删除线***~~

加粗和斜体

删除线和加粗

删除线和斜体

加粗, 斜体和删除线

引用

1
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.


1
2
3
4
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

列表

无序列表

1
2
3
* 一项内容
- 一项内容
+ 一项内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
* Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit
  * Phasellus iaculis neque
  * Purus sodales ultricies
  * Vestibulum laoreet porttitor sem
  * Ac tristique libero volutpat at
* Faucibus porta lacus fringilla vel
* Aenean sit amet erat nunc
* Eget porttitor lorem
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

有序列表

1
2
3
4
5
6
7
8
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

如果你对每一项使用 1., Markdown 将自动为每一项编号。

1
2
3
4
5
6
7
8
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

任务列表

1
2
3
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
  • Write the press release
  • Update the website
  • Contact the media

表格

通过在每个单元格之间添加竖线作为分隔线, 并在标题下添加一行破折号 (也由竖线分隔) 来创建表格。 注意, 竖线不需要垂直对齐。

1
2
3
4
5
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.
文本右对齐或居中对齐

在任何标题下方的破折号右侧添加冒号将使该列的文本右对齐.

在任何标题下方的破折号两边添加冒号将使该列的对齐文本居中.

1
2
3
4
5
| Option | Description |
|:------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

呈现的输出效果如下:

Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

跳转

脚注

1
2
3
这是一个数字脚注[^1].

[^1]: 这是一个数字脚注

这是一个数字脚注1.

空行&空格

&thinsp;

分数

1
2
3
[浅色]/[深色]

[99]/[100]

浅色/深色

90/100

公式Tex

./latex公式编辑器.jpg
latex公式编辑器

Font Awesome图标字库

Font Awesome一套绝佳的图标字体库和CSS框架

1
[下载](https://www.evget.com/fontawesome/)

下载


1
[下载](https://www.evget.com/fontawesome/)

下载


1
[下载](https://www.evget.com/fontawesome/)

下载


1


1


1


1


1


1


1

上标与下标

上标

1
$$ 2022^{2022} $$

$$ 2022^{2022} $$


1
2022<sup>2022</sup>

20222022

下标

1
$$ 2022_{2022} $$

$$ 2022_{2022} $$


1
2022<sub>2022</sub>

20222022


  1. 这是一个数字脚注 ↩︎