技术经验分享:idyll开源生成交互式web的标记语言试用

简介: 技术经验分享:idyll开源生成交互式web的标记语言试用

"

说明

Idyll is an open-source markup language and toolkit for producing //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjg1MDQ5Ng==.html

interactive web pages

You 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 中

参考资料


"
image.png
相关文章
|
3天前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
40 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
13天前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
33 1
|
17天前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
48 2
|
18天前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
34 3
|
27天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
29天前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
33 2
|
30天前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
123 0
|
17天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
36 0
|
1月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
1月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
20 0