docs(engine) add engine page

ly525
1 parent 5ff533b3
Showing 5 changed files with 30 additions and 15 deletions
README.en.md
docs/.vuepress/config.js
docs/zh/getting-started/discussion.md
docs/zh/getting-started/engine.md
docs/zh/getting-started/quick-start.md
-📖 [Online English Document](https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us) | [简体中文](./README.md)
-
-
 <p align="left">
 <a href="https://github.com/ly525/luban-h5/releases"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/ly525/luban-h5"></a>
 </p>
  
+📖 [Online English Document](https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us) | [简体中文](./README.md)
  
 ### What's LuBan-H5?
 > LuBan-H5 is a mobile page builder based on Vue.js, which is similar with [Amolink](www.amolink.com) [eqx](http://www.eqxiu.com)(it's a chinese website, you may need to translate the page). It also supports parsing PSD file to HMTL5 Page
  
-### Screenshots
-<img src="https://user-images.githubusercontent.com/12668546/64076899-3df88480-ccfd-11e9-877b-8e6a86888da3.png" style="margin: 10px;" width="60%" />
-<img src="https://user-images.githubusercontent.com/12668546/64076911-6d0ef600-ccfd-11e9-9376-e65a42478853.png" style="margin: 10px;" width="60%" />
-<img src="https://user-gold-cdn.xitu.io/2019/8/17/16ca02d61136ed30?imageslim" style="margin: 10px;" width="60%" />
-<img src="https://user-images.githubusercontent.com/12668546/63207252-4f367400-c0f5-11e9-952a-9a3f6f72a710.png" style="margin: 10px;" width="60%"/>
+### Demo
+> [Preview Website](https://api.luban-h5.wxjcart.com)
+
+<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" style="margin: 10px;" width="60%" />
  
  
  
@@ -75,7 +75,7 @@ module.exports = {
   themeConfig: {
     nav: [
       { text: 'Document(En)', link: 'https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us' },
-      { text: 'Website', link: 'https://ly525.github.io/luban-h5' },
+      { text: 'Website', link: 'https://api.luban-h5.wxjcart.com' },
     ],
     versions: [
       ['zh', '/zh/'],
@@ -107,6 +107,7 @@ module.exports = {
             '/zh/getting-started/introduction',
             '/zh/getting-started/features',
             '/zh/getting-started/quick-start',
+            '/zh/getting-started/engine',
             '/zh/getting-started/code-structure',
             '/zh/getting-started/deployment',
             '/zh/getting-started/feedback',
 # 交流群
  
-***
-因为微信群二维码会过期，所以 微信群和QQ群 的二维码请前往查看[鲁班-H5 微信群和QQ群](https://github.com/ly525/luban-h5/issues/57) 查看
-***
  
-#### 钉钉讨论组（推荐, 对代码排版相对友好）
-<img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200px">
+| 钉钉群  | 微信公众号  |  微信 |
+|---|---|---|
+| <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />| <img src="https://user-images.githubusercontent.com/12668546/65471913-ab827580-dea3-11e9-919c-870c9605c60f.png" width="200" />  | <img src="https://user-images.githubusercontent.com/12668546/66585418-5cce1e80-ebb9-11e9-91c0-56f658f09e27.png" width="200" /> <br />请备注：鲁班H5交流|
+
  
  
 ---
+# 作品预览/渲染引擎
+> 关于此部分有疑惑，请直接评论
+
+## 基础概念
+作品预览的基本原理参见 [luban-h5/back-end/h5-api/api/work/controllers/Work.js/previewOne](https://github.com/ly525/luban-h5/blob/bd486ce16fc24bfd7030fc51857a579776e12e68/back-end/h5-api/api/work/controllers/Work.js#L12)
+
+
+```js
+previewOne: async (ctx) => {
+  const work = await strapi.services.work.findOne(ctx.params);
+  return ctx.render('engine', { work });
+},
+```
+
+---
+
+<Vssue issueId="15" />
 \ No newline at end of file
 # 快速开始
+> 重要：关于此部分有疑惑，请在下面直接评论
  
 ## 基础概念
 > 首先你需要大概了解下 Node.js 的相关生态、Node.js 的安装
@@ -128,7 +129,7 @@ yarn serve # develop
 ```
  
 ### 2. 构建预览所需的渲染引擎
-1. 在 front-end/h5 目录下，运行：`node build/engine.webpack.js` (这个是用来生成预览引擎的东西)
+1. 在 front-end/h5 目录下，运行：`yarn engine:build` (这个是用来生成预览引擎的东西)
 2. 构建完成之后,看下 后端的 `h5-api/public` 里面会多一个文件夹 `engine-assets`
 3. 打开的预览窗口（preview.vue）,里面的预览部分对应的其实是一个 iframe，可以看看对应的源码
   也就是说，这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎，所以 `build/engine.webpack.js` 的 `output dir` 是在`back-end/h5-api/public`中的