gpt4 book ai didi

jekyll - 如何使 Netlify CMS 的列表小部件返回数字

转载 作者:行者123 更新时间:2023-12-03 21:30:15 26 4
gpt4 key购买 nike

我想为我的 Jekyll 网站使用 Netlify CMS,我有这样的布局:

{% for skills in page.skills %}
<div class="guide-skill">
<div class="guide-skill-fill">
{% for i in (1..15) %}
<div class="{% if skills.levels contains i %}fill{% endif %} skill-check"><p>{{ i }}</p></div>
{% endfor %}
</div>
</div>
{% endfor %}

以及我在使用此布局的文本编辑器中编写的页面的前端:

skills:
- levels:
- 1

代码运行良好,fill 类已正确添加。

但是当我使用带有列表小部件的 Netlify CMS 时,它会将字符串而不是数字返回到 levels 列表,如下所示:

skills:
- levels:
- '1'

所以代码不起作用,如何让它返回数字?

我尝试过的

  • 引用i,但它给了我一个错误
  • 使用 valueType : "int",没用

我的配置

- label: "Hero Skills"
name: "skills"
widget: "list"
required: false
fields:
- {label: "Skill Number", name: "number", widget: "number"}
- {label: "Levels", name: "levels", widget: "list"}

最佳答案

没有一个内置小部件可以输出数字列表(不是字符串),但是当内置小部件不起作用时,您始终可以使用自定义小部件。自定义小部件是 React 组件,我们为不使用模块系统的人发布全局 Hook (createClassh)。更多文档:https://www.netlifycms.org/docs/custom-widgets/#registerwidget

对于您的特定情况,您可以修改文档示例中的类别小部件,使其仅处理数字并同时输出它们。在您的 index.html 文件中为 Netlify CMS 添加正文标记的末尾:

<script>
var NumberListControl = createClass({
handleChange: function(e) {
var value = e.target.value.replace(/[^0-9, ]/, '');
this.props.onChange(value.split(',').map(function(val) {
var trimmed = val.trim();
return trimmed ? parseInt(trimmed, 10) : trimmed;
}));
},

render: function() {
var value = this.props.value;
return h('input', {
type: 'text',
value: value ? value.join(', ') : '',
onChange: this.handleChange,
className: this.props.classNameWrapper,
});
}
});

var NumberListPreview = createClass({
render: function() {
return h('ul', {},
this.props.value.map(function(val, index) {
return h('li', {key: index}, val);
})
);
}
});

CMS.registerWidget('number_list', NumberListControl, NumberListPreview);
</script>

关于jekyll - 如何使 Netlify CMS 的列表小部件返回数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47938934/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com