徐烜 / bsth-ebus-h5_editor · Commits

Commit a6de3a60378fb8ad85f910986b2421515a736d82

Authored by ly525
1 parent 4723612f

docs: 🎉 english documents are online

Inline Side-by-side
Showing 23 changed files with 791 additions and 254 deletions
docs/.vuepress/config.js
  View file @a6de3a6
1 -const container = require('markdown-it-container');  
2 -  
3 -const ogprefix = 'og: http://ogp.me/ns#';  
4 -const title = '鲁班H5 文档';  
5 -const description = '前后端均开源的H5制作平台，类似易企秀、百度H5、Maka、人人秀.';  
6 -const color = '#2F80ED';  
7 -const author = 'ly525';  
8 -const url = 'https://ly525.github.io/luban-h5';  
9 -  
10 module.exports = { 1 module.exports = {
11 - head: [  
12 - ['link', { rel: 'icon', href: `/luban-logo.png` }],  
13 - ['meta', { name: 'theme-color', content: color }],  
14 - ['meta', { prefix: ogprefix, property: 'og:title', content: title }],  
15 - ['meta', { prefix: ogprefix, property: 'twitter:title', content: title }],  
16 - ['meta', { prefix: ogprefix, property: 'og:type', content: 'article' }],  
17 - ['meta', { prefix: ogprefix, property: 'og:url', content: url }],  
18 - [  
19 - 'meta',  
20 - { prefix: ogprefix, property: 'og:description', content: description },  
21 - ],  
22 - [  
23 - 'meta',  
24 - { prefix: ogprefix, property: 'og:image', content: `${url}luban-logo.png` },  
25 - ],  
26 - [  
27 - 'meta',  
28 - { prefix: ogprefix, property: 'og:article:author', content: author },  
29 - ],  
30 - ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],  
31 - [  
32 - 'meta',  
33 - { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },  
34 - ],  
35 - // ['link', { rel: 'apple-touch-icon', href: `/assets/apple-touch-icon.png` }],  
36 - // ['link', { rel: 'mask-icon', href: '/assets/safari-pinned-tab.svg', color: color }],  
37 - ['meta', { name: 'msapplication-TileImage', content: '/luban-logo.png' }],  
38 - ['meta', { name: 'msapplication-TileColor', content: color }],  
39 - ['script', { src: '/yandex.js' }],  
40 - ],  
41 - markdown: {  
42 - anchor: {  
43 - permalink: true, 2 + title: '鲁班H5',
  3 + locales: {
  4 + '/': {
  5 + lang: 'en-US',
  6 + // description: 'OpenSource Mobile Page Builder&Generator with Drag&Drop\r\n前后端均开源的H5制作平台，类似易企秀、百度H5、Maka、人人秀',
  7 + description: 'OpenSource Mobile Page Builder&Generator',
  8 + },
  9 + '/zh/': {
  10 + lang: 'zh-CN',
  11 + // description: '前后端均开源的H5制作平台，类似易企秀、百度H5、Maka、人人秀',
44 }, 12 },
45 - // config: md => {  
46 - // md.use(require('markdown-it-decorate')) // https://github.com/vuejs/vuepress/issues/986  
47 - // .use(require('markdown-it-task-lists'))  
48 - // .use(...createContainer('intro'))  
49 - // .use(...createContainer('windows'))  
50 - // .use(...createContainer('ubuntu'))  
51 - // .use(...createContainer('mac'))  
52 - // .use(...createContainer('note'));  
53 - // const vuepressTabs = require('vuepress-tabs');  
54 - // vuepressTabs(md);  
55 - // },  
56 - },  
57 - extendMarkdown (md) {  
58 - md.use(require('markdown-it-decorate')) // https://github.com/vuejs/vuepress/issues/986  
59 - .use(require('markdown-it-task-lists'))  
60 - .use(...createContainer('intro'))  
61 - .use(...createContainer('windows'))  
62 - .use(...createContainer('ubuntu'))  
63 - .use(...createContainer('mac'))  
64 - .use(...createContainer('note'));  
65 - const vuepressTabs = require('vuepress-tabs');  
66 - vuepressTabs(md);  
67 }, 13 },
68 - title,  
69 - description,  
70 - // why '/documentation' not work for surge.sh  
71 - // base: '/' for surge.sh  
72 - // base '/luban-h5/' for github pages  
73 - base: '/luban-h5/',  
74 - // ga: '', 14 + serviceWorker: {},
75 themeConfig: { 15 themeConfig: {
76 - nav: [  
77 - { text: 'Document(En)', link: 'https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us' },  
78 - { text: 'Website', link: 'https://api.luban-h5.wxjcart.com/main' },  
79 - ],  
80 - versions: [  
81 - ['zh', '/zh/'],  
82 - ['en', '/en/'],  
83 - ],  
84 repo: 'ly525/luban-h5', 16 repo: 'ly525/luban-h5',
85 - // website: 'https://ly525.github.io/luban-h5',  
86 - // slack: 'https://github.com/ly525/luban-h5',  
87 - // blog: 'https://github.com/ly525/luban-h5',  
88 - // liveDemo: 'https://ly525.github.io/luban-h5',  
89 - docsDir: 'docs',  
90 - // algolia: {  
91 - // apiKey: '0d43b0d883366a06e0f2ff8fe988ae51',  
92 - // indexName: 'luban-h5-docs',  
93 - // }, 17 + lastUpdated: 'Last Updated',
94 editLinks: true, 18 editLinks: true,
95 - editLinkText: 'Improve this page',  
96 - docsBranch: 'dev',  
97 - serviceWorker: true,  
98 - hiddenLinks: [  
99 - '/zh/cli/CLI.html',  
100 - '/zh/api-reference/reference.html',  
101 - ],  
102 - sidebar: {  
103 - '/zh/': [  
104 - {  
105 - collapsable: false,  
106 - title: '🚀 Getting started',  
107 - children: [  
108 - '/zh/getting-started/introduction',  
109 - '/zh/getting-started/features',  
110 - '/zh/getting-started/quick-start',  
111 - '/zh/getting-started/engine',  
112 - '/zh/getting-started/code-structure',  
113 - '/zh/getting-started/deployment',  
114 - '/zh/getting-started/feedback',  
115 - '/zh/getting-started/qa',  
116 - '/zh/getting-started/discussion',  
117 - ],  
118 - },  
119 - {  
120 - collapsable: true,  
121 - title: '💡 实现思路',  
122 - children: [  
123 - '/zh/guides/form-submit', 19 + docsDir: 'docs',
  20 + serviceWorker: {
  21 + updatePopup: {
  22 + message: 'New content is available.',
  23 + buttonText: 'Refresh',
  24 + },
  25 + },
  26 + locales: {
  27 + '/': {
  28 + selectText: 'Languages',
  29 + label: 'English',
  30 + editLinkText: 'Edit this page on GitHub',
  31 + nav: [
  32 + // { text: 'Guide', link: '/guide/' },
  33 + // { text: 'Config', link: '/config/' },
  34 + // { text: 'API', link: '/api/' },
  35 + { text: 'Website', link: 'https://api.luban-h5.wxjcart.com/' },
  36 + { text: 'Changelog', link: 'https://github.com/ly525/luban-h5/releases' },
  37 + ],
  38 + sidebar: {
  39 + '/': [
  40 + {
  41 + collapsable: false,
  42 + title: '🚀 Getting started',
  43 + children: [
  44 + '/en/getting-started/introduction',
  45 + '/en/getting-started/features',
  46 + '/en/getting-started/quick-start',
  47 + '/en/getting-started/deployment',
  48 + '/en/getting-started/discussion',
  49 + ],
  50 + },
  51 + {
  52 + collapsable: true,
  53 + title: '💡Implementation',
  54 + children: [
  55 + '/en/implementation/code-structure',
  56 + '/en/implementation/form-submit',
  57 + ],
  58 + },
  59 + {
  60 + collapsable: true,
  61 + title: '🔌 Local plugins',
  62 + children: [
  63 + '/en/plugin-development/quick-start',
  64 + ],
  65 + },
124 ], 66 ],
125 }, 67 },
126 - {  
127 - collapsable: true,  
128 - title: '🔌 Local plugins',  
129 - children: [  
130 - '/zh/plugin-development/quick-start', 68 + },
  69 + '/zh/': {
  70 + selectText: '选择语言',
  71 + label: '简体中文',
  72 + editLinkText: '在 GitHub 上编辑此页',
  73 + nav: [
  74 + // { text: '指南', link: '/zh/guide/' },
  75 + // { text: '配置', link: '/zh/config/' },
  76 + // { text: 'API', link: '/zh/api/' },
  77 + // { text: '插件', link: '/zh/plugin/' },
  78 + { text: '首页', link: 'https://api.luban-h5.wxjcart.com/' },
  79 + { text: '发布日志', link: 'https://github.com/ly525/luban-h5/releases' },
  80 + ],
  81 + sidebar: {
  82 + '/': [
  83 + {
  84 + collapsable: false,
  85 + title: '🚀 Getting started',
  86 + children: [
  87 + '/zh/getting-started/introduction',
  88 + '/zh/getting-started/features',
  89 + '/zh/getting-started/quick-start',
  90 + '/zh/getting-started/deployment',
  91 + '/zh/getting-started/discussion',
  92 + ],
  93 + },
  94 + {
  95 + collapsable: false,
  96 + title: '💡实现原理',
  97 + children: [
  98 + '/zh/implementation/code-structure',
  99 + '/zh/implementation/form-submit',
  100 + ],
  101 + },
  102 + {
  103 + collapsable: true,
  104 + title: '🔌 Local plugins',
  105 + children: [
  106 + '/zh/plugin-development/quick-start',
  107 + ],
  108 + },
131 ], 109 ],
132 }, 110 },
133 - // {  
134 - // collapsable: false,  
135 - // title: '📚 Resources',  
136 - // children: [  
137 - // [  
138 - // 'https://github.com/ly525/luban-h5-docs/blob/master/CONTRIBUTING.md',  
139 - // 'Contributing guide',  
140 - // ],  
141 - // '/zh/migration-guide/',  
142 - // ],  
143 - // },  
144 - ], 111 + },
145 }, 112 },
146 }, 113 },
147 plugins: { 114 plugins: {
@@ -158,21 +125,12 @@ module.exports = { @@ -158,21 +125,12 @@ module.exports = {
158 prefix: '[From Comment]', 125 prefix: '[From Comment]',
159 }, 126 },
160 }, 127 },
161 -};  
162 -  
163 -function createContainer(className) {  
164 - return [  
165 - container,  
166 - className,  
167 - {  
168 - render(tokens, idx) {  
169 - const token = tokens[idx];  
170 - if (token.nesting === 1) {  
171 - return `<div class="${className} custom-block">\n`;  
172 - } else {  
173 - return `</div>\n`;  
174 - }  
175 - },  
176 - },  
177 - ];  
178 -} 128 + // plugins: [
  129 + // [
  130 + // '@vuepress/google-analytics',
  131 + // {
  132 + // ga: 'UA-149864185-1',
  133 + // },
  134 + // ],
  135 + // ],
  136 +};
