3

I want to use Netlify CMS for my Jekyll site and I have this layout:

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

and the front matter of page that I write in text editor that uses this layout :

skills:
  - levels:
      - 1

the code works fine, the fill class is added properly.

But when I use Netlify CMS with list widget, it returns string instead of number to the levels list, like this :

skills:
  - levels:
      - '1'

So the code doesn't work, how to make it returns number?

What I've tried

  • Quote the i, but it gave me an error
  • Use valueType : "int", didn't work

My config

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

3 回答 3

7

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

对于您的特定情况，您可以修改 docs 示例中的 Categories 小部件，使其仅处理数字并输出它们。index.html在您的 Netlify CMS 文件的 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>
于 2017-12-22T18:11:34.613 回答
3

使用 NetlifyCMS 'Number' 小部件允许将数字写入字符串或数值。

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"}
于 2017-12-22T14:49:12.087 回答
0

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

{{ 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 %}
于 2017-12-22T12:24:05.747 回答