diff --git a/docs/.layui/index.md b/docs/.layui/index.md
index cc913bd9..10045b78 100644
--- a/docs/.layui/index.md
+++ b/docs/.layui/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/MOD_NAME/detail/demo.md") }}
+{{- d.include("/MOD_NAME/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -30,5 +30,5 @@ toc: true
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/MOD_NAME/detail/options.md") }}
+{{- d.include("/MOD_NAME/detail/options.md") }}
 </div>
\ No newline at end of file
diff --git a/docs/@note/2.8/docs-statement.md b/docs/@note/2.8/docs-statement.md
deleted file mode 100644
index 8d17cd47..00000000
--- a/docs/@note/2.8/docs-statement.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: ⚡ 关于呼吁第三方停止搭建 Layui 文档镜像站的郑重声明
-toc: false
-editable: false
----
- 
-# ⚡ 关于呼吁第三方停止搭建 Layui 文档镜像站的郑重声明
-
-<p style="text-align: center;">
-  <span class="layui-badge-rim">发布：2023-05-07</span>
-</p>
-
-随着 Layui `2.8` 的发布，以及官方新文档站的归来 ([**<ins>https:<span>//</span>layui<span>.</span>dev</ins>**](//layuion.com))，为了保证 Layui 文档的及时性和权威性，我们郑重呼吁第三方单位或个人停止搭建 Layui 文档镜像站点，这不仅严重侵害 Layui 维护团队的基本权益，更严重影响开发者在使用 Layui 时可能造成的一系列信息不对称问题。过去两年，第三方镜像站点已经造成诸多弊端，譬如镜像文档与实际使用版本的出入问题，无形之中给维护团队增加了与使用者的 `Issue` 沟通成本和障碍。
-
-我们再次重申《[**Layui 新版文档站上线初衷**](https://layui.dev/docs/@note/2.8/news.html)》中的观点：**此次重新上线的新版文档站，旨在为  Layui 开发使用者提供一个新的精神「基站」，并能够在第一时间获悉版本的最新动态与及时的文档内容**，不至于造成信息的混乱。同时，也是希望通过官方文档站的流量，在日后也能为创作团队支撑一丝基本的日常开支。希望第三方尊重创作者的劳动成果，一起守望好这来之不易的坚持。
-
-也请大家以官方文档为准，避免可能造成的信息差异。
-
-Layui · 2023.05.07
-
----
-
-<div class="layui-btn-container">
-  <a class="layui-btn" href="https://gitee.com/layui/layui/issues/I70ZW8#comment-loadder" target="_blank">我要评论</a>
-  <a class="layui-btn layui-btn-primary" href="../">
-    <i class="layui-icon layui-icon-left"></i> 返回笔记
-  </a>
-</div>
\ No newline at end of file
diff --git a/docs/@note/2.8/news.md b/docs/@note/2.8/news.md
deleted file mode 100644
index 83fa8b11..00000000
--- a/docs/@note/2.8/news.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
-toc: false
-editable: false
----
- 
-# 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
-
-<p style="text-align: center;">
-  <span class="layui-badge-rim">发布：2023-04-24</span>
-</p>
-
-我们终于迎来了 Layui `2.8.0` 的正式版本，以及全新的文档站。
-
-在 Layui 过往七年的开源历程中，从未用多达**二十个预览版**去为一个正式版而引路。 显然，`2.8.0` 是 Layui 一次朴实的回归，更是情怀的延续。但却并不是想以此呼吁人们重新去选择它，我们仍然坚持两年前那则《[Layui 原官网下线公告](https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png)》中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。
-
-Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作，作为开源创作者的我们，应该要为这些坚持者而守望。
-
-### 新文档站
-
-2021 年 Layui 原官网下线后，互联网出现了许多第三方的 Layui 文档镜像站，这在当时，给大家能继续阅读文档确实提供了便利，但原官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，这在公告中也有清晰的阐述。但或许是由于那则公告的用词过于「悲壮」，使得各大自媒体有所误读，从而让大家都以为是 Layui 停更了。 事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 `2.6.9` 一直迭代到今天的最新版本，而现存的第三方文档镜像站点的内容却仍然定格在 Layui `2.6.8` 的版本，已严重滞后于 Layui 的当前版本，显然是不利于开发者们对 Layui 的应用。 两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 **Gitee Pages** 为文档的承载，但似乎很难形成一个焦点和归属感。 随着 `2.8.0` 正式版本的发布，它所包含的上百项的内容更新，使得全新的文档站呼之欲出。
-
-此次上线的新版文档站，旨在为朴实归来的 Layui 提供一个新的精神「基站」，它基于 laytpl 和 markdown 驱动，在版面上进行了大量优化，内容重新编写、力求精简，以辅助大家更好地使用 Layui。 同时，Layui 文档也已和 Layui 本身一同开源在项目中，以供大家在线和离线都能阅读以及协同维护。
-
-- **文档协作:** https://github.com/layui/layui/tree/2.x/docs
-- **文档阅读:** https://layui.dev
-
----
-
-<div class="layui-btn-container">
-  <a class="layui-btn" href="https://gitee.com/layui/layui/issues/I6Y8EN" target="_blank">我要评论</a>
-  <a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
-    <i class="layui-icon layui-icon-left"></i> 更新日志
-  </a>
-</div>
diff --git a/docs/@note/2.8/upgrade-guide.md b/docs/@note/2.8/upgrade-guide.md
deleted file mode 100644
index 5f530fa2..00000000
--- a/docs/@note/2.8/upgrade-guide.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 📑 Layui 2.8 《升级指南》
-toc: false
----
- 
-# 📑 Layui 2.8 《升级指南》
-
-Layui `2.8` 总体向下兼容，但仍有以下变更需要注意：
-
-1. `2.8` 剔除了 ~~layedit~~ 组件，若是之前用到该组件的，注意采用第三方成熟富文本组件替换，详见：#I5JSE3
-1. `2.8` 调整了 `table` 的 `page,limit` 属性，当 `page` 未开启时，则默认不再向后端传递这两个参数
-1. `2.8` 调整了 `table` 的特定属性名。序号: `LAY_INDEX` → `LAY_NUM`；下标: `LAY_TABLE_INDEX` → `LAY_INDEX`，若是之前用到这几个特定属性，需更换为新版名称。
-1. `2.8` 调整了 `checkbox` 的 `lay-skin` 属性默认为原始风格，原来的标签风格可通过 `lay-skin="tag"` 来设置。
-1. `2.8` 调整了 `checkbox` 的私有属性 `lay-text`，采用统一的 `title` 属性替代
-1. `2.8` 调整了 `util.fixbar` 的 `showHeight` 属性名称为 `margin`
-
-### 2.7.6 升级到 2.8
-
-`2.8` 对 `2.7.6` 最友好，可直接覆盖升级，只需按照上述提到的几点进行适配即可。
-
-### 2.6.x 升级到 2.8
-
-该跨度相对较大，主要是中间的 `2.6.11` 和 `2.7.x` 的几处调整要适配，包括：
-{{!
-1. **重要**：`2.6.11` 调整了 `laytpl` 的 `{{ d.field }}` 标签的输出为默认开启编码。即与 `{{= d.field }}` 等同。因此，若输出内容包含 `HTML` 且需要正常渲染的，需采用 `{{- d.field }}` 的标签语句。详细可参考：<a href="https://gitee.com/layui/layui/issues/I5AXSP" target="_blank">#I5AXSP</a>
-1. `2.6.11` 调整了 `table` 组件的 `escape` 属性默认为 `true`，即默认开启编码功能（之前默认为 `false`）
-1. `2.7.5` 调整了 `table` 表头的 `edit` 属性，支持函数写法，且单元格是否编辑不再以 `<td>` 标签上的 `data-edit` 属性为准，而是统一以 `cols` 属性中的 `edit` 属性为准，详细可参考新版文档关于 `edit` 的用法：https://layui.dev/docs/table/#cols.edit
-!}}
-
-### 2.6.0 以下版本 升级到 2.8
-
-若当前用的版本低于 `2.6.0`，一般不建议升级。但如果非升级不可，除了结合上述提到的变更外，还要重点参考 `2.6.0` 的更新日志中提到的「重要提示」进行适配：https://layui.dev/2.7/docs/base/changelog.html#2.6.0 
-
-同时，还要特别注意，`2.6.0` 之前的版本是按需加载内置组件，从 `2.6.0` 开始，统一构建到 `layui.js` 中。因此，要注意下之前引入的 `JS` 业务代码的放置位置，若是放在 `<head>` 区域，需调整放置到 `<body>` 标签内部的尾端。
-
-### layuiAdmin 主题升级 Layui 到 2.8
-
-主要还是根据当前主题中所用的 Layui 的版本，进行对应的适配，尤其是单页版中的动态模板，需按照前面提到的 `laytpl` 的调整进行修改。具体也可以参考：#I65D80
-
-### 其他细节
-
-若按照以上调整后仍然存在兼容性问题，也可以详细阅读过往所有版本的更新日志：
-https://layui.dev/docs/versions.html
-
-或新建 `Issue` 进行详细反馈。
-
----
-
-<div class="layui-btn-container">
-  <a class="layui-btn" href="https://gitee.com/layui/layui/issues/" target="_blank" style="word-spacing: normal;">前往 Issues</a>
-  <a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
-    <i class="layui-icon layui-icon-left"></i> 更新日志
-  </a>
-</div>
-
diff --git a/docs/@note/index.md b/docs/@note/index.md
deleted file mode 100644
index bbc923b4..00000000
--- a/docs/@note/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 📑 笔记
-toc: false
-editable: false
----
- 
-# 📑 笔记
-
-| 📑 | 📅 | ✍ |
-| --- | --- | --- |
-| ⚡ [关于呼吁第三方停止搭建 Layui 文档镜像站的声明](/docs/@note/2.8/docs-statement.html) | 2023-05-07 | - |
-| 📑 [Layui 2.8 《升级指南》](/docs/@note/2.8/upgrade-guide.html) | - | - |
-| 🚀[ Layui 新版文档站上线初衷](/docs/@note/2.8/news.html) | 2023-04-24 | - |
\ No newline at end of file
diff --git a/docs/carousel/detail/options.md b/docs/carousel/detail/options.md
index cc2dd333..d347040a 100644
--- a/docs/carousel/detail/options.md
+++ b/docs/carousel/detail/options.md
@@ -187,7 +187,7 @@
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -199,7 +199,7 @@
 <td>change <sup>2.7+</sup></td>
 <td colspan="3">
 
-<div id="options.change", class="ws-anchor">  
+<div id="options.change" lay-pid="options" class="ws-anchor">  
 轮播切换后的回调函数，返回一个对象参数。
 </div>
 
diff --git a/docs/carousel/index.md b/docs/carousel/index.md
index f82c8c12..cecae0a6 100644
--- a/docs/carousel/index.md
+++ b/docs/carousel/index.md
@@ -17,7 +17,7 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #16baaa;}
 </style>
 
 <div>
-{{- d.include("docs/carousel/detail/demo.md") }}
+{{- d.include("/carousel/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -60,7 +60,7 @@ inst.reload(options); // 轮播重载
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/carousel/detail/options.md") }}
+{{- d.include("/carousel/detail/options.md") }}
 </div>
 
 
diff --git a/docs/code/detail/options.md b/docs/code/detail/options.md
index cb986e1c..8ecc0eae 100644
--- a/docs/code/detail/options.md
+++ b/docs/code/detail/options.md
@@ -266,7 +266,7 @@ Code 容器的风格，可选值有：
 </td>
 <td colspan="3">
 
-<div id="options.done" class="ws-anchor">  
+<div id="options.done" lay-pid="options" class="ws-anchor">  
 组件渲染完毕的回调函数，函数返回一个 object 类型参数
 </div>
 
@@ -287,7 +287,7 @@ done: function(obj){
 </td>
 <td colspan="3">
 
-<div id="options.onCopy" class="ws-anchor">  
+<div id="options.onCopy" lay-pid="options" class="ws-anchor">  
 点击复制图标时的回调函数。 该回调一旦设定，则不再执行内置的复制操作。
 </div>
 
diff --git a/docs/code/index.md b/docs/code/index.md
index ccf937d4..de989438 100644
--- a/docs/code/index.md
+++ b/docs/code/index.md
@@ -39,5 +39,5 @@ layui.use(function(){
 <h2 id="options" lay-toc="{hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/code/detail/options.md") }}
+{{- d.include("/code/detail/options.md") }}
 </div>
\ No newline at end of file
diff --git a/docs/colorpicker/detail/options.md b/docs/colorpicker/detail/options.md
index 2909382b..5ff720c5 100644
--- a/docs/colorpicker/detail/options.md
+++ b/docs/colorpicker/detail/options.md
@@ -105,7 +105,7 @@
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
diff --git a/docs/colorpicker/index.md b/docs/colorpicker/index.md
index 9a07a310..957c57ed 100644
--- a/docs/colorpicker/index.md
+++ b/docs/colorpicker/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/colorpicker/detail/demo.md") }}
+{{- d.include("/colorpicker/detail/demo.md") }}
 </div>
 
 <p></p>
@@ -54,7 +54,7 @@ layui.use(function(){
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/colorpicker/detail/options.md") }}
+{{- d.include("/colorpicker/detail/options.md") }}
 </div>
 
 ## 兼容性
diff --git a/docs/dropdown/detail/demo.md b/docs/dropdown/detail/demo.md
index 08cb32b0..363fcf7f 100644
--- a/docs/dropdown/detail/demo.md
+++ b/docs/dropdown/detail/demo.md
@@ -2,7 +2,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/base.md") }}
+{{- d.include("/dropdown/examples/base.md") }}
   </textarea>
 </pre>
 
@@ -10,7 +10,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/complex.md") }}
+{{- d.include("/dropdown/examples/complex.md") }}
   </textarea>
 </pre>
 
@@ -18,7 +18,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/table.md") }}
+{{- d.include("/dropdown/examples/table.md") }}
   </textarea>
 </pre>
 
@@ -26,7 +26,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/on.md") }}
+{{- d.include("/dropdown/examples/on.md") }}
   </textarea>
 </pre>
 
@@ -34,7 +34,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/contextmenu.md") }}
+{{- d.include("/dropdown/examples/contextmenu.md") }}
   </textarea>
 </pre>
 
@@ -42,7 +42,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/align.md") }}
+{{- d.include("/dropdown/examples/align.md") }}
   </textarea>
 </pre>
 
@@ -52,6 +52,6 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/content.md") }}
+{{- d.include("/dropdown/examples/content.md") }}
   </textarea>
 </pre>
\ No newline at end of file
diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md
index 406ec566..605a1a9e 100644
--- a/docs/dropdown/detail/options.md
+++ b/docs/dropdown/detail/options.md
@@ -211,7 +211,7 @@ templet: function(d){
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -242,7 +242,7 @@ ready: function(elemPanel, elem){
 </td>
 <td colspan="3">
   
-<div id="options.click" class="ws-anchor">
+<div id="options.click" lay-pid="options" class="ws-anchor">
 菜单项被点击时的回调函数。返回的参数如下：
 </div>
 
diff --git a/docs/dropdown/examples/table.md b/docs/dropdown/examples/table.md
index 27f3230c..32e6da68 100644
--- a/docs/dropdown/examples/table.md
+++ b/docs/dropdown/examples/table.md
@@ -14,7 +14,7 @@ layui.use(function(){
   // dropdown 在表格中的应用
   table.render({
     elem: '#ID-dropdown-demo-table',
-    url: '{{d.root}}/static/json/table/demo5.json',
+    url: '/static/2.8/json/table/demo5.json',
     title: '用户数据表',
     cols: [[
       {type: 'checkbox', fixed: 'left'},
diff --git a/docs/dropdown/index.md b/docs/dropdown/index.md
index 58e3fb36..6e40b627 100644
--- a/docs/dropdown/index.md
+++ b/docs/dropdown/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/dropdown/detail/demo.md") }}
+{{- d.include("/dropdown/detail/demo.md") }}
 </div>
 
 在 `content` 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。
@@ -62,13 +62,13 @@ layui.use(function(){
 <h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
 
 <div>
-{{- d.include("docs/dropdown/detail/options.md") }}
+{{- d.include("/dropdown/detail/options.md") }}
 </div>
 
 <h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
 
 <div>
-{{- d.include("docs/dropdown/detail/options.data.md") }}
+{{- d.include("/dropdown/detail/options.data.md") }}
 </div>
 
 
@@ -95,7 +95,7 @@ layui.use(function(){
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/reload.md") }}
+{{- d.include("/dropdown/examples/reload.md") }}
   </textarea>
 </pre>
 
@@ -109,7 +109,7 @@ layui.use(function(){
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/dropdown/examples/reloadData.md") }}
+{{- d.include("/dropdown/examples/reloadData.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/fixbar/index.md b/docs/fixbar/index.md
index 3362d140..2c18955d 100644
--- a/docs/fixbar/index.md
+++ b/docs/fixbar/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/fixbar/detail/demo.md") }}
+{{- d.include("/fixbar/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -29,5 +29,5 @@ toc: true
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/fixbar/detail/options.md") }}
+{{- d.include("/fixbar/detail/options.md") }}
 </div>
\ No newline at end of file
diff --git a/docs/flow/detail/options.md b/docs/flow/detail/options.md
index f55adf04..7c3346dd 100644
--- a/docs/flow/detail/options.md
+++ b/docs/flow/detail/options.md
@@ -106,7 +106,7 @@ layui.each(data, function(index, item){
 <td>done</td>
 <td colspan="3">
 
-<div id="options.done" class="ws-anchor">  
+<div id="options.done" lay-pid="options" class="ws-anchor">  
 滚动条到达临界点触发加载的回调函数。函数返回的参数如下：
 </div>
 
diff --git a/docs/flow/index.md b/docs/flow/index.md
index ed0453b1..3535f69a 100644
--- a/docs/flow/index.md
+++ b/docs/flow/index.md
@@ -18,7 +18,7 @@ toc: true
 </style>
 
 <div>
-{{- d.include("docs/flow/detail/demo.md") }}
+{{- d.include("/flow/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -40,7 +40,7 @@ toc: true
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/flow/detail/options.md") }}
+{{- d.include("/flow/detail/options.md") }}
 </div>
 
 <h2 id="lazyimg" lay-toc="{level: 2}">图片懒加载</h2>
diff --git a/docs/form/index.md b/docs/form/index.md
index ba8d509c..d663ae48 100644
--- a/docs/form/index.md
+++ b/docs/form/index.md
@@ -15,7 +15,7 @@ toc: true
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.demo.md') }}
+{{- d.include("/form/examples/form.demo.md") }}
   </textarea>
 </pre>
 
@@ -25,7 +25,7 @@ toc: true
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.pane.md') }}
+{{- d.include("/form/examples/form.pane.md") }}
   </textarea>
 </pre>
 
@@ -35,7 +35,7 @@ toc: true
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.login.md') }}
+{{- d.include("/form/examples/form.login.md") }}
   </textarea>
 </pre>
 
@@ -45,7 +45,7 @@ toc: true
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.reg.md') }}
+{{- d.include("/form/examples/form.reg.md") }}
   </textarea>
 </pre>
 
@@ -74,7 +74,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.grid.md') }}
+{{- d.include("/form/examples/form.grid.md") }}
   </textarea>
 </pre>
 
@@ -232,7 +232,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.verify.md') }}  
+{{- d.include("/form/examples/form.verify.md") }}  
   </textarea>
 </pre>
 
@@ -252,7 +252,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.validate.md') }}  
+{{- d.include("/form/examples/form.validate.md") }}  
   </textarea>
 </pre>
 
@@ -268,7 +268,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
   obj.render()
 }}">
   <textarea>
-{{- d.include('docs/form/examples/form.val.md') }}
+{{- d.include("/form/examples/form.val.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/form/input.md b/docs/form/input.md
index 36f84334..a716c421 100644
--- a/docs/form/input.md
+++ b/docs/form/input.md
@@ -66,7 +66,7 @@ toc: true
   obj.render();
 }}">
   <textarea>
-{{- d.include('docs/form/examples/input.group.md') }} 
+{{- d.include("/form/examples/input.group.md") }} 
   </textarea>
 </pre>
 
@@ -91,7 +91,7 @@ toc: true
   obj.render();
 }}">
   <textarea>
-{{- d.include('docs/form/examples/input.pre.suf.md') }} 
+{{- d.include("/form/examples/input.pre.suf.md") }} 
   </textarea>
 </pre>
 
@@ -175,7 +175,7 @@ input 放在前后缀容器中：
   obj.render();
 }}">
   <textarea>
-{{- d.include('docs/form/examples/input.affix.custom.md') }} 
+{{- d.include("/form/examples/input.affix.custom.md") }} 
   </textarea>
 </pre>
 
diff --git a/docs/index.md b/docs/index.md
index add97e76..0c01207b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,7 +30,7 @@ toc: true
 
 ### 🌕 官网下载
 
-您可以在我们的 [官网首页](/) 下载到 Layui 当前版本，它经过了自动化构建，更适合用于生产环境。目录结构如下：
+您可以在 [官网首页](/) 或 [更新日志](./versions.html) 页面下载到 Layui，它经过了自动化构建，更适合用于生产环境。目录结构如下：
 
 ```
 layui/
diff --git a/docs/laydate/detail/demo.md b/docs/laydate/detail/demo.md
index 494d905c..3593ddb9 100644
--- a/docs/laydate/detail/demo.md
+++ b/docs/laydate/detail/demo.md
@@ -2,7 +2,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/normal.md") }}
+{{- d.include("/laydate/examples/normal.md") }}
   </textarea>
 </pre>
 
@@ -12,7 +12,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/type.md") }}
+{{- d.include("/laydate/examples/type.md") }}
   </textarea>
 </pre>
 
@@ -20,7 +20,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/range.md") }}
+{{- d.include("/laydate/examples/range.md") }}
   </textarea>
 </pre>
 
@@ -28,7 +28,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/shortcut.md") }}
+{{- d.include("/laydate/examples/shortcut.md") }}
   </textarea>
 </pre>
 
@@ -37,7 +37,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/format.md") }}
+{{- d.include("/laydate/examples/format.md") }}
   </textarea>
 </pre>
 
@@ -46,7 +46,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/mark.md") }}
+{{- d.include("/laydate/examples/mark.md") }}
   </textarea>
 </pre>
 
@@ -55,7 +55,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/limit.md") }}
+{{- d.include("/laydate/examples/limit.md") }}
   </textarea>
 </pre>
 
@@ -64,7 +64,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/elem.md") }}
+{{- d.include("/laydate/examples/elem.md") }}
   </textarea>
 </pre>
 
@@ -75,7 +75,7 @@
   obj.render();
 }}">
   <textarea>
-{{- d.include("docs/laydate/examples/more.md") }}
+{{- d.include("/laydate/examples/more.md") }}
   </textarea>
 </pre>
 
@@ -84,7 +84,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/theme.md") }}
+{{- d.include("/laydate/examples/theme.md") }}
   </textarea>
 </pre>
 
@@ -92,6 +92,6 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/laydate/examples/static.md") }}
+{{- d.include("/laydate/examples/static.md") }}
   </textarea>
 </pre>
\ No newline at end of file
diff --git a/docs/laydate/detail/options.md b/docs/laydate/detail/options.md
index f42232b9..d4964481 100644
--- a/docs/laydate/detail/options.md
+++ b/docs/laydate/detail/options.md
@@ -32,7 +32,7 @@
 </td>
 <td>
   
-<div id="options.type" class="ws-anchor">
+<div id="options.type" lay-pid="options" class="ws-anchor">
   组件面板选择类型。支持以下可选值：
 </div>
 
@@ -60,7 +60,7 @@
 </td>
 <td>
 
-<div id="options.range" class="ws-anchor">
+<div id="options.range" lay-pid="options" class="ws-anchor">
 
 开启左右面板的范围选择，将会根据 `type` 类型呈现对应的范围选择面板。该属性值支持以下类型：
 
@@ -123,7 +123,7 @@ range: ['#start', '#end']
 </td>
 <td colspan="3">
   
-<div id="options.format" class="ws-anchor">
+<div id="options.format" lay-pid="options" class="ws-anchor">
 
 自定义日期和时间值的返回格式,默认值： `yyyy-MM-dd`。 其格式符规则如下：
 
@@ -167,7 +167,7 @@ format: '北京时间 H 点 m 分'
 </td>
 <td>
   
-<div id="options.value" class="ws-anchor">
+<div id="options.value" lay-pid="options" class="ws-anchor">
 初始值。值支持以下类型：
 </div> 
 
@@ -213,7 +213,7 @@ value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒
 </td>
 <td>
 
-<div id="options.shortcuts" class="ws-anchor">
+<div id="options.shortcuts" lay-pid="options" class="ws-anchor">
 用于开启面板左侧的快捷选择栏。其值配置规则如下：
 </div> 
 
@@ -279,7 +279,7 @@ weekStart: 1 // 设置周一为起始周
 </td>
 <td colspan="3">
 
-<div id="options.min" class="ws-anchor">
+<div id="options.min" lay-pid="options" class="ws-anchor">
 
 限制可供选择的最小或最大日期时间值。默认值： 
 
@@ -373,7 +373,7 @@ max: 7 // 最大日期为 7 天后
 
 <td>
 
-<div id="options.shade" class="ws-anchor"> 
+<div id="options.shade" lay-pid="options" class="ws-anchor"> 
 用于开启弹出日期面板时的遮罩。值支持以下可选类型：
 </div>
 
@@ -463,7 +463,7 @@ btns: ['clear', 'confirm']
 </td>
 <td>
 
-<div id="options.theme" class="ws-anchor">
+<div id="options.theme" lay-pid="options" class="ws-anchor">
 
 设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` `circle`<sup>2.8+</sup> ，且支持直接传入自定义的主题色。
 
@@ -507,7 +507,7 @@ theme: ['grid', '#FF5722']
 </td>
 <td>
   
-<div id="options.mark" class="ws-anchor">
+<div id="options.mark" lay-pid="options" class="ws-anchor">
 
 自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：
 
@@ -563,7 +563,7 @@ holidays: [
     <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -579,7 +579,7 @@ holidays: [
 </td>
 <td colspan="3">
   
-<div id="options.ready" class="ws-anchor">
+<div id="options.ready" lay-pid="options" class="ws-anchor">
 组件面板初始打开的回调函数。返回的参数如下：
 </div>
 
@@ -609,7 +609,7 @@ ready: function(date){
 </td>
 <td colspan="3">
   
-<div id="options.change" class="ws-anchor">
+<div id="options.change" lay-pid="options" class="ws-anchor">
 日期时间被切换后的回调函数。返回的参数如下：
 </div>
 
@@ -631,7 +631,7 @@ change: function(value, date, endDate){
 </td>
 <td colspan="3">
   
-<div id="options.done" class="ws-anchor">
+<div id="options.done" lay-pid="options" class="ws-anchor">
 日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下：
 </div>
 
diff --git a/docs/laydate/index.md b/docs/laydate/index.md
index b3966f2d..6768a17b 100644
--- a/docs/laydate/index.md
+++ b/docs/laydate/index.md
@@ -21,7 +21,7 @@ toc: true
 </style>
 
 <div class="ws-demo-laydate">
-{{- d.include("docs/laydate/detail/demo.md") }}
+{{- d.include("/laydate/detail/demo.md") }}
 </div>
 
 <p></p>
@@ -69,7 +69,7 @@ layui.use(function(){
 <h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
 
 <div>
-{{- d.include("docs/laydate/detail/options.md") }}
+{{- d.include("/laydate/detail/options.md") }}
 </div>
 
 <h3 id="hint" lay-pid="api" class="ws-anchor ws-bold">弹出提示 <sup>2.8+</sup></h3>
diff --git a/docs/layer/detail/demo.md b/docs/layer/detail/demo.md
index 09bc6f06..633993a6 100644
--- a/docs/layer/detail/demo.md
+++ b/docs/layer/detail/demo.md
@@ -2,7 +2,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, layout: ['preview']}">
   <textarea>
-{{- d.include("docs/layer/detail/run.md") }}
+{{- d.include("/layer/detail/run.md") }}
   </textarea>
 </pre>
 
@@ -10,7 +10,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/type.md") }}
+{{- d.include("/layer/examples/type.md") }}
   </textarea>
 </pre>
 
@@ -18,7 +18,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/alert.md") }}
+{{- d.include("/layer/examples/alert.md") }}
   </textarea>
 </pre>
 
@@ -26,7 +26,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/page.md") }}
+{{- d.include("/layer/examples/page.md") }}
   </textarea>
 </pre>
 
@@ -34,7 +34,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/iframe.md") }}
+{{- d.include("/layer/examples/iframe.md") }}
   </textarea>
 </pre>
 
@@ -44,7 +44,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/load.md") }}
+{{- d.include("/layer/examples/load.md") }}
   </textarea>
 </pre>
 
@@ -52,7 +52,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/tips.md") }}
+{{- d.include("/layer/examples/tips.md") }}
   </textarea>
 </pre>
 
@@ -60,7 +60,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/other.md") }}
+{{- d.include("/layer/examples/other.md") }}
   </textarea>
 </pre>
 
@@ -68,19 +68,19 @@
 
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/offset.md") }}
+{{- d.include("/layer/examples/offset.md") }}
   </textarea>
 </pre>
 
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出方向 <sup>2.8+</sup>'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/direction.md") }}
+{{- d.include("/layer/examples/direction.md") }}
   </textarea>
 </pre>
 
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '其他演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/more.md") }}
+{{- d.include("/layer/examples/more.md") }}
   </textarea>
 </pre>
 
@@ -89,7 +89,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/layer/examples/skin.md") }}
+{{- d.include("/layer/examples/skin.md") }}
 </script>
   </textarea>
 </pre>
diff --git a/docs/layer/detail/options.md b/docs/layer/detail/options.md
index ff197ebe..17021137 100644
--- a/docs/layer/detail/options.md
+++ b/docs/layer/detail/options.md
@@ -76,7 +76,7 @@ title: false // 不显示标题栏
 </td>
 <td colspan="3">
   
-<div id="options.content" class="ws-anchor">
+<div id="options.content" lay-pid="options" class="ws-anchor">
 
 弹层内容。 可传入的值比较灵活，支持以下使用场景：
 
@@ -129,7 +129,7 @@ layer.open({
 </td>
 <td>
 
-<div id="options.area" class="ws-anchor">  
+<div id="options.area" lay-pid="options" class="ws-anchor">  
 设置弹层的宽高，其值支持以下可选类型：
 </div>
 
@@ -181,7 +181,7 @@ layer.open({
 </td>
 <td>
  
-<div id="options.offset" class="ws-anchor">  
+<div id="options.offset" lay-pid="options" class="ws-anchor">  
 弹层的偏移坐标。 支持以下可选值：
 </div>  
 
@@ -215,7 +215,7 @@ layer.open({
 </td>
 <td>
   
-<div id="options.anim" class="ws-anchor">
+<div id="options.anim" lay-pid="options" class="ws-anchor">
 弹层的出场动画。支持以下可选值：
 </div>
 
@@ -281,7 +281,7 @@ layer.open({
 </td>
 <td>
 
-<div id="options.closeBtn" class="ws-anchor">   
+<div id="options.closeBtn" lay-pid="options" class="ws-anchor">   
 是否开启标题栏的关闭图标，或设置关闭图标风格。
 </div>
 
@@ -305,7 +305,7 @@ layer.open({
 </td>
 <td>
 
-<div id="options.icon" class="ws-anchor">
+<div id="options.icon" lay-pid="options" class="ws-anchor">
 提示图标。 信息框和加载层的私有参数。
 </div>
 
@@ -339,7 +339,7 @@ layer.load(1); // 加载层风格一
 </td>
 <td>
   
-<div id="options.btn" class="ws-anchor">
+<div id="options.btn" lay-pid="options" class="ws-anchor">
 自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
 </div>
 
@@ -377,7 +377,7 @@ layer.open({
 </td>
 <td>
   
-<div id="options.btnAlign" class="ws-anchor">
+<div id="options.btnAlign" lay-pid="options" class="ws-anchor">
 按钮水平对其方式。支持以下可选值：
 </div>
 
@@ -402,7 +402,7 @@ layer.open({
 </td>
 <td>
   
-<div id="options.skin" class="ws-anchor">
+<div id="options.skin" lay-pid="options" class="ws-anchor">
 弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
 </div>
 
@@ -425,7 +425,7 @@ layer.open({
 </td>
 <td>
   
-<div id="options.shade" class="ws-anchor">
+<div id="options.shade" lay-pid="options" class="ws-anchor">
 弹层的遮罩。 支持以下写法：
 </div>
 
@@ -627,7 +627,7 @@ tips: [1, '#000'] // 吸附在上的深色贴士层
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -672,7 +672,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.yes" class="ws-anchor">
+<div id="options.yes" lay-pid="options" class="ws-anchor">
 
 点击「确定」按钮的回调函数。返回的参数同 `success`
 
@@ -698,7 +698,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.cancel" class="ws-anchor">
+<div id="options.cancel" lay-pid="options" class="ws-anchor">
 点击标题栏关闭按钮的回调函数。返回的参数同 `success`
 </div>
 
@@ -724,7 +724,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.end" class="ws-anchor">
+<div id="options.end" lay-pid="options" class="ws-anchor">
 弹层被关闭且销毁后的回调函数。
 </div>
 
@@ -747,7 +747,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.moveEnd" class="ws-anchor">
+<div id="options.moveEnd" lay-pid="options" class="ws-anchor">
 弹层拖拽完毕后的回调函数。
 </div>
 
@@ -771,7 +771,7 @@ layer.open({
 </td>
 <td colspan="3">
 
-<div id="options.resizing" class="ws-anchor">
+<div id="options.resizing" lay-pid="options" class="ws-anchor">
 弹层拉伸过程中的回调函数
 </div>
 
@@ -795,7 +795,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.full" class="ws-anchor">
+<div id="options.full" lay-pid="options" class="ws-anchor">
 
 弹层最大化后的回调函数。返回的参数同 `success`
 
@@ -821,7 +821,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.min" class="ws-anchor">
+<div id="options.min" lay-pid="options" class="ws-anchor">
 
 弹层最小化后的回调函数。返回的参数同 `success`
 
@@ -848,7 +848,7 @@ layer.open({
 </td>
 <td colspan="3">
   
-<div id="options.restore" class="ws-anchor">
+<div id="options.restore" lay-pid="options" class="ws-anchor">
 弹层被还原后的回调函数。返回的参数同 `success`
 </div>
 
diff --git a/docs/layer/index.md b/docs/layer/index.md
index 3bebe4cd..359d81d7 100644
--- a/docs/layer/index.md
+++ b/docs/layer/index.md
@@ -13,7 +13,7 @@ toc: true
 点击下述按钮，查看每个示例对应的弹层效果。
 
 <div>
-{{- d.include("docs/layer/detail/demo.md") }}
+{{- d.include("/layer/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
@@ -71,7 +71,7 @@ var index = layer.open({
 <h2 id="options" lay-toc="{level: 2, hot: true}">基础属性</h2>
 
 <div>
-{{- d.include("docs/layer/detail/options.md") }}
+{{- d.include("/layer/detail/options.md") }}
 </div>
 
 <h2 id="alert" lay-pid="api" class="ws-anchor ws-bold">弹出信息框</h2>
diff --git a/docs/laypage/detail/options.md b/docs/laypage/detail/options.md
index 35951478..368c82df 100644
--- a/docs/laypage/detail/options.md
+++ b/docs/laypage/detail/options.md
@@ -201,7 +201,7 @@
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -217,7 +217,7 @@
 </td>
 <td colspan="3">
   
-<div id="options.jump" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
+<div id="options.jump" lay-pid="options" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
 
 - 参数 `obj` : 当前分页相关的所有选项值
 - 参数 `first` : 是否首次渲染，一般用于初始加载的判断
diff --git a/docs/laypage/index.md b/docs/laypage/index.md
index 90ec6522..b4bdefa9 100644
--- a/docs/laypage/index.md
+++ b/docs/laypage/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div class="ws-detail">
-{{- d.include("docs/laypage/detail/demo.md") }}
+{{- d.include("/laypage/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -29,7 +29,7 @@ toc: true
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/laypage/detail/options.md") }}
+{{- d.include("/laypage/detail/options.md") }}
 </div>
 
 ## 小贴士
diff --git a/docs/laytpl/index.md b/docs/laytpl/index.md
index 1f828608..5150be5d 100644
--- a/docs/laytpl/index.md
+++ b/docs/laytpl/index.md
@@ -12,7 +12,7 @@ toc: true
 在以下*模板*或*数据*中进行编辑，下方*视图*将呈现对应结果。
 
 <div>
-{{- d.include("docs/laytpl/detail/demo.md") }}
+{{- d.include("/laytpl/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -95,7 +95,7 @@ compile.render(data, callback); // 模板渲染
 <h2 id="grammar" lay-toc="{level: 2, hot: true}">标签语法</h2>
 
 <div>
-{{- d.include("docs/laytpl/detail/options.md") }}
+{{- d.include("/laytpl/detail/options.md") }}
 </div>
 
 
diff --git a/docs/menu/index.md b/docs/menu/index.md
index 33176871..ba375500 100644
--- a/docs/menu/index.md
+++ b/docs/menu/index.md
@@ -11,7 +11,7 @@ toc: true
 
 <pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full', 'window']}">
   <textarea>
-{{- d.include("docs/menu/examples/demo.md") }}
+{{- d.include("/menu/examples/demo.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/nav/index.md b/docs/nav/index.md
index 6b30c938..b8c9d1d9 100644
--- a/docs/nav/index.md
+++ b/docs/nav/index.md
@@ -87,7 +87,7 @@ toc: true
 
 <h3 id="align-theme" lay-toc="{level: 2}" class="ws-bold">导航主题</h3>
 
-给导航容器追加任意背景色 `class`，内置背景色参考：[#背景色公共类](../class.html)
+给导航容器追加任意背景色 `class`，内置背景色参考：[#背景色公共类](../class/#bg)
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
   obj.render();
@@ -207,7 +207,7 @@ toc: true
 
 <pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 525px;', layout: ['code', 'preview'], tools: ['full', 'window']}">
   <textarea>
-{{- d.include("docs/nav/examples/side.md") }}
+{{- d.include("/nav/examples/side.md") }}
   </textarea>
 </pre>
 
@@ -307,8 +307,8 @@ layui.use(function(){
 <h3>默认面包屑</h3>
 
 <span class="layui-breadcrumb">
-  <a href="{{d.root}}/">首页</a>
-  <a href="{{d.root}}/demo/">演示</a>
+  <a href="">首页</a>
+  <a href="">演示</a>
   <a><cite>导航元素</cite></a>
 </span>
 
diff --git a/docs/rate/index.md b/docs/rate/index.md
index 1d42b500..092baaa7 100644
--- a/docs/rate/index.md
+++ b/docs/rate/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/rate/detail/demo.md") }}
+{{- d.include("/rate/detail/demo.md") }}
 </div>
 
 <p></p>
@@ -53,5 +53,5 @@ layui.use(function(){
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/rate/detail/options.md") }}
+{{- d.include("/rate/detail/options.md") }}
 </div>
\ No newline at end of file
diff --git a/docs/slider/detail/options.md b/docs/slider/detail/options.md
index a4fc7bdc..3d781188 100644
--- a/docs/slider/detail/options.md
+++ b/docs/slider/detail/options.md
@@ -201,7 +201,7 @@
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
diff --git a/docs/slider/index.md b/docs/slider/index.md
index 1b9fbb75..f6aadcc1 100644
--- a/docs/slider/index.md
+++ b/docs/slider/index.md
@@ -14,7 +14,7 @@ toc: true
 .demo-slider-container .layui-code-item-preview > div{margin: 24px 0;}
 </style>
 <div class="demo-slider-container">
-{{- d.include("docs/slider/detail/demo.md") }}
+{{- d.include("/slider/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{}">API</h2>
@@ -89,5 +89,5 @@ ins1.setValue(60, 1) // 设置结尾值
 <h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
 
 <div>
-{{- d.include("docs/slider/detail/options.md") }}
+{{- d.include("/slider/detail/options.md") }}
 </div>
\ No newline at end of file
diff --git a/docs/tab/index.md b/docs/tab/index.md
index 00c7add8..436e27da 100644
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@@ -11,7 +11,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div class="ws-detail">
-{{- d.include("docs/tab/detail/demo.md") }}
+{{- d.include("/tab/detail/demo.md") }}
 </div>
 
 <h2 id="skin" lay-toc="{hot: true}">风格</h2>
diff --git a/docs/table/detail/demo.md b/docs/table/detail/demo.md
index 75e982f5..dd6663f0 100644
--- a/docs/table/detail/demo.md
+++ b/docs/table/detail/demo.md
@@ -15,7 +15,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/demo.md') }}
+{{- d.include("/table/examples/demo.md") }}
   </textarea>
 </pre>
 
@@ -25,7 +25,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, style: 'height: 335px; overflow: auto;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include('docs/table/examples/static.md') }}
+{{- d.include("/table/examples/static.md") }}
   </textarea>
 </pre>
 
@@ -41,7 +41,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/autoRender.md') }}
+{{- d.include("/table/examples/autoRender.md") }}
   </textarea>
 </pre>
 
@@ -49,7 +49,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include('docs/table/examples/init.md') }}
+{{- d.include("/table/examples/init.md") }}
   </textarea>
 </pre>
 
@@ -63,7 +63,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/data.md') }}
+{{- d.include("/table/examples/data.md") }}
   </textarea>
 </pre>
 
@@ -77,7 +77,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/templet.md') }}
+{{- d.include("/table/examples/templet.md") }}
   </textarea>
 </pre>
 
@@ -85,7 +85,7 @@
 
 <pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 538px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include('docs/table/examples/css.md') }}
+{{- d.include("/table/examples/css.md") }}
   </textarea>
 </pre>
 
@@ -99,7 +99,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/page.md') }}
+{{- d.include("/table/examples/page.md") }}
   </textarea>
 </pre>
 
@@ -114,7 +114,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/search.md') }}
+{{- d.include("/table/examples/search.md") }}
   </textarea>
 </pre>
 
@@ -124,7 +124,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include('docs/table/examples/editable.md') }}
+{{- d.include("/table/examples/editable.md") }}
   </textarea>
 </pre>
 
@@ -136,7 +136,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/editModes.md') }}
+{{- d.include("/table/examples/editModes.md") }}
   </textarea>
 </pre>
 
@@ -148,7 +148,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/parse.md') }}
+{{- d.include("/table/examples/parse.md") }}
   </textarea>
 </pre>
 
@@ -162,7 +162,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/filter.md') }}
+{{- d.include("/table/examples/filter.md") }}
   </textarea>
 </pre>
 
@@ -174,7 +174,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/setRowChecked.md') }}
+{{- d.include("/table/examples/setRowChecked.md") }}
   </textarea>
 </pre>
 
@@ -189,7 +189,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/theads.md') }}
+{{- d.include("/table/examples/theads.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/table/examples/autoRender.md b/docs/table/examples/autoRender.md
index 0affca92..37e82ad7 100644
--- a/docs/table/examples/autoRender.md
+++ b/docs/table/examples/autoRender.md
@@ -1,4 +1,4 @@
-<table class="layui-table" lay-data="{height:315, url:'{{d.root}}/static/json/table/user.json', page:true}" id="ID-table-demo-init">
+<table class="layui-table" lay-data="{height:315, url:'/static/2.8/json/table/user.json', page:true}" id="ID-table-demo-init">
   <thead>
     <tr>
       <th lay-data="{field:'id', width:80, sort: true}">ID</th>
diff --git a/docs/table/examples/css.md b/docs/table/examples/css.md
index fded01ec..aa01f4f3 100644
--- a/docs/table/examples/css.md
+++ b/docs/table/examples/css.md
@@ -49,7 +49,7 @@
     // 创建渲染实例
     table.render({
       elem: '#ID-table-demo-css',
-      url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+      url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
       page: true,
       height: 'full-35',
       lineStyle: 'height: 151px;', // 定义表格的多行样式
diff --git a/docs/table/examples/demo.md b/docs/table/examples/demo.md
index 92976408..69da828d 100644
--- a/docs/table/examples/demo.md
+++ b/docs/table/examples/demo.md
@@ -64,7 +64,7 @@ layui.use(['table', 'dropdown'], function(){
   // 创建渲染实例
   table.render({
     elem: '#test',
-    url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     toolbar: '#toolbarDemo',
     defaultToolbar: ['filter', 'exports', 'print', {
       title: '提示',
diff --git a/docs/table/examples/editModes.md b/docs/table/examples/editModes.md
index b459a781..9c87cf7c 100644
--- a/docs/table/examples/editModes.md
+++ b/docs/table/examples/editModes.md
@@ -49,7 +49,7 @@ layui.use(function(){
   // 渲染
   table.render({
     elem: '#ID-table-demo-editmodes',
-    url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: true,
     css: [ // 设置单元格样式
       // 取消默认的溢出隐藏，并设置适当高度
@@ -68,7 +68,7 @@ layui.use(function(){
     ]],
     done: function(res, curr, count){
       var options = this;
-
+      
       // 获取当前行数据
       table.getRowData = function(elem){
         var index = $(elem).closest('tr').data('index');
@@ -80,6 +80,9 @@ layui.use(function(){
         var value = this.value; // 获取选中项 value
         var data = table.getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
 
+        // 更新数据中对应的字段
+        data.city = value;
+
         // 显示 - 仅用于演示
         layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
       });
@@ -90,6 +93,9 @@ layui.use(function(){
         
         // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
         var data = table.getRowData(obj.elem);
+
+        // 更新数据中对应的字段
+        data.city = value;
         console.log(data);
       });
       
@@ -113,6 +119,9 @@ layui.use(function(){
           
           this.elem.find('span').html(obj.title);
 
+          // 更新数据中对应的字段
+          data.sex = obj.title;
+
           // 显示 - 仅用于演示
           layer.msg('选中值: '+ obj.title +'<br>当前行数据：'+ JSON.stringify(data));
         }
@@ -123,6 +132,9 @@ layui.use(function(){
         elem: '.laydate-demo',
         done: function(value, date, endDate){
           var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
+
+          // 更新数据中对应的字段
+          data.date = value;
           
           // 显示 - 仅用于演示
           layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
@@ -134,21 +146,29 @@ layui.use(function(){
         elem: '.colorpicker-demo',
         done: function(value){
           var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
+
+          // 更新数据中对应的字段
+          data.color = value;
           
           // 显示 - 仅用于演示
           layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
         }
       });
-
+      
       // 单元格普通编辑事件
       table.on('edit(ID-table-demo-editmodes)', function(obj){
         var value = obj.value // 得到修改后的值
         var data = obj.data // 得到所在行所有键值
         var field = obj.field; // 得到字段
         
+        // 更新数据中对应的字段
+        var update = {};
+        update[field] = value;
+        obj.update(update);
+        
         // 编辑后续操作，如提交更新请求，以完成真实的数据更新
         // …
-
+        
         // 显示 - 仅用于演示
         layer.msg('编辑值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
       });
diff --git a/docs/table/examples/editable.md b/docs/table/examples/editable.md
index 5ddddc0a..f52c22e0 100644
--- a/docs/table/examples/editable.md
+++ b/docs/table/examples/editable.md
@@ -14,7 +14,7 @@ layui.use(function(){
   // 创建表格实例
   table.render({
     elem: '#ID-table-demo-editable',
-    url: '{{d.root}}/static/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: true,
     //,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
     css: [
diff --git a/docs/table/examples/filter.md b/docs/table/examples/filter.md
index 5f1c7fb8..5af0b303 100644
--- a/docs/table/examples/filter.md
+++ b/docs/table/examples/filter.md
@@ -9,7 +9,7 @@ layui.use(function(){
   // 渲染
   table.render({
     elem: '#ID-table-demo-filter',
-    url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     toolbar: 'default',
     height: 315,
     cols: [function(){
diff --git a/docs/table/examples/onrowContextmenu.md b/docs/table/examples/onrowContextmenu.md
index 50f00a38..028be5f3 100644
--- a/docs/table/examples/onrowContextmenu.md
+++ b/docs/table/examples/onrowContextmenu.md
@@ -11,7 +11,7 @@ layui.use(['table', 'dropdown', 'util'], function(){
   table.render({
     elem: '#ID-table-onrowContextmenu',
     defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
-    url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: true,
     cols: [[
       {field:'id', title:'ID', width:80, fixed: 'left', unresize: true},
diff --git a/docs/table/examples/page.md b/docs/table/examples/page.md
index 2b2496e9..23a7072e 100644
--- a/docs/table/examples/page.md
+++ b/docs/table/examples/page.md
@@ -14,7 +14,7 @@ layui.use('table', function(){
   // 创建渲染实例
   table.render({
     elem: '#ID-table-demo-page',
-    url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
       layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
       //curr: 5, //设定初始在第 5 页
diff --git a/docs/table/examples/parse.md b/docs/table/examples/parse.md
index 563d389b..047c66d6 100644
--- a/docs/table/examples/parse.md
+++ b/docs/table/examples/parse.md
@@ -1,4 +1,4 @@
-> 假设这是一段数据源：<a href="{{d.root}}/static/json/table/demo3.json" target="_blank">{{d.root}}/static/json/table/demo3.json</a><br>
+> 假设这是一段数据源：<a href="/static/2.8/json/table/demo3.json" target="_blank">/static/2.8/json/table/demo3.json</a><br>
   尽管它并不符合 table 组件默认规定的数据格式（[#详见](#options-async-data)），但可以通过 parseData 回调将其进行转换。
 
 <table class="layui-hide" id="ID-table-demo-parse"></table>
@@ -11,7 +11,7 @@ layui.use('table', function(){
   // 渲染
   table.render({
     elem: '#ID-table-demo-parse',
-    url:'{{d.root}}/static/json/table/demo3.json',
+    url:'/static/2.8/json/table/demo3.json',
     page: true,
     response: {
       statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
diff --git a/docs/table/examples/search.md b/docs/table/examples/search.md
index f6621151..0db022a6 100644
--- a/docs/table/examples/search.md
+++ b/docs/table/examples/search.md
@@ -38,7 +38,7 @@ layui.use(function(){
   // 创建表格实例
   table.render({
     elem: '#ID-table-demo-search',
-    url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     cols: [[
       {checkbox: true, fixed: true},
       {field:'id', title: 'ID', width:80, sort: true, fixed: true},
diff --git a/docs/table/examples/setRowChecked.md b/docs/table/examples/setRowChecked.md
index 6ca9bc28..3b4bdc4e 100644
--- a/docs/table/examples/setRowChecked.md
+++ b/docs/table/examples/setRowChecked.md
@@ -13,7 +13,7 @@ layui.use('table', function(){
   // 渲染
   table.render({
     elem: '#ID-table-demo-setRowChecked',
-    url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: true,
     cols: [[
       {type: 'radio', fixed: 'left'},
diff --git a/docs/table/examples/templet.md b/docs/table/examples/templet.md
index c2112202..29c3aa01 100644
--- a/docs/table/examples/templet.md
+++ b/docs/table/examples/templet.md
@@ -27,7 +27,7 @@ layui.use(['table'], function(){
   // 创建渲染实例
   table.render({
     elem: '#ID-table-demo-templet',
-    url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     page: true,
     height: '315px',
     cols: [[
diff --git a/docs/table/examples/theads.md b/docs/table/examples/theads.md
index 09563fdf..0f328527 100644
--- a/docs/table/examples/theads.md
+++ b/docs/table/examples/theads.md
@@ -1,6 +1,6 @@
 常用两级表头：
  
-<table class="layui-table" lay-data="{url:'{{d.root}}/static/json/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}" id="ID-table-demo-theads-1">
+<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}" id="ID-table-demo-theads-1">
   <thead>
     <tr>
       <th lay-data="{checkbox:true}" rowspan="2"></th>
@@ -19,7 +19,7 @@
 
 更多级表头（支持无限极）：
 
-<table class="layui-table" lay-data="{url:'{{d.root}}/static/json/table/demo2.json?v=3', cellMinWidth: 80, page: true}" id="ID-table-demo-theads-2">
+<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=3', cellMinWidth: 80, page: true}" id="ID-table-demo-theads-2">
   <thead>
     <tr>
       <th lay-data="{field:'username', fixed:'left', width:80}" rowspan="3">联系人</th>
diff --git a/docs/table/index.md b/docs/table/index.md
index 4916cdf7..9eb735bf 100644
--- a/docs/table/index.md
+++ b/docs/table/index.md
@@ -12,7 +12,7 @@ toc: true
 以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。
 
 <div>
-{{- d.include("docs/table/detail/demo.md") }}
+{{- d.include("/table/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{bold: true, hot: true}">API</h2>
@@ -160,7 +160,7 @@ table 的属性众多，我们大致分为以下几种：
 <h3 id="options" lay-toc="{level: 3, hot: true}" class="ws-bold">基础属性</h3>
 
 <div>
-{{- d.include("docs/table/detail/options.md") }}
+{{- d.include("/table/detail/options.md") }}
 </div>
 
 <h3 id="options.ajax" lay-toc="{level: 3, hot: true}" class="ws-bold">异步属性</h3>
@@ -168,7 +168,7 @@ table 的属性众多，我们大致分为以下几种：
 异步属性本质也是基础属性，当开启 `url` 属性时才有效，由于相关属性成员较多，所以单独提取介绍。
 
 <div>
-{{- d.include("docs/table/detail/options.ajax.md") }}
+{{- d.include("/table/detail/options.ajax.md") }}
 </div>
 
 <h3 id="options.cols" lay-toc="{level: 3, hot: true}" class="ws-bold">表头属性</h3>
@@ -176,7 +176,7 @@ table 的属性众多，我们大致分为以下几种：
 表头属性是基础属性 `cols` 的子集，其使用频率甚至超过基础属性本身。
 
 <div>
-{{- d.include("docs/table/detail/options.cols.md") }}
+{{- d.include("/table/detail/options.cols.md") }}
 </div>
 
 <h3 id="reload" lay-toc="{level: 2}" class="ws-anchor ws-bold">重载</h3>
@@ -677,7 +677,7 @@ table.on('row(test)', function(obj){
   }
 }}">
   <textarea>
-{{- d.include('docs/table/examples/onrowContextmenu.md') }}
+{{- d.include("/table/examples/onrowContextmenu.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/transfer/detail/options.md b/docs/transfer/detail/options.md
index dfb3bee6..54e9755d 100644
--- a/docs/transfer/detail/options.md
+++ b/docs/transfer/detail/options.md
@@ -136,7 +136,7 @@ text: {
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -173,8 +173,8 @@ onchange: function(data, index){
 </td>
 <td colspan="3">
   
-<div id="options.parseData" class="ws-anchor">
-数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 <a href="#options.data" style="pointer-events: auto;">data 格式</a>
+<div id="options.parseData" lay-pid="options" class="ws-anchor">
+数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 <a href="#options.data">data 格式</a>
 </div>
 
 ```
diff --git a/docs/transfer/index.md b/docs/transfer/index.md
index 4a76178d..41fe33c0 100644
--- a/docs/transfer/index.md
+++ b/docs/transfer/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/transfer/detail/demo.md") }}
+{{- d.include("/transfer/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{hot: true}">API</h2>
@@ -32,13 +32,13 @@ toc: true
 <h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
 
 <div>
-{{- d.include("docs/transfer/detail/options.md") }}
+{{- d.include("/transfer/detail/options.md") }}
 </div>
 
 <h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
 
 <div>
-{{- d.include("docs/transfer/detail/options.data.md") }}
+{{- d.include("/transfer/detail/options.data.md") }}
 </div>
 
 <h3 id="reload" lay-toc="{level: 2}">重载</h3>
diff --git a/docs/tree/detail/demo.md b/docs/tree/detail/demo.md
index 84a3ec1e..4d92bac2 100644
--- a/docs/tree/detail/demo.md
+++ b/docs/tree/detail/demo.md
@@ -19,7 +19,7 @@ layui.use(function(){
   var util = layui.util;
  
   // 模拟数据
-  var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'{{d.root}}/',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:'{{d.root}}/docs/'}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
+  var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
 
   // 渲染
   tree.render({
diff --git a/docs/tree/detail/options.md b/docs/tree/detail/options.md
index 6c1cbc1a..6388963f 100644
--- a/docs/tree/detail/options.md
+++ b/docs/tree/detail/options.md
@@ -153,7 +153,7 @@ text: {
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -165,7 +165,7 @@ text: {
 <td>click</td>
 <td colspan="3">
   
-<div id="options.click" class="ws-anchor">
+<div id="options.click" lay-pid="options" class="ws-anchor">
   节点被点击的回调函数。返回的参数如下：
 </div>
 
@@ -185,7 +185,7 @@ click: function(obj){
 <td>oncheck</td>
 <td colspan="3">
 
-<div id="options.oncheck" class="ws-anchor">  
+<div id="options.oncheck" lay-pid="options" class="ws-anchor">  
   点击复选框时的回调函数，返回的参数如下：
 </div>
 
@@ -203,7 +203,7 @@ oncheck: function(obj){
 <td>operate</td>
 <td colspan="3">
 
-<div id="options.operate" class="ws-anchor">  
+<div id="options.operate" lay-pid="options" class="ws-anchor">  
   点击节点的右侧操作图标的回调函数，返回的参数如下：
 </div>
 
diff --git a/docs/tree/index.md b/docs/tree/index.md
index bd8b8a41..a6831057 100644
--- a/docs/tree/index.md
+++ b/docs/tree/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/tree/detail/demo.md") }}
+{{- d.include("/tree/detail/demo.md") }}
 </div>
 
 <h2 id="api" lay-toc="{hot: true}">API</h2>
@@ -32,13 +32,13 @@ toc: true
 <h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
 
 <div>
-{{- d.include("docs/tree/detail/options.md") }}
+{{- d.include("/tree/detail/options.md") }}
 </div>
 
 <h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
 
 <div>
-{{- d.include("docs/tree/detail/options.data.md") }}
+{{- d.include("/tree/detail/options.data.md") }}
 </div>
 
 
diff --git a/docs/treeTable/detail/demo.md b/docs/treeTable/detail/demo.md
index 564a954e..5f794e78 100644
--- a/docs/treeTable/detail/demo.md
+++ b/docs/treeTable/detail/demo.md
@@ -8,7 +8,7 @@
   }
 }}">
   <textarea>
-{{- d.include('docs/treeTable/examples/demo.md') }}
+{{- d.include("/treeTable/examples/demo.md") }}
   </textarea>
 </pre>
 
diff --git a/docs/treeTable/detail/options.md b/docs/treeTable/detail/options.md
index 4c4e1b4b..df2b58ac 100644
--- a/docs/treeTable/detail/options.md
+++ b/docs/treeTable/detail/options.md
@@ -46,7 +46,7 @@ treeTable.render({
 <td>tree.customName</td>
 <td>
 
-<div id="options.tree.customName" class="ws-anchor">
+<div id="options.tree.customName" lay-pid="options" class="ws-anchor">
 
 自定义属性名的集合，包含以下成员：
 
@@ -66,7 +66,7 @@ treeTable.render({
 <td>tree.view</td>
 <td>
 
-<div id="options.tree.view" class="ws-anchor">
+<div id="options.tree.view" lay-pid="options" class="ws-anchor">
 
 视图相关的属性集合，包含以下成员：
 
@@ -91,7 +91,7 @@ treeTable.render({
 <td>tree.data</td>
 <td>
 
-<div id="options.tree.data" class="ws-anchor">
+<div id="options.tree.data" lay-pid="options" class="ws-anchor">
 
 数据相关的属性集合，包含以下成员：
 
@@ -108,7 +108,7 @@ treeTable.render({
 <td>tree.async</td>
 <td>
 
-<div id="options.tree.async" class="ws-anchor">
+<div id="options.tree.async" lay-pid="options" class="ws-anchor">
 
 异步相关的属性集合，包含以下成员：
 
@@ -130,7 +130,7 @@ treeTable.render({
 <td>tree.callback</td>
 <td>
 
-<div id="options.tree.callback" class="ws-anchor">
+<div id="options.tree.callback" lay-pid="options" class="ws-anchor">
 
 事件回调相关的属性集合，包含以下成员：
 
diff --git a/docs/treeTable/examples/demo.md b/docs/treeTable/examples/demo.md
index 770b2969..b8b542b2 100644
--- a/docs/treeTable/examples/demo.md
+++ b/docs/treeTable/examples/demo.md
@@ -24,13 +24,13 @@ layui.use(function(){
   // 渲染
   var inst = treeTable.render({
     elem: '#ID-treeTable-demo',
-    url: '{{d.root}}/static/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+    url: '/static/2.8/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     tree: {
       /*
       // 异步加载子节点
       async: {
         enable: true,
-        url: '{{d.root}}/static/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
+        url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
         autoParam: ["parentId=id"]
       }
       */
diff --git a/docs/treeTable/index.md b/docs/treeTable/index.md
index 1deaade6..49a8bc3f 100644
--- a/docs/treeTable/index.md
+++ b/docs/treeTable/index.md
@@ -12,7 +12,7 @@ toc: true
 以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。
 
 <div>
-{{- d.include("docs/treeTable/detail/demo.md") }}
+{{- d.include("/treeTable/detail/demo.md") }}
 </div>
 
 <p></p>
@@ -51,7 +51,7 @@ toc: true
 `table` 组件的所有基础属性均适用于 `treeTable` 组件。在此基础上，`treeTable` 还专门提供了 `tree` 属性集： 
 
 <div>
-{{- d.include("docs/treeTable/detail/options.md") }}
+{{- d.include("/treeTable/detail/options.md") }}
 </div>
 
 <h3 id="reload" lay-toc="{level: 2}">重载</h3>
diff --git a/docs/upload/detail/demo.md b/docs/upload/detail/demo.md
index 681ed60f..43ae2680 100644
--- a/docs/upload/detail/demo.md
+++ b/docs/upload/detail/demo.md
@@ -4,7 +4,7 @@
   obj.render();
 }}">
   <textarea>
-{{- d.include("docs/upload/examples/image.md") }}
+{{- d.include("/upload/examples/image.md") }}
 </script>
   </textarea>
 </pre>
@@ -13,7 +13,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/files.table.md") }}
+{{- d.include("/upload/examples/files.table.md") }}
   </textarea>
 </pre>
 
@@ -22,7 +22,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/accept.md") }}
+{{- d.include("/upload/examples/accept.md") }}
   </textarea>
 </pre>
 
@@ -31,7 +31,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/size.md") }}
+{{- d.include("/upload/examples/size.md") }}
   </textarea>
 </pre>
 
@@ -39,7 +39,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/auto.md") }}
+{{- d.include("/upload/examples/auto.md") }}
   </textarea>
 </pre>
 
@@ -48,7 +48,7 @@
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/drag.md") }}
+{{- d.include("/upload/examples/drag.md") }}
   </textarea>
 </pre>
 
@@ -57,6 +57,6 @@
 
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
   <textarea>
-{{- d.include("docs/upload/examples/form.file.md") }}
+{{- d.include("/upload/examples/form.file.md") }}
   </textarea>
 </pre>
\ No newline at end of file
diff --git a/docs/upload/detail/options.md b/docs/upload/detail/options.md
index 3098e2fa..2eec9368 100644
--- a/docs/upload/detail/options.md
+++ b/docs/upload/detail/options.md
@@ -56,7 +56,7 @@
 </td>
 <td>
 
-<div id="options.data" class="ws-anchor">  
+<div id="options.data" lay-pid="options" class="ws-anchor">  
 传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法。
 </div>
 
@@ -100,7 +100,7 @@ data: {
 </td>
 <td>
 
-<div id="options.accept" class="ws-anchor">
+<div id="options.accept" lay-pid="options" class="ws-anchor">
 指定允许上传时校验的文件类型。可选值有：
 </div>  
 
@@ -142,7 +142,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
 </td>
 <td>
 
-<div id="options.exts" class="ws-anchor">
+<div id="options.exts" lay-pid="options" class="ws-anchor">
 
 允许上传的文件后缀。一般结合 `accept` 属性来设定。
 
@@ -257,7 +257,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
 <td colspan="4" style="text-align: center"> 
 
 
-<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
+<div id="options.callback" lay-pid="options" class="ws-anchor">
 
 [回调函数](#options.callback)
 
@@ -273,7 +273,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
 </td>
 <td colspan="3">
   
-<div id="option.choose" class="ws-anchor">
+<div id="options.choose" lay-pid="options" class="ws-anchor">
 选择文件后的回调函数。返回的参数如下
 </div>
 
@@ -310,7 +310,7 @@ choose: function(obj){
 </td>
 <td colspan="3">
   
-<div id="option.before" class="ws-anchor">
+<div id="options.before" lay-pid="options" class="ws-anchor">
 文件提交上传前的回调函数。返回的参数同 choose
 </div>
 
@@ -332,12 +332,12 @@ before: function(obj){ // obj 参数同 choose
     <tr>
 <td>
   
-[progress](#option.progress)
+[progress](#options.progress)
 
 </td>
 <td colspan="3">
   
-<div id="option.progress" class="ws-anchor">
+<div id="options.progress" lay-pid="options" class="ws-anchor">
 执行上传请求后的回调函数。返回的参数如下：
 </div>
 
@@ -361,12 +361,12 @@ progress: progress: function(n, elem, res, index){
     <tr>
 <td>
   
-[done](#option.done)
+[done](#options.done)
 
 </td>
 <td colspan="3">
   
-<div id="option.done" class="ws-anchor">
+<div id="options.done" lay-pid="options" class="ws-anchor">
 执行单次文件上传请求后的回调函数。返回的参数如下：
 </div>
 
@@ -392,12 +392,12 @@ done: function(res, index, upload){
     <tr>
 <td>
   
-[allDone](#option.allDone)
+[allDone](#options.allDone)
 
 </td>
 <td colspan="3">
   
-<div id="option.allDone" class="ws-anchor">
+<div id="options.allDone" lay-pid="options" class="ws-anchor">
 
 当开启多文件 (`multiple: true` ) 且所有文件均上传完毕后的状态回调函数。
 
diff --git a/docs/upload/index.md b/docs/upload/index.md
index 0e22f263..95f8f7bc 100644
--- a/docs/upload/index.md
+++ b/docs/upload/index.md
@@ -12,7 +12,7 @@ toc: true
 以下示例的部分上传接口由第三方网站 `https://httpbin.org` 提供，它可以模拟各类 HTTP 请求。若未配置上传接口的，每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。
 
 <div>
-{{- d.include("docs/upload/detail/demo.md") }}
+{{- d.include("/upload/detail/demo.md") }}
 </div>
 
 <p></p>
@@ -88,7 +88,7 @@ var inst = upload.render({
 }); 
 ```
 
-<h3 id="render" lay-toc="{level: 2}">重载</h3>
+<h3 id="reload" lay-toc="{level: 2}">重载</h3>
 
 `inst.reload(options);`
 
@@ -113,10 +113,10 @@ inst.reload({
 <h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
 
 <div>
-{{- d.include("docs/upload/detail/options.md") }}
+{{- d.include("/upload/detail/options.md") }}
 </div>
 
-<h2 id="options" lay-toc="{}">跨域方案</h2>
+<h2 id="cors-upload" lay-toc="{}">跨域方案</h2>
 
 `upload` 组件支持跨域上传，一般有以下两种场景
 
diff --git a/docs/util/index.md b/docs/util/index.md
index 32feb70a..a71c7db0 100644
--- a/docs/util/index.md
+++ b/docs/util/index.md
@@ -10,7 +10,7 @@ toc: true
 <h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
 
 <div>
-{{- d.include("docs/util/detail/demo.md") }}
+{{- d.include("/util/detail/demo.md") }}
 </div>
 
 <p></p>
diff --git a/docs/versions.md b/docs/versions.md
index cfe1d19c..ca60220f 100644
--- a/docs/versions.md
+++ b/docs/versions.md
@@ -5,7 +5,7 @@ toc: true
  
 # 更新日志
 
-> 导读：📑 [Layui 2.8 《升级指南》](/docs/@note/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/docs/@note/2.8/news.html)
+> 导读：📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
 
 
 <h2 id="2.8.2" lay-toc="{title: '2.8.2'}">
diff --git a/examples/xingzuo.html b/examples/xingzuo.html
deleted file mode 100644
index 5fd2783e..00000000
--- a/examples/xingzuo.html
+++ /dev/null
@@ -1,104 +0,0 @@
-
-<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>星座配对</title>
-<meta name="description" content="">
-<meta http-equiv="X-UA-Compatible" content="chrome=1">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
-<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="format-detection" content="telephone=no">
-<style>
-*{margin: 0; padding: 0;}
-.anim-box{ position: relative; width: 80%; height: 500px; margin: 50px auto; background-color: #000; color: #000;}
-.anim-box>*{position: absolute;}
-.anim-box span{width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 100%; background-color: #fff; color: #000; z-index: 999;}
-.anim-box span{-webkit-transition: .8s; transition: .8s;}
-.anim-box ul{ bottom: 50px; left: 20px; font-size: 0;}
-.anim-box ul li{display: inline-block;  width: 80px; height: 80px; line-height: 80px; margin: 20px 20px 0 0;  text-align: center; border-radius: 100%; background-color: #c00; color: #fff; font-size: 14px;}
-
-@-webkit-keyframes beam{
-  0%{
-    box-shadow:0 0 0px rgba(255,255,255,0);
-    opacity: 0.3;
-  }
-  50%{
-    box-shadow: 0 0 100px rgba(255,255,255, 1);
-    opacity: 1;
-  }
-  100%{
-    box-shadow:0 0 0px rgba(255,255,255,0);
-    opacity: 0.3;
-    background-color: #fff;
-  }
-}
-@keyframes beam{
-  0%{
-    box-shadow:0 0 0px rgba(255,255,255, 0);
-    opacity: 0.3;
-  }
-  50%{
-    box-shadow:0 0 100px rgba(255,255,255, 1);
-    opacity: 1;
-  }
-  100%{
-    box-shadow:0 0 0px 0px rgba(255,255,255, 0);
-    opacity: 0.3;
-    background-color: #fff;
-  }
-}
-.beam{animation: beam 1s infinite ; -webkit-animation: beam 1s infinite ; }
-</style>
-</head>
-<body>
-
-<section class="anim-box">
-  <span id="me">你</span>
-  <ul class="xingzuo">
-    <li>天秤座</li>
-    <li>处女座</li>
-    <li>水瓶座</li>
-    <li>双子座</li>
-    <li>双鱼座</li>
-    <li>白羊座</li>
-  </ul>
-</section>
-
-
-<script>
-;!function(){
-  
-  
-  var find = function(index){
-    var me = document.getElementById('me');
-    var ul = document.querySelectorAll('.xingzuo')[0];
-    var xzs = ul.querySelectorAll('li');
-    
-    var x = xzs[index].offsetLeft + ul.offsetLeft;
-    var y = xzs[index].offsetTop + ul.offsetTop;
-    
-    me.style['-webkit-transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
-    me.style['transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
-    me.style.opacity = 0.5;
-    
-    setTimeout(function(){
-      xzs[index].className = 'beam';
-      setTimeout(function(){
-        me.removeAttribute('style');
-      }, 500);
-    }, 800);
-  };
-  
-  
-  
-  setTimeout(function(){
-    find(Math.random()*5|0) //模拟匹配
-  }, 1000);
-  
-  
-}();
-</script>
-</body>
-</html>
\ No newline at end of file