"
说明
Idyll is an open-source markup language and toolkit for producing //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjg1MDQ5Ng==.html
interactive web pagesYou give Idyll a markup file , and it compiles that file to a full bundle of HTML , Java Script , and CSS that can run in anyone' s web browser
Idyll can be used to create explorable explanations , and to add interactivity to blog engines and content management systems . The tool can generate standalone webpages or be embedded inside of an existing page , and can be fully themed to match your stylegui
大体意思:
IDYLL是一种用于生成交互式网页的开源标记语言和工具箱。
给I定dyll一个标记文件,可以将该文件编译成可以在任何人的Web浏览器中运行的HTML、Java脚本和CSS的完整包。
IDYLL可以用来创建可探索的解释,并增加博客引擎和内容管理系统的交互性。该工具可以生成独立的网页或嵌入现有页面中,并且可以完全主题以匹配您的样式GUI。
简单试用
安装
npm install -g idyll
基本使用
idyll create
效果
构建&&运行
构建
idyll build
运行
可以直接打开 build 目录
或者
idyll watch 构建同时使用dev server
查看效果
publish 到idyll 的pub server
可以直接访问demo
添加自定义组件
注意组件的名称 custom--component //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjgzOTc4NA==.html
components/ 目录components/custom-apps-component.js
const React = require('react');
class CustomAppsComponent extends React.Component {
render() {
const { hasError, idyll, updateProps, ...props } = this.props;
return (
[span class=""hljs-name"">div {...props}>
[span class=""hljs-name"">h1 >荣锋亮 demo react 自定义组件
);
}
}
module.exports = CustomAppsComponent;
使用:
index.idyll 添加
【CustomAppsComponent /】
效果:
说明
idyll 使用起来比较简单,同时直接组件化开发(直接使用react 组件),对于图表的支持也是很不错的,默认demo
就有集成d3的简单例子,同时还可以方便的集成到web app 中
参考资料
"