客户体验改善计划_改善媒体体验

客户体验改善计划

by cedric amaya

通过塞德里克·阿玛亚

改善媒体体验 (Improving the Medium Experience)

一次一个浏览器扩展。 (One browser extension at a time.)

I love Medium. As a consumer, it has provided me with countless articles that have helped me to better myself both personally and professionally. And as a producer, it has provided me a platform on which I can express myself as genuinely as possible through the written word.

我喜欢中级。 作为消费者，它为我提供了无数的文章，这些文章帮助我提高了个人和职业水平。 作为制作人，它为我提供了一个平台，在这个平台上，我可以通过书面文字尽可能真实地表达自己。

Since using Medium, however, I have noticed some things about the publishing platform that I either found lacking or that have room for improvement. And as a web developer and tinkerer, I like to come up with the solutions for these problems myself. Here are a couple extensions I created to make your Medium experience even better.

但是，自从使用Medium以来，我已经注意到有关发布平台的一些东西，我发现它们缺少或有改进的空间。 作为一名Web开发人员和修补匠，我喜欢自己为这些问题提出解决方案。 这是我创建的几个扩展程序，目的是使您的中级体验更好。

中型书签？ (Medium Bookmarklets ?)

The first occasion of me trying to improve the Medium experience was with my Firefox WebExtension, Medium Bookmarklets (which, I found out after naming the product, aren’t actually bookmarklets).

我第一次尝试改善Medium体验的时候是使用Firefox WebExtension， Medium Bookmarklets (我在为产品命名后才发现它实际上不是书签)。

This aimed to bring true bookmarking functionality, in the sense that you could save your spot in an article for later without the need to remember or scroll to that section. This solved a problem I constantly faced and thought others might as well.

这样做的目的是带来真正的书签功能，在某种意义上，您可以将您的位置保存在文章中以供以后使用，而无需记住或滚动到该部分。 这解决了我经常遇到的问题，并以为其他人也可能会遇到。

这个怎么运作 (How it Works)

Since I knew that HTML elements in Medium articles contain a unique id attribute, I developed a solution that added a marker / highlighter on the selected element. This would correspond to a paragraph, heading, or quote in the article where the user wanted to save their spot which in turn saved that element’s id.

由于我知道“中型”文章中HTML元素包含唯一的id属性，因此我开发了一种解决方案，在所选元素上添加了标记/荧光笔。 这将与用户想要保存其位置的文章中的段落，标题或引号相对应，从而又保存了该元素的id 。

Navigating directly to that spot in the article is performed by using a fragment identifier of the saved id. For example, if this paragraph had an id of “3b75”, then to open this article with this specific paragraph at the top of the page, the URL would look something like https://blog.cedricamaya.me/improving-medium-experience-7df7e233c678#3b75 . Note the fragment identifier (#3b75) at the end.

通过使用保存的id的片段标识符直接导航到文章中的该位置。 例如，如果此段的id为“ 3b75”，则要打开该页面，并在页面顶部显示此特定段，则该URL类似于https://blog.cedricamaya.me/improving-medium-experience-7df7e233c678 #3b75 。 请注意片段标识符( #3b75 )最后。

This same functionality is usually used by writers / editors to include a table of contents in their articles on Medium. Here’s a great explanation and how-to guide that goes more into detail.

作家/编辑者通常使用相同的功能在其有关Medium的文章中包括目录。 这是一个很棒的解释，以及如何指导的细节。

With that functionality in mind, I coded a Firefox add-on that created a sidebar of clickable cards which represented the user’s saved bookmarklets, as I called them. The click event handler on each card would navigate the current page to the bookmarklet’s URL. So if you placed a bookmarklet halfway in a long article, the need to scroll to that section where you last left off was completely eliminated.

考虑到该功能，我编写了一个Firefox附加组件，该附加组件创建了可点击卡片的侧边栏，该边栏代表了用户所保存的书签，如我所称。 每张卡上的点击事件处理程序会将当前页面导航到小书签的 URL。 因此，如果您在长篇文章的中途放置了一个书签 ，则完全无需滚动到最后一个停留的部分。

There is more functionality included in Medium Bookmarklets, such as the need to whitelist the publications you’d like to save bookmarklets from (due to security reasons), as well as notifications when a bookmarklet it added or deleted. Other than that, it’s a pretty simple extension that aims to improve your bookmarking capabilities.

中型书签中包含更多功能，例如(出于安全原因)需要将要保存书签的出版物列入白名单(由于安全原因)，以及添加或删除书签时的通知。 除此之外，它是一个非常简单的扩展，旨在提高您的书签功能。

Check out Medium Bookmarklets from Mozilla Addons.

从Mozilla插件中查阅中型书签 。

