分类
flarum

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 安装私有仓库遇到一些问题,所以只能先这么解决了。

由meathill

爱编程,爱旅游,爱吐槽。
今年的目标是完成并运营至少一个 Side Project。
《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据