cattom/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add examples

Browse Source
This commit is contained in:
Cat Tom 2024-07-24 23:00:54 +08:00
parent 1454596951
commit 0d0bf23ef2
2 changed files with 260 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
docs/examples/index.md Normal file
View File

@ -0,0 +1,221 @@
---
hide:
- navigation
---
# Examples page
## Admonitions
!!! note "Phasellus posuere in sem ut cursus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
## Annotations
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
{ .annotate }
1. :man_raising_hand: I'm an annotation! I can contain `code`, __formatted
text__, images, ... basically anything that can be expressed in Markdown.
!!! note annotate "Phasellus posuere in sem ut cursus (1)"
Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
purus auctor massa, nec semper lorem quam in massa.
1. :man_raising_hand: I'm an annotation!
2. :woman_raising_hand: I'm an annotation as well!
## Buttons
[Subscribe to our newsletter](#){ .md-button .md-button--primary }
[Send :fontawesome-solid-paper-plane:](#){ .md-button }
## Code blocks
``` py title="bubble_sort.py"
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
``` yaml
theme:
features:
- content.code.annotate # (1)
```
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
text__, images, ... basically anything that can be written in Markdown.
``` py linenums="1"
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
``` py hl_lines="3-5"
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
When InlineHilite is enabled, syntax highlighting can be applied to inline code blocks by prefixing them with a shebang, i.e. `#!`, directly followed by the corresponding language shortcode.
The `#!python range()` function is used to generate a sequence of numbers.
## Content tabs
=== "C"
``` c
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```
=== "C++"
``` c++
#include <iostream>
int main(void) {
std::cout << "Hello world!" << std::endl;
return 0;
}
```
=== "Unordered list"
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
=== "Ordered list"
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
!!! example
=== "Unordered List"
``` markdown
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
```
=== "Ordered List"
``` markdown
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
```
## Data tables
| Method | Description |
| :---------: | :----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
## Flow chart
``` mermaid
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
```
## Sequence diagram
``` mermaid
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!
```
## State diagram
``` mermaid
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 --> [*]
```
## Class diagram
``` mermaid
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()
}
```
## Entity-relationship diagram
``` mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
LINE-ITEM {
string name
int pricePerUnit
}
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

241
docs/index.md
View File

@ -7,218 +7,55 @@ hide:
> 记录生活，积累技术。 > 记录生活，积累技术。
## Admonitions Hello 👋 , 我是 Cat Tom
!!! note "Phasellus posuere in sem ut cursus" ## 兴趣 & 爱好
> 兴趣广泛，爱好繁多。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod ### 音乐
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor <a href="https://music.163.com/#/user/home?id=303081377">网易云音乐</a>
massa, nec semper lorem quam in massa.
## Annotations 喜欢听轻音乐、交响乐、二次元、美国乡村歌曲、红色歌曲
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit. 对流行音乐也不排斥
{ .annotate }
1. :man_raising_hand: I'm an annotation! I can contain `code`, __formatted 主要是得对上我的 feeling
text__, images, ... basically anything that can be expressed in Markdown.
!!! note annotate "Phasellus posuere in sem ut cursus (1)" ### 动漫
<a href="https://space.bilibili.com/27734632">Bilibili</a>
Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et **最喜欢的动漫：**
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo - ReLIFE
purus auctor massa, nec semper lorem quam in massa. - Clannad
- 约会大作战
- EVANGELION
- 青春猪头少年
- 那年那兔那些事
- 我的青春恋爱物语果然有问题
1. :man_raising_hand: I'm an annotation! **我认为值得一看的番：**
2. :woman_raising_hand: I'm an annotation as well!
## Buttons 大多是一些轻松、搞笑向的恋爱 or 日常番
[Subscribe to our newsletter](#){ .md-button .md-button--primary } - 工作细胞
[Send :fontawesome-solid-paper-plane:](#){ .md-button } - 干物妹！小埋
- 小林家的龙女仆
- 月刊少女野崎君
- 天使降临到我身边
- 中二病也要谈恋爱
- 路人女主的养成方法
- 请问您今天要来点兔子吗
- 喜欢本大爷的竟然就你一个？
## Code blocks ### 其他
``` py title="bubble_sort.py" - 五学
def bubble_sort(items): - 江学
for i in range(len(items)): - 放送文化
for j in range(len(items) - 1 - i): - 地震速报
if items[j] > items[j + 1]: - 国际政治、经济
items[j], items[j + 1] = items[j + 1], items[j]
```
``` yaml ## 未来就业方向
theme: - 老师 (教英语或者历史，初中或以上)
features: - 民法律师
- content.code.annotate # (1) - 公务员（世界尽头是考公...
```
1. :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
text__, images, ... basically anything that can be written in Markdown.
``` py linenums="1"
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
``` py hl_lines="3-5"
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
```
When InlineHilite is enabled, syntax highlighting can be applied to inline code blocks by prefixing them with a shebang, i.e. `#!`, directly followed by the corresponding language shortcode.
The `#!python range()` function is used to generate a sequence of numbers.
## Content tabs
=== "C"
``` c
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```
=== "C++"
``` c++
#include <iostream>
int main(void) {
std::cout << "Hello world!" << std::endl;
return 0;
}
```
=== "Unordered list"
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
=== "Ordered list"
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
!!! example
=== "Unordered List"
``` markdown
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
```
=== "Ordered List"
``` markdown
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
```
## Data tables
| Method | Description |
| :---------: | :----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
## Flow chart
``` mermaid
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
```
## Sequence diagram
``` mermaid
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!
```
## State diagram
``` mermaid
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 --> [*]
```
## Class diagram
``` mermaid
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()
}
```
## Entity-relationship diagram
``` mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
LINE-ITEM {
string name
int pricePerUnit
}
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```