INSPINIA | i18

i18next

i18next 是一个功能齐全的国际化的JavaScript库。

演示示例文本

您可以点击按钮来更改演示文本的语言以及菜单上的简单功能。试一试：

i18next 配置

步骤 1

添加你的应用程序。定义文本的最佳方式是将其存储在外部的JSON文件。例如:

每一种语言都应该有自己的JSON文件！

en.json


  "app":
    "name": "INSPINIA 2.4"
  },
  "nav":
    "dashboard": "Dashboards",
    "graphs": "Graphs",
    "mailbox": "Mailbox",
  },
}

es.json


  "app":
    "name": "INSPINIA 2.4"
  },
  "nav":
    "dashboard": "Salpicadero",
    "graphs": "Gráficos",
    "mailbox": "El correo",
  },
}

步骤 2

下一步你需要在你想使用i18的所有地方添加HTML标签。

<div id="i18_links">
    <span data-i18n="nav.dashboard"> </span>
    <span data-i18n="nav.graphs"> </span>
    <span data-i18n="nav.mailbox"> </span>
</div>

步骤 3

下一步你需要初始化i18next插件：
JSON文件in /locales的文件夹。

$.i18n.init(
    resGetPath: 'locales/__lng__.json',
    load: 'unspecific',
    fallbackLng: false,
    lng: 'en'
}, function (t)
    $('.i18_links').i18n();
});

步骤 4

之后，如果你想改变你的语言只需要添加按钮和触发i18n.setLng()方法。

HTML 标记

<a class="btn btn-white set_en"> Set EN language</a>

<a class="btn btn-white set_es"> Set ES language</a>

Javascript 代码

$('.set_en').on('click', function ()
    i18n.setLng('en', function()
        $('.i18_links').i18n();
    });
});

$('.set_es').on('click', function ()
    i18n.setLng('es', function()
        $('.i18_links').i18n();
    });
});

您可以在这儿找到i18next关于特定功能和配置选项更多信息的官方文档

250 面国旗

为所有国家设置国旗图标。所有的图标都可与16x16、32x32和64x64大小。