做前端轻松还是做后端轻松_如何轻松地为您的文章创建目录

最新推荐文章于 2024-10-06 20:16:20 发布

cumifi2519

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量110

点赞数

文章标签： java python github vue html ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-easily-create-a-table-of-contents-for-your-article-507e313b2af3/

版权

做前端轻松还是做后端轻松

by Adam Kelly

通过亚当凯利

如何轻松地为您的中型文章创建目录 (How to easily create a table of contents for your Medium article)

In this article, I’ll discuss how you can create a table of contents for your Medium post, and I’ll show you how I built the feature.

在本文中，我将讨论如何为Medium帖子创建目录，并向您展示如何构建该功能。

目录 (Table of Contents)

Many of you have probably seen this post about how to link to parts of your Medium article. You may have also seen this chrome extension, which makes the process simpler.

你们中许多人可能已经看到这篇文章如何链接到你的文章中的一部分。您可能还看到了chrome扩展名，它使过程更简单。

Well, you can do one better. This is how to create a table of contents for your Medium article, automatically.

好吧，你可以做得更好。这是如何为您的中型文章自动创建目录的方法。

1.获取URL (1. Get The URL)

First, you need the URL of your Medium article. If it has been published, just grab the link from your address bar

首先，您需要中型文章的URL。如果已发布，只需从地址栏中获取链接

If you are still writing, click the “share” button in the top right corner, and copy the link from there

如果您仍在书写，请单击右上角的“共享”按钮，然后从此处复制链接

2.生成目录 (2. Generate Your Table Of Contents)

Now the easy bit. Go to www.mediumtoc.com and paste your URL in the input bar, and click “go.”

现在轻松一点。转到www.mediumtoc.com ，并将您的URL粘贴到输入栏中，然后单击“开始”。

Then it should give you your contents, which you can copy and paste into your medium article!

然后，它应该给您您的内容，您可以将其复制并粘贴到您的中型文章中！

You can see this in action at the top of this post.

您可以在这篇文章的顶部看到这一点。

我是如何建造的 (How I Built This)

设计： (Design:)

I first designed the website in Sketch. I chose to take some design cues from the Medium website, with a serif font for the heading, and I also used the same button design.

我首先在Sketch中设计了该网站。我选择从Medium网站获取一些设计提示，标题使用衬线字体，并且我也使用了相同的按钮设计。

I chose to use a https://material.io/guidelines/components/text-fields.html input bar, as the design is functional and minimalistic, the style I was going for.

我选择使用https://material.io/guidelines/components/text-fields.html输入栏，因为设计既实用又简约，是我想要的样式。

发展： (Development:)

The architecture of this app is largely based on the JAM stack. This is based on the idea of having client side Javascript, reusable API’s, and prebuilt markup. It allows sites to go on CDNs.

该应用程序的体系结构主要基于JAM堆栈。这是基于具有客户端Javascript，可重用API以及预先构建的标记的想法。它允许站点使用CDN。

The sites architecture is:

该站点的体系结构为：

Front End: React and Preact (a lightweight virtual DOM implementation) in production

前端：生产中的 React和Preact (轻量级虚拟DOM实现)

Back End: Express running on Now, although I plan to migrate to AWS Lambda, as there is only 1 API endpoint. The back end scrapes the headings from the Medium article and returns their links.

后端： Express在Now上运行，尽管我计划迁移到AWS Lambda，因为只有1个API终端节点。后端抓取“中型”文章的标题并返回其链接。

Front End Hosting / CDN: The site runs on Netlify, which has free SSL integration, and automatically deploys from the master branch on GitHub.

前端托管/ CDN：该站点在Netlify上运行，该站点具有免费的SSL集成，并从GitHub上的master分支自动部署。

If anyone is interested in any of these topics, leave a comment and I will write more about them!

如果有人对这些主题中的任何一个感兴趣，请发表评论，我将为他们写更多的信息！

The website was designed and developed over the course of two days. The first day was focused on the back end of the site, and the design. The second day was the development. There are only 4 react components, and I chose not to use redux, as there is not very much changing in the state.

该网站的设计和开发历时两天。第一天的重点是网站的后端和设计。第二天是开发。只有4个React组件，我选择不使用redux，因为状态没有太大变化。