tailor 基础模版的使用
对于需要实现共享的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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2017-12-10 parceljs 基本使用———又一个前端构建工具