Hugo-Focus 主题介绍
==fds==
一、简述
这是一个专注于编程的 Hugo 博客主题。
参考了我此前为 Typora 开发的
Thompsgo 主题
二、特性
1. 运行代码
支持的语言：
python (wasm)lisp (JavaScript 实现的 Common Lisp (JSCL) 解释器)cpp (playground)rust (playground)go (playground)ts (TypeScript 的 JavaScript 实现)js (原生)
代码运行示例
Rust
fn main() { println!("Hello from Rust!"); }
Go
package import "fmt" func main(){ fmt.print("hello") }
Lisp
(progn (format t "Hello from Lisp!") "Hello from Lisp!")
Python
print("test")
TypeScript
console.log("hello")
C++
#include <iostream> int main(){ std::cout << "Hello World!"; return 0; }
2. mermaid 图表
3. 数学公式
$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} $$
4. 效果
文字
- 彩色标签
- 抖音字
- 空心字
- 闪烁字
- 黑底字
- 彩虹字
- 隐藏文本
- 提示块
图片
- 单色
- 模糊
- 半透明
- 反色
- 圆角
- 边框
5. 多语言
参考 hugo 的多语言配置，默认使用路径语言参数（例如/en）
6. 目录
在移动端支持折叠和展开，并支持目录标题跳转
7. 搜索
使用模糊搜索库 fuse.js 实现搜索功能
8. 博客统计
- 博客文章基础统计
- 标签云
- 热门文章
- 归档
9. 日/夜模式
参考 Hugo-Paper
10. 评论
参考 Hugo-Paper
11. 时间线
12. 折叠菜单
I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?
A keyboard.13. 嵌入
三、基本编辑
Markdown以下称作md
Thompsgo主题以下称作主题
mermaid，一种编辑和渲染器，可以编辑并展示思维导图、流程图、序列图、甘特图等多种矢量图形的，typora可直接使用部分
markdown不支持的样式比如带下划线文字或者 带颜色的文字可以通过html实现
1. 基础语法
1.1 md语法
- 如果不起作用请检查是否有空格或者尝试换行
$$ f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d\xi $$
标题
# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题字体样式
斜体： *斜体文本* _斜体文本_ 粗体： **粗体文本** __粗体文本__ 斜粗体： ***粗斜体文本*** ___粗斜体文本___ 删除线： ~~BAIDU.COM~~示例
斜体文本 粗体文本 粗斜体文本
BAIDU.COM
分割线
以下任意一种都可以 *** ***** --- ----------示例
脚注
[^要注明的文本] 您可以像这样创建脚注[^footnote].
- 示例
创建脚注格式类似这样 [^注]。
[^注]: 这是一个注释
5. 列表（可嵌套）
```markdown
普通列表 字符 空格
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
有序列表：数字 点 空格
1. 第一项
2. 第二项
3. 第三项
- 第一项
- 第二项
- 第三项
嵌套列表：数字/字符 点 空格 数字/字符 点 空格
1. 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素- 示例
- 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
- 第一项：
区块（引用）
单层饮用：尖括号 空格 > 区块引用 > 菜鸟教程 > 学的不仅是技术更是梦想 嵌套饮用：尖括号 空格 尖括号 空格 > 最外层 > > 第一层嵌套 > > > 第二层嵌套 复合使用： 区块中使用列表： > 1. 第一项 > 2. 第二项 > + 第一项 > + 第二项 > + 第三项 列表中使用区块 * 第一项 > 菜鸟教程 > 学的不仅是技术更是梦想 * 第二项示例
- 第一项
区块（引用）
- 第二项
- 第一项
代码
使用符号： ` `代码` 代码块： ```代码语言 代码 ```示例
代码
链接
[链接名称](链接地址) [菜鸟教程](https://www.runoob.com) 或者 <链接地址> <https://www.runoob.com>图片
图片地址可以是本地或网络地址  - 使用HTML标签指定图片高度和宽度
<img decoding="async" src="http://static.runoob.com/images/runoob-logo.png" width="50%">示例
表格
| 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 || 左对齐 | 右对齐 | 居中对齐 | | :-----| ----: | :----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 |- 示例
左对齐 右对齐 居中对齐 单元格 单元格 单元格 单元格 单元格 单元格
- 示例
任务列表
- [ ] 未完成 - [x] 完成- 示例
- 未完成
- 完成
- 示例
html支持
<kbd> <b> <i> <em> <sup> <sub> <br> 例如： <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>重启示例
Ctrl+Alt+Del重启
转义
\ 反斜线 支持的符号 （这些符号在md中有意义，可以进行一些格式操作，反斜线可以让它们以文本显示） ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 + 加号 - 减号 . 英文句点 ! 感叹号示例
# - !
公式
$$ \begin{Bmatrix} a & b \\ c & d \end{Bmatrix} $$- 示例
$$ \begin{Bmatrix} a & b \ c & d \end{Bmatrix} $$
$$ \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} $$$$ \begin{CD} A @>a» B \ @VbVV @AAcA \ C @= D \end{CD} $$
$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} $$$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} $$
$\lim_{x \to \infty} \exp(-x) = 0$$\lim_{x \to \infty} \exp(-x) = 0$
表情
:smile:- 示例
:smile:
:tent:
:hand:
:camera:
目录
自动依据‘#’标签生成目录 [toc]YAML
Typora 现在支持 YAML Front Matter 。 在文章顶部输入 --- 然后按 Enter 键将引入一个，或者从菜单中插入一个元数据块。Typora支持
YAML
这是一种编写元数据的数据序列化语言
为什么使用
我们来看markdown的
#其实表示的是header，严格意义上来说是一级标题而不是文章标题title，放在论文里来说就是header 1可以是前言、方法、结果、讨论等，但不是论文的题目。如此一来我们就需要一个用来存放title的地方，这就是metadata的存在的意义，当然它不仅仅能容纳title，还可以加上author、keywords、abstract等信息1。这些数据可以在文件的详细信息里面看到。实际上YAML还可以保存用于脚本的变量，以实现各种导出时的特殊要求
使用方法
在文章顶部输入 --- 然后按 Enter 键将引入一个，或者从菜单中插入一个元数据块。- 添加文章作者和关键字等信息
--- title: "This is the title: it contains a colon" author: - Author One - Author Two keywords: [nothing, nothingness] abstract: | This is the abstract. It consists of two paragraphs. ---例如
--- # 注释：导出的yaml设置 title: Thompsgo使用方法 author: 曹洋 creator: 曹洋 subject: Usage keywords: [使用方法、markdown、HTML、YAML] info: 这是一本关于thompsgo主题的手册，内含markdown、mermiad、html等语言和的基础语法。本主题由 @曹洋 开发，开源地址：https://github.io/caoyang2002 ---<!--注释：导出的html设置--> <meta title="title" content="${title}"> <meta info="info" content="${info}"> <meta author="author" content="${author}"> <div id='_export_cover' style="height:100vh;"> <div id='_export_title' style="margin-top: 10%;text-align: center;font-size: 10rem;"> </div> <hr> <div> <div id='_export_info' style="margin-top: 4%;text-align: center;font-size: 1.5rem;"> </div> <p style="margin-left:10%;font-size: 1.8rem"> 💻 Mac专用 🦄</p> <div id='_export_author' style="margin-left: 80%;font-size: 2.5rem;"> </div> <script> var $cover = document.querySelector("#_export_cover"); var title = document.querySelector("meta[title='title']").getAttribute("content"); var info = document.querySelector("meta[info='info']").getAttribute("content"); var author = document.querySelector("meta[author='author']").getAttribute("content"); if(!title || title == "${title}" || !author || author == "${author}" || !info || info == "${info}") { // no title author info $cover.remove(); } else { document.body.insertBefore($cover, document.body.childNodes[0]) $cover.querySelector("#_export_title").textContent = title; $cover.querySelector("#_export_info").textContent = info; $cover.querySelector("#_export_author").textContent = author; } </script>
嵌入动画
<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>示例
嵌入视频
<iframe src="//player.bilibili.com/player.html?aid=12178417&bvid=BV1Ux411q7qd&cid=20076875&page=1" height="770" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>嵌入音频
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=2870133096&auto=1&height=430"></iframe>- 示例
fds
dsf
fsdfsdfds
fdsf
fsd
fsd
各种导图（mermaid）
1.思维导图
- 空格敏感
基础
语法
形状
默认
mindmap I am the default shape[]矩形mindmap id[I am a square]圆角矩形
mindmap id(I am a rounded square)圆形
mindmap id((I am a circle))爆炸形
mindmap id))I am a bang((云朵形
mindmap id)I am a cloud(六边形
mindmap id{{I am a hexagon}}
::icon()图标mindmap Root A ::icon(fa fa-book) B(B) ::icon(fa fa-car)级别
mindmap Root A[A] :::urgent large B(B) Cmarkdown字符串
mindmap id1["**Root** with a second line Unicode works too: 🤓"] id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"] id3[Regular labels still works]翻动
翻动
语法
语法
2. 顺序图
基础
语法
actor 名称象形图形
sequenceDiagram actor 张三 actor 李四 张三->>李四: 你好，李四，我是张三！ 李四->>张三: 你好，张三！participant A as A的别名使用别名sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L: 你好，李四！ L->>Z: 你好!使用盒子分组
box 组名 box 颜色 组名 participant 马克 participant B as 杰森 可以使用as取别名 end box Group without description ... actors ... end box 指定颜色 box rgb(33,66,99) ... actors ... end box 指定透明 box transparent Aqua ... actors ... end盒子（分组）
sequenceDiagram box rgb(255,34,67) 场景组 participant A as 马克 participant B as 杰森 end box orange 后期组 participant C as 泰克 end box white 道具组 participant D as 斯坦 end box lightblue演员组 participant 瓦特 participant E as 托尼 end box transparent 导演组 participant F as 塔克 end A->>B: 不错 B->>E: 演员呢 A->>D: 换道具了 B->>C: 后期组在吗? A->>F: 我是马克 F->>D: 我是塔克 E->>F: 我是托尼 瓦特->>F: 这里是演员组
可以使用的箭头
类型 描述 ->没有箭头的实线 -->没有箭头的虚线 ->>带箭头的实线 -->>带箭头的虚线 -x末尾有十字的实线 --x末端有十字的虚线。 -)尾端有开箭头的实线（异步） --)末端有开放箭头的虚线（异步） deactivate保持对象（activate激活对象）- 通常用于表示一个完整的内容，避免分割造成的歧义
sequenceDiagram 张三->>李四: 我是可以使用的对象 activate 李四 李四-->>张三: Great! deactivate 李四 张三->>李四: 刚才被停用了 李四-->>张三: Great! activate 李四 李四-->>张三: Great!- 快捷方式：在消息箭头上附加+/-后缀
->>+-->>-
sequenceDiagram 张三->>+李四: Hello John, how are you? 李四-->>-张三: Great!堆叠
sequenceDiagram 张三->>+李四: Hello John, how are you? 张三->>+李四: John, can you hear me? 李四-->>-张三: Hi Alice, I can hear you! 李四-->>-张三: I feel great!注释
sequenceDiagram participant 李四 Note right of 李四: 这是注释跨对象注释
sequenceDiagram 张三->>李四: 你好，李四 Note over 张三,李四: 这是注释注释使用换行符
sequenceDiagram 张三->>李四: 你好 Note over 张三,李四: 尖括号内使用br斜杠
换行
循环
loop 循环说明 循环内容 end
sequenceDiagram 张三->李四: 接下来是一个循环 loop 循环的说明 李四–>张三: 循环的内容 end
- 替换和选择 ```markdown 可以在序列图中表达替代路径。 alt 描述信息 ... statements ... else ... statements ... end 或者 如果有可选的序列（如果没有其他） opt 描述信息 ... statements ... endsequenceDiagram 张三->>李四: 怎么样 alt 生病了 李四->>张三: 不太好:( else 健康 李四->>张三: 很好 end opt 额外的 李四->>张三: 谢谢关心 end并行发生
可以显示并行发生的行为。
par [Action 1] … statements … and [Action 2] … statements … and [Action N] … statements … end
```mermaid sequenceDiagram par 张三 to 李四 张三->>李四: 你好 and 张三 to 王五 张三->>王五: 你好 end 李四-->>张三: 你好，张三 王五-->>张三: 你好，张三嵌套平行块
sequenceDiagram par 张三 to 李四 张三->>李四: Go help John and 张三 to 王五 张三->>王五: I want this done today par 王五 to 赵六 王五->>赵六: Can we do this today? and 王五 to 小明 王五->>小明: Can you help us today? end end条件触发
可以显示必须通过有条件处理情况自动发生的操作。 critical [Action that must be performed] … statements … option [Circumstance A] … statements … option [Circumstance B] … statements … end
```mermaid sequenceDiagram critical 拨打电话给李四 张三-->李四: 打电话 option 话费不足 张三-->张三: 通话失败 option 被拒绝 张三-->张三: 再次通话失败 endsequenceDiagram critical 张三打电话给李四 张三-->李四: 成功 end中断
可以指示流中序列的停止（通常用于模拟异常）。
break [something happened] … statements … end
```mermaid sequenceDiagram 消费者-->商家: 买一个笔记本 商家-->仓库: 查仓库的库存 break 无库存 商家-->消费者: 提示无库存 end 商家-->财务系统: 财务登记背景高亮显示
可以通过提供彩色背景来突出显示流。 颜色是使用rgb和rgba语法定义的。
rect rgb(0, 255, 0) … content … end rect rgba(0, 0, 255, .1) … content … end
```mermaid sequenceDiagram participant Alice as 张三 participant John as 李四 rect rgb(191, 223, 255) note right of Alice: 张三给李四打电话 Alice->>+John: 你好，李四！ rect rgb(200, 150, 255) Alice->>+John: 李四，你能听到我说话吗？ John-->>-Alice: 我可以听到 end John-->>-Alice: 很清晰 end Alice ->>+ John: 今晚有空看比赛吗？ John -->>- Alice: 可以的！%%注释内容，换行结束注释
sequenceDiagram A-»J: Hello J, how are you? %% this is a comment J–»A: Great!
- 转义字符 ```mermaid sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!翻动分
赛
翻动
语法
扽色
冬粉
- 使用
end时，建议用[] 或 {} 或 ()括起来
- 使用
3. 流程图flowchart
使用
graph也可以基础：
- 节点：箭头（连接线）指向的图形
- 内容：节点上的文字
- 对空格不敏感
---三个减号表示线，最后一个减号改为>可带箭头，增加-可增加长度
```mermaid
graph LR
思维导图--> 第一部分
第一部分-->1.1小节
第一部分-->1.2小节
思维导图--> 第二部分
第二部分-->2.2小节
思维导图--> 第三部分
第三部分--> 3.1小节
思维导图--> 若干
```语法：
排列方式
graph LR从左到右排列，RL相反graph BT从上到下排列，TB相反
连接方式
-->箭头连接graph LR A --> B---无箭头连接graph LR A---B--连接线上带文字---或C---|连接线上带文字|D连接线上带文字graph LR A-- 连接上的文字 ---B C---|连接线上带文字|D-->箭头连接线上带文字---或C--->|箭头连接线上带文字|D箭头连接线上带文字graph LR A--> 连接上的文字 -->B C--->|连接线上带文字|DA-.->B虚线连接graph LR A-.->BA-.带文字的虚线连接.->B带文字的虚线连接graph LR A-.带文字的虚线连接.->BA==>B粗连接graph LR A==>BA == 带文本的粗连接 ==> B带文本的粗连接graph LR A == 带文本的粗连接 ==> B
- 特殊字符的显示
```mermaid
graph LR
A["这里有个引号#quot;"] -->B["特殊字符:#9829;"]
```
- 破坏语法的字符`!`
```mermaid
graph LR
A["破坏语法的特殊字符 ! "]
```
节点形状
A(圆角矩形)“A”和“圆角矩形”可以是任意字符graph RL A(圆角矩形)A[矩形]
graph RL A[矩形]A((圆形))
graph RL A((圆形))A>非对称形状]
graph RL A>非对称形状]A{菱形}
graph RL A{菱形}
文字（别名）
start[开始]start将作为节点，显示的字符为开始
子图
subgraph 图像块标题1 图像快中的连接 subgraph 图像块标题2 图像快中的连接 ...... endgraph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end带样式的连接
- 参数
fill：内部填充色stroke：描边颜色stroke-width：描边宽度stroke-dasharray: 虚线描边（虚线块的宽度 虚线空格的宽度）
graph LR A(Start)-->B(Stop) style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5 5 style C fill:#f9f,stroke:#993,stroke-width:4px style D fill:#ccf,stroke:#f6f6,stroke-width:6px,stroke-dasharray: 4 2- 参数
对 fontawesome 的基本支持
图标通过语法
"fa:图标名称"来获取graph TD B["fa:fa-twitter 和平"] B-->C[fa:fa-ban 禁止] B-->D(fa:fa-spinner); B-->E(fa:fa-camera-retro 也许?); E-->F(fa:fa-car 汽车) B-->G(fa:fa-file 文件)fds
fdsfsd
4. 甘特图
甘特图将把每个计划的任务记录为一个从左向右延伸的连续条。x轴表示时间，y记录不同的任务和完成它们的顺序。
重要的是要记住，当特定于任务的日期、日期或日期集合被“排除”时，甘特图将通过向右延长相等的天数来适应这些变化，而不是在任务内部创建空隙。但是，如果排除的日期在设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，以下任务将在排除日期结束后开始。
甘特图可用于跟踪项目完成所需的时间，但它也可以用于以图形方式表示“非工作日”，只需进行一些调整。
语法
- 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, 2023-01-06,2023-01-08 Active task :active, des2, 2023-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, 2023-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 :1d Functionality added :milestone, 2023-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
由多个空间分割的依赖项
gantt apple :a, 2023-07-20, 1w banana :crit, b, 2023-07-23, 1d cherry :active, c, after b a, 1dtitle标题title是一个可选字符串，显示在甘特图表的顶部，以描述整个图表。
section章节声明- 将图标分为多个部分
milestone重要事件代表时间上的单个瞬间
里程碑的确切位置由里程碑的初始日期和任务的“持续时间”决定：初始日期+持续时间/2。
gantt dateFormat HH:mm axisFormat %H:%M Initial milestone : milestone, m1, 17:49, 2m Task A : 10m Task B : 5m Final milestone : milestone, m2, 18:08, 4m
日期
dateFormat定义甘特元素的日期输入格式。这些日期如何在渲染的图表输出中表示，由axisFormat定义。日期格式
dateFormat YYYY-MM-DD输入的信息 示例： 描述 YYYY2014 年 4位数年 YY14 2位数年 Q1..4 一年的四分之一。将月份设置为季度的第一个月。 M MM1..12 月号 MMM MMMM一月..十二月 区域设置中的月份名称由 dayjs.locale()D DD1..31 月日 Do第1..31 带有序数的月日 DDD DDDD1..365 一年中的一天 X1410715640.579 Unix时间戳 x1410715640579 Unix ms时间戳 H HH0..23 24小时时间 h hh1..12 12 hour time used with a A.a A下午上午 帖子或ante meridiem m mm0..59 备忘录 s ss0..59 秒 S0..9 十分之一秒 SS0..99 数百秒 SSS0..999 千分之一秒 Z ZZ+12:00 从UTC偏移为+-HH:mm、+-HHmm或Z 轴上的日期格式
默认输出日期格式是
YYYY-MM-DD。您可以定义自定义axisFormat，例如2020年第一季度的2020-Q1。axisFormat %Y-%m-%d格式 定义 %a 缩写的工作日名称 %A 完整的工作日名称 %b 缩写的月名 %B 完整月份名称 %c 日期和时间，如“%a %b %e %H:%M:%S %Y” %d 每月零填充日作为十进制数[01,31] %e 每月用空格填充的十进制数[1,31]；相当于%_d %H 小时（24小时时钟）作为十进制数[00,23] %I 小时（12小时时钟）作为小数[01,12] %j 一年中的一天作为十进制数[001,366] %m 月份作为十进制数[01,12] %M 分钟作为十进制数[00,59] %升 毫秒作为十进制数[000,999] %p 上午或下午 %S 第二个十进制数[00,61] %U 一年中的周数（周日作为一周的第一天）作为十进制数[00,53] %w 工作日作为十进制数[0（周日），6] %W 一年中的周数（周一作为一周的第一天）作为十进制数[00,53] %x 日期，如“%m/%d/%Y” %X 时间，如“%H:%M:%S” %y 没有世纪的年份作为十进制数[00,99] %Y 以世纪为十进制数的年份 %Z 时区偏移，例如“-0700” %% 字面上的“%”字符
轴刻度
- 默认输出刻度是自动的。您可以自定义您的
tickInterval，如1day或1week tickInterval 1day- 模式：
/^([1-9][0-9]*)(minute|hour|day|week|month)$/;
- 默认输出刻度是自动的。您可以自定义您的
紧凑模式输出
- --- displayMode: compact --- gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2023-01-01, 30d Another task :a2, 2023-01-20, 25d Another one :a3, 2023-02-10, 20d
·
%%注释fds
fds
5. 饼图
饼图（或圆图）是一种圆形统计图形，分为切片以说明数字比例。在饼图中，每个切片的弧长（以及其中心角度和面积）与它所代表的数量成正比。
语法
pie关键字showData在图例文本之后呈现实际数据值。这是可选的后面跟着
title关键字及其在字符串中的值，以给饼图一个标题。这是可选的其次是数据集。饼图将按照与标签相同的顺序顺时针排序。
label在" "引号中的饼图中的一部分。其次是
:冒号作为分隔符后跟
positive numeric value（最多支持小数点后两位）- %%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% pie showData title 软件技能 "PS" : 42.96 "Word" : 50.05 "Exl" : 10.01 "Ppt" : 5
参数 描述 默认值 textPosition馅饼片标签的轴向位置，从中心0.0到圆圈外缘的1.0。 0.75
主题语法 （Thompsgo）
图片
- 原图
模糊
自适应缩小
阴影圆角
虚线
实线
阴影圆角和自适应缩放
色彩反转
半透明
毛玻璃
模糊特效（交互）
图片单色特效（交互）
文字
隐藏文本
- 隐藏可显示
<span alt="hide"><span>隐藏文本</span></span>
隐藏文本
- 隐藏不可显示
<span style="display:none">导出时会被隐藏</span>
蓝色小标签
<font title="blue"><span>蓝色小标签</span></font>
红色小标签
黄色小标签
绿色小标签
灰色小标签
抖音字效
<span alt="shake"><span>抖音字效</span></span>
抖音字效
字体闪烁
<span alt="blink"><span>字体闪烁</span></span>
字体闪烁
空心字
<span alt="hollow"><span>空心字</span></span>
空心字
黑底字
<span alt="str"><span>黑底字</span></span>
黑底字
发光文字背景
<span alt=glow>发光文字背景</span>
发光文字背景
提示块
<blockquote alt="danger"><p>危险型提示块</p></blockquote>
危险型提示块
<blockquote alt="success"><p>成功型提示块</p></blockquote>
成功型提示块
<blockquote alt="warn"><p>错误型提示块</p></blockquote>
错误型提示块
<blockquote alt="question"><p>问题型提示块</p></blockquote>
问题型提示块
字体颜色
<span style="color:red">this text is red</span>
this text is red
彩虹字
<span alt="rainbow"><span>彩虹变换字体特效</span></span>
彩虹变换字体特效
文本按钮
<span alt=btn>fds</span>
文本按钮
折叠菜单
<details>
<summary>I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?</summary>
A keyboard.
</details>I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?
A keyboard.时间线（推荐使用mermaid）
<div alt="timeline">
<div alt="timenode">
<div alt="meta">2021.9 ~ 2022.6 <a href="#">大一</a></div>
<div alt="body">
什么也没做。
</div>
</div>
<div alt="timenode">
<div alt="meta">2022.9 ~ 2023.6 <a href="#">大二</a></div>
<div alt="body">
也是什么都没做。。。
</div>
</div>
</div>其它解释
输出为PDF
手动分页
添加到你想分页的地方
<div style="page-break-after:always"></div>添加封面
<meta name="title" content="${title}">
<div id='_export_cover' style="height:100vh;">
<div id='_export_title' style="margin-top: 25%;text-align: center;font-size: 12rem;">
</div>
<hr>
<div>
<blockquote cite=" ">
<p style="text-align:center;font-size:3rem">这是一本关于Thompsgo主题的介绍手册</p>
<br>
<p style="text-align:right;padding-right:10%;font-size:1.5rem">作者：曹洋</p>
</blockquote>
</div>
</div>
<script>
var $cover = document.querySelector("#_export_cover");
var title = document.querySelector("meta[name='title']").getAttribute("content");
if(!title || title == "${title}") {
// no title
$cover.remove();
} else {
document.body.insertBefore($cover, document.body.childNodes[0])
$cover.querySelector("#_export_title").textContent = title;
}
</script>白色页边距
若想去除，可以在导出设置里，把页边距选项内的所有参数都改为0，但同时也会失去页眉页脚
