Jekyll 如何制作Netlify CMS'；列表小部件返回数字

我想在我的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 %}

代码工作正常，正确添加了

fill

类

但当我将Netlify CMS与列表小部件一起使用时，它会将字符串而不是数字返回到

级别

列表，如下所示：

skills:
  - levels:
      - '1'

所以代码不起作用，如何使它返回数字

我试过的

• 引用

  i

  ，但它给了我一个错误
• 使用

  值类型：“int”

  ，不起作用

我的配置

---

你能不能用一个数学过滤器强制这个字符串转换成一个数字，就像这样

{{ yourstring | divided_by:1 }}

资料来源：

更新

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

{% 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 %}

{%page.skills%}
{%分配所有_级别=“1,2,3,4,5,6,7,8,9,10,11,12,13,14,15”|拆分：'，'%}
{所有_级别中的级别为%}
{{level}}

{%endfor%}
{%endfor%}

使用NetlifyCMS可以将数字写入字符串或数值

如果您的首要任务是获取字符串值，则应使用

valueType

：

-标签：“英雄技能”
名称：“技能”
小部件：“列表”
必填项：false
领域：
-{标签：“技能编号”，名称：“编号”，小部件：“编号”，值类型：“int”，默认值：1}
-{标签：“级别”，名称：“级别”，小部件：“列表”}

没有一个内置小部件可以输出数字列表（不是字符串），但是当内置小部件不工作时，您可以始终使用自定义小部件。自定义小部件是React组件，我们为那些不使用模块系统的组件发布全局钩子（

createClass

，

h

）。文档中的更多内容：

对于您的特定情况，您可以修改docs示例中的Categories小部件，使其仅处理数字并将其输出。在Netlify CMS的

index.html

文件的body标记末尾添加以下内容：

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

var NumberListControl=createClass({
handleChange:函数（e）{
var value=e.target.value.replace（/[^0-9，]/，''）；
this.props.onChange（value.split（'，'））.map（function（val）{
var trim=val.trim（）；
返回修剪？parseInt（修剪，10）：修剪；
}));
},
render:function（）{
var值=this.props.value；
返回h（'输入'{
键入：“文本”，
value:value？value.join（“，”）：“”，
onChange:this.handleChange，
className:this.props.classNameWrapper，
});
}
});
var NumberListPreview=createClass({
render:function（）{
返回h（'ul'，{}，
this.props.value.map（函数（val，index）{
返回h（'li'，{key:index}，val）；
})
);
}
});
CMS.registerWidget（'number_list'，NumberListControl，numberListReview）；

我在哪里实现这一点？似乎无法理解，因为字符串位于前面的matterGood point。。。我已经用另一种解决方案更新了我的答案。我认为你没有抓住重点，html处于良好的位置，问题是CMS返回的前置值是字符串类型。你是对的。我知道。我的解决方案是一种变通办法。而且，从其他答案来看，我的替代方案似乎也没那么糟糕。：-）当你查看frontmatter时，你会看到数字周围的引号？在CloudCannon中，这可以非常优雅地解决：@talves是的……你实际上没有使用数字小部件-你在列表小部件中输入值，它只输出字符串。如果将数字字段嵌套在列表字段中，则会得到一个对象列表，但这仍然不是您想要的。开始怀疑Netlify CMS是否需要允许位于小部件和输出之间的转换器修改单个值。或者让

valueType

config选项成为一个由多个小部件实现的约定。我在问题中写过它，它不起作用，idk这是一个有趣的用例。我可以理解Shawn指的是什么，但似乎CMS应该更优雅地处理这个问题，或者当您要求同意

valueType

时出现错误-开始怀疑

valueType

是否应该是大多数小部件中实现的约定，尽管接受的值会有所不同。

{% 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 %}

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