对于需要实现共享的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

 
 
 
 

tailor 基础模版的使用的更多相关文章

  1. hadoop概述测试题和基础模版代码

    hadoop概述测试题和基础模版代码 1.Hadoop的创始人是DougCutting?() A.正确 B.错误答对了!正确答案:A解析:参考课程里的文档,这个就不解释了2.下列有关Hadoop的说法 ...

  2. CodeSmith的基础模版类(CodeSmith help中的内容)

    基础模版类类型描述: Batch      OutputFileCodeTemplate  模版通过继承此类能够在生成过程中把他们的输出保存到文件中 ScriptError    在脚本执行中出现一个 ...

  3. tailor multi fragment && cutom-amd script demo 说明

    tailor 官方demo 中提供了一个multi fragment 的demo,这个比较简单,就是使用不同的 后端server 做为fragment ,然后使用 html tag 进行加载就可以了. ...

  4. [Hadoop in Action] 第4章 编写MapReduce基础程序

    基于hadoop的专利数据处理示例 MapReduce程序框架 用于计数统计的MapReduce基础程序 支持用脚本语言编写MapReduce程序的hadoop流式API 用于提升性能的Combine ...

  5. 掌握Thinkphp3.2.0----模版基础

    我们将要学习一下 ThinkPHP 模版,ThinkPHP 内置了一个基于 XML 的性能卓越的模版引擎 ThinkTemplate,使用了动态编译和缓存技术,支持自定义标签库, 其实我还体会不到其中 ...

  6. zabbix 布署实践【7 H3C网络设备监控模版制作思路】

    我们知道,zabbix安装后自带Template OS Linux 模版已满足了绝大部分Linux服务器的基础环境监控,只是我们在其模版上稍微修改,可配合将SWAP监控取消,另存为一个叫OS Linu ...

  7. python2.0_s12_day19_前端模版使用

    Django中引用bootstrap实现在前端可以创建客户信息,可以修改客户信息我们需要设计一个前端用户交互系统.我们在设计之前,讨论一些需求:前端实现:1. 不同角色的用户,看到的东西是不一样的 销 ...

  8. webpy 模版语言

    webpy框架拥有自己的模版语言Templetor Templetor具有Python的语言风格 可以直接嵌入Python代码 $code: videoIn = post.filename and p ...

  9. 在linux上如何通过composer安装yii

      Composer可以理解成一个依赖管理工具 它能解决以下问题 a) 你有一个项目依赖于若干个库. b) 其中一些库依赖于其他库. c) 你声明你所依赖的东西. d) Composer 会找出哪个版 ...

随机推荐

  1. Android : App通过LocalSocket 与 HAL间通信

    LocalSocket其通信方式与Socket差不多,只是LocalSocket没有跨越网络边界.对于*nix系统来说,“一切皆为文件”,Socket也不例外,Socket按照收发双方的媒介来说有三种 ...

  2. 3.8 C++继承机制下的析构函数

    参考:http://www.weixueyuan.net/view/6365.html 总结: 构造函数的执行顺序是按照继承顺序自顶向下的,从基类到派生类,而析构函数的执行顺序是按照继承顺序自下向上, ...

  3. mongoose的笔记

    本文地址转载自:http://www.cnblogs.com/egger/archive/2013/06/14/3135847.html  本文将介绍操作符的使用,配合操作符,我们可以执行更加复杂的操 ...

  4. DevExpress WPF v18.2新版亮点(五)

    买 DevExpress Universal Subscription  免费赠 万元汉化资源包1套! 限量15套!先到先得,送完即止!立即抢购>> 行业领先的.NET界面控件2018年第 ...

  5. :after和:before伪元素的解释

    :after  是清除浮动  让其高度和内容高度相同 :before   是防止上边塌陷 关注微信小程序

  6. Webservice客户端动态调用服务端功能方法

    一.发布WebService服务 方式一:在服务端生成wsdl文件,下方客户端直接引用即可     优点:针对要发布的方法生成一个wsdl文件即可,无需多余配置.   缺点:每次服务端方法发生改变都需 ...

  7. WordPress无插件实现SMTP给评论用户发送邮件提醒

    wordpress中集成PHPMalier给评论用户发送邮件提醒 首先你得去下载PHPMalier.  注:PHPMailer需PHP的socket扩展支持.如果PHPMailer连接邮箱需要ssl加 ...

  8. 【leetcode】67-AddBinary

    problem AddBinary code class Solution { public: string addBinary(string a, string b) { string res; ; ...

  9. iproute2 与 net-tools

    https://linux.cn/article-4326-1.html https://blog.csdn.net/astrotycoon/article/details/52317288 如今很多 ...

  10. HihoCoder - 1807:好的数字串 (KMP DP)

    Sample Input 6 1212 Sample Output 298 给定一个数字字符串S,如果一个数字字符串(只包含0-9,可以有前导0)中出现且只出现1次S,我们就称这个字符串是好的. 例如 ...