文档模板

2021-05-04

举例

  • 设置 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}}

数据

  1. 站点设置

    • 站点信息，map 类型
    {{.Site}}
    • 站点名称，string 类型
    {{.Site.Name}}
    • 站点域名，string 类型
    {{.Site.Origin}}

    ……

  2. 主题设置

    • 主题信息，map 类型
    {{.Theme}}
    • 版权信息，string 类型
    {{.Theme.copyright}}
    • 统计信息，string 类型
    {{.Theme.analysis}}

    ……

  3. 内容信息

    • 文章信息，map 类型
    {{.Message}}
    • 内容信息，string 类型
    {{.Message.Content}}
    • Meta 信息，map 类型
    {{.Message.Meta}}

<!-- 描述 -->
{{.Message.Meta.description}}

<!-- 日期 -->
{{.Message.Meta.date}}
    • TOC 信息，map 类型
    {{.Message.TOC}}
    • Lang 信息，map 类型
    {{.Message.Lang}}

  4. 路径信息

    {{.Path}}

  5. 侧边栏信息

    • 侧边栏信息，array 类型
    {{.Sidebar}}
    • 编号信息，string 类型
    {{.Number}}
    • 名称信息，string 类型
    {{.Name}}
    • 路由信息，string 类型
    {{.Route}}
    • 节点信息，array 类型
    {{.Node}}