签名✍️ (Signature ✍️)

If Medium Bookmarklets was developed with the consumers of Medium in mind, then Signature was developed for those creating content on Medium.

如果在开发Medium Bookmarklet时考虑到了Medium的消费者，那么Signature是为那些在Medium上创建内容的人开发的。

Signature’s purpose is simple: provide writers and editors the ability to instantly add their blog’s signature / sign off with the click of a button—eliminating the need to copy and paste or retype it every time.

签名的目的很简单：单击按钮，即可使作家和编辑者可以立即添加其博客的签名/注销，从而无需每次都复制，粘贴或重新键入该签名。

The idea for Signature originated after coming across numerous articles in a specific publication that all ended with the same text / copy. It was usually a call-to-action with hyperlinks, and was styled using bold or italicized text to make it stand out.

签名的想法是在特定出版物中遇到许多以相同的文本/副本结尾的文章之后产生的。 它通常是带有超链接的号召性用语，并使用粗体或斜体文本设置样式以使其突出。

I thought to myself, “do people type that signature or copy and paste it from a previous article every time they’re writing a new blog post?” Regardless, retyping or copying and pasting takes time, and wanting to simplify the process, I developed another browser extension (this time for both Chrome and Firefox) to solve this problem.

我对自己说：“人们每次写新博客时，都键入该签名或将其复制并粘贴到以前的文章中吗？” 无论如何，重新键入或复制和粘贴都需要时间，并且想要简化流程，我开发了另一个浏览器扩展程序(这次是针对Chrome和Firefox)来解决此问题。

这个怎么运作 (How it Works)

With Signature installed, users simply fill out their blog’s signature in the editor found in the extension’s settings page. This editor, an instance of Quill, is a rich text editor, meaning any formatting of text (i.e. bold, italics, quote, heading, code, and so on) can easily be transferred and applied to a Medium blog post draft, which also utilizes rich text capability.

安装了签名后，用户只需在扩展程序设置页面上的编辑器中填写博客的签名即可。 该编辑器是Quill的实例，是一种富文本编辑器，这意味着可以轻松转移任何格式的文本(即粗体，斜体，引号，标题，代码等)并将其应用于Medium Blog帖子草稿，该草稿也利用富文本功能。

Once a signature has been defined in the settings page, users will then be able to click the “signature” button (with the nib icon) located in the inline-tooltip, as shown below. Clicking that button then pastes the signature that was defined in the settings page in the draft.

在设置页面中定义了签名后，用户将能够单击内联工具提示中的“签名”按钮(带有笔尖图标)，如下所示。 单击该按钮，然后粘贴在草稿的设置页面中定义的签名。

Enough talking about how it works, though — let’s see it in action!

不过，足够多地谈论它是如何工作的-让我们看看它的实际作用！

Check out Signature from Mozilla Addons and from the Chrome Webstore.

从Mozilla插件和Chrome Webstore中签出签名 。

外卖 (Takeaways)

Like all products out there, Medium has its flaws. However, with the creative use of your imagination and a do-it-yourself attitude, you can greatly improve these issues with a little programming.

像其他所有产品一样，Medium也有其缺陷。 但是，通过创造性地利用您的想象力和自己动手的态度，您可以通过一点编程就大大改善这些问题。

I now encourage you to improve the Medium experience in your own way and share the result using #MediumExperience. If you can’t think of your own idea or are just getting started with programming, feel free to implement a new feature or fix a bug in either Medium Bookmarklets or Signature — both are open-source and can be found on GitHub.

我现在鼓励您以自己的方式改善“中级”体验，并使用#MediumExperience分享结果。 如果您无法想到自己的想法，或者只是刚开始编程，请随时实施新功能或修复Medium Bookmarklet或Signature中的错误-两者都是开源的，可以在GitHub上找到。

cedricium/medium-bookmarklets? medium-bookmarklets - Easy way to save your place in Medium articles and return to them later.github.com cedricium/signature✍️ Signature - Medium signatures, simplified.github.com

ced /中书签 ？ 中型书签-在中型文章中保存位置并稍后返回的简便方法 。ithub.com edricium / signature✍️ 签名-中型签名，已简化。 github.com

Thanks for reading and I look forward to seeing how you choose to improve the Medium experience!

感谢您的阅读，我期待看到您选择如何改善媒体体验！

~ cedric amaya? wielder who loves to create things with codeGitHub | LinkedIn | Twitter

〜塞德里克·阿玛亚( ？) 谁喜欢用codeG itHub来创建东西？ L inkedIn | w

翻译自: https://www.freecodecamp.org/news/improving-the-medium-experience-one-browser-extension-at-a-time-7df7e233c984/

客户体验改善计划