本周初,我在 Zulip 的repo上发现了一个有趣的issue。

zulip/zulip

Zulip服务器和web应用——强大的开源团队聊天

Zulip概述

Zulip 是一个功能强大的开源群聊应用程序,它结合了实时聊天的即时性和线程对话的生产力优势。 Zulip 被开源项目、财富 500 强公司大型标准机构以及其他需要实时聊天系统的人使用,该系统允许用户每天轻松处理数百或数千条消息。每月有超过 700 名贡献者合并超过 500 次提交,Zulip 也是最大和增长最快的开源群聊项目。

[](https: //codecov.io/gh/zulip/zulip)

入门

单击下面的相应链接。如果似乎没有任何问题,请加入我们的Zulip 社区服务器并告诉我们发生了什么事!

您可能对以下内容感兴趣:

• 贡献代码。查看我们的新贡献者指南开始。 Zulip 以维护干净且经过良好测试的代码库以及数百个初学者友好问题的库存而自豪。

• 贡献非代码报告问题...

在 GitHub 上查看

Zulip是一个流行的开源通信平台,使用 Django (Python) 构建。尽管花了一些时间,我最终还是让另一个开发人员处理了这个问题1并声称另一个一个。这是在搜索自动完成建议中显示个人资料图片的功能请求。

在搜索自动完成建议中显示个人资料图片 #20267

alya 发布于2021 年 11 月 16 日

目前,我们在@-提及自动完成建议中显示个人资料图片,但不在搜索的自动完成建议中。因此,很难在搜索自动完成中快速找到您需要的人。此外,当多人同名时,使用搜索建议非常尴尬。

为了解决这个问题,我们应该在建议用户(发件人、PM 等)时在搜索自动完成建议中显示头像。

从实现的角度来看,我们最好重用 send-PM-pills 组件,而不是复制逻辑。

CZO 讨论线程

作为参考,@-提及 UI:[](https://user-images.githubusercontent.com/2090066/141942458-a828bdc2-00e7-4a75- a715-a6189f3f58ba.png)

当前搜索建议 UI:[](https://user-images.githubusercontent.com/2090066/141942510-d04e1079-6022-43e7-b7e2-d174349b9ed4。 .png)

在 GitHub 上查看

功能涉及什么

Zulip 庞大的代码库和技术让我不知所措。幸运的是,他们的文档非常清晰、简洁且很有帮助。尽管为该项目设置本地开发环境比平时花费更多时间,但过程很简单。我有机会了解 Docker 和Vagrant。除此之外,我与来自 OSD 实验室的老朋友 Git 的 pre-commit hooks 意外重逢。

下一部分是一场噩梦:在由 700 多名贡献者开发的代码库中跟踪相关代码,提交次数超过 45000 次。在做了一些研究并获得了 Zulip 社区服务器的支持后,我对这个功能有了一些想法。

基于相对相似功能的现有方法,我需要自定义现有typeahead.js的布局,以包含任何建议的人或组织的头像。正如问题的作者所建议的那样,我可以为每个建议重用Handlebarspartial。

我如何处理它

首先,我需要一种方法来根据用户的姓名呈现用户的个人资料图片。经过一些代码跟踪,我找到了render_person_or_user_group(),这是一个可以帮助我完成这项任务的预输入辅助函数。它使用this Handlebars partial来提出建议:

{{#if is_emoji}}
    {{#if has_image}}
        <img class="emoji" src="{{ img_src }}" />
    {{else}}
        <span class='emoji emoji-{{ emoji_code }}'></span>
    {{/if}}
    &nbsp;&nbsp;
{{else}}
    {{#if is_person}}
        {{#if user_circle_class}}
        <span class="{{user_circle_class}} user_circle"></span>
        {{/if}}
        {{#if has_image}}
        <img class="typeahead-image" src="{{ img_src }}" />
        {{else}}
        <span class='typeahead-image fa fa-bullhorn no-presence-circle'></span>
        {{/if}}
    {{else}}
        {{#if is_user_group}}
        <i class="typeahead-image icon fa fa-group no-presence-circle" aria-hidden="true"></i>
        {{/if}}
    {{/if}}
{{/if}}
<strong>
    {{~ primary ~}}
</strong>
{{~#if has_secondary}}
&nbsp;&nbsp;
<small class="autocomplete_secondary">
    {{~ secondary ~}}
</small>
{{#if is_unsubscribed}}
&nbsp;
<span class="fa fa-exclamation-triangle unsubscribed_icon"
  title="{{t 'You are not currently subscribed to this stream.' }}"></span>
{{/if}}
{{~/if}}

进入全屏模式 退出全屏模式

话虽如此,我仍然需要更多时间来了解函数的行为。很可能我必须写一个类似的来排除不相关的。

其次,我需要找到一种方法来自定义建议的布局。经过一番研究,我注意到highlighter()负责它:

highlighter(item) {
   const obj = search_map.get(item);
   return obj.description;
}

进入全屏模式 退出全屏模式

• obj.description是一些奇怪的原始 HTML,具有<strong>个标签,包含名称的每个字符,以及紧随其后的另一个字符,并且完全没有包含任何内容。例如,“由 Aayush Solanki 发送”的 HTML 如下所示:

<a href="#">Sent by <strong>A</strong><strong></strong><strong>a</strong><strong></strong><strong>y</strong><strong></strong><strong>u</strong><strong></strong><strong>s</strong><strong></strong><strong>h</strong> <strong>S</strong><strong></strong><strong>o</strong><strong></strong><strong>l</strong><strong></strong><strong>a</strong><strong></strong><strong>n</strong><strong></strong><strong>k</strong><strong></strong><strong>i</strong></a>

进入全屏模式 退出全屏模式

最后,我必须想出一种方法来无缝连接这两个功能。这是最复杂的部分。

结论

这似乎是对大型开源项目的一个有影响力的贡献。我仍然不知道如何建立在我最初的方法上,但我会尽量让你了解我的进展。

---

封面照片由Kaleidico拍摄于Unsplash

---

1.在我之前还有一个开发者在issue上工作过。他因为大学工作放弃了问题。然而,在我与项目维护人员讨论了我的方法后的第二天,他要求再次处理它。由于他声称已经在这方面取得了一些进展,我决定让他接管这个问题。你认为我在这种情况下做对了吗?让我知道评论。↩