# Twitter 引用推文未在一键框中显示

**URL:** https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963
**Category:** Feature
**Created:** [2019年四月25日 14:56 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963 "2019-04-25T14:56:22Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![ChrisBeach](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrisbeach/32/214628_2.png) [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [2019年四月25日 14:56 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/1 "2019-04-25T14:56:22Z")

</div>

Twitter oneboxes work well, except for quote tweets. In this case, the “parent” tweet is shown, but the quoted tweet is only shown as a link.

Would appreciate if someone could improve the oneboxing of quote tweets.

## Quote tweet as displayed on Twitter:

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/2/a22ca926eea3fd31dadfafe4855b1d175442fcda.jpeg)

## Onebox:

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/0/d016e1b26939a02878a0ae34ec1506cc2c87f3b8.jpeg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2019年四月29日 02:37 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/2 "2019-04-29T02:37:50Z")

</div>

I like this suggestion, its a rather complex change, but wacking a #pr-welcome on it for now in case anyone is feeling brave.

---

<div class="post-metadata">

### Author: ![jcalvento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jcalvento/32/142588_2.png) [@jcalvento](https://meta.discourse.org/u/jcalvento)
#### Post date: [2019年五月30日 17:57 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/3 "2019-05-30T17:57:41Z")

</div>

I’ll try to make a PR to fix this. Will let you know

---

<div class="post-metadata">

### Author: ![jcalvento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jcalvento/32/142588_2.png) [@jcalvento](https://meta.discourse.org/u/jcalvento)
#### Post date: [2019年六月1日 03:01 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/4 "2019-06-01T03:01:13Z")

</div>

Still working on it but let me know if you have any suggestions/comments 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2019年七月2日 00:00 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/5 "2019-07-02T00:00:37Z")

</div>

PR 正在这里准备中：

> <https://github.com/discourse/onebox/pull/407>
>
> \# Quoted tweets
> \## Depends on:
> https://github.com/discourse/discourse/pull/783…2
> 
> \## Discussion:
> https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963
> \## Feature: Display quoted tweets with a link pointing to it
> \### Preview:
> !\[N1ag4wJ\](https://user-images.githubusercontent.com/7976008/58847191-72a26480-8658-11e9-999c-4a7d3fd9b55c.gif)
> 
> \## Additional:
> \- Refactor code to remove duplication
> \- Add memoization to avoid loading several times the same variables and content
> \- Add more tests coverage to existing scenarios

@techAPJ 正在审查。

还有一些细微的 CSS 问题，@awesomerobot 可能也想看看。一般来说，我们不太喜欢使用 `:hover`，而且那里的圆角看起来比 Twitter 上的更大，但这应该很容易修复。

整体来看效果很棒，@jcalvento！

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2019年七月2日 09:55 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/7 "2019-07-02T09:55:55Z")

</div>

PR 看起来太棒了 @jcalvento！👍

添加了一条关于代码格式的小评论，完成后就可以合并了。🙂

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2019年七月4日 08:21 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/8 "2019-07-04T08:21:17Z")

</div>

此更改现已上线 🎉

> <https://twitter.com/eviltrout/status/1145316639438716931>

感谢 @jcalvento 🏆

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年七月4日 16:25 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/9 "2019-07-04T16:25:47Z")

</div>

移动端上的间距似乎过大，能否调紧凑一些？

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/d/9d5723c904db6f97f14a21dd2cd17769a7cd6860.jpeg)

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2019年七月5日 15:35 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/10 "2019-07-05T15:35:12Z")

</div>

我进行了一些 [更改](https://github.com/discourse/onebox/commit/1b2e713fcdb87225dff66e33a1cea11615b51e66) 和 [修改](https://github.com/discourse/discourse/commit/5bc1fd23b0c2611ebc4fd3f61b85e29bdf16dba8)，以改进整体引用样式。

> <https://twitter.com/Supermathie/status/1118334706439852032>

在我看来，仍有少量空间可以进一步减少以下部分之间的间距：

- 姓名/用户名与推文正文之间
- 被引用的推文与时间戳/点赞/转发之间

这些间距来自于应用于 `tweet` 类的 `white-space: pre-line` 样式。@awesomerobot 你能快速查看一下是否还有进一步优化的空间吗？

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年七月5日 20:10 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/12 "2019-07-05T20:10:27Z")

</div>

在移动设备上仍然占用过多空间。

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019年七月6日 03:21 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/13 "2019-07-06T03:21:52Z")

</div>

> [@techAPJ](#):
>
> 这个空格是由应用于 `tweet` 类的 `white-space: pre-line` 产生的。

没错，我们需要它来保持推文中原有的空格格式……但它也会导致 HTML 中的空格显示出来。因此，我在此处从模板中移除了它——这应该能解决问题。

> <https://github.com/discourse/onebox/commit/a5d3d60cddf56b50a3dbcd5893135aeadd7f6a1a>

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2019年七月6日 05:16 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/14 "2019-07-06T05:16:07Z")

</div>

已部署更新的 gem，onebox 看起来好多了！

> <https://twitter.com/Supermathie/status/1118334706439852032?1>

我们是否可以考虑将时间戳顶部的内边距从 `10px` 减小到 `5px`？

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019年七月8日 19:32 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/15 "2019-07-08T19:32:23Z")

</div>

哦，我想我在底部漏掉了一些空格……我觉得这应该能修复它

> <https://github.com/discourse/onebox/commit/cc4d02a3f7f8c54b154d8fa9cbdd741383da61e3>

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年七月9日 04:12 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/16 "2019-07-09T04:12:01Z")

</div>

我不知道，我觉得当 Arpit 说

> [@techAPJ](#):
>
> 我们是否应该考虑将时间戳顶部的内边距从 `10px` 减少到 `5px`？

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年七月18日 11:47 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/17 "2019-07-18T11:47:38Z")

</div>

这里的空白还是太多了 @awesomerobot

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/7/27ad69ebb9cadd021d87d64267823ec4f94d6b7e.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019年七月18日 13:48 UTC](https://meta.discourse.org/t/twitter-quote-tweets-not-shown-in-oneboxes/115963/18 "2019-07-18T13:48:16Z")

</div>

嗯，模板中我还在某处漏掉了一个多余的换行……不过即使如此，移除内边距也能消除那个空白。

> <https://github.com/discourse/discourse/commit/d841bff9f8630ecb7ed711907022ff15f8d45d38>
