Flarum 添加导航并实现 i18n

Flarum 是一个开源论坛软件，基于 PHP Laravel 打造，外观很好看，功能也不错，一直想试一试。近期我厂要建社区，在我的强烈建议下，就选用了它。

Flarum 诞生很久了，现在的版本是 0.11.1-beta，还是测试版。官网也反复强调，不要把 flarum 用在生产环境，因为一切还不稳定。——这点从文档也能看出来，有些范例代码没法跑在最新版软件上。

换言之，坑比想象的多。经过将近两周断断续续的折腾，踏空很多次，完成了一些些小东西。接下来分享一下，也当给自己做笔记了。

插件 是 Flarum 里最重要的概念，按照设计，Flarum 只提供最基础的架构和论坛功能，其它功能都交给插件来完成。甚至连顶部导航也是如此，类似企业官网都要求统一视觉风格，所以我的第一项工作就是研究插件，添加导航。

0. 搭建论坛

简单记一下搭建论坛的方式。

1. 安装 composer。参考 https://getcomposer.org/download/
2. 将 composer 的源切换到国内，中国特色。参考 https://pkg.phpcomposer.com/
3. 安装 PHP 和 MySQL，并完成相应的配置。参考 Ubuntu 16.04 搭建 LNMP 开发环境
4. 安装 Flarum。参考 https://flarum.org/docs/install.html
5. 完成

1. 添加中文语言包

Flarum 内核直接提供多语言支持，只需要安装对应语言的语言包即可。语言包的安装也是基于 composer 的，所以运行下面的语句即可：

composer require jsthon/flarum-ext-simplified-chinese

2. 添加顶部导航

熟悉 插件模式 的同学应该知道，主体需要暴露各种钩子和接口给插件，插件要利用这些接口和钩子完成功能。Flarum 也不例外，它的前端是个 SPA，页面上分布着各种组件，组件提供钩子，添加顶部导航也要用到其中之一。

官方文档提供了这方面的 范例，接下来我们只要照搬即可。

3. 给导航提供 i18n

添加导航的动作在 JS 里，这是咱们本行，所以很快就搞定了。但是如何实现 i18n 有点困难。

Flarum 在 debug 模式下会检查文件变化，并且将我们编写的 JS、CSS 打包进它的 bundle 文件里。不同的语言打包出不同的文件。但是它并不理会本地的 locale 文件，所以，直接写在项目目录里的功能，无法用原生机制加载 i18n。

所以这里我还是使用了惯用的 po 文件，使用 po-loader + json-loader 加载到 JS 里，然后根据 app.translator.locale 判断语言之后显示出来。代码如下：

import en from '../locale/en.po';
import zh from '../locale/zh.po';

extend(HeaderPrimary.prototype, 'items', function(items) {
  const lang = app.translator.locale === 'en' ? en : zh;
  const links = [
    {
      name: 'Home',
      link: 'https://openresty.com/',
      label: lang.openresty.nav.home,
    },
    {
      name: 'Documentation',
      link: 'https://doc.openresty.com/',
      label: lang.openresty.nav.doc,
    },
    {
      name: 'Blog',
      link: 'https://blog.openresty.com/',
      label: lang.openresty.nav.blog,
    },
  ];
  for (const item of links) {
    items.add(item.name,
      <a href={item.link} className="LinksButton Button Button--link">
        {item.label}
      </a>
    );
  }
});

总结

这个做法不很理想，但是 composer 安装私有仓库遇到一些问题，所以只能先这么解决了。