可在Jimdo通过三种HTML5方式嵌入星级评分:一、用type="range"实现滑动评分;二、纯CSS+radio实现点击五星评分;三、iframe嵌入第三方托管评分页。

如果您希望在 Jimdo 网站中嵌入一个支持 HTML5 的评分组件(如星级评分),但 Jimdo 默认编辑器不提供原生星级控件,则需通过自定义 HTML 代码实现。以下是几种兼容 Jimdo 的 HTML5 评分组件嵌入方法:
一、使用原生 input[type="range"] 模拟五级评分
该方法利用 HTML5 原生 range 输入控件,配合 CSS 样式改造为横向滑动评分条,无需外部库,轻量且语义清晰。Jimdo 允许在“HTML 区块”中插入自定义代码,可直接部署。
1、登录 Jimdo 编辑器,定位到需添加评分组件的页面区域。
2、点击“+ 添加区块” → 选择“HTML”或“自定义 HTML”区块。
立即学习“前端免费学习笔记(深入)”;
3、粘贴以下代码:
<label for="rating">您的评分(1–5):</label><br><input type="range" id="rating" name="rating" min="1" max="5" value="3" step="1"><span id="rating-value">3</span><script>document.getElementById('rating').addEventListener('input', function() { document.getElementById('rating-value').textContent = this.value; });</script>
4、保存并预览,拖动滑块即可实时显示数值评分。
二、嵌入纯 CSS 星级点击组件(无 JavaScript)
此方案完全基于 HTML + CSS 实现五星点击评分,利用 :checked 伪类与相邻兄弟选择器触发样式切换,兼容 Jimdo 静态渲染环境,不依赖外部资源或 JS 执行权限。
1、在 Jimdo 的 HTML 区块中插入以下结构化代码:
<fieldset class="rating"><input type="radio" id="star5" name="rating" value="5"><label for="star5" title="5 stars">★</label><input type="radio" id="star4" name="rating" value="4"><label for="star4" title="4 stars">★</label><input type="radio" id="star3" name="rating" value="3"><label for="star3" title="3 stars">★</label><input type="radio" id="star2" name="rating" value="2"><label for="star2" title="2 stars">★</label><input type="radio" id="star1" name="rating" value="1"><label for="star1" title="1 star">★</label></fieldset><style>.rating { display: inline-flex; direction: rtl; unicode-bidi: bidi-override; }.rating > input { display: none; }.rating > label { font-size: 24px; color: #ddd; cursor: pointer; }.rating > input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #ffc107; }@media (max-width: 480px) { .rating > label { font-size: 20px; } }</style>
2、确保所有 <input> 和 <label> 成对嵌套,且 name 属性一致。
3、发布后点击任意星标,将高亮显示所选星级及左侧所有星标。
三、通过 iframe 嵌入第三方轻量评分工具
若需记录用户提交数据或支持多语言提示,可采用托管于外部静态服务的评分页,再以 iframe 方式嵌入 Jimdo 页面。该方式规避 Jimdo 无后端限制,且保持样式独立可控。
1、准备一个托管在 GitHub Pages 或 Netlify 的 HTML 文件,内容包含表单与星级交互逻辑。
2、在 Jimdo HTML 区块中插入 iframe 标签,宽度设为 100%,高度建议 180px:
<iframe src="https://yourdomain.com/rating-widget.html" width="100%" height="180" frameborder="0" allowtransparency="true" sandbox="allow-scripts"></iframe>
3、注意:必须启用 sandbox="allow-scripts" 属性,否则交互功能失效;同时确保目标页面启用 CORS 兼容头(如 Access-Control-Allow-Origin: *)。
4、保存后测试加载与点击响应是否正常。










