为带有多种语言的 Jekyll 博客添加多语言选择

为带有多种语言的 Jekyll 博客添加多语言选择

发布于 2018-03-06 06:47 更新于 2018-09-01 00:13

我有几篇博客是用多种语言编写的,一开始我是在每篇博客中添加其他语言的链接,但多语言博客多了之后就成了复制粘贴了。是时候做一个通用的布局来实现多语言博客了!

本文将为大家提供一个我编写好的多语言博客选择器(MIT License)。


先来看看效果。现在,请选择一个阅读语言:

English русский 繁體中文 简体中文 日本語 ไทย

不要惊讶:其实这里的每一种语言都指向了你正在阅读的简体中文?。

编写一个简单的语言选择器

html 里可以用 <select> 来做选择器。当然,本文只是用 <select> 当作例子,你也可以做成表格型的、链接型的或者其他更多更炫酷的样子。

<select> 的最简例子(可以直接写到 markdown 里):

<select> <option value="/post/multi-language-in-jekyll-blog.html">English</option> <option value="/post/multi-language-in-jekyll-blog.html">中文</option> </select>

来看看效果: English 中文

然而,我们希望在点击的时候自动跳转到对应的链接。于是,我们为 selectonchange 事件添加处理函数:

<select onchange="self.location.href=options[selectedIndex].value"> <option value="/post/multi-language-in-jekyll-blog.html">English</option> <option value="/post/multi-language-in-jekyll-blog.html">中文</option> </select>

再试试选择一下: English 中文

这就可以生效了。

引入页面配置元数据

毕竟博客有多篇,终归要引入配置的。现在我们为这篇文章配置两种语言。(考虑到更通用的情况,我将一种语言定义为一种 version。)

version: current: 简体中文 versions: - English: /post/multi-language-in-jekyll-blog.html - 中文: /post/multi-language-in-jekyll-blog.html

这个配置是要放到博客 markdown 的元数据头里的。

制作布局文件

为了更加通用,我在 _include 文件夹中新建了 post-version-selector.html 的布局文件,然后在每一个需要引入语言选择器的地方加上 {% include post-version-selector.html %}(比如本文一开始的那个语言选择器就是通过在那个地方加上了这句话生成的。)

现在,我们把之前写的 select 搬到 post-version-selector.html 文件中,并引入页面中配置好的各语言路径。

{%- comment -%} MIT Licensed {%- endcomment -%}
{%- if page.versions -%}
  <select onchange="self.location.href=options[selectedIndex].value">
    {%- for version_hash in page.versions -%}
      {%- for version in version_hash -%}
        {%- assign key = version[0] -%}
        {%- assign value = version[1] -%}
        {%- if page.version.current == key -%}
          <option value="{{ site.baseurl }}{{ page.url }}" selected="selected">{{ key }}</option>
        {%- else -%}
          <option value="{{ value }}">{{ key }}</option>
        {%- endif -%}
      {%- endfor -%}
    {%- endfor -%}
  </select>
{%- endif -%}

统一解释一下:

  1. 这里使用的 liquid 语言标记中都添加了短线 -,即 {%- if condition -%}{%- endif -%},这是为了将 liquid 语言占用的空行移除掉。
    • 不同于原生的 html,在 markdown 中的 html 是受到空行影响的,如果 <select> 的各个 <option> 之间有空行,那么整个 select 会被 markdown 解析器活生生拆掉。
  2. liquid 中如果要遍历 key-value 值,需要使用 for 来取出其中的 key 和 value。
    • 就是 {%- for version in version_hash -%} 这一行,虽然有个 for,但其实只会执行一次。

参考资料

本文会经常更新,请阅读原文: https://walterlv.com/post/multi-language-in-jekyll-blog.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 (walter.lv@qq.com)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大史住在大前端

【Recorder.js+百度语音识别】全栈方案技术细节

技术栈:React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

5043
来自专栏一“技”之长

iOS8新特性扩展(Extension)应用之三——照片编辑插件

        通过前几篇博客的介绍,我们了解到扩展给app提供的更加强大的交互能力,这种强大的交互能力另一方面体现在照片编辑插件的应用。

902
来自专栏FreeBuf

Paypal的一个Dom型XSS漏洞分析

前言 DOM xss也称为第三种类型的xss或者类型0。现在DOM型的xss越来越多了,除了因为各种JS库比如YUI,Jquery,Jquery mobile...

2165
来自专栏张善友的专栏

Expression Web设计工具

从MS company store买了个Expression web软件,在Vista下安装了一个,今后可以用这个工具和Vistual studio 2005协...

19810
来自专栏禁心尽力

采用HTML5之"data-"机制自由提供数据

周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递。     ...

20910
来自专栏云瓣

通过一个demo了解Redux

TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象;使用数据流能帮我们明确了行为对应的响应,这和react的状态可预...

34510
来自专栏IMWeb前端团队

移动端tryjs异常捕获

上周处理了一下群活动的badjs,第一步是摆脱Script error.,捕获异常栈,找到自己是错在哪里~ 分享一下这个步骤 异步的切入点: 1、XMLHttp...

2266
来自专栏何俊林

SuperIndicator开源库源码分析

背景:为什么有这个库,在经常开发中,会碰到,显示广告位图片,精彩推荐,及比较好的,希望能直观显示到用户看的。那么SuperIndicator正是这样一个类库。 ...

2015
来自专栏小狼的世界

学习使用YUI3

对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目...

872
来自专栏全沾开发(huā)

函数节流与函数防抖

函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了,两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时,顺便搜了一些相关博客 发现...

4516

扫码关注云+社区

领取腾讯云代金券