Как распечатать все содержимое Hugo на одной странице, похожее на книгу Rust print.html

Question

Кнопка печати есть в книге Rust. После ее нажатия создается одна страница из всего содержимого и отображаются параметры печати.

https://doc.rust-lang.org/book/print.html

Для шаблона Hugo я хочу создать печатную страницу, похожую на книгу Rust, и я проверил пользовательский формат вывода , но не нашел решения для решения этой проблемы.

Answer 1

Вот код, который я использую для перечисления всего содержимого веб-сайта. Он может не делать именно то, что вы хотите, но я думаю, что, немного подправив его, вы должны получить то, что вам нужно.

Этот код перебирает разделы сайта. Он отображает каждую страницу раздела с ее заголовком и содержимым. Затем прокрутите дочерние страницы раздела и отобразите каждую из них.

      {{ range .Site.Home.Sections }}
    <h1>{{ .Title }}</h1>
    <hr />
    {{ range .Pages }}
    {{ .Content }}
    <hr />
    {{ end }}
    {{ range .Sections }}
        <h1>{{ .Title }}</h1>
        <hr />
        {{ range .Pages }}
            {{ .Content }}
            <hr />
        {{ end }}
    {{ end }}
{{ end }}

Примечания:

1. Проблема, с которой я столкнулся, заключается в том, что страницы могут быть не в том логическом порядке, в котором вы хотели бы их видеть. Вы можете добавить условия сортировки/фильтрации в каждый из разделов.

2. Код не идеален, так как использует несколько разметки H1. Это связано с тем, что в Hugo большую часть времени заголовок страницы отображается с H1, а .Content содержит H2/H3/H4.

Я сделал это, чтобы иметь возможность распечатать весь свой сайт на бумаге и просмотреть его содержимое. Я не буду использовать это на странице, которую вы собираетесь ранжировать, так как несколько H1 могут озадачить поисковые системы, а также создать дублированный контент.

Answer 2

Решением «грубой силы» было бы создание шаблона.

1. Содержание

В вашейprint.htmlшаблон, вы будете перебирать весь свой контент в любом порядке, который вам нужен, чтобы все это было на одной странице.

2. Стиль

Вы, вероятно, хотите какой-то индивидуальный стиль, поэтому вы можете добавить<link href="..." media="print" rel="stylesheet" />, или несколько@media printв вашей таблице стилей.

3. Print-диалог

Как только содержимое загружено на страницу, вы можетеwindow.print(), и это вызовет диалоговое окно печати браузера.

Источники

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media
2. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
3. https://developer.mozilla.org/en-US/docs/Web/API/Window/print