对于需要实现共享的html 内容，tailor 提供了基础模版的概念，我们需要操作的就是添加slots ，以及使用slots
做为占位符
环境准备
使用现有的仓库代码 https://github.com/rongfengliang/tailor-skipper-docker-compose.
代码使用docker-compose 运行
测试
- 模版布局
- 代码说明
base-template基于 slot 的占位符
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="dns-prefetch" href="https://example.com" />
<script type="slot" name="head"></script>
</head>
<body>
<slot name="body-start"></slot>
<div>Hello</div>
</body>
</html>
````
index.html tailor 需要一个index page
```code
<!-- Tailor needs an index.html -->
<meta slot="head" charset="utf-8">
<script slot="body-start" src="http://blah"></script>
<title slot="head">dalongrong demo</title>
<p>fragment a</p>
<fragment src="http://skipper:9090/fragment-a" primary ></fragment>
<p>fragment b</p>
<fragment src="http://skipper:9090/fragment-b" async primary ></fragment>- tailor server 代码说明
主要是进行模版的配置，因为使用了base template 所以需要添加处理函数
'use strict';
const http = require('http');
const Tailor = require('node-tailor');
const fetchTemplate = require('node-tailor/lib/fetch-template');
const path = require("path")
const baseTemplateFn = () => 'base-template';
const tailor = new Tailor({
// 模版函数的定义，如果使用了base template 需要多个参数
// templatesPath: './templates',
fetchTemplate: fetchTemplate(
path.join(__dirname, 'templates'),
baseTemplateFn
)
});
// Root Server
http
.createServer((req, res) => {
tailor.requestHandler(req, res);
})
.listen(8080, function() {
console.log('Tailor server listening on port 8080');
});
fetchTemplate 函数签名说明
启动&&测试
- 启动
docker-compose up -d- 测试
说明
官方文档对于基本模版的使用，说明的不是很清晰，结合示例以及源码，我们可以了解具体的实现
参考资料
https://github.com/rongfengliang/tailor-skipper-docker-compose
https://github.com/zalando/tailor/blob/master/docs/Base-Templates.md