在 Hexo 页面中嵌入多个 geogebra 动态图

本文最后更新于：2024年5月7日下午

geogebra 动态图可以在网页中显示数学公式，本文记录显示多个geogebra的方法。

实现原理

需要在 hexo 中可以嵌入 geogebra 图像
在 script 语句中建立多个 GGBApplet 对象
在 window.onload 函数中调用多个函数

实现方法

引入 js 文件

本地文件

1	`<script src="https://uipv4.zywvvd.com:33030/HexoFiles/js/vvd_js/deployggb.js"></script> //路径指向自己建立的js文件`

官网文件

1	`<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://uipv4.zywvvd.com:33030/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://uipv4.zywvvd.com:33030/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://uipv4.zywvvd.com:33030/HexoFiles/image_canglan/20210417220853.ggb",
};

建立views对象（可以复用）

1	`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="https://uipv4.zywvvd.com:33030/HexoFiles/js/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://uipv4.zywvvd.com:33030/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://uipv4.zywvvd.com:33030/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>