如何链接到中篇文章中的特定段落（2018目录方法）

by Quincy Larson

昆西·拉尔森(Quincy Larson)

如何链接到中篇文章中的特定段落(2018目录方法) (How to link to a specific paragraph in your Medium article (2018 Table of Contents method))

Update Feb 26, 2018: a member of the freeCodeCamp community just built a tool that makes this process extremely convenient. Instead of using the method I describe in this article, I recommend you just use his website.

更新2018年2月26日 ：freeCodeCamp社区的成员刚刚构建了一个工具，使该过程极为方便。 建议您不要使用我在本文中介绍的方法，而只是使用他的网站 。

I’m going to show you how you can make a nice hyper-linked Table of Contents for your Medium articles. Here’s what this will look like in your Medium article:

我将向您展示如何为您的中型文章制作一个很好的超链接目录。 这是您的中型文章的外观：

Each of these links will jump to a specific part of the article. This is a major usability improvement for your readers. Especially if your article is long enough to require multiple reading sessions to finish.

这些链接中的每个链接都将跳至文章的特定部分。 对于您的读者来说，这是一个重大的可用性改进。 特别是如果您的文章篇幅足够长，需要完成多个阅读课程。

On the freeCodeCamp Medium publication, we frequently publish articles that are 20 minute reads, 40 minute reads, even 60 minute reads. And we find these Table of Contents to be super helpful.

在freeCodeCamp Medium出版物上 ，我们经常发布20分钟，40分钟甚至60分钟的文章。 而且我们发现这些目录非常有用。

Note that the technique I share here in this article has mixed results on mobile devices. So here’s hoping Medium formally adds this feature in the future.

请注意，我在本文中分享的技术在移动设备上的效果参差不齐。 因此，我们希望Medium在将来正式添加此功能。

证明这有效 (Proof that this works)

By clicking this link, you will be transported right back to this exact part of this article.

通过单击此链接 ，您将直接回到本文的这一部分。

因此，这是您的操作方式。 (So here’s how you do this.)

Each heading on Medium is its own HTML element, with its own id.

Medium的每个标题都是其自己HTML元素，具有其自己的id 。

To get the id of the heading, you need to right-click on it, then click “inspect.”

要获取标题的id ，您需要右键单击它，然后单击“检查”。

This will open your browser’s developer tools. Here’s what this looks like:

这将打开浏览器的开发人员工具。 看起来是这样的：

Now you just need to get the 4-digit hexadecimal code associated with that HTML element. In this case, the id of the “Hello, World!” heading is 48f5.

现在，您只需要获取与该HTML元素关联的4位十六进制代码。 在这种情况下，“ Hello，World！”的id 标题是48f5 。

Now you can use that code to make a special link that will link directly to that heading. These links follow this structure:

现在，您可以使用该代码创建一个特殊链接，该链接将直接链接到该标题。 这些链接遵循以下结构：

https://medium.com/p/[article ID]#[4-digit hexadecimal code]

https://medium.com/p/[article ID]#[4-digit hexadecimal code]

• The article ID is the 12-digit hexadecimal code for the Medium article. One of these codes is in every Medium URL. For example, the article ID for this article you’re reading is e66595fea549. Go ahead — check the address bar of your browser and you should see this code in the URL. This code is the universal identifier for your article and it will never change — even if you change the headline for your article or publish it in a Medium publication.

  文章ID是“中” 文章的12位十六进制代码。 这些代码之一在每个Medium URL中。 例如，您正在阅读的这篇文章的文章ID为e66595fea549 。 继续-检查浏览器的地址栏，您应该在URL中看到此代码。 此代码是您文章的通用标识符，即使您更改文章标题或将其发布在Medium出版物中，它也永远不会更改。

• The 4-digit hexadecimal code is the code you got from the developer tools (in this case, 48f5).

  4位十六进制代码是您从开发人员工具获得的代码(在本例中为48f5 )。

Here’s the URL I used earlier to link back to my “proof that this works” section:

这是我之前用来链接回我的“证明行之有效”部分的URL：

https://medium.com/p/e66595fea549#ddca

让我们建立一个目录！ (Let’s build a table of contents!)

Here’s that table of contents I showed you earlier. Each of these will link to a different section of the same article:

这是我之前显示给您的目录。 所有这些都将链接到同一文章的不同部分：

目录 (Table of Contents)

• Disclaimers

  免责声明

• Seven bridges of Königsberg

  柯尼斯堡的七座桥

• Intro to Graph representation and binary trees (Airbnb example)

  图形表示法和二叉树简介(Airbnb示例)

• Graph representation: outro

  图表示法：outro

• Twitter example: tweet delivery problem

  Twitter示例：推文传递问题

• Graph Algorithms: intro

  图算法：简介

• Netflix and Amazon: inverted index example

  Netflix和Amazon：倒排索引示例

• Traversals: DFS and BFS

  遍历：DFS和BFS

• Uber and the shortest path problem (Dijkstra’s algorithm)

  Uber和最短路径问题(Dijkstra算法)

Chrome扩展程序可简化此过程 (A Chrome Extension to make this process easier)

In response to this article, Cadu de Castro Alves created a Chrome extension that makes extracting the IDs from different paragraphs an more straight-forward process.

针对本文， Cadu de Castro Alves 创建了一个Chrome扩展程序 ，该程序使从不同段落中提取ID变得更加简单。

就这样。 玩得开心，写作愉快！ (That’s all. Have fun, and happy writing!)

If you found this article helpful, you should follow me on Twitter. I only tweet about programming and technology, and I won’t waste your time :)

如果您发现这篇文章对您有所帮助，则应在Twitter上关注我 。 我只发布关于编程和技术的推文，我不会浪费您的时间:)

翻译自: https://www.freecodecamp.org/news/how-to-link-to-a-specific-paragraph-in-your-medium-article-2018-table-of-contents-method-e66595fea549/