Подршка за чланке

05.05.2020

Данас сам довршио додавање почетног система за приказивање чланака у Markdown-у. За разлику од тога како сам (за сада) реализовао приказивање чланака овог блога, у страницама из одељка „Текстови“ нисам користио frontmatter-markdown-loader. Разлог за ово је што је тај пакет за Nuxt прилагођен ситуацији у којој се серверски део апликације заиста извршава на Node.js серверу и само шаље донекле или делимично обрађен садржај клијентском делу. Уколико хостујемо сајт на статичком серверу, каква је већина (јефтиних) хостинг понуда код домаћих провајдера, користићемо SSG, тј. статички генерисан сајт. Ово не оставља места за додавање и уређивање чланака „у лету“, преко интерфејса саме апликације, па сам одлучио да директно искористим markdown-it.

Пре свега, направио сам фајл markdown-it.js са следећим садржајем:

import markdownIt from 'markdown-it';
import markdownItAbbr from 'markdown-it-abbr';
//...

var md = new markdownIt({html: true})
    .use(markdownItAbbr)
    //...
    ;

//...

export { md };

а затим и фајл plugins/markdown-it.js:

import { md } from '../markdown-it';

export default({ app }, inject) =>
{
    inject('mdRender', markdown => md.render(markdown));
};

Тиме се функција render() убацује у Nuxt-ов context и Vue инстанцу, па може да јој се приступи преко context.app.$mdRender() или this.$mdRender(). Сада једноставно могу да у оквиру компоненте странице напишем:

<template lang="pug">
    static-markdown(:markdown="markdown")
</template>

<script>
import StaticMarkdown from '~/components/StaticMarkdown';
export default {
    name: 'Koord',
    components: { StaticMarkdown },
    data()
    {
        return {
            markdown: '',
        };
    },
    async asyncData({ store, app })
    {
        let linkId = 'koord';
        await store.dispatch('articles/loadArticle', { linkId },
                             { root: true });
        let article = store.getters['articles/article'];
        return {
            markdown: article && article.markdown
                ? app.$mdRender(article.markdown)
                : ''
        };
    }
};
</script>

и Markdown ће бити преведен у HTML, у време генерисања страница, што омогућава видљивост претраживачима. Истовремено, постоји могућност накнадне хидрације подацима из базе. Планирам да овакву комбинацију евентуално применим и на чланке овог блога.


Generated by slweb © 2020-2024 Strahinya Radich.