KSimple

Ksimple 是在 hugo-xmin 基础上修改而来一个 hugo 主题，加入了目录、mermaid/plantuml等代码渲染图片、代码块高亮复制折叠、模糊查找、评论系统以及其他各类元素样式定制，整体风格力求简约而实用。

样式一览

基本元素

Bold， Italic， Highlight，highlight，H₂O₂，X^2^，++insert++，Delete，⛺，😘， Inline Code

Reference¹, Reference2²

this is a blockquote

标题引用 ， 标题引用2 ：标题名去掉特殊字符(除了-和空格之外的所有，包括但不限于逗号、括号、冒号等)，英文全小写，空格用-替代，然后加上#就是对应的链接了

公式与内联公式

内联公式支持 \(...\) 和 $...$ 两种写法；
单行公式支持 $$...$$、\[...\]、\begin{equation}...\end{equation} 等等多种写法
具体定制参见 https://cdn.jsdelivr.net/gh/captainwc/cdn-release/website/js/auto-render.min.js

\(x^2 + y^2 = 1\)，$ \frac{x^2}{5} + \frac{y^2}{3} = 1$

代码块

#include<iostream>
using namespace std;
int main(){
    cout<<"hello hugo\n";
    return 0;
}

- hallo
+ hello

列表

• list

1. item

Todo List

• todo1

• todo2

• todo3

更推荐下面的用法：

PlantUML

类图

@startuml
interface Scriptable{
    toSmtLib():String
}

class SmtScript{
    -functions:List<Function>
    -addFunction(Function):void
}

abstract class Expr{
    -node:ASTRootNode
    -children:List<Expr>
}

enum ConstExpr
class CompoundExpr{
    +getOp():String
}
struct ComplexExpr{
    -format:String
}

class Function{
    - funcName:string
    - args:List<Pair<String,String>>
    - returnType:String
    - funcBody:Expr
}

Scriptable <|.. SmtScript
Scriptable <|.. Function
Scriptable <|.. Expr
Expr <|-- ConstExpr
Expr <|-- CompoundExpr
Expr <|-- ComplexExpr

Expr <-- Function

SmtScript "1"-->"1..*" Function
@enduml

时序图

@startuml
actor 用户 as user
participant PtolemyII as ptii
participant 验证选项配置器 as config
participant 模型解与预校验器 as parser
participant 形式化验证器 as verifier

user -> ptii++: 打开PtolemyII建模工具
ptii->ptii: 打开/创建模型
return 模型持久化XML文件

user -> config++: 配置验证选项，启动验证过程
config -> parser--++: 解析与校验模型

alt 校验失败
    parser --> user: 返回校验错误信息
else 校验通过
    parser -> verifier--++: 启动形式化验证
    verifier -->user--: 返回验证结果
end

@enduml

ebnf

@startebnf
Type = PrimitiveType | ReferenceType;
PrimitiveType = [Annotation], (NumericType | boolean );
@endebnf

……

Mermaid

Mermaid图表使用 mermaid.js 进行渲染

流程图 (graph/flowchart)

---
title: 流程图示例
---
graph TB
    subgraph subgraph1
        direction LR
        A[A] e1@-->|comment| B(B) & C((C)) -.-> D{{D}} & E[(E)] ==> F{F}
    end
    subgraph subgraph2
        direction LR
        O[/O\] -- comment2 --o G[\G/] -. comment3 .-x H[\H\]
        G <---> I>I]
    end

    subgraph1 edge002@==> subgraph2

    e1@{ animate: true }
    edge002@{ animate: true }

时序图 (sequenceDiagram)

sequenceDiagram
    Alice->>+Bob: Hello Bob, how are you ?
    Bob-->>-Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl-)D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob--)Alice: I agree

状态图 (stateDiagram-v2)

---
config:
    theme: forest
---
stateDiagram
    direction LR
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

    Moving: Moving
    Moving: Move to A
    Moving: Move to B

框图 (block-beta)

---
config:
    theme: default
---
block-beta
    %% 总列数
    columns 3

    %% 指定某一元素占据多少列
    a b("b"):2

    %% 可以将多个元素组合成一个块，指定块占据的列数，块内再次细分列数
    block:group1:2
        columns 3
        h i j down<[" "]>(down) space:2 k
    end

    %% 框图里面的lable必须加上双引号
    g((("This is a circle")))

    block:group2:3
        %% columns auto (default)
        l left<[" "]>(left) m n space o p blockArrowId6<[" "]>(right) q r
    end

    m --> o

思维导图 (mindmap)

---
config:
    theme: default
---
mindmap
    A((root))
        B{{B}}
            C
            D
        E
        F
        G

雷达图 (radar-beta)

---
title: "Grades"
config:
    theme: default
---
radar-beta
  axis m["C++"], s["Python"], e["Java"]
  axis h["C#"], g["Shell"], a["JavaScript"]
  curve a["Alice"]{99, 90, 50, 10, 80, 30}
  curve b["Bob"]{20, 70, 20, 60, 20, 99}
  curve b["Mike"]{0, 90, 10, 30, 70, 90}

  max 100
  min 0

