idea项目结构突然没有了_突然的结构文章

idea项目结构突然没有了

This post talks about a JavaScript that can be used on any web/blog page to auto-generate a Table of Contents.

这篇文章讨论了可以在任何Web /博客页面上用来自动生成目录JavaScript。

动机 (Motivation)

Here's the idea I've playing with: say you have a relatively long web page, where the content uses H1-H6 tags to structure the copy. How about running a JavaScript when the page is loaded and getting a Table of Contents (TOC) generated for you, based on the heading tags that you've used? Wikipedia does this kind of TOCs, but on the server side, using not H tags but the wiki tags.

这是我一直在考虑的想法：假设您有一个相对较长的网页，其中的内容使用H1-H6标签来构造副本。 如何在加载页面时运行JavaScript并根据您使用的标题标签获取为您生成的目录(TOC)？ Wikipedia执行这种目录，但是在服务器端，不使用H标签，而是使用Wiki标签。

Anyway, I decided it's a cool idea and rolled up the JS sleaves. Then once I had the TOC sorted out, I added a list of external references, meaning a list of all external links contained within the content.

无论如何，我认为这是个不错的主意，并汇总了JS代码。 然后，当我整理出目录时，我添加了一个外部引用列表，这意味着内容中包含的所有外部链接的列表。

演示和文件 (Demo and files)

• Here's the demo

  这是演示

• Here's the "bare" page - before running the script

  这是“裸露”页面-运行脚本之前

• The JS - the actual JavaScript

  JS-实际JavaScript

• The CSS used to contain a few styles, this is irrelevant to the script

  CSS过去包含一些样式，这与脚本无关

积分(Integration)

If you like the idea, you're free to get the files and experiment. All you need to do is:

如果您喜欢这个主意，可以自由获取文件并进行实验。 您需要做的只是：

1. include the JS
   包括JS

2. create two divs in your document - one for the TOC (with an ID "suddenly-structured-toc") and one for the list of external links (with ID suddenly-structured-references)

   在您的文档中创建两个div-一个用于TOC(ID为“ suddenly-structured-toc ”)，另一个用于外部链接列表(ID为“ suddenly-structured-references )

3. call suddenly_structured.parse();

   调用suddenly_structured.parse();

代码 (The code)

The script is not 100% finished yet, I was thinking of adding some more features, such as the ability to create TOCs only starting from H3 for example. But if you want to play with the code, you're more than welcome to.

该脚本尚未100％完成，我在考虑添加更多功能，例如仅从H3开始创建TOC的功能。 但是，如果您想使用该代码，欢迎您。

What's happening in the code? There is an object/class called suddenly_structured, its main "controller" method is parse() that calls the other methods as needed. You can peek at the code for more but the basically the work is done by the methods:

代码中发生了什么？ 有称为对象/类suddenly_structured ，其主“控制器”方法是parse()根据需要调用其它方法。 您可以查看更多代码，但基本上，工作是通过方法完成的：

• init() - initializes the "environment" where (in which element ID) is the content, where to print the TOC and links.

  init() -初始化“环境”，其中(其中元素ID)是内容，在其中打印目录和链接。

• traverse() - this goes through the document and if it finds a heading, it adds it to a list, but first makes sure that this heading has an ID. If there's no ID, a random one is generated.

  traverse() - traverse()文档，如果找到标题，则会将其添加到列表中，但首先要确保该标题具有ID。 如果没有ID，则会生成一个随机ID。

• generateTOC() - once we have a list of all the headings, we can generate a TOC tree.

  generateTOC() -一旦有了所有标题的列表，就可以生成TOC树。

• appendReferences() goes through all the links, checks the URL protocol and host to make sure they are external links and adds to the list of external references. When generating the list, I'm using the title attribute of the A tag to make the list nicer.

  appendReferences()遍历所有链接，检查URL协议和主机以确保它们是外部链接，然后添加到外部引用列表中。 生成列表时，我使用A标记的title属性使列表更好。

/**
 * Script flow controller
 *
 * @param {string} start_id      The ID of the element that contains the content. 
 *                                  Default is the BODY element
 * @param {string} output_id     ID of the element that will contain 
 *                                  the result TOC
 * @param {string} output_ref_id ID of the element that will contain the result 
 *                                  list of external links
 * @param {int}    heading_level From which heading level to start (1 to 6), 
 *                                  not yet implemented
 */
parse: function (start_id, output_id, output_ref_id, heading_level)
{
    // initialize the environment pass all parameters
    this.init(start_id, output_id, output_ref_id, heading_level);
     // if the content is found, run through it to extract the headings
    if (this.the_element) {
        this.traverse();
    }
    // run through the extracted headings and generate TOC
    this.generateTOC();
     // add the TOC to the element specified
    if (this.toc_div) {
        this.toc_div.appendChild(this.stack[0].list);
    }

    // run through all the links and list them
    if (this.ref_div) {
        this.appendReferences();
    }
}

For the rest of the high-quality (*cough-cough*) JavaScript, check the source.

对于其他高质量(*咳嗽*)JavaScript，请检查source 。

杂项 (Misc)

At some point I figured out that quirksmore.org also has an auto-generated TOC script. He grabs only the h2-h4 tags. His TOC is links with different styles, and not a semantic HTML list. Here's his post about how he coded the script. He also has a show/hide TOC which is a very slick idea.

在某种程度上，我发现quirksmore.org也有一个自动生成的TOC脚本。 他仅抓取h2-h4标签。 他的目录是具有不同样式的链接，而不是语义HTML列表。 这是他有关如何编写脚本的文章。 他还具有“显示/隐藏目录”，这是一个非常明智的想法。

I also did my TOC and references lists to show/hide and left the references hidden by default.

我也做了我的目录和引用列表来显示/隐藏，默认情况下隐藏引用。

After I did the script (of course!) I decided to google other similar scripts. It turned out, quite a few exist. But I didn't see any one that uses UL or OL for the actual TOC. They all use DIVs and As with a different style to do the indentation. My script uses a semantically-correct list tags UL|OL (can be changed on the fly by calling suddenly_structured.list_type = 'ul' for example) and LIs. But that I guess because until recently no one was really losing any sleep over semantic markup. The web was young ... 😉

完成脚本(当然！)之后，我决定用Google搜索其他类似的脚本。 原来，有很多存在。 但是我没有看到任何将UL或OL用于实际TOC的人。 他们都使用DIV和As使用不同的样式进行缩进。 我的脚本使用了语义正确的列表标签UL | OL(例如，可以通过调用suddenly_structured.list_type = 'ul'进行动态更改)和LI。 但是我想这是因为直到最近，还没有人真正因为语义标记而失去任何睡眠。 网络还很年轻...😉

谢谢阅读！ (Thanks for reading!)

That's it. Enjoy the script! Of course, any feedback is welcome.

而已。 欣赏脚本！ 当然，欢迎任何反馈。

I personally would like to integrate the script into this blog. I like using heading tags and this way my articles will become ... suddenly structured, TOC-ed and beautiful 😉

我个人想将脚本集成到此博客中。 我喜欢使用标题标签，这样我的文章就会变得...突然结构化，目录化且美观😉

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/suddenly-structured-articles/

idea项目结构突然没有了