0%

Flarum扩展开发记录

扩展要实现的功能:输入 ‘ / ‘ 时列出同 group 的用户以供@

基于 flarum/core ^1.7

最终实现:https://github.com/Marchccc/flarum-ext-mentions-group-users

讨论:https://discuss.flarum.org/d/32768-mentions-group-users

extiverse:https://extiverse.com/extension/marchccc/flarum-ext-mentions-group-users

安装Flarum

https://docs.flarum.org/install/#installing

1
composer create-project flarum/flarum . -vvv

目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
jun@zhangjuengdeMBP test % tree -L 1
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── composer.json
├── composer.lock
├── config.php # 站点配置文件
├── extend.php # 代码扩展入口
├── flarum
├── public # 根目录
├── site.php
├── storage
└── vendor

设置 composer 加载本地模块

https://docs.flarum.org/extend/start/#extension-packaging

1
composer config repositories.0 path "packages/*"

建立 packages 目录,进入目录执行 flarum-cli init

我的packages目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
packages
└── marchccc
└── flarum-ext-mentions-group-users
├── LICENSE.md
├── README.md
├── composer.json
├── composer.lock
├── extend.php
├── js
├── less
├── locale
├── tests
└── vendor

修改 Flarum 的 composer.json

1
2
3
4
5
6
7
8
9
10
"require": {
...
"marchccc/flarum-ext-mentions-group-users": "dev-main"
...
}

"repositories": [{
"type": "path",
"url": "./packages/marchccc/flarum-ext-mentions-group-users"
}]

执行

1
2
composer dump-autoload
composer update

编译 js

https://docs.flarum.org/extend/frontend#adminjs-and-forumjs

1
2
cd /packages/marchccc/flarum-ext-mentions-group-users/js
npm run dev/build

在编辑器输入 ‘/‘ 时,列出同组用户供@

https://docs.flarum.org/extend/frontend/#changing-the-ui-part-1

PHP&JS API doc:https://github.com/flarum/api-docs

其实就是要找到编辑器的这个组件,监听输入变化。

通过审查元素,看到class名为TextEditor

在API doc找到这个组件

思路,extend TextEditor组件的oninput方法

1
2
3
4
5
6
7
8
9
10
11
12
13
import app from 'flarum/forum/app';
import { extend } from 'flarum/common/extend';
import TextEditor from 'flarum/common/components/TextEditor';


app.initializers.add('marchccc/flarum-ext-mentions-group-users', () => {
// console.log('[marchccc/flarum-ext-mentions-group-users] Hello, forum!');

extend(TextEditor.prototype, 'oninput', function (n, value) {
console.log(value);
});

});

这样就可以获取到在 TextEditor 输入的内容

其实官方有@功能:https://github.com/flarum/mentions

所以代码直接参考这里,只是略做调整将触发显示列表的’ @ ‘改为’ / ‘,避免和官方的@冲突。

前端:

1
2
3
4
5
6
app.store.find('group_users', {}).then((results) => {
results.forEach((u) => {
returnedUserIds.add(u.id());
returnedUsers.push(u);
});
});

extend.php

1
2
3
4
5
6
7
use Marchccc\Mention\Api\Controller\GroupUsersController;

return [
...
(new Extend\Routes('api'))
->get('/group_users', '', GroupUsersController::class),
];

GroupUsersController.php

来自ChatGPT,提词:我在开发Flarum扩展,在控制器里,如何获取当前用户的所有群组,并且获取当前用户所有群组里的所有用户?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php

namespace Marchccc\Mention\Api\Controller;

use Flarum\Api\Controller\AbstractListController;
use Flarum\Api\Serializer\UserSerializer;
use Psr\Http\Message\ServerRequestInterface;
use Tobscure\JsonApi\Document;

class GroupUsersController extends AbstractListController
{
public $serializer = UserSerializer::class;

/**
* {@inheritdoc}
*/
public function data(ServerRequestInterface $request, Document $document)
{
$actor = $request->getAttribute('actor');

$groups = $actor->groups()->get();
$members = [];
foreach ($groups as $group) {
$members = array_merge($members, $group->users()->get()->where('id', '!=', $actor->id)->all());
}
return $members;
}
}

效果:

欢迎关注我的其它发布渠道