中英文切换

hexo

感谢[陈年沉念] 的博文分享。

本文只提出几点需要特别注意的事项。

*第一, 有两个“点号” 在“/public/en” 的前面:

修改/en/_config.yml，修改内容如下：

   language: en </br>
   root: /en/  </br>
   public_dir: ../public/en  </br>

第二, 也有两个“点号” 在 “commonweal:” 的前面:

接下来在英文网站中添加中文入口。编辑/en/_config.yml，修改menu:中如下内容：

  commonweal: ../

顺便说一句, [陈年沉念]写的”/update.bat” 很方便且实用。

最后，我自己再补充一点，就是在完全Copy完Hexo网站跟目录的内容后，在新建的/en/文件夹下，node_modules文件夹里面的代码可能不能被完全复制粘贴，此时需要在/en/文件夹下运行以下代码方可顺利发布/en/到网络端：

先鼠标右键 git bash here，然后运行

npm install hexo --save
npm install

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

完成上述附加的必要操作后，就可以顺利推送双语或多语博客到网络端啦。

转载来源： https://chenyxmr.github.io/2016/08/04/hexo-bilingual/

前言搭建个人博客时采用的hexo非常方便，但由于本人比较喜欢英语所以希望能搭建一个双语网站同步更新内容，hexo官方有提供国际化解决方案，具体参见链接https://hexo.io/zh-cn/docs/internationalization.html 。但本人由于悟性比较低没有看明白这个插件应该怎么用，就索性自己用一个非常简单粗暴的方式实现了中英文双语网站。

首先，最终效果见本站。菜单栏中点击->English切换到英文网站，英文网站中点击->简体中文即切换回中文。当然每篇博文都需要自己翻译。

搭建教程完整复制网站

首先，将网站根目录全部复制，然后在网站根目录下建立en/文件夹并将所复制的内容粘贴至此。此时en/文件夹下有一份完整的网站文件，也就是说这是一个独立的hexo博客。

en即为English的缩写，代表英文网站，当然也可以添加其它语言，文件夹名字随个人喜好。

更改英文网站配置

修改/en/_config.yml，修改内容如下：

language: en root: /en/ public_dir: ../public/en

这里的public_dir代表最终生成静态文件的位置，由于最后要将英文网站静态网页跟中文静态网页放到同一根目录下，所以要进行修改。

添加语言切换入口

首先在中文网站中添加切换英文入口。语言切换入口对应网站的menu，编辑/_config.yml，修改menu:中如下内容：

commonweal: /en

这个键值对应所建立的英文网站文件夹的名称。

此处应该添加一个新的入口，但由于我的添加一直不正常所以直接将原有的公益菜单改成切换语言了~

再编辑/themes/next/languages/zh-Hans.yml，在menu:中修改如下字段：

commonweal: ->English

这个键值对应切换语言选项显示的内容。

接下来在英文网站中添加中文入口。编辑/en/_config.yml，修改menu:中如下内容：

commonweal: ../

再编辑/en/themes/next/languages/en.yml，在menu:中修改如下字段：

commonweal: ->简体中文

至此中英文站点即配置完成,如果英文网站需要更改细节直接更改en/下对应的文件就可以，和修改中文网站完全一样~

新建博文

每次在中文站点下新建博文并写好后，将博文复制到英文网站对应的目录下并修改成英文博文。

关于Hexo的中英文语言配置，我的做法是，在菜单栏添加一个按键，通过按键切换到中/英文界面，让中文文章只显示在中文页面，英文显示在英文页面。

插件安装

首先，安装hexo-generator-i18n插件

 npm install hexo-generator-i18n --save

然后修改*_config.yml*

language: [zh-CN,en]# hexo-generator-i18n 选项（可选，默认使用如下设置）i18n:  type: [page, post]  generator: [index, archive, category, tag]

这里并没有明白tyte和generator的作用，但是似乎不影响

之后是*在主题languages目录下添加对应的语言.yml文件(如zh.yml, en.yml)*

但是由于我使用的主题并不支持多语言，我也懒得弄，所有暂时没有管这一项

插件安装完成后，执行hexo clean & hexo g

会生成public/en目录，对于_post内的所有博文，都会在public里存放一份，en下存放一份。

那么就需要根据页面的语言，显示不同的博文。

博文配置

对于所有的markdown文章，都需要在文章内添加属性lang:zh-CN or lang:en，来区分中英文

网页配置

我通过url来区分中英文页面，对于中文，url是www.yoursite.com，英文，url是www.yoursite.com/en/,

这样，在js中检索url是否包含en，来判断显示中文还是英文界面。

修改主题, 我的主题路径是themes/vexo/layout/index.ejs

获取当前html的路径，并判断路径内是否存在en

<main class="app-body">
  <% var currentURL = page.path.split('/') %>
  <% if (currentURL.length === 1) { %>
    <% var lang = page.lang %>
  <% } else { %>
    <% var lang = currentURL.shift() %>
  <% } %>
  <% page.posts.each(function(post) { %>
  <% if (lang == post.lang) { %>
    <article class="article-card">
      <h2 class="article-head">
        <a href="<%- url_for(post.path) %>"><%- post.title %></a>
      </h2>
      <p class="article-date"><%- date(post.date, "LL") %></p>
      <% if (post.tags && post.tags.length) { %>
 [       <%- partial('_partial/tag', { tags: post.tags }) %>]
      <% } %>
      <div class="article-summary">
        <% if (post.excerpt) { %>
          <%- post.excerpt %>
        <% } else { %>
          <%- truncate(strip_html(post.content), { length: 150, omission: ' ...' }) %>
        <% } %>
      </div>
      <a class="more" href="<%- url_for(post.path) %>"><%- theme.excerpt_link %></a>
    </article>
  <% } %>
  <% }) %>

  <% if (page.total > 1){ %>
    <%- partial('_partial/pager') %>
  <% } %>
</main>

上述都完成，就可以通过www.yoursite.com/en进入英文网页，且该网页只有英文文章

添加切换语言按钮

修改theme下的_config.yml文件, 添加一个EN的按钮，跳转到英文界面

menu: Home: / Tags: /tags/ Archives: /archives/ Projects: /project/ About: /about/ EN: /en/

这里为了简单，没有动态修改EN这个按钮，提供从英文网页，跳转回中文网页的方式(实际上，点击Home按键，就跳转回中文了)

部署测试

hexo clean & hexo ghexo d

这里只配置了主页，其他页面暂时没有修改