开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用Handlebars.js(小胡子模板)制作i18n？

在使用Handlebars.js制作i18n时，我们需要遵循以下步骤：

安装Handlebars.js和i18n库：

首先，我们需要安装Handlebars.js和i18n库。可以使用npm或yarn进行安装。

npm install handlebars i18n

创建i18n配置文件：

接下来，我们需要创建一个i18n配置文件，例如：i18n.js。在这个文件中，我们需要配置i18n库的相关设置，例如语言文件的路径、默认语言等。

const i18n = require('i18n');

i18n.configure({
  locales: ['en', 'zh'],
  directory: __dirname + '/locales',
  defaultLocale: 'en',
  objectNotation: true,
  api: {
    '__': 'translate',
    '__n': 'translateN'
  }
});

module.exports = i18n;

创建语言文件：

接下来，我们需要在locales文件夹中创建语言文件。例如，我们可以创建一个名为en.json的英语语言文件和一个名为zh.json的中文语言文件。在这些文件中，我们需要定义相应的翻译词汇。

// en.json
{
  "welcome": "Welcome",
  "hello": "Hello, {{name}}!"
}

// zh.json
{
  "welcome": "欢迎",
  "hello": "你好，{{name}}!"
}

创建Handlebars模板：

接下来，我们需要创建一个Handlebars模板，例如：template.hbs。在这个模板中，我们可以使用i18n库提供的翻译函数来翻译模板中的文本。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
   <title>{{__ 'welcome'}}</title>
  </head>
  <body>
    <h1>{{__ 'hello' name=user.name}}</h1>
  </body>
</html>

编写JavaScript代码：

最后，我们需要编写JavaScript代码来渲染Handlebars模板，并将其输出到客户端。

const fs = require('fs');
const Handlebars = require('handlebars');
const i18n = require('./i18n');

// 读取模板文件
const template = fs.readFileSync('./template.hbs', 'utf-8');

// 编译模板
const compiledTemplate = Handlebars.compile(template);

// 设置用户信息
const user = {
  name: 'John Doe'
};

// 渲染模板
const renderedTemplate = compiledTemplate({
  user: user,
  __: i18n.__,
  __n: i18n.__n
});

// 输出模板
console.log(renderedTemplate);

现在，我们已经成功地使用Handlebars.js和i18n库来实现了国际化。当我们需要切换语言时，只需要修改i18n配置文件中的默认语言设置即可。

相关搜索:如何制作phpcms模板在Handlebars.js中跨多个模板使用相同的数据对象有没有办法通过jQuery来使用Handlebars.js注入模板？个人如何制作php模板如何制作简单的模板？如何使用Handlebars.js创建条件行类？如何在handlebars.js中使用一个模板，同时在其中使用多个对象？如何在带变量的html模板中使用anguluar i18n？如何绑定Handlebars.js模板上的数据以进行自动值更新？不知道如何制作模板如何使用子类制作数据模板实现的基础数据模板？如何在Sinatra中制作布局模板？如何从子模板子模板制作DependencyProperty，以便从父模板子模板访问？如何在Angular 7中制作XML模板如何使用rails i18n后备功能如何使用模板如何制作递归编译时可变结构模板如何制作基于类型的重载函数的模板？如何将webpack制作的模板导入Laravel 如何使用Vue i18n库翻译项目

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端最常用的模板引擎-Handlebars

接触过的模板引擎不算多，只用过jsp和ejs，jsp属于Java语系范畴也不算难，对于大前端来说，Handlebars怎么能够缺席，前端必须掌握技能之一，模板引擎Handlebars。

01

Handlebars初次了解

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

04

学习Handlebars，从这里开始！

当网站中很多页面的排版格式是相同的，只是其中内容不同，此工具就是比较好的解决方案。更多使用建议，看这里！

02

浅入vue脚手架手把手教你撸一个简单脚手架

整个vue init大致流程如我上图所示，应该还是比较好理解的。这里我大致阐述一下大致的流程。

03

JavaScript资源大全中文版（Awesome最新版）

本文主要介绍了高可维护的JavaScript代码规范，包括变量命名、注释、函数、正则表达式、对象、闭包、性能、模块化、私有变量、代码格式化、测试、编码规范、工具和最佳实践等。同时，本文还提供了常见代码规范的具体示例和JavaScript代码规范检查工具的输出结果。通过遵循这些规范，可以大大提高代码的可读性和可维护性，从而提高开发效率。