饼图 (pie)

---
config:
    theme: default
---
pie title 示例饼图
    "类别A" : 40
    "类别B" : 30
    "类别C" : 20
    "类别D" : 10

看板图 (kanban)

---
config:
    theme: default
---
kanban
    todo
        A[task A]@{ticket: 2025-04-11, priority: 'Very Low', assigned: 'zhangsan'}
        B[task B is a task named B, which is a quiet normal name]@{ticket: 2025-04-12, priority: 'Very High', assigned: 'lisi'}
    progress
        C[task C]@{ticket: 2025-04-07, assigned: 'wangermazi'}
    done
        D[task D]@{ticket: 2025-04-01, priority: 'Low', assigned: 'wangermazi'}
        D[task D]@{ticket: 2025-04-03, priority: 'High'}

甘特图 (gantt)

---
config:
    theme: forest
---
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends

    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    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                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

MarkMap渲染

使用 Markmap.js 渲染思维导图，效果如下：

---
title: markmap
markmap:
  colorFreezeLevel: 2
---

## Links

- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)

## Related Projects

- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs

## Features

Note that if blocks and lists appear at the same level, the lists will be ignored.

### Lists

- **strong** ~~del~~ *italic* ==highlight==
- `inline code`
- [x] checkbox-selected
- [ ] checkbox-nonselected
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
- Ordered list
  1. item 1
  2. item 2

### Blocks

`console.log('hello, JavaScript')`

| Products | Price |
|-|-|
| Apple | 4 |
| Banana | 2 |

![](https://markmap.js.org/favicon.png)

至此，已有三种方式实现思维导图：使用Plantuml(效果太简单，但是语法也很简单直观)，使用Mermaid(效果太花哨，像脑图云图之类的)，以及使用Markmind（效果最好的思维导图）

Kroki渲染

Kroki 支持mermaid, plantuml, graphviz, dbml … 等很多图表，具体的例子参考 kroki-examples 。

（不过本站 mermaid 由 mermaid.js 进行渲染，支持更多类型、更多定制、更快；plantuml 使用 plantuml-encoder.js 获取直链，更原汁原味。）

graphviz

digraph D {
  subgraph cluster_p {
    label = "Kroki";
    subgraph cluster_c1 {
      label = "Server";
      Filebeat;
      subgraph cluster_gc_1 {
        label = "Docker/Server";
        Java;
      }
      subgraph cluster_gc_2 {
        label = "Docker/Mermaid";
        "Node.js";
        "Puppeteer";
        "Chrome";
      }
    }
    subgraph cluster_c2 {
      label = "CLI";
      Golang;
    }
  }
}

流程图

blockdiag {
  Kroki -> generates -> "Block diagrams";
  Kroki -> is -> "very easy!";

}

时序图

seqdiag {
  browser  -> webserver [label = "GET /seqdiag/svg/base64"];
  webserver  -> processor [label = "Convert text to image"];
  webserver <-- processor;
  browser <-- webserver;
}

泳道图

actdiag {
  write -> convert -> image

  lane user {
    label = "User"
    write [label = "Writing text"];
    image [label = "Get diagram image"];
  }
  lane Kroki {
    convert [label = "Convert text to image"];
  }
}

词云图(vega实现)

图片排版

借用超链接实现浮动

[<<img src="xxx" alt="" style="max-width: 50%; float:right;">>]()

效果看上面那个 github 头像即可

div flex

直接指定样式

<div style="display: flex; gap: 2px; justify-content: center">
    <img src="aaa" alt="" style="max-width: 50%;">
    <img src="bbb" alt="" style="max-width: 50%;">
</div>

使用预定义样式 img-align

只需指定div的class为img-align，它会自动将元素均分为n份填充，横向排版。

僵硬的地方在于，固定是均分的，所以更适合几张图片大小差不多的情况，否则可能不太协调。

<div class='img-align'>
    <img src="aaa">
    <img src="bbb">
</div>

TODO: 定制 Shotcode

ShortCodes

内嵌多媒体

内嵌网页 emb-web

用法及效果如下。第二个参数是iframe的宽度，默认值是 50vh

<!--实际上应该用{，但是在代码块里的也会被解析，所以用[示意-->
[[< emb-web "https://kaikaixixi.xyz" 36 >]]

内嵌图片 emb-img

可以嵌入一些长图。原理是先用图片填充满一个临时html，然后将这个html嵌入到iframe中

目录

_{暂时不打算给博客添加目录} 还是做目录了，鼠标悬浮右上角目录按钮，自动弹出目录框并将当前标题滚动到中间位置

Callout 块展示

GitHub Test

Callout Overview

function fetchData() {
  return axios.get("/api/data");
}

def hello_world():
    print("Hello, World!")

Customization

Choose a callout you prefer and add a title

Header Only Mode

You can choose to only to show the header!