179 \ No newline at end of file 137 \ No newline at end of file
docs/README.md
  View file @a6de3a6
1 --- 1 ---
2 -meta:  
3 - - http-equiv: refresh  
4 - content: 0;url=/luban-h5/zh/ 2 +home: true
  3 +actionText: Get Started →
  4 +actionLink: /en/getting-started/introduction
  5 +features:
  6 + - title: 表单提交
  7 + details: 支持表单组件，即时倾听用户反馈，可以在后台查看和下载用户数据
  8 + - title: 轻松建站
  9 + details: 丰富的组件系统、支持可视化编辑、自由拖拽排版、实时预览、在线访问
  10 + - title: 导入 PSD
  11 + details: 支持一键导入PSD，将设计师的创意转换为 H5，快速查看效果、反馈、上线
  12 +footer: GPL 3.0 Licensed | Copyright © 2019-present
5 --- 13 ---
  14 +
  15 +## 社区与交流群
  16 +#### 论坛地址：[鲁班H5-社区](https://support.qq.com/products/93432/)
  17 +#### 交流群
  18 +| 钉钉群 | 微信公众号 | 微信 |
  19 +|---|---|---|
  20 +| <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交流|
  21 +
  22 +---
  23 +
  24 +> 如果有问题，欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
docs/deploy.sh
  View file @a6de3a6
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 npm run docs:build 2 npm run docs:build
3 3
4 # 进入生成的文件夹 4 # 进入生成的文件夹
5 -cd .vuepress/dist 5 +cd docs/.vuepress/dist
6 6
7 # 如果是发布到自定义域名 7 # 如果是发布到自定义域名
8 # echo 'www.example.com' > CNAME 8 # echo 'www.example.com' > CNAME
docs/en/README.md 0 → 100755
  View file @a6de3a6
  1 +::: intro
  2 +<!-- ![Logo](https://cldup.com/7umchwdUBh.png) -->
  3 +## 鲁班H5
  4 +鲁班H5是基于Vue2.0开发的，通过拖拽+配置的形式，生成页面的工具。
  5 +
  6 +<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" height="290" />
  7 +<!-- ### 鲁班H5是什么？ -->
  8 +
  9 +<!-- {p:.flex.justify-around} -->
  10 +
  11 +---
  12 +:::
  13 +
  14 +<Vssue issueId="14" />
docs/en/getting-started/deployment.md 0 → 100755
  View file @a6de3a6
  1 +# Deployment
  2 +
  3 +
  4 +## Aliyun/Tencent Cloud/Digital Ocean
  5 +
  6 +#### 1. on your server(centos)
  7 +First of all, you need to install some basic software packages, please install them yourself (refer to its official website documents for details)
  8 +
  9 +1. Node
  10 +1. Npm
  11 +1. Nginx
  12 +1. Yarn
  13 +1. Pm2
  14 +
  15 +> The following scripts are just for your information
  16 +
  17 +
  18 +```bash
  19 +# install yarn
  20 +curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  21 +sudo yum install yarn -y
  22 +
  23 +# install nginx
  24 +sudo yum install nginx -y
  25 +# install pm2
  26 +npm install pm2 -g
  27 +# pm2 examples
  28 +# pm2 start server.js
  29 +# pm2 stop server
  30 +# pm2 restart server
  31 +# pm2 stop all
  32 +
  33 +```
  34 +
  35 +Nginx profile demo
  36 +
  37 +```nginx
  38 +server {
  39 + listen 443;
  40 + server_name your_domain;
  41 +
  42 + client_body_buffer_size 20M;
  43 + client_max_body_size 20M;
  44 + proxy_buffer_size 20M;
  45 + proxy_buffers 32 20M;
  46 + proxy_busy_buffers_size 20M;
  47 +
  48 + # https ssl config
  49 + ssl on;
  50 + ssl_certificate cert/your-https.pem;
  51 + ssl_certificate_key cert/your-https.key;
  52 + ssl_session_timeout 5s;
  53 + ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  54 + ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  55 + ssl_prefer_server_ciphers on;
  56 +
  57 + gzip on;
  58 + gzip_min_length 1k;
  59 + gzip_buffers 4 16k;
  60 + gzip_disable "MSIE [1-6]\.";
  61 + gzip_comp_level 3;
  62 + gzip_types image/png application/json text/plain application/x-javascript text/css application/xml text/javascript application/javascript;
  63 +
  64 +
  65 + location ~ ^/(upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets) {
  66 + proxy_set_header Host $host;
  67 + proxy_set_header X-Real-IP $remote_addr;
  68 + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  69 + proxy_pass http://localhost:1337;
  70 + }
  71 + location / {
  72 +
  73 + root /home/centos/luban-h5-dist/front-end/;
  74 + #try_files $uri $uri/ /index.html;
  75 + }
  76 +
  77 +}
  78 +```
  79 +
  80 +#### 2. on local machine
  81 +Do the following in the root path of the project:
  82 +
  83 +```bash
  84 +yarn add flightplan
  85 +npm run deploy:esc // Elastic Compute Service
  86 +```
  87 +
  88 +Local deployment script
  89 +
  90 +```javascript
  91 +var os = require('os');
  92 +var plan = require('flightplan');
  93 +
  94 +// configuration
  95 +local_dist_dir = './'; // root path for luban-h5
  96 +remote_project_dir = '~/codebase/luban/luban-h5'; // root path for luban-h5 on server
  97 +remote_project_api_dir = '~/codebase/luban/luban-h5/back-end/h5-api'; // api root path for luban-h5 on server
  98 +
  99 +// production server config
  100 +plan.target('production', {
  101 + host: 'your host ip', // your server ip
  102 + username: 'centos', // your server username
  103 + // privateKey should be absolute path
  104 + privateKey: `${os.homedir}/.ssh/id_rsa` // your privateKey to rsync files
  105 +});
  106 +
  107 +/**
  108 + * 1. setup folders
  109 + * 2. sync files
  110 + * 3. install dependencies
  111 + * 4. (re)start api service
  112 + * 5. soft link nginx conf
  113 + *
  114 + */
  115 +
  116 +// init remove server path
  117 +// plan.remote(remote => {
  118 +// // remove.exec(`mkdir -p ${remote_project_dir}`)
  119 +// remove.sudo(`yum install nginx -y`)
  120 +// remote.with(`mkdir -p ${remote_project_dir}`, () => {
  121 +// // remote.log('Install dependencies');
  122 +// // remote.exec('yarn');
  123 +// remote.exec('pwd');
  124 +// });
  125 +// });
  126 +
  127 +
  128 +// run commands on localhost
  129 +plan.local(local => {
  130 + // local.log('=> Run build');
  131 + // local.exec('npm run build');
  132 + // local.log('=> Build finish');
  133 +
  134 + local.log('=> Copy files to remote hosts');
  135 + // TODO reference: https://github.com/pstadler/flightplan/issues/142
  136 + local.with(`cd ${local_dist_dir}`, () => {
  137 + // const filesToCopy = local.exec('find . -type f', { silent: true })
  138 + const filesToCopy = local.git('ls-files', {silent: true}) // get list of files under version control
  139 +
  140 + local.transfer(filesToCopy, remote_project_dir);
  141 + local.log('=> Copy finish');
  142 +
  143 + });
  144 +});
  145 +
  146 +// run commands on the target's remote hosts
  147 +plan.remote(remote => {
  148 + remote.with(`cd ${remote_project_api_dir}`, () => {
  149 + remote.log('Install dependencies');
  150 + remote.exec('yarn');
  151 + remote.exec('pm2 restart server')
  152 + });
  153 +});
  154 +```
  155 +
  156 +#### Some problems that may be encountered in the middle:
  157 +
  158 +1. `Cannot parse privateKey: Unsupported key format` <br />For solutions, please refer: [Cannot parse privateKey: Unsupported key format](https://stackoverflow.com/questions/53400628/cannot-parse-privatekey-unsupported-key-format)
  159 +
  160 +
  161 +
  162 +## Docker deployment
  163 +> TODO
  164 +
  165 +
  166 +
  167 +## Heroku
  168 +> Because Strapi + postgresql still has some pits on Heroku and needs official solution, this solution is temporarily pending.
  169 +
docs/en/getting-started/discussion.md 0 → 100755
  View file @a6de3a6
  1 +# Join Discussion Group
  2 +
  3 +For users in other languages(not Chinese), please keep using [Github issue tracker](https://github.com/ly525/luban-h5/issues). 🤟
  4 +
  5 +---
  6 +
  7 +<Vssue issueId="11" />
0 \ No newline at end of file 8 \ No newline at end of file
docs/en/getting-started/features.md 0 → 100755
  View file @a6de3a6
  1 +# Features
  2 +
  3 +### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#53733cd6)Editor
  4 +- [x] Reference line
  5 +- [x] Adsorption line, assembly alignment
  6 +- [x] Towing change component shape
  7 +- [x] Elements: copying (canvas)
  8 +- [x] Elements: delete (canvas)
  9 +- [x] Elements: editing (canvas)
  10 +- [x] Page: Add
  11 +- [x] Page: copy
  12 +- [x] Page: delete
  13 +- [x] Quick Preview
  14 +- [x] Undo, redo
  15 +
  16 +
  17 +### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#40fb9f22)Component System
  18 +
  19 +#### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#GQa0Y)Basic component
  20 +
  21 +- [x] Ordinary text
  22 +- [x] Normal button
  23 +- [x] Ordinary picture
  24 +- [ ] Background
  25 +- [ ] Video (Iframe form)
  26 +
  27 +
  28 +#### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#Ibh4H)Form Component
  29 +
  30 +- [x] Form button
  31 +- [x] Form input box
  32 +- [x] Form List
  33 +- [x] Form multiple selection box
  34 +
  35 +
  36 +
  37 +### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#4uFaO)Enhancements [open source]
  38 +
  39 +- [x] Template list
  40 +- [x] Making H5 based on template
  41 +- [x] Save work as template
  42 +- [ ] Picture Library
  43 +- [ ] Third party copyrighted picture search
  44 +- [ ] SSO login, third party login
  45 +
  46 +
  47 +
  48 +### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#kDYKy)Enhancements [may not open source]
  49 +> Has been investigated, can be realized, advanced functions, not yet open
  50 +
  51 +- [x] Upload PSD, one-click conversion to H5
  52 +- [x] Custom script
  53 +
  54 +### [](https://www.yuque.com/liuyan-ew1qk/oh5d0n/siwn9y?translate=en#289dcb17)Backend API
  55 +
  56 +- [x] Create, save, and update works
  57 +- [x] Form data collection
  58 +- [x] Form data display
  59 +- [x] Online Preview
  60 +- [x] QR code preview
docs/en/getting-started/introduction.md 0 → 100755
  View file @a6de3a6
  1 +# Introduction
  2 +<p align="left">
  3 +<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>
  4 +</p>
  5 +
  6 +### What's LuBan-H5?
  7 +> 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
  8 +
  9 +### Demo
  10 +> [Preview Website](https://api.luban-h5.wxjcart.com)
  11 +
  12 +<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" style="margin: 10px;" width="60%" />
  13 +
  14 +
  15 +
  16 +### Features
  17 +1. Editor
  18 + - [x] Reference Line/GuideLine
  19 + - [x] Adsorption Line
  20 + - [x] Change plugin shape by drag-and-drop
  21 + - [x] Edit Element (Canvas)
  22 + - [x] Copy Element (Canvas)
  23 + - [x] Delete Element (Canvas)
  24 + - [x] Edit Page
  25 + - [x] Copy Page
  26 + - [x] Delete Page
  27 + - [x] Quick Preview
  28 + - [x] Undo、Redo
  29 +
  30 +2. Plugin System
  31 +
  32 + - [x] Text
  33 + - [x] Normal Button
  34 + - [x] Form Button
  35 + - [x] Form Field
  36 + - [x] Picture
  37 + - [ ] Background Image
  38 + - [ ] Video (Iframe format)
  39 +
  40 +3. enhanced function
  41 + - [ ] parsing PSD file to HTML Page
  42 + - [ ] Photo Gallery
  43 + - [ ] Third Party uncopyrighted Image Search
  44 +
  45 +
  46 +4. back-end API
  47 + - [x] create work
  48 + - [x] save work
  49 + - [x] update work
  50 + - [x] Form Statistics
  51 + - [x] Online Preview
  52 + - [x] QR Code Preview
  53 +
  54 +---
  55 +
  56 +### Installs
  57 +> proj: project root path
  58 +please refer to: [`Document/Quick Start`](https://www.yuque.com/liuyan-ew1qk/oh5d0n/gpfy6g?language=en-us)
  59 +
  60 +
  61 +---
  62 +### More Explanation
  63 +#### Front-End Component Explanation
  64 +1. `lbp-`: `lu-ban-plugin-`, means `Luban H5 plugin`, location: `proj/front-end/h5/src/components/plugins`
  65 +
  66 +
  67 +#### Build With (current)
  68 + 1. Front end: Vue.js
  69 + 2. Back End: Strapi
  70 + 3. Storage: Sqlite
  71 +
  72 +
  73 +Read more here [Online English Document](https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us)
  74 +
  75 +---
  76 +
  77 +<Vssue issueId="12" />
0 \ No newline at end of file 78 \ No newline at end of file
docs/en/getting-started/quick-start.md 0 → 100755
  View file @a6de3a6
  1 +# Quick Start
  2 +
  3 +# commands commonly used for local dev
  4 +```bash
  5 +npm run dev # dev back-end or docs
  6 +yarn serve # dev front-end
  7 +```
  8 +
  9 +# Overview
  10 +
  11 +## Basic Concepts
  12 +> First of all, you need to know about the related ecology of Node. js and the installation of Node. js.
  13 +> We will take a minute to introduce the basic concepts. By default, you know the basic operations of Linux and Git.
  14 +> You can read the [Basic installation Requirements](https://strapi.io/documentation/3.0.0-beta.x/getting-started/install-requirements.html#basic-installation-requirements)
  15 +
  16 +## Build With(current version)
  17 +Vue.js: Front-end framework<br />Strapi.js: Open source Node.js Headless CMS to easily build customisable APIs<br />Sqlite: Database
  18 +
  19 +
  20 +# Setup
  21 +
  22 +1. the API is powered by strapi.js
  23 +
  24 +## Setup backend
  25 +
  26 +### 1. quick start
  27 +```bash
  28 +# by default, the current path is the root path for luban-h5
  29 +cd back-end/h5-api
  30 +yarn install # install dependencies
  31 +yarn add psd # install dependency of psd
  32 +
  33 +# install ejs engine, mainly used for preview work
  34 +yarn add strapi-hook-ejs
  35 +
  36 +# modify h5-api/hook.json (next paragraph)
  37 +# see more details about strapi-hook-ejs：https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs#configuration
  38 +
  39 +npm run dev # local dev
  40 +# additional notes: run `npm run localdev` if you want to debug it in vscode
  41 +
  42 +# #!en: default database is sqlite3(db location: h5-api/.tmp/data.db)
  43 +
  44 +# 访问 http://locahost:1337/admin
  45 +# visit http://locahost:1337/admin
  46 +```
  47 +
  48 +`h5-api/hook. json`  is configured as follows:
  49 +
  50 +```json
  51 +{
  52 + "timeout": 3000,
  53 + "load": {
  54 + "before": [],
  55 + "order": [
  56 + "Define the hooks' load order by putting their names in this array in the right order"
  57 + ],
  58 + "after": []
  59 + },
  60 + "ejs": {
  61 + "enabled": true,
  62 + "viewExt": "ejs",
  63 + "partial": true,
  64 + "cache": false,
  65 + "debug": false,
  66 + "layout": false
  67 + }
  68 +}
  69 +```
  70 +
  71 +
  72 +
  73 +### 2. Something important
  74 +
  75 +1. `403 Forbidden` ：Please follow the instructions to config the API can be publicly accessible: `[Roles And Permission] -> [Public] - [Permissions]` 
  76 +
  77 +![1567438464273-e0892ee2-5dca-45ec-a528-8090d80b23bd](https://user-images.githubusercontent.com/12668546/65381949-32addd00-dd2e-11e9-967a-e313dc6fca89.png)
  78 +
  79 +![1567438463824-d6b87f12-eecf-4ae2-aa9c-bb4c73c4127d](https://user-images.githubusercontent.com/12668546/65381950-32addd00-dd2e-11e9-859a-dbec0941dc5a.png)
  80 +
  81 +
  82 +##### Used for upload work cover
  83 +![1567858269172-44561808-5d49-43b5-89c1-f4f876eeec24](https://user-images.githubusercontent.com/12668546/65381948-32154680-dd2e-11e9-95ea-589f808ce095.png)
  84 +
  85 +2. `ctx.render is not a function` <br />solution:`Setup backend/quick start/strap-hook-ejs` 
  86 +
  87 +<br />
  88 +```javascript
  89 +error TypeError: ctx.render is not a function
  90 + at previewOne (~/luban-h5/back-end/h5-api/api/work/controllers/Work.js:13:16)
  91 +```
  92 +
  93 +
  94 +## setup front-end
  95 +
  96 +### 1. quick start
  97 +```bash
  98 +# by default, the current path is the root path of luban-h5
  99 +cd front-end/h5
  100 +
  101 +yarn # install dependencies
  102 +yarn serve # develop
  103 +
  104 +# more commands
  105 +# please refer to project/front-end/h5/package.json
  106 +```
  107 +
  108 +### 2. build preview engine
  109 +
  110 +#### Basic
  111 +[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)
  112 +
  113 +
  114 +```js
  115 +previewOne: async (ctx) => {
  116 + const work = await strapi.services.work.findOne(ctx.params);
  117 + return ctx.render('engine', { work });
  118 +},
  119 +```
  120 +
  121 +#### How to build preview engine
  122 +1. cd `front-end/h5`, run `yarn engine:build`
  123 +2. after build finished, an folder named `engine-assets` is auto generated at `back-end/h5-api/public`
  124 +3. `preview.vue` is preview modal, the mobile div is an iframe which a wrapper for builded `engine-entry`
  125 +
  126 +
  127 +### 3. explanation for front-end components
  128 +
  129 +1. `lbp-`
  130 +> `lu-ban-plugin: plugins for luban-h5`：location: `front-end/h5/src/components/plugins`
docs/en/implementation/code-structure.md 0 → 100755
  View file @a6de3a6
  1 +# Code Structure
  2 +
  3 +## Front End
  4 +It is recommended to look at `router.js` first, and then start with `front-end/h5/src/views/Editor.vue`. Here is the entrance to the Editor.
  5 +
  6 +
  7 +```JavaScript
  8 +front-end/h5/src # source code for front end, includes: editor, work-manager, form-stat etc.
  9 +├── assets
  10 +│ ├── 403.svg
  11 +│ ├── 404.svg
  12 +│ ├── 500.svg
  13 +│ ├── logo.png
  14 +│ ├── placeholder-for-work.svg
  15 +│ └── unauth-page-illustration.svg
  16 +├── components
  17 +│ ├── core # core
  18 +│ │ ├── editor # editor module
  19 +│ │ │ ├── canvas # cavas：edit model + preview mode
  20 +│ │ │ │ ├── edit.js # canvas for edit mode
  21 +│ │ │ │ └── preview.js # canvas for preview mode
  22 +│ │ │ ├── edit-panel # config panel for actions, plugin props, animation, actions etc.
  23 +│ │ │ │ ├── action.js #
  24 +│ │ │ │ ├── props.js #
  25 +│ │ │ │ └── script.js #
  26 +│ │ │ ├── header
  27 +│ │ │ ├── modals
  28 +│ │ │ │ └── preview.vue # preivew modal
  29 +│ │ │ ├── shortcuts-panel # the shortcut buttons for plugins
  30 +│ │ │ │ ├── index.js
  31 +│ │ │ │ └── shortcut-button.js
  32 +│ │ │ └── index.js
  33 +│ │ ├── models #
  34 +│ │ │ ├── element.js #
  35 +│ │ │ ├── page.js #
  36 +│ │ │ └── work.js #
  37 +│ │ ├── styles
  38 +│ │ │ └── index.scss
  39 +│ │ └── support #
  40 +│ │ └── shape.js # drag&drop to change the shape of an element
  41 +│ ├── plugins # plugin list: button, form (submit button + input box), text, pictures etc.
  42 +│ │ ├── lbp-button.js
  43 +│ │ ├── lbp-form-button.js
  44 +│ │ ├── lbp-form-input.js
  45 +│ │ ├── lbp-picture-placeholder.jpg
  46 +│ │ ├── lbp-picture.js
  47 +│ │ └── lbp-text.js
  48 +│ └── HelloWorld.vue
  49 +├── constants #
  50 +│ └── api.js #
  51 +├── mixins #
  52 +│ └── load-plugins.js # load plugins
  53 +├── pages
  54 +│ ├── editor # entry for editor
  55 +│ ├── home
  56 +│ └── index
  57 +├── store
  58 +│ ├── modules
  59 +│ │ ├── editor.js
  60 +│ │ ├── element.js
  61 +│ │ ├── loading.js
  62 +│ │ ├── page.js
  63 +│ │ ├── user.js
  64 +│ │ ├── visible.js
  65 +│ │ └── work.js
  66 +│ ├── plugins # vuex plugins
  67 +│ │ └── undo-redo #
  68 +│ │ ├── History.js
  69 +│ │ └── index.js
  70 +│ └── index.js
  71 +├── utils
  72 +│ ├── element.js
  73 +│ ├── http.js
  74 +│ └── strapi.js
  75 +├── views
  76 +│ ├── work-manager
  77 +│ │ ├── form-stat
  78 +│ │ │ ├── column.js
  79 +│ │ │ ├── detail.vue
  80 +│ │ │ └── index.vue
  81 +│ │ ├── index.vue
  82 +│ │ └── list.vue
  83 +│ ├── About.vue
  84 +│ ├── Editor.vue # a wrapper around the core editor, where the list of plug-ins is loaded
  85 +│ └── Home.vue
  86 +├── App.vue
  87 +├── engine-entry.js # preview engine for previewing and viewing mobie page on your phone
  88 +├── main.js # entry for editor + work-manager
  89 +├── registerServiceWorker.js
  90 +└── router.js #
  91 +```
  92 +
  93 +---
  94 +
  95 +<Vssue issueId="9" />
  96 +Editor + work-manager (work management page) entry
  97 +
docs/zh/guides/form-submit.md renamed to docs/en/implementation/form-submit.md
  View file @a6de3a6
1 -# Form Submit 表单提交  
2 -TODO 1 +# Form Submit
  2 +> TODO
3 3
4 -- 4 --
5 5
docs/en/plugin-development/quick-start.md 0 → 100755
  View file @a6de3a6
  1 +# Dev Plugins
  2 +> TODO
  3 +
  4 +---
  5 +
  6 +<Vssue issueId="10" />
0 \ No newline at end of file 7 \ No newline at end of file
docs/zh/README.md
  View file @a6de3a6
1 ::: intro 1 ::: intro
2 <!-- ![Logo](https://cldup.com/7umchwdUBh.png) --> 2 <!-- ![Logo](https://cldup.com/7umchwdUBh.png) -->
  3 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  4 +
3 ## 鲁班H5 5 ## 鲁班H5
4 鲁班H5是基于Vue2.0开发的，通过拖拽+配置的形式，生成页面的工具。 6 鲁班H5是基于Vue2.0开发的，通过拖拽+配置的形式，生成页面的工具。
5 7
docs/zh/getting-started/deployment.md
  View file @a6de3a6
1 -# Deployment/部署 1 +# 部署
  2 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
2 3
3 ## 阿里云/腾讯云/Digital Ocean 4 ## 阿里云/腾讯云/Digital Ocean
4 -#### 云服务器(centos)  
5 -首先需要安装一些基础的软件包，请自行安装（具体参照其官网文档）  
6 -  
7 -- node  
8 -- npm  
9 -- nginx  
10 -- yarn  
11 -- pm2  
12 -  
13 -以下脚本仅供参考  
14 -  
15 -```bash  
16 -# install yarn  
17 -curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo  
18 -sudo yum install yarn -y  
19 -  
20 -# install nginx  
21 -sudo yum install nginx -y  
22 -# install pm2  
23 -npm install pm2 -g  
24 -# pm2 examples  
25 -# pm2 start server.js  
26 -# pm2 stop server  
27 -# pm2 restart server  
28 -# pm2 stop all  
29 -  
30 -``` 5 +> 以 Centos 为例，Ubuntu等其它发行版，请自行调整
  6 +
  7 +1. 预安装：
  8 +
  9 + - 首先需要安装一些基础的软件包，请自行安装（具体参照其官网文档）
  10 + - node
  11 + - npm
  12 + - nginx
  13 + - yarn
  14 + - pm2
  15 +
  16 + - 1.2 以下脚本仅供参考
  17 +
  18 + ```bash
  19 + # install yarn
  20 + curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  21 + sudo yum install yarn -y
  22 +
  23 + # install nginx
  24 + sudo yum install nginx -y
  25 + # install pm2
  26 + npm install pm2 -g
  27 + # pm2 examples
  28 + # pm2 start server.js
  29 + # pm2 stop server
  30 + # pm2 restart server
  31 + # pm2 stop all
  32 + ```
31 33
32 nginx 配置文件 demo 34 nginx 配置文件 demo
33 35
@@ -43,8 +45,8 @@ server { @@ -43,8 +45,8 @@ server {
43 proxy_busy_buffers_size 20M; 45 proxy_busy_buffers_size 20M;
44 46
45 ssl on; 47 ssl on;
46 - ssl_certificate cert/luban-api.pem;  
47 - ssl_certificate_key cert/luban-api.key; 48 + ssl_certificate cert/your-https.pem;
  49 + ssl_certificate_key cert/your-https.key;
48 ssl_session_timeout 5s; 50 ssl_session_timeout 5s;
49 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; 51 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
50 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 52 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
@@ -65,8 +67,8 @@ server { @@ -65,8 +67,8 @@ server {
65 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 67 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
66 proxy_pass http://localhost:1337; 68 proxy_pass http://localhost:1337;
67 } 69 }
68 - location / {  
69 70
  71 + location / {
70 root /home/centos/codebase/luban/luban-h5-dist/front-end/; 72 root /home/centos/codebase/luban/luban-h5-dist/front-end/;
71 #try_files $uri $uri/ /index.html; 73 #try_files $uri $uri/ /index.html;
72 } 74 }
@@ -165,7 +167,8 @@ plan.remote(remote =&gt; { @@ -165,7 +167,8 @@ plan.remote(remote =&gt; {
165 #### 中间可能遇到的一些问题： 167 #### 中间可能遇到的一些问题：
166 168
167 1. `Cannot parse privateKey: Unsupported key format`  169 1. `Cannot parse privateKey: Unsupported key format` 
168 -解决方案请参照：[Cannot parse privateKey: Unsupported key format](https://stackoverflow.com/questions/53400628/cannot-parse-privatekey-unsupported-key-format) 170 +
  171 + 解决方案请参照：[Cannot parse privateKey: Unsupported key format](https://stackoverflow.com/questions/53400628/cannot-parse-privatekey-unsupported-key-format)
169 172
170 173
171 ## Docker 部署 174 ## Docker 部署
@@ -174,11 +177,10 @@ plan.remote(remote =&gt; { @@ -174,11 +177,10 @@ plan.remote(remote =&gt; {
174 > 但仅供参考，此方案不是鲁班的官方的解决方案 177 > 但仅供参考，此方案不是鲁班的官方的解决方案
175 > 178 >
176 > 鲁班决定暂时不按照这种方案来做，可以先使用上面部署脚本来发布到服务器上，进行部署。 179 > 鲁班决定暂时不按照这种方案来做，可以先使用上面部署脚本来发布到服务器上，进行部署。
177 -> 鲁班后期考虑出一个简单版本docker image的部署方案，直接拉镜像，在服务器端就能直接跑起来。  
178 > 180 >
  181 +> 鲁班后期考虑出一个简单版本docker image的部署方案，直接拉镜像，在服务器端就能直接跑起来。
179 182
180 -请确保您的`80`端口和`443`端口均打开，如果已经配置了其它项目，请进行手工调整。  
181 - 183 +1. 请确保您的`80`端口和`443`端口均打开，如果已经配置了其它项目，请进行手工调整。
182 1. 修改`yourdomain.tld`为您的前端域名并解析到服务器。 184 1. 修改`yourdomain.tld`为您的前端域名并解析到服务器。
183 1. 修改`api.yourdomain.tld`为您的后端域名并解析到服务器。 185 1. 修改`api.yourdomain.tld`为您的后端域名并解析到服务器。
184 1. 依次执行以下命令。 186 1. 依次执行以下命令。
@@ -317,8 +319,11 @@ Docker命令详解（run篇） @@ -317,8 +319,11 @@ Docker命令详解（run篇）
317 319
318 320
319 ## Heroku 321 ## Heroku
320 -> 因为 Strapi + postgresql  在 Heroku 上还有一些坑，需要官方解决，这个方案暂时pending 322 +> TODO
321 323
322 --- 324 ---
323 325
  326 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  327 +
  328 +
324 <Vssue issueId="7" /> 329 <Vssue issueId="7" />
docs/zh/getting-started/discussion.md
  View file @a6de3a6
1 -# 交流群 1 +# 社区与交流群
2 2
3 3
  4 +### 论坛地址：[鲁班H5-社区](https://support.qq.com/products/93432/)
  5 +
  6 +
  7 +### 交流群
4 | 钉钉群 | 微信公众号 | 微信 | 8 | 钉钉群 | 微信公众号 | 微信 |
5 |---|---|---| 9 |---|---|---|
6 | <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交流| 10 | <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交流|
7 11
  12 +#### 需求收集
  13 +- [ ] 二级子域名
  14 +- [ ] 小程序
  15 +- [ ] 多浏览器适配
  16 +- [ ] 私有部署
  17 +- [ ] docker 部署
  18 +- [ ] PV、UV
8 19
9 20
10 --- 21 ---
11 22
  23 +> 如果有问题，欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  24 +
12 <Vssue issueId="11" /> 25 <Vssue issueId="11" />
13 \ No newline at end of file 26 \ No newline at end of file
docs/zh/getting-started/engine.md deleted 100755 → 0
  View file @4723612
1 -# 作品预览/渲染引擎  
2 -> 关于此部分有疑惑，请直接评论  
3 -  
4 -## 基础概念  
5 -作品预览的基本原理参见 [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)  
6 -  
7 -  
8 -```js  
9 -previewOne: async (ctx) => {  
10 - const work = await strapi.services.work.findOne(ctx.params);  
11 - return ctx.render('engine', { work });  
12 -},  
13 -```  
14 -  
15 ----  
16 -  
17 -<Vssue issueId="15" />  
18 \ No newline at end of file 0 \ No newline at end of file
docs/zh/getting-started/features.md
  View file @a6de3a6
@@ -56,5 +56,6 @@ @@ -56,5 +56,6 @@
56 - [x] 二维码预览 56 - [x] 二维码预览
57 57
58 --- 58 ---
  59 +> 如果有问题，欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
59 60
60 <Vssue issueId="2" /> 61 <Vssue issueId="2" />
61 \ No newline at end of file 62 \ No newline at end of file
docs/zh/getting-started/feedback.md deleted 100755 → 0
  View file @4723612
1 -# Feedback/意见反馈  
2 -  
3 -## 完善文档  
4 -  
5 -- [ ] 完善构建预览引擎文档  
6 -  
7 -弹框预览时，engine.js 缺失，导致预览失败。  
8 -需要说明如何构建 engine.js，以及解释 engine.js 的作用  
9 -  
10 - 1. 在 front-end/h5 目录下，运行：`node build/engine.webpack.js` (这个是用来生成预览引擎的东西)  
11 - 2. 构建完成之后,看下 后端的`h5-api/public` 里面会多一个文件夹 `engine-assets`  
12 - 3. 打开的预览窗口（preview.vue）,里面的小手机那个div 对应的其实是一个 iframe，可以看看对应的源码  
13 - 4. 也就是说，这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎，所以 `build/engine.webpack.js` 的 output dir 是在`back-end/h5-api/public`中的  
14 -  
15 -- [ ] 在 readme 中补充后端API的使用说明  
16 -  
17 -  
18 -## 需求收集  
19 -  
20 -- [ ] 二级子域名  
21 -- [ ] 小程序  
22 -- [ ] 多浏览器适配  
23 -- [ ] 私有部署  
24 -- [ ] docker 部署  
25 -- [ ] pv 统计  
26 -  
27 -  
28 -<Vssue issueId="8" />  
29 \ No newline at end of file 0 \ No newline at end of file
docs/zh/getting-started/introduction.md
  View file @a6de3a6
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 22
23 23
24 ### Screenshots 24 ### Screenshots
25 -> [在线访问地址](https://ly525.github.io/luban-h5) 25 +> [主页](http://api.luban-h5.wxjcart.com)
26 26
27 > [更多作品演示图片，点击查看](https://github.com/ly525/luban-h5/issues/15) 27 > [更多作品演示图片，点击查看](https://github.com/ly525/luban-h5/issues/15)
28 28
@@ -30,4 +30,6 @@ @@ -30,4 +30,6 @@
30 30
31 --- 31 ---
32 32
  33 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  34 +
33 <Vssue issueId="12" /> 35 <Vssue issueId="12" />
34 \ No newline at end of file 36 \ No newline at end of file
docs/zh/getting-started/qa.md deleted 100755 → 0
  View file @4723612
1 -# QA/常见问题答疑  
2 -  
3 -## 为何采用 Strapi  
4 -  
5 -## 如何贡献插件？  
6 -  
7 ----  
8 -  
9 -<Vssue issueId="3" />  
10 \ No newline at end of file 0 \ No newline at end of file
docs/zh/getting-started/quick-start.md
  View file @a6de3a6
1 # 快速开始 1 # 快速开始
2 -> 重要：关于此部分有疑惑，请在下面直接评论 2 +> 重要：关于此部分有疑惑，请在下面直接评论，或者到社区讨论
  3 +
  4 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  5 +
3 6
4 ## 基础概念 7 ## 基础概念
5 > 首先你需要大概了解下 Node.js 的相关生态、Node.js 的安装 8 > 首先你需要大概了解下 Node.js 的相关生态、Node.js 的安装
@@ -129,9 +132,21 @@ yarn serve # develop @@ -129,9 +132,21 @@ yarn serve # develop
129 ``` 132 ```
130 133
131 ### 2. 构建预览所需的渲染引擎 134 ### 2. 构建预览所需的渲染引擎
132 -1. 在 front-end/h5 目录下，运行：`yarn engine:build` (这个是用来生成预览引擎的东西)  
133 -2. 构建完成之后,看下 后端的 `h5-api/public` 里面会多一个文件夹 `engine-assets`  
134 -3. 打开的预览窗口（preview.vue）,里面的预览部分对应的其实是一个 iframe，可以看看对应的源码 135 +> 关于此部分有疑惑，请直接评论
  136 +
  137 +#### 基本原理
  138 +作品预览的基本原理参见 [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)
  139 +
  140 +```js
  141 +previewOne: async (ctx) => {
  142 + const work = await strapi.services.work.findOne(ctx.params);
  143 + return ctx.render('engine', { work });
  144 +},
  145 +```
  146 +#### 如何构建
  147 +1. 在`front-end/h5`目录下，运行：`yarn engine:build`
  148 +2. 构建完成之后,后端的`h5-api/public`里面会多一个文件夹 `engine-assets`
  149 +3. 打开的预览窗口`preview.vue`, 里面的预览部分对应的其实是一个 iframe，可以看看对应的源码
135 也就是说，这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎，所以 `build/engine.webpack.js` 的 `output dir` 是在`back-end/h5-api/public`中的 150 也就是说，这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎，所以 `build/engine.webpack.js` 的 `output dir` 是在`back-end/h5-api/public`中的
136 151
137 152
@@ -141,5 +156,7 @@ yarn serve # develop @@ -141,5 +156,7 @@ yarn serve # develop
141 全称为 `lu-ban-plugin:``鲁班H5的插件`，位置：`front-end/h5/src/components/plugins` 156 全称为 `lu-ban-plugin:``鲁班H5的插件`，位置：`front-end/h5/src/components/plugins`
142 157
143 --- 158 ---
  159 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  160 +
144 161
145 <Vssue issueId="6" /> 162 <Vssue issueId="6" />
146 \ No newline at end of file 163 \ No newline at end of file
docs/zh/getting-started/code-structure.md renamed to docs/zh/implementation/code-structure.md
  View file @a6de3a6
@@ -91,4 +91,7 @@ front-end/h5/src # å‰ç«¯æºç ç›®å½•ï¼šåŒ…å«ç¼–辑器ã€ä½œå“ç @@ -91,4 +91,7 @@ front-end/h5/src # å‰ç«¯æºç ç›®å½•ï¼šåŒ…å«ç¼–辑器ã€ä½œå“ç
91 91
92 --- 92 ---
93 93
  94 +> 欢迎大家到[é²ç­H5-社区](https://support.qq.com/products/93432/) 交æµï¼Œåœ¨è¿™é‡Œå¯ä»¥æé—®ã€å馈æ„è§å’Œå»ºè®®ï¼Œä¸Žä½œè€…直接互动
  95 +
  96 +
94 <Vssue issueId="9" /> 97 <Vssue issueId="9" />
95 \ No newline at end of file 98 \ No newline at end of file
docs/zh/implementation/form-submit.md 0 → 100755
  View file @a6de3a6
  1 +# 表单提交
  2 +
  3 +1. 找到页面中所有 input类型 且 包含 data-lbp-form-input 属性的元素，获取其 value。其对应的 key 为该组件对应的uuid
  4 +2. 构建一个 Form Data，使用 ajax提交即可
  5 +
  6 +---
  7 +
  8 +> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  9 +
  10 +
  11 +<Vssue issueId="13" />
0 \ No newline at end of file 12 \ No newline at end of file