那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是，视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外，它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下：

02

开发一个简单的脚手架工具

像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。

02

【告别复制粘贴】动态模板生成小技巧

这是第 75 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：告别复制粘贴：动态模板生成小技巧 https://www.zoo.tea

03

WEB前端架构（二）

继续想到哪说哪，，继上一期说，定好了MVC结构之后就准备先搞些组件出来，首先就是抽个input出来。。目前有登录页和用户地址栏页， input至少有二种以上特性，一检测是否为空，input上弹出小提示框二如果为空，边框变色。思路是这样，伪代码： var createInput = { init:function(){ }, cInput:function(){ var _ths = this; $('<input>',{ 'id':_id, 'class':_cls, }).

06

构建自己的JavaScript模板小引擎

有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。

02

前端处理动态 url 和 pushStatus 的使用

起因是这样的，在尝试前后端分离的这条道路上，我自己也在不断摸索，感觉要把大部分的坑都踩踩了。目前我用的技术是：

02

用 nodejs 搭建脚手架

像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

03

19 vue 模板语法及简要实现原理

模板中的插值，包括文本插值与属性插值。在插值表达式中，还可以包涵一行简单的js代码。

01

动图展示 60+ 个前端常用插件库合集

https://segmentfault.com/a/1190000019151460

04

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli，react-native-cli 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。

02

前端脚手架开发入门

为什么需要脚手架脚手架本质上是一个工具，使用脚手架的目的就是摆脱构建工程时重复性的工作，尤其是当一个工程具有一定通用性时，工程脚手架的意义就更为突出。它可以让我们只需要一行命令，就可以初始化好一项工程，而不用费心费力的去做配置环境，安装依赖，解决依赖冲突这样的支线任务，可以直奔主线任务，早早下班~~ 概览开发一个的脚手架，通常需要如下npm包： commander: 强大的node命令行处理工具。能轻松的获取命令行的参数。 inquirer: 命令行交互工具，让你能以“问答”的交互方式来完成一系列的命

03

用 nodejs 搭建脚手架

像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

01

Easy Vue 国际化 - Vue I18n 插件教程

在当今全球化的世界中，对于web开发人员来说，创建可为来自不同地区和文化的用户轻松实现本地化的应用程序至关重要。Vue.js 是一个流行的 JavaScript 框架，它提供了一个名为 Vue I18n 的强大国际化（i18n）插件。在本文中，我们将逐步探讨使用 Vue I18n 插件实现 Vue 应用程序国际化的过程。无论您是经验丰富的 Vue 开发人员还是刚刚入门，本指南都将帮助您快速掌握如何轻松创建多语言应用程序。。

03

Github上开源的10大Javascript模板引擎，助力前端开发

目前前端主流的开发框架有Vue、React以及Angular等，但是依然有一部分开发人员并不会去使用这些框架，特别是一些偏向后端的开发者，可能依然在使用类似于jquery+Bootstrap的方式在开发一些项目，而且有些项目可能传统的方式更加合适。

03

基于Vue2.x的前端架构，我们是这么做的

通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。

02

【第3期】前端常用插件、工具类库汇总

iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素

01

Vue I18n 在 Vuetify 项目中使用

http://kazupon.github.io/vue-i18n/zh/introduction.html

05

nodejs 搭建脚手架

像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

03

如何查看jsplumb.js的API文档(YUIdoc的基本使用)

最近向一些同事推荐了网页中实现流程图绘制的工具库jsplumb.js，Community版本是开源的，在github的官方仓库的Wiki中能够找到社区版的官方指南，非常非常详细。但是在后来很多人反馈说找不到API文档，github官方仓库中的API文档链接失效了，jsplumb.js官网也找不到。

00

HTML语义化：HTML5新标签——template

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！目录一坨：二、那些年我们存放

09

uniapp 国际化开发指南【多语言】

国际化 (Internationalization，简称 i18n)：指软件开发具备支持多种语言的地区功能

03

【Vuejs】1082- Vue 项目前端多语言方案

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

03

圣诞快乐，手绘CSS圣诞老人，DIY浪漫圣诞礼物！

随着圣诞节的临近，街头巷尾都弥漫着浓浓的节日氛围。这不仅仅是一个普通的节日，更是一年中最适合表达爱意的时刻。今晚的平安夜，你是否想为你的女朋友准备一份特别的礼物？如果你是一位编程爱好者，那么我有一个非常独特且富有创意的想法——用CSS手绘一个可爱的圣诞老人！

01

Vue.js 项目前端多语言方案

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

05

Vue.js 项目前端多语言方案

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

00

Vue 项目前端多语言方案

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

02

Vue 项目前端多语言方案

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

02

前端插件以及部分细分网址梳理

图来源网络前端插件以及部分细分网址梳理插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程

09

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

大家好，我是 Gopal。目前就职于 Shopee，一家做跨境电商的公司，因为业务涉及到多个国家，所以我们各个系统都会涉及到国际化翻译。Vue I18n 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

01

「中高级前端进阶」从零开始手写一个 vue-cli 脚手架

关注我的小伙伴应该知道，我之前写过一篇脚手架相关的文章，在掘金收获了近一千个赞，被前端大全和奇舞周刊公众号转载。

01

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

大家好，我是 Gopal。目前就职于 Shopee，一家做跨境电商的公司，因为业务涉及到多个国家，所以我们各个系统都会涉及到国际化翻译。Vue I18n 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

04

Ghost ，博客系统代名词

Ghost 博客系统是前 WordPress 的一些优秀员工的创业项目。项目仍然采用 100% 开源，加上官方的收费托管的商业模式，目前已经发展成为一个非常的博客系统。

03

Vue 项目前端多语言方案实践

前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。

03

vue多语言插件vue-i18n使用介绍

多语言，一听很高大上，象征着与国际接轨，中文版（简体、繁体）、英文版、日文版等等。感觉6b的不要不要的，下面来看看vue怎么来实现这个操作了？（其实很简单）

03

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

「沙里淘金」精选浏览器端JavaScript库资源推荐

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

Ghost ，博客系统代名词

Ghost 博客系统是前 WordPress 的一些优秀员工的创业项目。项目仍然采用 100% 开源，加上官方的收费托管的商业模式，目前已经发展成为一个非常的博客系统。

05

那些前端常用的网站插件

这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。这个列表包含许多种类的资源，所以这里我将它们分组整理。 Javascript 库 📷 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js

05

Node.js脚手架开发完全指南「TypeScript版」

在koa入门系列中，我们介绍了koa2的最佳实践，并提供了一个koa2+TypeScript的最佳实践模版。但是每次拷贝模版再去修改，总是麻烦的，不如来开发一个脚手架，用命令行生成koa2项目。

01

jquery/vue/react前端多语言国际化翻译方案指南

每个开发者能希望编写的程序可以让全世界的用户使用，它要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。换种说法，「应用程序」的功能和「代码设计」时考虑在不同地区运行的需要，其代码适应不同区域要求。开发这样的的过程，就称为国际化（ internationalization），简称i18n。

02

前端工程化在WMS 6.0中的实践

Tech 导读在对大型前端项目进行国际化改造时，经常会遇到过工作量大、干扰项多以及容易遗漏等问题。而针对这些大量的重复的工作，自动化工具往往能提升很大的工作效率。本文将带读者了解node cli开发的基础知识，并对如何开发一个国际化校验工具来解决这些问题展开教学。 01 背景在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！仓储中台的愿景是，以用户为根本，通过发现、定义、设计、交付可被多BP

01

前端基建处理之组件库优化方案

前端基建开发一直被认为是前端开发中的 “高阶技能”。而内部组件库的开发则算是基建中比较“容易”入手的一个方向。所以咱们今天就利用这篇文章，来看一看组件库开发的优化方案。

01

angular入门教程_初学者织围巾简单教程慢动作

本课程是一个系列基础教程，目标是带领读者上手实战，课程以新版本 Angular 的 3 个核心概念作为主线：组件、路由、模块，加上业务开发过程中必须用到的特性：工具、指令、表单、RxJS、i18n、测试，一共分为 9 部分，34 篇文章。

02

Rancher 2.x 负载均衡配置及使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aixiaoyang168/article/details/88664263

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