举例
- 设置 TDK
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>{{.Message.Meta.title}} - {{.Site.Name}}</title>
8 <meta name="description" content="{{.Message.Meta.description}}" />
9 </head>
10
11 <body>
12 <main>write your code here</main>
13 </body>
14</html>
- 渲染内容
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <main>
11 <!-- 标题 -->
12 <h1>{{.Message.Meta.title}}</h1>
13 <!-- 日期 -->
14 <span>{{.Message.Meta.date}}</span>
15
16 <!-- 正文 -->
17 <article>{{safe .Message.Content}}</article>
18 </main>
19 </body>
20</html>
21{{end}}
- 渲染 TOC
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <main>
11 {{if .Message.TOC.State}}
12 <div>{{safe .Message.TOC.Content}}</div>
13 {{end}}
14 </main>
15 </body>
16</html>
17{{end}}
- 渲染侧边栏
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <body>
10 <main>
11 <ul>
12 {{range .Sidebar}}
13 <li>{{template "node" .}}</li>
14 {{end}}
15 </ul>
16 </main>
17 </body>
18</html>
19{{end}}
- 侧边栏节点(仅示例)
1{{define "node"}}
2<!-- 节点开始 -->
3<div>
4 <!-- 是集合,无链接,支持折叠-->
5 {{if eq .Route "" }}
6 <p>
7 <!-- 无编号 -->
8 {{if eq .Number "" }}
9 <span> {{.Name}} </span>
10 <!-- 有编号 -->
11 {{else}}
12 <span>{{.Number}} {{.Name}} </span>
13 {{end}}
14 </p>
15
16 <!-- 是集合,有链接,支持点击 -->
17 {{else}}
18 <p>
19 <!-- 有子节点 -->
20 {{ if ne (len .Node) 0 }}
21 <span>
22 <a c href="{{.Route}}"> {{.Name}} </a>
23 </span>
24 <!-- 无子节点 -->
25 {{else}}
26 <span>
27 <a href="{{.Route}}"> {{.Name}} </a>
28 </span>
29 {{end}}
30 </p>
31 {{end}}
32</div>
33<!-- 有子节点 -->
34{{ if ne (len .Node) 0 }}
35<ul>
36 <!-- 循环子节点 -->
37 {{range .Node}}
38 <li>{{template "node".}}</li>
39 {{end}}
40</ul>
41{{end}}
42<!-- 结束 -->
43{{end}}
- 侧边栏节点(含实现)
1{{define "node"}}
2<div class="px-4 text-sm border-r" :class="path !== '{{.Route}}'?' hover:border-gray-500':'border-cyan-700'">
3 {{if eq .Route "" }}
4 <p class="h-8 leading-8 text-cyan-700">
5 {{if eq .Number "" }}
6 <span class="w-full inline-flex justify-between items-center" @click="setState('{{.Name}}')">
7 {{.Number}} {{.Name}}
8 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
9 <path fill-rule="evenodd"
10 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
11 clip-rule="evenodd"/>
12 </svg>
13 </span>
14 {{else}}
15 <span class="font-medium">{{.Number}} {{.Name}} </span>
16 {{end}}
17 </p>
18 {{else}}
19 <p class="h-8 leading-8">
20 {{ if ne (len .Node) 0 }}
21 <span class="w-full inline-flex justify-between items-center" @click="setState('{{.Name}}')">
22 <a class="text-cyan-700" href="{{.Route}}"> {{.Name}} </a>
23 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
24 <path
25 fill-rule="evenodd"
26 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
27 clip-rule="evenodd"
28 />
29 </svg>
30 </span>
31 {{else}}
32 <span class="w-full inline-flex justify-between items-center">
33 <a class="text-cyan-700" href="{{.Route}}"> {{.Name}} </a>
34 </span>
35 {{end}}
36 </p>
37 {{end}}
38</div>
39{{ if ne (len .Node) 0 }}
40<ul class="pl-4 text-sm" {{if eq .Number "" }} :class="getState('{{.Name}}') ? '':'hidden'" {{end}}>
41 {{range .Node}}
42 <li>{{template "node".}}</li>
43 {{end}}
44</ul>
45{{end}}
46<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
47<script>
48 window.sidebar = () => {
49 return {
50 path: window.location.pathname,
51 state: {},
52 getState: function (path) {
53 return this.state[path] ? true : false;
54 },
55 setState: function (path) {
56 this.state[path] = !this.getState(path);
57 },
58 };
59 };
60</script>
61{{end}}
数据
-
站点设置
- 站点信息,map 类型
{{.Site}}
- 站点名称,string 类型
{{.Site.Name}}
- 站点域名,string 类型
{{.Site.Origin}}
……
-
主题设置
- 主题信息,map 类型
{{.Theme}}
- 版权信息,string 类型
{{.Theme.copyright}}
- 统计信息,string 类型
{{.Theme.analysis}}
……
-
内容信息
- 文章信息,map 类型
{{.Message}}
- 内容信息,string 类型
{{.Message.Content}}
- Meta 信息,map 类型
{{.Message.Meta}} <!-- 描述 --> {{.Message.Meta.description}} <!-- 日期 --> {{.Message.Meta.date}}
- TOC 信息,map 类型
{{.Message.TOC}}
- Lang 信息,map 类型
{{.Message.Lang}}
-
路径信息
{{.Path}}
-
侧边栏信息
- 侧边栏信息,array 类型
{{.Sidebar}}
- 编号信息,string 类型
{{.Number}}
- 名称信息,string 类型
{{.Name}}
- 路由信息,string 类型
{{.Route}}
- 节点信息,array 类型
{{.Node}}