图1 轮播代码
1

当弹出遮罩层后，中间有一个白色文本框，文本框里面可以选择各种选择，而且鼠标移入选择项中也需要发生颜色的变化，作为显示给用户当前的鼠标位置，让人看起舒服而清晰。
1

 图二 html的代码
1

 图三 布置代码
1

了降低复杂前端应用的研发难度和维护难度，此框架应运而生。经历了十数个项目的检验，期间不断优化和扩展功能，已经日趋稳定。

总体看有如下几个特点：

1. 没有复杂的标记和语法,不使用typescript和复杂模板标记。

2. 基于原生javascript,性能优异。

3. 兼容jQuery库,易于DOM操作和浏览器适配。

4. 完全采用面向对象编程方式构建页面和交互行为。

5. 可独立编辑组件,分块构建,可适配PC端和手机端。

6. 易于维护,可在复杂的单页面系统快速定位组件和其注入的参数及组件源码。

7. 包含核心js组件框架,UI框架,应用架构。

8. 无需编译,即时所得。

9. 不依赖nodejs,npm等前端工具和庞大的第三方库,开发环境清洁,对新手和后端研发友好。

10. 公共组件仓库。可在线分享你的组件和在系统里在线引用别人分享的组件。

11. 可选配套的后端单体服务、微服务、saas服务等服务套件。

12. 可选配套的代码生成工具和自动部署工具。

系统里所有页面都是组件或者由组件构成

任意复杂的页面可以由有限的组件搭建而成。

每个组件都以.rs作为源码文件后缀。

组件内部也可以嵌套组件，实现不限层级递归使用

框架里所有组件通称为Region(区块、积木)。

组件对象拥有仅自身作用域有效的CSS和JS代码片段，从而隔离了组件之间相互影响。

拥有完整的生命周期，并可以在自身的生命周期内设置函数回调钩子。

组件经过加载之后，会创建响应的对象实例，并保存在内存之中。

使用对象引用可以获取组件对象的属性值和操作对象的函数方法。

基本组件类型

FormRegion：表单组件，主要用于表单值绑定，后端服务地址绑定。包括数据回显，数据添加或修改等。（推荐使用）

GridRegion：列表查询组件，用于查询，分页，是FormRegion的定制版，专用于查询和显示分页结果。（FormRegion的定制版本，用于绑定后端分页服务，显示分页列表）

StaticRegion：静态容器组件，不能使用值绑定标签。主要用于显示静态页面，组件布局容器，高级原生组件定制等。（FormRegion的阉割版本，占用内存更少，不支持值绑定）

在不追求极致性能和后端服务强绑定的情况下，可以只使用FormRegion这种类型的组件。

先我们来介绍下，Wintersmith 是一个简单而灵活的静态站点生成器。采用 markdown 构建，这个是我们的基础条件。

• Serverless Framework：在 GitHub 上有三万颗星，业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。

确保系统包含以下环境：

• Node.js (Node.js 版本需不低于 8.6，建议使用 10.0 及以上版本)

1. 安装 Serverless Framework

$ npm install -g serverless

2. 安装 wintersmith

$ npm i wintersmith -g

3. 新建 wintersmith 项目

可对指定路径进行安装

$ wintersmith new <path>

初始化成功后，可以看到路径下创建的项目文件

4. 本地预览

运行以下命令，并通过浏览器访问 http://localhost:8080 即可方便地预览效果，而且提供 LiveReload 功能，可以实时预览。

$ wintersmith preview

使用如下命令构建网站：

$ wintersmith build

5. 配置 yml 文件

在项目目录下，创建 serverless.yml 文件：

$ touch serverless.yml

将以下内容写入上述的 yml 文件里：

# serverless.yml

myWebsite:
 component: '@serverless/tencent-website'
 inputs:
 code:
 src: ./build
 index: index.html
 error: index.html
 region: ap-guangzhou
 bucketName: my-bucket

配置完成后，文件目录如下：

.
├── build
| ├── index.html
| └── README.md
└── serverless.yml

6. 部署

通过 sls 命令进行部署，这里还可以添加 –debug 参数来查看部署过程中的信息：

$ sls --debug

如您的账号未登陆或注册腾讯云，您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册，从而进行授权登陆和注册。这也是我觉得特别方便的一个地方！

部署过程中，terminal 显示信息示意：

访问命令行输出的 url，即可查看使用 Serverless Framework 部署的网站啦~

7. 小结

本文使用了腾讯云的无服务器框架 Serverless Framework 来搭建 Wintersmith 博客系统。

虽然这只是一个非常简单的示例，但是不难看出，Serverless Framework 在快速部署方面的强大能力。比如集成了微信扫描二维码，就直接让我们避开了繁琐的云服务的账号注册、配置的环节。而你需要做的，只是根据 Wintersmith 自身的能力，进行网站的定制。