@nuxt/content – triki, które przyspieszają pracę
Poznaj mniej oczywiste możliwości @nuxt/content: filtrowanie, paginację i renderowanie niestandardowych komponentów.
Filtrowanie treści
Dzięki operatorom takim jak $contains czy $regex możemy tworzyć dynamiczne widoki tagów lub wyszukiwarkę w kilku linijkach kodu.
Paginacja
queryContent nie posiada wbudowanej paginacji, ale wystarczy pobrać całą listę, policzyć elementy i posłużyć się zwykłym slice. Przy niewielkiej liczbie wpisów to rozwiązanie najprostsze i najbezpieczniejsze.
Niestandardowe komponenty Markdown
Możemy podmienić renderowanie obrazków, by wymusić loading="lazy" lub dodać obsługę ContentSlot.
<ContentRenderer :value="doc" :components="{ img: LazyImage }" />
Bonus: automatyczna mapa treści
Wystarczy przejść po drzewie body i zebrać nagłówki. Pozwoli to przygotować widget Table of Contents, który poprawi doświadczenie użytkownika.