Nuxtpress

24.06.2020

Не много после мог претходног писања, Nuxt.js-ов тим је објавио

1. 13, која доноси неколико нових додатака за Nuxt.js, међу којима су и @nuxt/components и @nuxt/content. Овај други додатак је званично решење за рад са чланцима у формату Markdown у Nuxt.js-у. Од тада сам у слободно време углавном радио на пребацивању свих делова мог сајта који имају везе са Markdown-ом на @nuxt/content. Осим овога, проучавао сам и начин на који се Nuxt апликација може писати у Typescript-у, што је једна од идеја за неки будући update. Вратимо се сад @nuxt/content-у.

Предности

Осим очигледне предности постојања готовог API-ја за читање чланака у формату Markdown, @nuxt/content нуди и напредно филтрирање и full-text претрагу преко интерфејса сличног MongoDB-у. Сада је довољно ставити .md фајлове у /content и може се написати, рецимо:

async asyncData({ $content })
{
    const latestArticles = await $content('/')
        .where({ type: { $eq: 'article' } })
        .sortBy('date', 'desc')
        .limit(5)
        .fetch();
    return {
        latestArticles,
    };
}

да би се учитало најсвежијих пет чланака сортираних по опадајућем редоследу. Претрага се такође обавља директно:

async asyncData({ $content, route })
{
    const foundArticles = await $content('/')
        .search(route.params.q)
        .fetch();
    return {
        foundArticles,
    };
}

Миграција

Главна разлика у односу на frontmatter-markdown-loader је што се у @nuxt/content-у уместо markdown-it-а за превођење Markdown-а у HTML користи remark. То значи да је за све plugin-ове markdown-it-а потребно користити еквиваленте, наравно уколико они постоје. На пример, за сада не постоји еквивалент plugin-а markdown-it-figure-caption.

Пошто је замисао @nuxt/content-а систем за управљање чланцима у виду фајлова, а не слогова у бази података, за сада не постоји уграђена подршка за складиштење чланака у бази уместо у фајл систему, па је потребно директно позивати remark. Наравно, могуће је напоредо са њим користити и markdown-it, али мислим да је то непотребно дуплирање зависности (dependencies) и није идеално. За сада још увек користим оба решења заједно, док не довршим подршку за приказивање текстова у одељку „Текстови“ уз помоћ remark-а.