如何在新浪博客添加文章打赏_如何在您的博客文章或文章中添加目录

最新推荐文章于 2024-08-15 14:47:41 发布

cumian9828

最新推荐文章于 2024-08-15 14:47:41 发布

阅读量242

点赞数

文章标签： java python html 大数据人工智能

原文链接：https://www.freecodecamp.org/news/how-to-add-a-table-of-contents-to-your-blog-post-or-article/

版权

如何在新浪博客添加文章打赏

Providing a table of contents helps preview and prioritize content when writing lengthier articles. But not every platform makes it easy to add one. How can we implement one when we lack first class tooling?

提供目录可以帮助撰写较长的文章时预览内容并确定其优先级。但是并不是每个平台都使添加一个平台变得容易。当我们缺乏一流的工具时，如何实现？

Want to skip ahead of the “what” and “why”? Jump to the “how”!

是否想跳过“什么”和“为什么”？跳到“如何” ！

我们将要创造的 (What we’re going to create)

For the purposes of this article, we’re going to use freeCodeCamp.org's content manager for visual and demonstration purposes. freeCodeCamp/news uses the blogging platform Ghost at the time of writing this, but this method can really apply to any article you write.

出于本文的目的，我们将使用freeCodeCamp.org的内容管理器进行可视化和演示。在撰写本文时，freeCodeCamp / news使用博客平台Ghost ，但此方法实际上可以应用于您撰写的任何文章。

为什么这有帮助？ (Why is this helpful?)

Providing a table of contents helps improve the experience that the people reading your article will have.

提供目录有助于改善阅读您的文章的人们的体验。

它为读者提供文章的预览 (It gives readers a preview of the article)

Jumping into an article, at least a lengthy one, can be a big time commitment. No one wants to spend 20 minutes of their morning only to figure out a post they dove into hasn’t actually answered their questions. Or that it's a rehash of something they’re already an expert on (although differing perspectives can still be helpful).

跳到一篇文章，至少是一篇冗长的文章，可能会花费大量时间。没有人愿意花早上20分钟的时间来弄清楚他们所研究的帖子并没有真正回答他们的问题。或者，这是对他们已经是专家的东西的重新演练(尽管不同的观点仍然会有所帮助)。

By providing this preview, you can help people get a sense of what to expect as they start to read. It allows them to prioritize their time with the other list of articles they have to read.

通过提供此预览，您可以帮助人们了解开始阅读时的期望。它使他们可以将他们的时间与他们必须阅读的其他文章列表优先。

它提供锚点以跳至特定内容 (It provides anchor points to jump down to specific content)

Similar to providing a preview, maybe someone wants to read a specific portion of the page. Maybe it’s because they can skip the first few bits of a tutorial or they are coming in from a link a coworker shared in Slack.

与提供预览类似，也许有人想阅读页面的特定部分。也许是因为他们可以跳过教程的前几部分，或者是因为他们来自Slack中共享给同事的链接。

The point is, people can use the table of contents to jump down to the parts that are more important to them.

关键是，人们可以使用目录跳到对他们更重要的部分。

奖金：它可以帮助您成为作家 (Bonus: it helps you as an author)

Providing a table of contents might not help for many practical reasons, but it's an additional tool for you to prioritize and understand the content of your post. It serves as a high level outline that you can refer to when making sure the flow of your story actually makes sense.

由于许多实际原因，提供目录可能无济于事，但是它是您优先考虑和理解帖子内容的另一种工具。当您确定故事的流向确实有意义时，可以将其用作高层大纲。

它没有做什么 (What it doesn’t do)

Unfortunately, this is a manual process. This table of contents isn’t going to magically update any time you tweak your content. So make sure to be vigilant during the editing process and update any broken links or add and remove any changes before you publish.

不幸的是，这是一个手动过程。每次调整内容时，此目录都不会神奇地更新。因此，请确保在编辑过程中保持警惕，并在发布前更新任何损坏的链接或添加和删除任何更改。

我们如何添加目录？ (How can we add a table of contents?)

内容标题和锚链接 (Content headers and anchor links)

The key to this solution is to utilize the built in id attributes applied to content headers in the HTML when building a post page. Using these attributes allows us to create an anchor link that will jump the browser’s scroll position down to the location of the element with that id.

