跳转至

Loong的博客

网站样式展示

博客出自/mkdocs-material

一切都看最原始的官网¶

https://squidfunk.github.io/mkdocs-material/getting-started/

一级标题¶

二级标题¶

三级标题¶

四级标题¶

五级标题¶

六级标题¶

正常的文字

加粗的文字

斜体字

加下y划线g的文,字

a这里b是y下划波g浪线文,本.。

这是带有虚线下划线的文本。1
这是带有虚线下划线的文本。2
这是带有虚线下划线的文本。3

这是本站的超链接

鼠标放上来

This was marked (highlight)
This was inserted (underline)
~~This was deleted (strikethrough)~~
H₂O
A^TA

Ctrl+Alt+Del

这是一段引用

有序列表一
有序列表二
有序列表三

无须列表
无序列表
无须列表

任务列表
任务列表
任务列表

Image title — 图片标题

这是一个带有脚注的句子¹。

水平分割线就是使用五个-符号就行了 ------

表格，感觉不好看

标题1	标题二	标题三
字段一	text	text
字段二	text	text
字段三	text	text

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- In scelerisque nibh non dolor mollis congue sed et metus
- Praesent sed risus massa
Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Lorem ipsum dolor sit amet

Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.

Cras arcu libero

Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.

Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna non auctor.

代码片段

HelloWorld.java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

public class demo {
    public static void main(String[] args) {
        System.out.println("Hello，World!"); // (1)!
    }
}

特别的注释；特别的注释；特别的注释；特别的注释；

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

欧拉公式

\[ e^{i\pi} + 1 = 0 \]

傅里叶变换

\[ F(\omega) = \mathcal{F}\{f(t)\} = \int_{-\infty}^{\infty} f(t) e^{-i \omega t} \, dt \]

内容目录

一切都看最原始的官网
一级标题
- 二级标题
  - 三级标题
    - 四级标题
      - 五级标题
        
        六级标题

CC++java

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

无序列表有序列表

这是一段样例文字
这是一段样例文字
这是一段样例文字

这是一段样例文字
这是一段样例文字
这是一段样例文字

Example

无序列表1有序列表1

* 这是一段样例文字
* 这是一段样例文字
* 这是一段样例文字

1. 这是一段样例文字
2. 这是一段样例文字
3. 这是一段样例文字

Abstract

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Tip

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Note

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Info

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Success

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Question

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Warning

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Failure

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Danger

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Bug

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Example

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Quote

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

右提示

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

左提示

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

一二

右提示

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

左提示

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。
参天大树充满生命力，根深叶茂，分枝扶疏。它为我们展现了数据分治的生动形态。

Expand to show alternate icon sets

Octicons FontAwesome

theme:
  icon:
    admonition:
      note: octicons/tag-16
      abstract: octicons/checklist-16
      info: octicons/info-16
      tip: octicons/squirrel-16
      success: octicons/check-16
      question: octicons/question-16
      warning: octicons/alert-16
      failure: octicons/x-circle-16
      danger: octicons/zap-16
      bug: octicons/bug-16
      example: octicons/beaker-16
      quote: octicons/quote-16

theme:
  icon:
    admonition:
      note: fontawesome/solid/note-sticky
      abstract: fontawesome/solid/book
      info: fontawesome/solid/circle-info
      tip: fontawesome/solid/bullhorn
      success: fontawesome/solid/check
      question: fontawesome/solid/circle-question
      warning: fontawesome/solid/triangle-exclamation
      failure: fontawesome/solid/bomb
      danger: fontawesome/solid/skull
      bug: fontawesome/solid/robot
      example: fontawesome/solid/flask
      quote: fontawesome/solid/quote-left

这是一个大按钮这是一个大按钮

把鼠标放到这里把鼠标放到这里

流程图

graph LR
  A[开始] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

时序图

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

状态图

stateDiagram-v2
  state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]

类图

classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()  
  }

实体关系图

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  LINE-ITEM {
    string name
    int pricePerUnit
  }
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

HTML for content and structure
JavaScript for interactivity
CSS for text running out of boxes
Internet Explorer ... huh?

Set up in 5 minutes

Install mkdocs-material with pip and get up and running in minutes

Getting started
It's just Markdown

Focus on your content and generate a responsive and searchable static site

Reference
Made to measure

Change the colors, fonts, language, icons, logo and more with a few lines

Customization
Open Source, MIT

Material for MkDocs is licensed under MIT and available on [GitHub]

License

表情包

要改颜色需要到extra.css里面修改

有动画的表情包

♡

这是一段脚注-不是很会使用脚注 ↩