Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chinanf-boy/glorious-demo-zh
中文翻译:<glorious-codes/glorious-demo> 演示代码的最简单方法.(web) :heart: 校对 ✅
https://github.com/chinanf-boy/glorious-demo-zh
code docs glorious web zh
Last synced: 24 days ago
JSON representation
中文翻译:<glorious-codes/glorious-demo> 演示代码的最简单方法.(web) :heart: 校对 ✅
- Host: GitHub
- URL: https://github.com/chinanf-boy/glorious-demo-zh
- Owner: chinanf-boy
- Created: 2018-11-19T02:10:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-29T04:54:21.000Z (almost 6 years ago)
- Last Synced: 2024-10-28T05:19:35.739Z (2 months ago)
- Topics: code, docs, glorious, web, zh
- Language: Shell
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# glorious-codes/glorious-demo [![explain]][source] [![translate-svg]][translate-list]
[explain]: http://llever.com/explain.svg
[source]: https://github.com/chinanf-boy/Source-Explain
[translate-svg]: http://llever.com/translate.svg
[translate-list]: https://github.com/chinanf-boy/chinese-translate-list
[size-img]: https://packagephobia.now.sh/badge?p=Name
[size]: https://packagephobia.now.sh/result?p=Name
「 演示代码的最简单方法.(web) 」
[中文](./readme.md) | [english](https://github.com/glorious-codes/glorious-demo)
---
## 校对 ✅
翻译的原文 | 与日期 | 最新更新 | 更多
---|---|---|---
[commit] | ⏰ 2018-11-09 | ![last] | [中文翻译][translate-list]
[last]: https://img.shields.io/github/last-commit/glorious-codes/glorious-demo.svg
[commit]: https://github.com/glorious-codes/glorious-demo/tree/5d43a5166803eba6fc5525979f6441569793332b
- [x] [存储库维基百科](https://github.com/chinanf-boy/glorious-demo-zh/wiki)
### 贡献
欢迎 👏 勘误/校对/更新贡献 😊 [具体贡献请看](https://github.com/chinanf-boy/chinese-translate-list#贡献)
## 生活
[If help, **buy** me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰](https://github.com/chinanf-boy/live-need-money)
---
# glorious 的演示
> 演示代码的最简单方法.
[](https://circleci.com/gh/glorious-codes/glorious-demo)
[](https://codecov.io/gh/glorious-codes/glorious-demo)
### 目录
- [安装](#%E5%AE%89%E8%A3%85)
- [基本用法](#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95)
- [API](#api)
- [`openApp`](#openapp)
- [`write`](#write)
- [`command`](#command)
- [`respond`](#respond)
- [`end`](#end)
- [贡献](#%E8%B4%A1%E7%8C%AE)
- [测试](#%E6%B5%8B%E8%AF%95)
## 安装
```
npm install @glorious/demo --save
```
## 基本用法
```html
```
_注意:如果您不使用包管理器,请从第三方[CDN 提供商](https://github.com/chinanf-boy/glorious-demo-zh/wiki/CDN-Providers-zh)加载._
```javascript
// 构造函数,接收 selector 的 指示
// 也就是在您的页面中，注入演示的位置。
const demo = new GDemo('#container');
const code = `
function greet(){
console.log("Hello World!");
}
greet();
`;
demo
.openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
.write(code, {onCompleteDelay: 1500})
.openApp('terminal', {minHeight: '350px', promptString: '$'})
.command('node ./demo', {onCompleteDelay: 500})
.respond('Hello World!')
.command('')
.end();
```
_注意:查看[这里](https://github.com/chinanf-boy/glorious-demo-zh/wiki/Syntax-highlight-zh)知道如何使用 Prism 来高亮您的代码._
### API
#### `openApp`
打开或最大化打开的应用程序.
```javascript
/*
** @applicationType: String [required]
** @options: Object [optional]
*/
// 可能的值是'editor'或'terminal'
const applicationType = 'terminal';
const openAppOptions = {
minHeight: '350px',
windowTitle: 'bash',
promptString: '~/my-project $', // 仅适用于“terminal”应用程序
onCompleteDelay: 1000 // 执行下一个方法之前的延迟
};
demo.openApp(applicationType, openAppOptions).end();
```
#### `write`
在打开的编辑器应用程序中，写入一些代码.
```javascript
/*
** @codeSample: String [required]
** @options: Object [optional]
*/
// 标签和换行符将被保留
const codeSample = `
function sum(a, b) {
return a + b;
}
sum();
`;
const writeOptions = {
onCompleteDelay: 500 // 执行下一个方法之前的延迟
};
demo
.openApp('editor')
.write(codeSample, writeOptions)
.end();
```
#### `command`
在打开的终端应用程序中，写入一些命令.
```javascript
/*
** @command: String [required]
** @options: Object [optional]
*/
const command = 'npm install @glorious/demo --save';
// 为此命令和以下命令重新定义提示字符串
const promptString = '$';
// 可以选择是HTML字符串：
const promptString = '$';
const commandOptions = {
promptString,
onCompleteDelay: 500 // 执行下一个方法之前的延迟
};
demo
.openApp('terminal')
.command(command, commandOptions)
.end();
```
#### `respond`
在打开的终端应用程序上，显示一些响应.
```javascript
/*
** @response: String [required]
** @options: Object [optional]
*/
// 换行符将被保留
const response = `
+ @glorious/demo successfully installed!
+ v0.1.0
`;
// 可以选择, HTML字符串：
const response = `
+ @glorious/demo successfully installed!
+ v0.6.0
`;
const respondOptions = {
onCompleteDelay: 500 // 执行下一个方法之前的延迟
};
demo
.openApp('terminal')
.respond(response, respondOptions)
.end();
```
#### `end`
表示演示结束。不要忘记在演示结束时，调用它。否则,将不会播放演示.
## 贡献
1. 安装[node](https://nodejs.org/en/)。下载"推荐给大多数用户"版本.
2. 克隆回购:
```bash
git clone [email protected]:glorious-codes/glorious-demo.git
```
3. 转到项目目录:
```bash
cd glorious-demo
```
4. 安装项目依赖项:
```bash
npm install
```
5. 建立项目:
```bash
npm run build
```
## 测试
确保您添加的所有代码，都包含在单元测试中:
```bash
npm run test -- --coverage
```