该解决方案的关键是在构建帖子页面时利用应用于HTML中内容标头的内置id属性。使用这些属性，我们可以创建一个定位链接，该链接将使浏览器的滚动位置向下跳转到具有该id的元素的位置。

A basic example of the HTML looks like this:

HTML的基本示例如下所示：

<ul>
  <li><a href=“#my-id”>Link to My ID</a></li>
</ul>
<article>
  <p>Super long content</p>
  <h2 id=“my-id”>Important Thing</h2>
  <p>Important content</p>
</article>

In the above, we can see our article contains some basic content (imagine it's much longer than the above) with an h2 that follows with our important content.

在上面，我们可以看到我们的article包含一些基本内容(想象中比上面更长)，并且在重要内容之后加上h2 。

By providing our h2 with the id attribute, we can now create a link by setting the href to the pattern of #[id] that will jump to that element in the page.

通过为我们的h2提供id属性，我们现在可以通过将href设置为#[id]模式(将跳至页面中的该元素)来创建链接。

Now, when creating this in our blogging platform, we don’t necessarily need to worry about writing this HTML. But we do need to understand how to find the id in order to create our links.

现在，在我们的博客平台中创建此代码时，我们不必担心编写此HTML。但是我们确实需要了解如何找到id才能创建链接。

查找我们的标题ID (Finding our header ID)

We can use our browser’s developer tools (Chrome, Firefox) to pretty easily find our precious id attributes to create our links.

我们可以使用浏览器的开发人员工具( Chrome ， Firefox )轻松找到我们宝贵的id属性来创建链接。

Using your favorite browser, find the headline that you’d like to use, right-click the text, and then select “Inspect” (or “Inspect Element”) from the bottom of the context menu.

使用您喜欢的浏览器，找到您要使用的标题，右键单击文本，然后从上下文菜单的底部选择“检查”(或“检查元素”)。

From there, you’ll notice that a panel pops up from either the bottom of the page or to the side. The placement of this panel doesn’t matter too much – it’s just a user setting. But we can now see the HTML of the page we’re looking at with our header element highlighted.

从那里，您会注意到一个面板从页面底部或侧面弹出。该面板的位置无关紧要–只是一个用户设置。但是，现在我们可以看到正在查看的页面HTML，突出显示了header元素。

After finding our header in the HTML, find the id attribute. Double click the contents of it, and copy the value which we’ll use in a little bit.

在HTML中找到我们的标头后，找到id属性。双击它的内容，然后复制一点我们将使用的值。

创建指向我们标题的链接 (Creating a link to our header)

Since we’re going to create a table of contents, let’s open our post’s editor page and scroll to the top of the page.

由于我们将要创建目录，因此让我们打开帖子的编辑器页面，然后滚动到页面顶部。

The first thing we want to do is start a list, which we can do by typing an asterisk * followed by a space when starting a new content section.

我们要做的第一件事是启动一个列表，我们可以通过输入一个星号*和一个空格来完成当开始一个新的内容部分时。

Next, write what you want your link to say. Most commonly in table of contents, the link is exactly the same text as the header itself.

接下来，写下您想要链接说的话。在目录中，链接最常见的是与标题本身完全相同的文本。

After it says what you want, highlight the entire line, and a little context menu will appear above your selection.

在说出您想要的内容之后，突出显示整行，然后在您的选择上方会出现一个小的上下文菜单。

Select the little link icon and the context menu will turn into a text field. Type into the text field a hashtag # followed by the contents of the id attribute that you found on your header above.

选择小链接图标，上下文菜单将变为文本字段。在文本字段中输入井号#然后在上方标题中找到id属性的内容。

Hit the Enter key and success! We have a link.

按下Enter键，成功！我们有一个链接。

Repeat the steps above and create 1 link for each top level header that you'd like to link to.

重复上述步骤，并为每个要链接的顶级标题创建1个链接。

Don’t feel like you need to go overboard, though. Typically you’ll see blog posts include only the top level headers of the page, so don’t feel like you need to include every sub header. Ultimately – do what you’re comfortable with.

不过，不要觉得您需要过度。通常，您会看到博客文章仅包含页面的顶级标题，因此您不需要包含每个子标题。最终-做自己喜欢的事情。