代码之家 › 专栏 › 技术社区 › Faishal Irawan

如何使Netlify CMS的列表小部件返回数字

netlify-cms netlify jekyll

3

Faishal Irawan · 技术社区 · 7 年前

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

3 回复 | 直到 7 年前

1

7

Shawn Erquhart 7 年前

没有任何内置小部件可以输出数字列表(不是字符串),但当内置小部件不工作时,您可以始终使用自定义小部件。自定义小部件是React组件,我们发布全局挂钩( createClass , h )对于不使用模块系统的用户。文档中的更多内容: https://www.netlifycms.org/docs/custom-widgets/#registerwidget

对于您的特定情况,您可以修改docs示例中的Categories小部件,使其仅处理数字并将其输出。将此添加到 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>

2

3

talves 7 年前

使用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"}

3

0

Mr. Hugo 7 年前

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

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