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

Question

Я хочу использовать Netlify CMS для своего сайта Jekyll, и у меня есть этот макет:

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

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

Answer 2

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

Answer 3

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

{{ yourstring | divided_by:1 }}

Источник: https://help.shopify.com/themes/liquid/filters/math-filters

ОБНОВИТЬ

Поскольку предыдущее решение нелегко реализовать, я выбрал другой угол для решения проблемы. Следующий код не предполагает, что уровень является числом:

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