Алати са ниским кодом попут ВордПресс-а поједностављују процес креирања блога. Можете користити унапред направљену тему и почети писати постове на блогу за неколико сати. Ако желите више контроле над својим кодом и имате мало времена на располагању, боље је да направите свој блог од нуле. Можете чак користити оквир као што је Нект.јс да бисте поједноставили процес.
Научите како да направите једноставан Нект.јс блог који приказује постове за смањење вредности.
Креирање Нект.јс пројекта
Нект.јс је Реацт оквир који поједностављује начин на који правите апликације. Пружа много алата и конфигурација без употребе, омогућавајући вам да почнете да пишете код одмах након што га инсталирате.
Најједноставнији начин да почнете са Нект.јс је покретање команде цреате-нект-апп у терминалу:
нпк Креирај-следећи-апп маркдовн-блог
Ова команда креира Нект.јс пројекат који садржи све датотеке потребне за покретање.
Прво, прво очистите индек.јс фајл да изгледа овако:
увоз Глава из 'следећи/глава'
увоз стилова из '../стилес/Хоме.модуле.цсс'
извозУобичајенофункцијаКућа() {
повратак (
<див цлассНаме={стилес.цонтаинер}>
<Глава>
<наслов>Креирајте следећу апликацију</title>
<мета наме="Опис" цонтент="Генерисано креирањем следеће апликације" />
<линк рел="икона" хреф="/favicon.ico" />
</Head>
</div>
)
}
Креирајте Маркдовн блог постове
Блог ће се приказати мардовн филес ускладиштено локално у фасцикли пројекта. Дакле, креирајте нову фасциклу у корену под називом садржаја за чување датотека. У овој фасцикли направите нову датотеку под називом цреате-ацтиве-линк-нектјс.мд и додајте следеће:
наслов: Како да Креирај ан ацтиве линкин Нектјс
опис: Прилагођавање активних веза помоћу усеРоутер()
је објављено: истина
објављено: 22.07.2022
ознаке:
- следећи
## Главни садржај
Име датотеке са маркдовном биће део УРЛ-а поста, па се уверите да је добар. Такође, обратите пажњу на садржај између цртица. Ово су метаподаци поста и називају се предња ствар.
Парсинг Маркдовн фајлова
За сваки пост на блогу, морате рашчланити садржај умањивања и главну ствар. За Маркдовн користите реацт-маркдовн а за податке о предњој материји користите сиву материју.
Реацт-маркдовн је Реацт компонента изграђена на ремарк-у која безбедно претвара маркдовн у ХТМЛ. Библиотека сиве материје анализира предњу материју и претвара ИАМЛ у објекат.
Извршите следећу команду у терминалу да бисте инсталирали реацт-маркдовн и сиву материју.
нпм инсталирај реаговати на смањење сиве материје
У новој фасцикли која се зове утилс, направите нову датотеку под називом мд.јс. Направићете помоћне функције које враћају садржај блога у овој датотеци.
Преузмите све објављене постове
У мд.јс додајте следећи код да бисте вратили све постове у фасцикли са садржајем.
увоз фс из "фс";
увоз пут из "пут";
увоз материја из "сива маса";извозконст гетПатх = (фасцикла: стринг) => {
повратак патх.јоин (процесс.цвд(), `/${фолдер}`); // Добити пуну путању
}извозконст гетФилеЦонтент = (име датотеке: стринг, фолдер:стринг) => {
конст ПОСТС_ПАТХ = гетПатх (фасцикла)
ретурн фс.реадФилеСинц (пута.јоин (ПОСТС_ПАТХ, име датотеке), "утф8");
};извозконст гетАллПостс = (фасцикла: стринг) => {
конст ПОСТС_ПАТХ = гетПатх (фасцикла)
повратак фс
.реаддирСинц (ПОСТС_ПАТХ) // добијање датотека у директоријуму
.филтер((путања) => /\\.md?$/.тест (путања)) // само .мд датотеке
.мап((филеНаме) => { // мапирати преко сваке датотеке
конст извор = гетФилеЦонтент (име датотеке, фасцикла); // преузимамо садржај датотеке
конст слуг = филеНаме.реплаце(/\\.md?$/, ""); // добијамо пуж из имена датотеке
конст { подаци } = материја (извор); // екстракт фронтматтер
повратак {
предња тема: подаци,
пуж: пуж,
};
});
};
У функцији гетАллПостс():
- Добијте пуну путању до фасцикле са садржајем помоћу модула путање.
- Преузмите датотеке у фасцикли са садржајем помоћу методе фс.реаддирСинц().
- Филтрирајте датотеке да бисте укључили само датотеке са екстензијом .мд.
- Преузми садржај сваке датотеке, укључујући предњи део користећи метод мапе.
- Врати низ који садржи предњу материју и ознаку (име датотеке без екстензије .мд) сваке датотеке.
Да бисте добили само објављене постове, можете филтрирати све постове и вратити само оне чији је кључ исПублисхед у главној ствари постављен на труе.
извозконст гетАллПублисхед = (фасцикла: стринг) => {
конст постови = гетАллПостс (фасцикла)конст објављено = постс.филтер((пост) => {
повратак пост.фронтматтер.исПублисхед истина
})
повратак објављено
}
У мд.јс додајте функцију гетСинглеПост() да бисте преузели садржај једне објаве.
извозконст гетСинглеПост = (пут: стринг, фолдер:стринг) => {
конст извор = гетФилеЦонтент(`${слуг}.мд`, фолдер);
конст { података: фронтматтер, цонтент } = материја (извор);
повратак {
фронтматер,
садржај,
};
};
Ова функција позива функцију гетФилеЦонтент() да би добила садржај сваке датотеке. Затим, користећи пакет сиве материје, функција преузима предњу материју и садржај умањења вредности.
Прикажи све постове на блогу
Нект.јс пружа различите опције приказивања, а једна од њих је статично генерисање. Статичко генерисање је врста претходног приказивања где Нект.јс генерише све ХТМЛ странице током времена израде. Користите га за креирање брзих статичких страница.
Погледајте званична Нектјс документација за више информација о рендеровању.
Нект.јс ће унапред приказати страницу у време израде користећи пропс које враћа функција гетСтатицПропс. У овом случају, реквизити ће бити низ објављених постова.
извозконст гетСтатицПропс = асинц () => {
цонст постови = гетАллПублисхед("постова");
повратак {
реквизити: { постова },
};
};
Измените датотеку индек.јс да бисте приказали листу постова на блогу.
увоз Глава из "следећи/глава";
увоз Линк из "следеће/линк";
увоз { гетАллПублисхед } из "../утилс/мд";функцијаКућа({ постова }) {
повратак (
<див цлассНаме={стилес.цонтаинер}>
<Глава>
<наслов>Креирајте следећу апликацију</title>
<мета наме="Опис" цонтент="Генерисано креирањем следеће апликације" />
<линк рел="икона" хреф="/favicon.ico" />
</Head>
<див>
{постс.мап((пост) => (
<кључ чланка={пост.слуг}>
<стр>[ {пост.фронтматтер.тагс.јоин(", ")} ]</п>
`постови/${пост.слуг}`}>
<а>{пост.фронтматтер.титле}</а>
</Link>{""}
<стр>{пост.фронтматтер.десцриптион}</п>
</article>
))}
</div>
</div>
);
}извозконст гетСтатицПропс = асинц () => {
цонст постови = гетАллПублисхед("садржаја");повратак {
реквизити: { постова },
};
};
извозУобичајено Кућа;
Компонента Хоме користи постове које враћа гетСтатицПропс. Прелази преко њих користећи функцију мапе и за сваки пост приказује наслов, везу до целог поста и опис.
Прикажи пост на блогу
Као што је поменуто, називи датотека постова ће се користити као УРЛ путање. Ове путање су такође динамичке, тако да морате да их генеришете током времена изградње. Нект.јс вам омогућава да то урадите помоћу функције гетСтатицПатхс().
На пример, у овом коду, путање су генерисане из имена мардовн фајлова.
извозконст гетСтатицПатхс = асинц () => {
цонст патхс = гетАллПублисхед("постова").мап(({ пуж }) => ({ парамс: { пуж } }));
повратак {
стазе,
повући се: лажно,
};
};
Имајте на уму да користите податке о постовама које је вратила помоћна функција гетАллПублисхед() коју сте раније креирали.
Такође постављате резервни на фалсе, што враћа а 404 грешка за путеве који не постоје.
гетСтатицПатхс() се обично користи са гетСтатицПропс() који преузима садржај сваког поста на основу параметара.
извозконст гетСтатицПропс = асинц ({ парамс }) => {
конст пост = чекати гетСинглеПост (парамс.слуг, "постс");
повратак {
реквизити: { ...пост },
};
};
Да бисте приказали маркдовн у ХТМЛ, користите реацт-маркдовн.
увоз РеацтМаркдовн из 'реацт-маркдовн'
увоз { гетАллПостс, гетСинглеПост } из "../../утилс/мд";
конст Пост = ({ цонтент, фронтматтер }) => {
повратак (
<див>
<стр>{фронтматтер.тагс.јоин(', ')}</п>
<х2>{фронтматтер.титле}</h2>
<спан>{фронтматтер.публисхедДате}</span>
<РеацтМаркдовн>{цонтент}</ReactMarkdown>
</div>
);
};
Ова компонента ће приказати садржај сваког поста на блогу и његову одговарајућу УРЛ адресу.
Ако креирате блог за програмере, можете додати истицање синтаксе способност за сваку компоненту.
Стилизирање Нект.јс Маркдовн блога
До сада сте направили Нект.јс маркдовн блог који приказује листу постова на блогу и приказује садржај тог поста. Да би блог изгледао лепше, требало би да додате ЦСС стилове.
Нект.јс има добру ЦСС подршку и можете изабрати да користите ЦСС-ин-ЈС библиотеке попут стилизованих компоненти. Ако више волите да одвојите ЦСС од ЈС-а, можете користити ЦСС модуле.