Tina CMS: Brza integracija i laka upotreba
U 2024. godini, ako razmišljate o kreiranju bloga, postoji nekoliko radnih okvira (frameworks) i alata koji vam to omogućavaju, a moji omiljeni su Astro i Next.js. U oba slučaja, dostupni su različiti besplatni šabloni koje možete iskoristiti da uštedite vreme. Za lako kreiranje i komponentizaciju, veoma je uobičajeno razvijati čitav sadržaj bloga koristeći .md ili .mdx datoteke.
Kada završite gore navedene korake, možda ćete se zapitati da li biste mogli lako i efikasno da integrišete CMS. U tom slučaju, predlažem da koristite Tinu.
Šta je TinaCMS?
TinaCMS je sistem za upravljanje sadržajem (CMS) otvorenog koda koji se neprimetno integriše u vaš Markdown radni tok.
Frontend CMS-a
- TinaCMS pruža intuitivan CMS interfejs za vaše urednike. Za sajtove koji koriste React, TinaCMS podržava "vizuelno uređivanje" (Visual Editing) kako bi se urednicima omogućilo da vide promene u realnom vremenu.
U najvećoj meri, TinaCMS je agnostičan u odnosu na radni okvir (framework-agnostic). Osim ako ne koristite "vizuelno uređivanje", podešavanje je uglavnom isto bez obzira na to koji framework sajt koristi.
Takođe imamo vodiče prilagođene nekim popularnim radnim okvirima:
Da biste inicijalizovali TinaCMS, pokrenite sledeću komandu:
npx @tinacms/cli@latest init
Ovo će vam postaviti nekoliko pitanja za podešavanje. Kada vas pita za "direktorijum javnih sredstava" (public assets directory), pogledajte našu listu radnih okvira za pomoć.
Ažuriranje vaših build skripti
Zavisno od vašeg frameworka, tina init može pokušati da ažurira vaše skripte u package.json datoteci:
"scripts": {
"dev": "tinacms dev -c \"next dev\"",
"build": "tinacms build && next build",
"start": "tinacms build && next start"
}
Zamenite <your-dev-process> komandom za razvoj vašeg sajta.
Dok je TinaCMS pokrenut, idite na http://localhost:3000/admin/index.html.
Modelovanje sadržaja pomoću TinaCMS-a
Tina šema (schema) definiše oblik vašeg sadržaja. Tina koristi pristup "modelovanje sadržaja kao kod", što nudi nekoliko prednosti u poređenju sa modelovanjem kroz korisnički interfejs:
- Šema je pod kontrolom verzija.
- Menjanje šeme je lako, jer promene možete testirati lokalno ili u posebnoj grani.
- LProgrameri mogu proširiti šemu na zanimljive načine (prilagođena validacija, prilagođena polja korisničkog interfejsa, itd.).
Model sadržaja i sav konfiguracioni kod definisani su u datoteci pod nazivom tina/config.ts,js,tsx:
// tina/config.{ts,js,tsx}
import {defineConfig} from "tinacms";
export default defineConfig({
// ...
schema: {
collections: [
{
label: "Blog Posts",
name: "post",
path: "content/posts",
fields: [
{
type: "string",
label: "Title",
name: "title",
},
{
type: "string",
label: "Post Body",
name: "body",
isBody: true,
},
],
},
],
},
});
Definisanje "kolekcija" (Collections)
Svaka stavka u vašem nizu kolekcija predstavlja sopstveni entitet. U gornjem primeru, definisali smo kolekciju post i postavili njenu putanju kao content/posts, što se mapira na direktorijum u repozitorijumu našeg sajta. Svaka kolekcija sadrži niz polja, svako sa definisanim tipom.
