如何统一Netlify config.yml与Jekyll数据文件中的语言配置

方案1：通过Netlify CMS的JS配置动态读取语言列表 #

Netlify CMS支持用JavaScript定义配置，替代静态的config.yml，可以实现动态读取语言列表：

1. 项目根目录创建admin/config.js文件，替换原有的admin/config.yml
2. 在JS中读取_data/languages.yml内容，自动生成select部件的options

示例代码：

import yaml from 'yaml';

// 读取语言数据文件
fetch('/_data/languages.yml')
  .then(response => response.text())
  .then(yamlText => {
    const languages = yaml.parse(yamlText);
    // 转换为CMS需要的选项格式（建议在languages.yml中新增cms_label字段存全称）
    const languageOptions = languages.map(lang => ({
      label: lang.cms_label || lang.label,
      value: lang.value
    }));

    // 初始化Netlify CMS配置
    CMS.init({
      config: {
        backend: {
          name: 'git-gateway',
          repo: '你的仓库地址'
        },
        collections: [
          {
            name: 'posts',
            label: '文章',
            fields: [
              // 其他字段配置...
              {
                label: 'Language',
                name: 'language',
                widget: 'select',
                options: languageOptions
              }
            ]
          }
        ]
      }
    });
  });

注意：需要在admin/index.html中引入yaml解析库（如CDN方式），确保CMS加载逻辑适配JS配置。

方案2：用预构建脚本自动同步语言列表 #

如果不想修改CMS配置方式，可通过Node.js脚本在构建前自动同步两份文件的语言列表：

1. 安装依赖：npm install js-yaml fs-extra
2. 创建脚本文件scripts/sync-languages.js：

const yaml = require('js-yaml');
const fs = require('fs-extra');

async function syncLanguages() {
  // 读取Jekyll语言数据
  const langData = yaml.load(await fs.readFile('_data/languages.yml', 'utf8'));
  // 转换为CMS需要的选项格式
  const cmsOptions = langData.map(lang => ({
    label: lang.cms_label || lang.label,
    value: lang.value
  }));

  // 读取并更新Netlify CMS配置
  let cmsConfig = yaml.load(await fs.readFile('admin/config.yml', 'utf8'));
  const targetCollection = cmsConfig.collections.find(col => col.name === 'posts'); // 替换为你的集合名称
  const languageField = targetCollection.fields.find(field => field.name === 'language');
  languageField.options = cmsOptions;

  // 写回更新后的配置文件
  await fs.writeFile('admin/config.yml', yaml.dump(cmsConfig, { indent: 2 }));
  console.log('语言列表已同步到Netlify CMS配置');
}

syncLanguages().catch(err => console.error(err));

3. 在package.json的scripts中添加预构建命令：

"scripts": {
  "prebuild": "node scripts/sync-languages.js",
  "build": "jekyll build"
}

每次执行npm run build时，脚本会自动将_data/languages.yml的内容同步到Netlify CMS配置中，只需维护前者即可。

补充：统一语言数据结构 #

为适配Jekyll（用缩写标签）和Netlify CMS（用全称标签）的不同需求，建议在_data/languages.yml中新增cms_label字段：

- value: "nl"
  label: "NL"
  cms_label: "Dutch"
- value: "en"
  label: "EN"
  cms_label: "English"
- value: "fr"
  label: "FR"
  cms_label: "French"
- value: "de"
  label: "DE"
  cms_label: "German"
- value: "ja"
  label: "Japanese"
  cms_label: "Japanese"
- value: "zh"
  label: "Mandarin"
  cms_label: "Chinese"

这样两边都能读取到各自需要的标签文本。

内容的提问来源于stack exchange，提问作者The Oddler