Pagebreak support?

[siewho]

I would like to know, does 11ty support pagebreak like Wordpress? If yes can give some hint on how to make it works? Thanks.

src/posts/itemA.md

dist/itemA/index.html dist/itemA/2/index.html dist/itemA/3/index.html

itemA.md

### Item A main page

content itemA

<!-- pagebreak -->

### Item A page 2

content itemA page 2

<!-- pagebreak -->

### Item A page 3

content itemA page 3

dist/itemA/index.html

### Item A main page
content itemA

dist/itemA/2/index.html

## Item A page 2
content itemA page 2

dist/itemA/3/index.html

## Item A page 3
content itemA page 3

[pdehaan]

Wow, that's pretty clever. I didn't know WordPress had that. I'm pretty sure 11ty doesn't natively support that, and I can't find any obvious articles via Google.

But my gut tells me that there might be a way to do that with pagination, but I'm not immediately sure how you'd set that up, unless you wrote the raw markdown in a global data file, split on the <!-- pagebreak --> marker, and exported an array of "pages" which you could use with pagination (and then possibly have to parse with a custom markdown filter or shortcode). The docs also have a very useful section on the permalink structure you mentioned https://www.11ty.dev/docs/pagination/#remapping-with-permalinks; where the final output is:

• /itemA/index.html
• /itemA/2/index.html
• /itemA/3/index.html

As for the navigation links, the pagination navigation docs should have a few examples.

[pdehaan]

Rough proof of concept at https://github.com/pdehaan/11ty-pagebreak/.

The most interesting (and frustrating) part is probably https://github.com/pdehaan/11ty-pagebreak/blob/master/src/_data/about.js. Takes a hardcoded markdown string with custom <!--pagebreak--> markers, and converts it into an array of pseudo-pages. Then, on https://github.com/pdehaan/11ty-pagebreak/blob/master/src/pages/about.md we can paginate over that global data object and write out custom permalinks.

I can't think of a way to not hardcode the markdown in a separate file yet, since I need to split the string on the custom markers. Unless... we try putting that markdown content in the /src/_includes/ directory like a partial, and then the /src/_data/about.js file loads the markdown file from the _includes directory using fs.readFileSync(). Plus, that way we wouldn't need to de-indent that markdown text block.

I included the generated /www/ output directory if you want to see the final results without needing to git clone and run locally: https://github.com/pdehaan/11ty-pagebreak/tree/master/www/about

[siewho]

Thanks for your quick response and appreciate it. I tried Google before the most similar is this https://github.com/jdsteinbach/eleventy-plugin-toc/.

I have checked https://github.com/pdehaan/11ty-pagebreak/ it seems need to insert a lot of files if I have many posts.

[zachleat]

Gonna put this one on the enhancement queue, seems very cool!

By default this repo closes enhancement request issues and places them in a queue for folks to upvote. We do this to avoid a large build-up of open issues. We got this idea from the lodash project.

Don’t forget to upvote the first comment with 👍 to register your vote! You can view the current enhancement backlog.