在 Hexo 页面中嵌入多个 geogebra 动态图
geogebra 动态图可以在网页中显示数学公式，本文记录显示多个geogebra的方法。
实现原理
- 需要在 hexo 中可以嵌入 geogebra 图像
- 在
script语句中建立多个GGBApplet对象 - 在
window.onload函数中调用多个函数
实现方法
- 引入 js 文件
- 本地文件
<script src="/vvd_js/deployggb.js"></script> //路径指向自己建立的js文件- 官网文件
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>- 建立
GGBApplet对象并显示
<script>
// 建立自己的 ggb 参数
var parameters = {
"id": "ggbApplet",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
"filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};
// views 参数
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
// GGBApplet 对象
var applet = new GGBApplet(parameters, '5.0', views);
// 展示 geogebra 图像
window.onload = function()
{applet.inject('ggbApplet');};
</script>
//展示对象
<div id="ggbApplet"></div>- 多个 geogebra 图像显示
- 建立多个
parameters对象，对象中指定不同的id，定制不同的 geogebra 内容
var parameters1 = {
"id": "ggbApplet1",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
"filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};
var parameters2 = {
"id": "ggbApplet2",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
"filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417220853.ggb",
};- 建立views对象（可以复用）
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};- 建立多个GGBApplet 对象
// GGBApplet 对象 applet1
var applet1 = new GGBApplet(parameters1, '5.0', views);
// GGBApplet 对象 applet2
var applet2 = new GGBApplet(parameters2, '5.0', views);- window.onload 展示多个函数
// 展示 geogebra 图像
window.onload = function()
{applet1.inject('ggbApplet1'); // 参数与 parameters 中的 id 对应
applet2.inject('ggbApplet2');};- 在 Hexo页面引用对象
效果展示
- geogebra 图像 1
- geogebra 图像 2
参考代码
示例代码
<script src="/vvd_js/deployggb.js"></script>
<script>
// 参数 parameters1
var parameters1 = {
"id": "ggbApplet1",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
"filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};
// 参数 parameters2
var parameters2 = {
"id": "ggbApplet2",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
"filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417220853.ggb",
};
// views 参数
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
// GGBApplet 对象 applet1
var applet1 = new GGBApplet(parameters1, '5.0', views);
// GGBApplet 对象 applet2
var applet2 = new GGBApplet(parameters2, '5.0', views);
// 展示 geogebra 图像
window.onload = function()
{applet1.inject('ggbApplet1');
applet2.inject('ggbApplet2');};
</script>
- geogebra 图像 1
<div id="ggbApplet1"></div>
- geogebra 图像 2
<div id="ggbApplet2"></div>参考资料
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021年4月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录