如何使网络化CMS的列表小部件返回编号

Question

我想为我的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"}

Answer 1

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

对于您的特定情况，您可以修改文档示例中的"类别"小部件，以仅处理数字并输出它们。在 Netlify CMS 的index.html文件中的正文标记末尾添加以下内容：

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

Answer 2

使用 NetlifyCMS 'Number' widget 允许将数字写成字符串或数字值。

如果你的前言正在获取一个字符串值，你应该使用valueType：

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

Answer 3

你不能像这样使用数学过滤器强制这个字符串转换为数字吗？

{{ yourstring | divided_by:1 }}

资料来源：https://help.shopify.com/themes/liquid/filters/math-filters#divided_by

更新

由于以前的解决方案不容易实现，我选择了另一个角度来解决问题。以下代码不假定级别为数字：

{% for skills in page.skills %}
<div class="guide-skill">
<div class="guide-skill-fill">
{% assign all_levels = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" | split: ',' %}
{% for level in all_levels %}
<div class="{% if skills.levels contains level %}fill{% endif %} skill-check"><p>{{ level }}</p></div>
{% endfor %}
</div>
</div>
{% endfor %}