Как сделать так, чтобы виджет списка Netlify CMS возвращал номер

Ни один из встроенных виджетов не может выводить список чисел (которые не являются строками), но вы всегда можете использовать собственный виджет, когда встроенные виджеты не работают. Пользовательские виджеты являются компонентами React, и мы публикуем глобальные хуки (createClass, h) для тех, кто не использует модульную систему. Подробнее в документации: https://www.netlifycms.org/docs/custom-widgets/#registerwidget

В вашем конкретном случае вы можете изменить виджет «Категории» из примера с документами, чтобы работать только с числами и выводить их. Добавьте это в конец тега body в вашем 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>

Использование виджета «Число» NetlifyCMS позволяет записывать числа в виде строки или числа. ценить.

Вы должны использовать 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"}

Разве вы не можете просто использовать математический фильтр, чтобы заставить эту строку преобразоваться в число, как это?

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