switch back to LoveIt, other theme is deprectated

3 files changed, 722 insertions, 0 deletions

diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png
new file mode 100644
index 0000000..6db8635
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md
new file mode 100644
index 0000000..97f66a0
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md
@@ -0,0 +1,361 @@
+---
+weight: 5
+title: "Theme Documentation - mermaid Shortcode"
+date: 2020-03-03T15:29:41+08:00
+lastmod: 2020-03-03T15:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+{{< version 0.2.11 changed >}}
+
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
+
+<!--more-->
+
+**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that’s it.
+
+## Flowchart {#flowchart}
+
+Example **flowchart** `mermaid` input:
+
+```markdown
+{{</* 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 */>}}
+```
+
+The rendered output looks like this:
+
+{{< 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 >}}
+
+## Sequence Diagram {#sequence-diagram}
+
+Example **sequence diagram** `mermaid` input:
+
+```markdown
+{{</* 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 */>}}
+```
+
+The rendered output looks like this:
+
+{{< 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 >}}
+
+## Gantt {#gantt}
+
+Example **Gantt** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+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
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+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
+{{< /mermaid >}}
+
+## Class Diagram {#class-diagram}
+
+Example **class diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{< /mermaid >}}
+
+## State Diagram {#state-diagram}
+
+Example **state diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{< /mermaid >}}
+
+## Git Graph {#git-graph}
+
+Example **git graph** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{< /mermaid >}}
+
+## Entity Relationship Diagram {#entity-relationship-diagram}
+
+Example **entity-relationship diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+## User Journey {#user-journey}
+
+Example **user journey** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
+
+## Pie Chart {#pie-chart}
+
+Example **pie chart** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{< /mermaid >}}
+
+## Requirement Diagram {#requirement-diagram}
+
+Example **requirement diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{< /mermaid >}}
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..8105ba4
--- /dev/null
+++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md
@@ -0,0 +1,361 @@
+---
+weight: 5
+title: "主题文档 - mermaid Shortcode"
+date: 2020-03-03T15:29:59+08:00
+lastmod: 2020-03-03T15:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能."
+images: []
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+{{< version 0.2.11 changed >}}
+
+`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
+
+<!--more-->
+
+[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
+
+只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
+
+## 流程图 {#flowchart}
+
+一个 **流程图** `mermaid` 示例:
+
+```markdown
+{{</* 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 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< 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 >}}
+
+## 时序图 {#sequence-diagram}
+
+一个 **时序图** `mermaid` 示例:
+
+```markdown
+{{</* 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 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< 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 >}}
+
+## 甘特图 {#gantt}
+
+一个 **甘特图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+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
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+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
+{{< /mermaid >}}
+
+## 类图 {#class-diagram}
+
+一个 **类图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+{{< /mermaid >}}
+
+## 状态图 {#state-diagram}
+
+一个 **状态图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{< /mermaid >}}
+
+## Git 图 {#git-graph}
+
+一个 **Git 图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{< /mermaid >}}
+
+## 实体关系图 {#entity-relationship-diagram}
+
+一个 **实体关系图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+## 用户体验旅程图 {#user-journey}
+
+一个 **用户体验旅程图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
+
+## 饼图 {#pie}
+
+一个 **饼图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{< /mermaid >}}
+
+## 依赖图 {#requirement-diagram}
+
+一个 **依赖图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+requirementDiagram
+
+requirement test_req {
+id: 1
+text: the test text.
+risk: high
+verifymethod: test
+}
+
+element test_entity {
+type: simulation
+}
+
+test_entity - satisfies -> test_req
+{{< /mermaid >}}